WordPressのテーマをカスタマイズする方法

2014年01月10日インフラ

hironemu

ZEALOT社員ブログあらため、ZEALOTエンジニアブログ（略してZBLOG）となりました。それを期に（というわけでもないですが）ブログのデザインも変更してみました。

いままでのブログのテーマは、本文のテキストが小さく色も薄く、ちょっと読みにくい気がしていたので、新たに導入するテーマはシンプルで読みやすいものを探しました。そこで、見つけたのが「Sublime Press」というテーマです。

なかなか、シンプルで読みやすいんですが、ちょっとブログのタイトルが大きすぎるなーとか、一覧に出ているタイトルや本文が全部中央寄せになってて、ちょっと微妙だなーとかありましたので、少しだけスタイルを変えてしまいたいなと思った次第です。

ただ、テーマファイルを直接編集するとバージョンアップした時（したい時）に、変更した部分が上書きされる心配があるので直接テーマファイルを編集するのは避けたいなと思っていて、ちょっと調べてみました。

子テーマ(Child Themes)を作って元のテーマをカスタマイズする

やっぱりありました。

http://wpdocs.sourceforge.jp/Child_

Themes http://codex.wordpress.org/Child_Themes

テーマをカスタマイズする場合、元のテーマを直接編集せず、元のテーマを参照する形で新しいテーマディレクトリとstyle.cssを作成し、そこに拡張したい部分だけを記述していく事になるそうです。（まさに、extendsするイメージですね。これが欲しかった）作り方は、上記のURLに書いてあるのでここで書くまでも無いですが、Sublime Pressの子テーマを作るときにちょっとやり方が違うところもあったのでメモがてら説明したいと思います。

1. 子テーマ用のディレクトリを作成

名前は何でもいいですが、今回は「custom-sublime-press」というディレクトリを作成しました。

$ cd /your/wordpress/install/directory/wp-content/themes/
$ mkdir custom-sublime-press

2. 子テーマディレクトリの直下に「style.css」を作成

custom-sublime-press/style.cssファイルを作成し、以下のように記述します。

/*
Theme Name: Custom Sublime Press
Template: sublime-press
Auther: hironemu
Description: Sublime Pressを拡張したテーマ
Version: 0.0.1
*

Theme NameとTemplateは必須です。Templateは拡張するテーマのディレクトリ名をしてしてください（今回の場合sublime-press）。大文字小文字は区別するので間違えないように設定します。残りの項目は任意で入れます。ここまで設定すると、管理画面でテーマが認識されていると思います。管理画面から見てみましょう。[ テーマ一覧 ][4] 前述したURLには、style.cssに親のテーマのstyle.cssをimportする設定がありますが、Sublime Pressの場合、この設定をしなくても元のstyle.cssが読み込まれていましたが、逆に子テーマのstyle.cssが読み込まれていないようでした。

3. Sublime Pressの子テーマのCSSをカスタマイズする場合

まず、テーマをカスタマイズするためのスタイルシートを子テーマの中に作成します。場所はどこでもいいですが以下のようにcustom.cssを作成します。

$ cd 子テーマのディレクトリ
$ mkdir css $ touch css/custom.css

次に、このcustom.cssをタグ内に挿入するため、functions.phpを作成し以下のようにコードを追加します。

/*-----------------------------------------------------------------------------------*/
/* Enqueue CSS(カスタマイズするCSS)
/*-----------------------------------------------------------------------------------*/
add_action('wp_enqueue_scripts', 'custom_sublime_enqueue_css');
function custom_sublime_enqueue_css() {
        wp_enqueue_style('customize-style', get_stylesheet_directory_uri() . '/css/custom.css', array('style'));
}

wp_enqueue_styleでタグを挿入します。get_stylesheet_directory_uriはカレントのテーマ（この場合、子テーマであるcustom-sublime-press。）のディレクトリのアクセス可能なURLを返してくれます。最後の、array(‘style’)は依存するCSSを指定します。この指定がないと、親テーマのstyle.cssより前にcustom.cssが出力され、スタイルがうまく適用されません。

（ちなみに、親テーマのURIを見るときはget_stylesheet_directory_uriの代わりにget_template_directory_uriを使います。）

4. あとは適当にcustom.cssを変更していく

ということで、ここまで出来たら、あとは先ほど作ったcustom.cssにスタイルを追加していけば終了です。

一応参考程度に、今回作成したcustom.cssを載せておきます。

    #masterhead {
      padding: 0px 0px 0px 0px;
    }

    #logo a {
      font-size: 0 !important;
    }
    #logo img {
      margin-bottom: 0;
    }
    h1 {
      font-size: 250%;
    }

    .single-title,
    .single-title-home {
      text-align: left;
    }
    .post-meta {
      text-align: left;
    }

    .entry img {
      box-shadow: 0 0 8px #999;
    }

その他

functions.php以外は、親のテーマからファイルをコピーしてきてそのまま使えるようです（header.phpとか）逆にfunctions.phpは子テーマで必要になる部分だけを記述する必要があるようです。ということは、よく色々なサイトで見かける「この関数をfunctions.phpに追加すると〜という機能が使えて便利」というものは、今回のように子テーマを作ってそこに記述しておくと、テーマやWordPressがバージョンアップした時にも影響が小さく済みそうです。

また、子テーマのfunctions.phpは親のそれより先に読み込まれるらしいので以下のようにしておくと、親の関数を上書きしたり出来るようです。今回、この方法を調べてたのですが結局使わなかったのですが、今後のために残しておきます。

add_action( 'after_setup_theme', 'child_theme_setup' );
if ( !function_exists( 'child_theme_setup' ) ):
function child_theme_setup() {
        // ここで上書きしたい処理などを書く

        // 登録したアクションを削除して
        //remove_action('sublime_scripts_function', 'sublime_scripts_function');

        // 置き換えたいアクションを登録、などなど
        // add_action('sublime_scripts_function', 'custom_sublime_scripts_function');
}
endif;

ということで、ZEALOTエンジニアブログのリニューアルが完了しました。これでいつでもデザインを変更できるようになったので、地道に改善をしていこうかと思います。

それにしても、今回一番ハマったのが投稿の編集画面のビジュアルエディタにコードを貼り付けるという方法が分からなかったことです。今もわかりません。ソースコードハイライトのプラグインを新しくしようとwp-hilightjsとか試してみたのですが、コマンド＋vで貼り付けると勝手にPタグが入ったり、改行ができなかったりして、結局今まで使っていたCrayon Syntax Highlighterに戻す事になりました。（Crayonは機能豊富で大変いいです）WordPressはビジュアルエディタを本当に何とかしてほしいですね。

ちょっと調べてみると、markdown使えるみたいなので、次からそっちにしようかと思います。今までどうしてビジュアルエディタにこだわってたんでしょう。不思議です。