테마 Pics Press

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

언더스코어 (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 포스트를 생성하고, 메뉴를 구성합니다.