테마 Pics Press

시리즈고품격 고품질 워드프레스 무료 사진 저장소연재중2

새로운 웹사이트를 구성할 때 기존 테마를 수정, 편집하는 것보다 새로 만드는 것이 편리한 때가 많습니다. 그때도 처음부터 모든 템플릿 파일을 생성하는 것보다 워드프레스 기본 구조를 제공하는 베이스 테마를 선택하여 시작하는 것이 편리합니다. 이 장에서는 예제에서 사용할 테마에 관하여 간단하게 알아봅니다.

언더스코어 (Underscores)

예제에서는 언더스코어 베이스 테마를 생성하여 일부 기능과 파일 삭제 및 편집, 템플릿 파일 추가 등의 방법으로 예제를 시작하는 데 필요한 테마 ‘pics_press’를 구성했으며, 앞에서 이미 제공하였습니다. 물론 예제 구성 과정에서 필요한 파일은 추가하므로 제공한 파일이 완성 테마 파일은 아닙니다. 언더스코어 테마를 생성하는 방법은 해당 웹사이트(underscores.me) 접속 후 간단하게 처리할 수 있는데, 다음 그림을 보는 것으로 충분할 것입니다.

언더스코어 테마

언더스코어 테마는 사이트 레이아웃에 관한 스타일 정의는 없어서 즉시 사용하기에 약간의 부담이 있습니다. 따라서 레이아웃 관련, 댓글 목록과 폼 등 일부 주요 요소의 스타일을 추가하였습니다. 맘에 들지 않는다면 더 훌륭하게 수정하면 됩니다. 다음은 테마 ‘pics_press’ 구조를 나열한 것입니다.

themes/
└── pics_press
    ├── assets
    │   ├── css
    │   │   ├── add-style.css
    │   │   ├── admin-style.css
    │   │   ├── editor-style.css
    │   │   └── login-style.css
    │   ├── images
    │   │   ├── blank.gif
    │   │   └── loginlogo.png
    │   └── js
    │       ├── jquery.flex-images.min.js
    │       ├── jquery.lazyload.min.js
    │       ├── navigation.js
    │       └── pics.js
    ├── inc
    │   ├── default-functions.php
    │   ├── enqueue-script.php
    │   ├── template-functions.php
    │   └── template-tags.php
    ├── page-templates
    │   ├── _imgDownload.php
    │   ├── _note.php
    │   ├── album-page.php
    │   ├── front-page.php
    │   ├── posts-page.php
    │   ├── trace-page.php
    │   └── user-history.php
    ├── template-parts
    │   ├── common
    │   │   └── content-none.php
    │   ├── navigation
    │   │   └── navigation-top.php
    │   ├── page
    │   │   └── content-page.php
    │   ├── post
    │   │   └── content.php
    │   └── search
    │       └── content-search.php
    ├── 404.php
    ├── LICENSE
    ├── archive.php
    ├── comments.php
    ├── footer.php
    ├── functions.php
    ├── header.php
    ├── index.php
    ├── page.php
    ├── screenshot.jpg
    ├── search.php
    ├── sidebar.php
    ├── single.php
    └── style.css

functions.php

워드프레스 테마의 기능과 파일간 연결을 확인하려면 테마의 functions.php 파일을 먼저 열어보면 도움이 되는 때가 많습니다. 사용하는 에디터로 pics_press 테마의 functions.php 파일을 열어보세요.

워드프레스의 스타일 파일 등록

14, 32, 33, 43(44), 53번 줄을 모아 보면 다음과 같습니다.

// Tinymce Editor
add_editor_style( 'assets/css/editor-style.css' );
// 테마의 주 스타일
wp_enqueue_style( 'pics_press-style', get_stylesheet_uri(), array(), $pics_style_ver );
// 사용자 추가 스타일
wp_enqueue_style( 'pics_add-style', get_theme_file_uri( '/assets/css/add-style.css' ), array(), $add_css_ver );
// 관리페이지에서 사용할 사용자 추가 스타일
wp_register_style( 'add_wp_admin_css', get_theme_file_uri( '/assets/css/admin-style.css' ), false, '1.0.0' );
wp_enqueue_style( 'add_wp_admin_css' );
// 로그인 페이지 사용자 추가 스타일
wp_enqueue_style( 'pics_press_loginpage', get_theme_file_uri( '/assets/css/login-style.css' ), false );

테마의 주 스타일 파일을 제외한 4개의 스타일 파일을 별도로 만들어 워드프레스 방식으로 등록한 것인데, 로그아웃 후 로그인 페이지, 포스트 편집 페이지의 에디터 배경색을 보면 해당 스타일 파일이 적용된 것을 알 수 있습니다.

