WordPress の子テーマ作成

WordPress の子テーマ作成

WordPress Codex 日本語版の 子テーマ のページで WordPress の子テーマを作成する手順について紹介されていたので、それを参考にして作成してみました。

なぜ子テーマが必要なのか?

子テーマを作る目的は色々とあると思いますが、私の場合は以下の理由からです。

  1. WordPress のテーマは、そのテーマごとに様々な設定を行っており、テーマを変更するとフォントが変更になったり、配色が極端に変化する場合がある。
  2. そのテーマのスタイルシート (style.css) の設定を変更することでフォントや配色を変更することができるが、バージョンアップで変更を加えたスタイルシートを上書きされる可能性がある。
  3. 子テーマを作成して style.css に設定を追加しても、親テーマのバージョンアップ時に子テーマの style.css を上書きされることはない。

その他に、functions.php という

  • PHP と WordPress 組み込みの両方の関数を呼び出したり、独自の関数を定義したりできる機能

があります。これらの機能を利用すると、親テーマの基本的なスタイルを維持し、一部の HTML 要素に対して自分で作成した CSS のスタイルを適用したり、functions.php にコードを追加することで、最終的に HTML で表示される項目を追加することが可能になります。

子テーマの構成ファイル

子テーマは、少なくとも 1つのディレクトリ(子テーマディレクトリ)と、2つのファイル(style.cssfunctions.php)から構成され、以下を作成する必要があそうです。

また、子テーマでは必須ではありませんが、子テーマのスクリーンショット(screenshot.png)も作成しておくと、分かりやすくて良いのではないかと思います。WordPress Codex 日本語版の テーマの作成 のページに倣ってスクリーンショットと表現していますが、これは「親テーマとの関連性がわかる図」であれば良いと思います。

  1. 子テーマのディレクトリの作成
  2. スタイルシート (style.css) を作成し、子テーマのディレクトリに置く
  3. PHP および WordPress の関数を利用してテーマを拡張する (functions.php) を作成し、子テーマのディレクトリに置く
  4. スクリーンショット (screenshot.png) を作成し、子テーマのディレクトリに置く

子テーマのディレクトリ作成

今回作成する子テーマの親テーマは Twenty Sixteen ですので、ディレクトリの名前は twentysixteen-child にし、まずローカルのコンピューターに作成しました。このディレクトリは、最終的に WordPress がインストールされているディレクトリの下に作成します。したがって、最終的なディレクトリの階層は以下のようになります。

WordPress のディレクトリ
    |
    +--wp-content
          |
          +themes
             |
             +twentysixteen-child
                 |- style.css
                 |- functions.php
                 |- screenshot.png

子テーマのスタイルシート (style.css) の作成

次に、子テーマのスタイルシート (style.css) を作成します。今回の例では親テーマを Twenty Sixteen 例にしていますので、違う親テーマで設定する場合は、適宜読み替えてください。なお、このファイルを保存する際は、文字コードは UTF-8、改行コードは LF にして保存する必要がありますので、Windows で作成する際は注意が必要です。

子テーマ のページによると、スタイルシート (style.css) は次の スタイルシートヘッダ で始める必要がるそうです。

/*
 Theme Name:   Twenty Sixteen Child
 Theme URI:    http://example.com/twentysixteen-child/
 Description:  Twenty Sixteen Child Theme
 Author:       syamanaka
 Author URI:   http://example.com
 Template:     twentysixteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentysixteen-child
*/

この内容には CSS の設定がありませんが、あとは実際のページの表示状態や親テーマの style.css と比較しながら追記することになりますので、最初に作る子テーマの style.css は、この内容でも大丈夫です。ここに追加した CSS の設定は、親テーマの後に読み込まれますので、スタイルの優先度が上がります。

注意点
スタイルシートヘッダ の文字列は、テンプレートに関する詳細な情報で置き換える必要がある。
Template 行は、親テーマのディレクトリ名を指定する。
子テーマに必要なファイルは style.css のみだが、スタイルを正しくキューに入れるには、以下の様な functions.php が必要。

functions.php の作成

以前は @import: を使用して親テーマのスタイルシートをインポートしていましたが、WordPress においては良い方法ではないそうです。親テーマのスタイルシートをキューに入れるための正しい方法は、子テーマの functions.phpwp_enqueue_script() を使用する方法で、functions.php を作成する必要があります。

子テーマの functions.php の最初の行は、PHP の開始タグ (<?php) を書き、最後の行に ?> は入れません。続けて、親テーマと子テーマのスタイルシートをキューに入れる手続きを行います。なお、このファイルを保存する際は、文字コードは UTF-8、改行コードは LF にして保存する必要がありますので、Windows で作成する際は注意が必要です。

以下の例は、親テーマが 1つの style.css ファイルを使用してすべての CSS を保持している場合にのみの設定です。依存関係に 'parent-style' を設定すると、子テーマのスタイルシートは親テーマのあとで読み込まれます。親テーマの後に子テーマの設定内容が読み込まれますので、スタイルシートのカスケードの原則に従えば、最終的に子テーマの設定が優先されることになります。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 
}

子テーマ用スクリーンショットの作成

子テーマのスクリーンショットを作り、子テーマのディレクトリに保存します。PNG 形式で、ファイル名は screenshot.png と付け、画像の推奨サイズは 880×660 だそうです。この図は、ダッシュボードの 外観 >> テーマ で表示される「親テーマとの関連がわかるような図」ですので、内容や見栄えにこだわる必要はないと思います。

子テーマ用ファイルのアップロード

今回の例では twentysixteen-child というディレクトリの下に style.css, functions.php, screenshot.png の 3 つのファイルがあります。このディレクトリと 3 つのファイルを最終的に以下のような構成になるように、サーバーにアップロードします。

WordPress のディレクトリ
    |
    +--wp-content
          |
          +themes
             |
             +twentysixteen-child
                 |- style.css
                 |- functions.php
                 |- screenshot.png

WordPress-Child-Theme-2016-0511_01

子テーマの設定

子テーマの有効化

まず最初に、以下のようにしてアップロードした子テーマを WordPress に反映させます。

    1. WordPress のダッシュボードにログインします。
    2. 外観 >> テーマ をクリックします。WordPress-Child-Theme-2016-0511_02
    3. 現在有効になっているテーマは Twenty Sixteen です。WordPress-Child-Theme-2016-0511_03
    4. 今回子テーマとしてアップロードしたのが Twenty Sixteen Child ですので、その画像の上にマウスのカーソルを移動させて ライブプレビュー をクリックします。WordPress-Child-Theme-2016-0511_04
    5. このように親テーマと同じように表示されれば子テーマとして機能していますので、画面左上の 保存して有効化 をクリックします。WordPress-Child-Theme-2016-0511_05
    6. その後、サイトが表示されます。以上で子テーマを有効化させる手続きは終了です。

 

style.css および functions.php の編集

まず最初に Web ブラウザで style.css および functions.php を編集する手順について紹介します。

    1. WordPress のダッシュボードに移動します。
    2. 外観 >> テーマの編集 をクリックします。WordPress-Child-Theme-2016-0511_06
    3. これがテーマの編集画面です。WordPress-Child-Theme-2016-0511_07
    4. 画面右の上部に この子テーマは親テーマ Twenty Sixteen のテンプレートを引き継ぎます。 と表示されています。ここを確認することで、選択中のテーマが子テーマであることと、親のテーマ名を確認することが出来ます。WordPress-Child-Theme-2016-0511_08
    5. 画面右には テーマのための関数 (functions.php)スタイルシート (style.css) が表示されていますが、テンプレートファイル (.php)、スタイルシート (.css) 等を追加した場合も、ここに表示されます。
    6. この画面はスタイルシート (style.css) ですが、スタイルシートに変更を加えたい場合は、*/ の次の行から設定の内容を追記します。WordPress-Child-Theme-2016-0511_07
    7. スタイルシートに設定を追記したり修正した場合は、画面最下部にある ファイルを更新 をクリックして変更の内容を保存します。
    8. functions.php に設定を追記したり修正する場合は、画面右にある テーマのための関数 をクリックします。WordPress-Child-Theme-2016-0511_09
    9. functions.php の内容が画面に表示されて関数を追加したり修正することが出来ます。
    10. 変更の内容を保存する場合は、画面最下部にある ファイルを更新 をクリックして保存します。WordPress-Child-Theme-2016-0511_10
    11. 関数名… をプルダウンすると現在画面に表示されている functions.php で定義している関数の一覧が表示され、関数を選択した後に 調べる をクリックすると、オンラインで関数のリファレンスを見ることが出来ます。WordPress-Child-Theme-2016-0511_11WordPress-Child-Theme-2016-0511_12
    12. PHP の関数であれば PHP のサイト、WordPress の関数であれば WordPress のサイトに移動して確認できるようになっています。関数のリファレンスページが翻訳されていれば、日本語で表示されることもあります。WordPress-Child-Theme-2016-0511_13

style.css および functions.php をローカルのパソコンで編集する場合は、編集したファイルを上記の 子テーマ用ファイルのアップロード と同じ方法でサーバーにアップロードするだけで、WordPress に反映されます。