관리페이지 스타일은 특정 권한이 없을 때 적용되도록 정의하였는데, functions.php 파일 42번 줄을 다음처럼 잠시 변경한 후 관리페이지 알림판(Dashboard)을 확인하면 점선이 나오지 않는 것을 확인할 수 있습니다.

// functions.php 파일 42번 줄
if ( current_user_can( 'manage_options' ) ) {

추가한 모든 스타일 정의를 현재 예제처럼 파일을 만들어 적용하지 않고 워드프레스 훅을 사용하여 인라인 스타일Inline Styles 방식으로 추가할 수도 있습니다. 예를 들어, 알림판의 메타박스 점선을 보이지 않게 하려면 다음처럼 처리할 수 있습니다.

add_action( 'admin_head', 'my_custom_admin_head' );
function my_custom_admin_head() {
    echo '<style>.metabox-holder .postbox-container .empty-container {border: transparent;}</style>';
}

스타일 파일을 추가하는 것과 훅으로 추가할 때의 차이는 웹사이트를 구성하는 사용자의 판단에 따르면 되지만, 어떤 경우에는 어떤 방식이 더 편리한 때가 있으므로 스타일을 추가하는 복수의 방법만 숙지하면 도움이 될 것입니다.

사용자 추가 스타일 add-style.css 파일은 예제의 콘텐츠 표현 대부분의 스타일을 정의한 파일입니다. 이 파일은 완성하여 제공한 것이므로 예제 과정에서 수정하는 일은 없습니다. 따라서 특정 콘텐츠가 특정 스타일로 표현되는 것은 이 파일에서 이미 정의한 스타일에 의한 것임을 꼭 기억하세요. CSS 언어와 같이 워드프레스 범주를 벗어난 내용은 안내하지 않습니다.

주 스타일과 사용자 추가 스타일 파일은 다음처럼 버전 정보를 추가하도록 정의하였습니다.

$pics_style_ver = md5( filemtime( get_template_directory() . '/style.css' ) );
$add_css_ver = md5( filemtime( get_template_directory() . '/assets/css/add-style.css' ) );
wp_enqueue_style( 'pics_press-style', get_stylesheet_uri(), array(), $pics_style_ver );
wp_enqueue_style( 'pics_add-style', get_theme_file_uri( '/assets/css/add-style.css' ), array(), $add_css_ver );

스타일 파일(확장자 css)과 자바스크립트 파일(확장자 js)은 웹사이트 방문자의 로컬 시스템에 캐시Cache 하도록 설정한 때가 많은데, 운영자가 해당 파일을 수정 후 방문자가 수정한 파일이 적용된 웹사이트를 보려면 일부러 캐시를 지우지 않는 이상 적용되지 않는 때가 있으므로 파일 수정 일자를 버전 정보에 추가하면 이런 문제를 제어할 수 있습니다.

Dashicons

34번 줄을 보면 다음 코드가 있습니다.

// Dashicons
wp_enqueue_style( 'dashicons' );

워드프레스 관리페이지에서 사용하는 공식 아이콘 폰트를 Dashicons로 부릅니다. 위의 코드만 추가하면 사이트(프런트 엔드)에서도 사용할 수 있습니다.

위젯, 사이드바, 워드프레스 메뉴

대부분의 워드프레스 테마는 functions.php 파일에 위젯 영역과 사이드바, 메뉴 위치를 정의하는데, 예제에서는 사용하지 않으므로 정의되어 있지 않습니다. 따라서 관리페이지에 관련 메뉴가 나오지 않는 이유를 가늠하면 됩니다.

나머지 안내하지 않은 특정 정의는 해당 과정을 진행할 때 다시 확인하기로 합니다.

default-functions.php, enqueue-script.php

이번에는 테마 루트 inc/default-functions.php 파일을 열어봅니다. 이 파일에 정의한 것은 워드프레스 기본 기능 또는 설정을 변경하거나 제거하는 것으로 예제 구성과 관련이 없습니다. 그러나 워드프레스 웹사이트를 구성할 때 가능하다면 사용하지 않는 기능과 기본 설정의 변경 등은 따로 정리하면 유리한 때가 많기에 추가한 파일입니다.

알림판 기본 메타박스와 위젯은 사용하지 않으므로 제거하는 것이 좋은데, 위젯의 경우는 제거 코드와 상관이 없이 워드프레스를 설치할 때 데이터베이스 옵션 테이블에 각 위젯 필드가 생성됩니다. 지워도 새로 생성되는 때가 있으므로 가끔 지우기 위해 지난 과정에서 이미 추가한 ‘때때로 청소’ 플러그인에 다음의 코드를 추가하였습니다. 참고하는 정도로 여기면 됩니다.

$delete_widget_data_sql = "DELETE FROM $wpdb->options WHERE option_name LIKE 'widget_%' OR option_name = 'sidebars_widgets'";
$wpdb->query($delete_widget_data_sql);

테마 루트 inc/enqueue-script.php 파일에 다음의 코드가 있습니다. 일부만 가져온 것입니다.

$pics_js_ver = md5( filemtime( get_template_directory() . '/assets/js/pics.js' ) );
wp_enqueue_script( 'pics-js', get_theme_file_uri( '/assets/js/pics.js' ), array(), $pics_js_ver );

버전 정보를 추가하여 파일을 등록한 것이며, pics.js 파일은 예제에서 사용하는 모든 자바스크립트 코드를 추가할 파일입니다. 위의 코드는 비슷한 함수를 사용한 다음 코드와 같습니다.

$pics_js_ver = md5( filemtime( get_theme_file_path( '/assets/js/pics.js' ) ) );
wp_enqueue_script( 'pics-js', get_theme_file_uri( '/assets/js/pics.js' ), array(), $pics_js_ver );

보통의 경우처럼 functions.php 파일에 자바스크립트 파일을 등록하지 않고, enqueue-script.php 파일을 만들어 등록한 것은 예제에서 분리해서 보는 것이 더 편리하다는 것이 이유이므로 염두에 둘 필요는 없습니다.

테마 루트 page-templates 디렉터리의 페이지 템플릿 파일은 다음 장에서 사용할 것이므로 그때 확인하며, 나머지 파일들은 과정에서 사용할 때 알아보는 것으로 정리합니다.

다음 장에서 page 포스트를 생성하고, 메뉴를 구성합니다.

목차

0. 개요

1. 예제 구성 환경과 파일

2. XAMPP, 워드프레스, 테마, 플러그인 설치와 설정

» 테마 Pics Press

4. page 포스트 타입과 페이지 템플릿, 메뉴 구성

5. 워드프레스 핵심 용어 짚기

6. 워드프레스 포스트 타입 attachment

7. 워드프레스 이미지 사이즈

8. 워드프레스 이미지 사이즈 추가 및 변경

9. 워드프레스 이미지 파일 제어

10. 타입 attachment 템플릿과 image.php

11. 워드프레스 이미지 메타 데이터

12. GPS 데이터를 워드프레스 메타 데이터로 저장

13. 이미지 메타 데이터를 포스트 메타 데이터에 추가

14. Attachment 타입을 위한 워드프레스 커스텀 분류 등록

15. 이미지 메타 데이터를 워드프레스 분류와 필드 데이터에 저장

16. 이미지를 편집할 때 포스트 데이터와 메타 데이터 업데이트

17. 워드프레스 미디어 파일 업로드

18. 워드프레스 싱글 이미지 포스트 페이지

19. 워드프레스 아바타와 Author Archives

20. 워드프레스 이미지 사이즈별 데이터 출력

21. 워드프레스 폼 요소로 원하는 이미지 사이즈 다운로드

22. 워드프레스 텍스트 단락 및 줄 바꿈, wpautop

23. 워드프레스 사진의 EXIF 데이터 출력

24. 구글 지도에 표시하는 사진 촬영 위치

25. 워드프레스 attachment 포스트 타입의 아카이브

26. 워드프레스 함수로 자바스크립트 변수 데이터 생성

27. 워드프레스 커스텀 검색 – 쿼리 변수

28. 워드프레스 커스텀 검색 – 검색 폼과 쿼리 데이터

29. 워드프레스 커스텀 포스트 타입 ‘pic_album’

30. 커스텀 포스트 타입의 싱글 페이지

31. 워드프레스 WP_Query

32. 커스텀 쿼리, 페이지 템플릿, 포스트 아카이브

33. 분류 기준의 관련 포스트 커스텀 쿼리

34. wpdb 클래스로 구글 지도에 마커와 섬네일 표시

35. 워드프레스 분류 데이터 쿼리 클래스, WP_Term_Query

36. 워드프레스 템플릿 태그

37. 옵션 페이지, 옵션 필드

38. 사이트 프런트 페이지

39. 사이트 메뉴 및 포스트 페이지 링크

40. 워드프레스 Transient API

41. 분류의 term 데이터를 캐시 데이터로 생성

42. 워드프레스 역할 그룹과 권한으로 구성 요소 제어

43. 간단한 워드프레스 코멘트 폼 수정

44. 워드프레스 대시보드 위젯 추가

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.