絶対に分かる！WordPressの子テーマ作成
2014/02/03
タグ: テーマ, テンプレート, 初心者
WordPressでは子テーマという機能があります。
既存のテーマを作成すれば、カスタマイズする際に変更したい部分だけを子テーマで定義できます。
前提として、テーマをカスタマイズをしなければそのまま使えばよい、これはそのとおりです。
なぜ子テーマを使うのか?
テーマを直接変更した場合、そのテーマがアップデートされると変更が失われるかもしれません。
子テーマを使用すればテーマの変更は確実に保持されます。
子テーマを使用することで開発時間を短縮できます。
子テーマの使用することでWordPressのテーマの開発を良い形で学べます。
子テーマに存在するテンプレートファイルはそれを使用し、ない場合は親テーマから読み込むという動作をします。
つまり、カスタマイズする必要のあるテンプレートだけを子テーマ側に用意します。
親テーマにはまったく触れる必要がありません。
メンテナンス性が向上するだけではなく、テーマのアップデートの際にも上書きされて元のデザインに戻ることもありません。
デフォルトで採用され、デザインだけでなく、SEO的にもなかなか優秀なTwentyシリーズのカスタマイズや自作テーマはまだ敷居が高いという初心者の方にもピッタリのカスタマイズ方法でしょう。
テーマによっては単純に子テーマを作っても、引き継げない内容があったりというデメリット？があるようです。
それでも、利用者の多さから危険にさらされることの多いWordPressでは常に最新の情報に保つ必要があり、圧倒的にメリットの方が上回ります。
ここではプラグイン不要でも絶対に挫折しない子テーマの作り方と使い方の解説します。
子テーマの作成手順
子テーマの作成はけして難しくありません。
むしろ、普通のテーマを直接変更するよりもトラブルも少ないです。
しかし、テーマとして認識されなかったり、反映されない・cssが効かないなどでつまずいてしまうケースも多いようです。
子テーマは完全に作成した後、ZIP圧縮することでダッシュボードからインストールは行えます。
ただし、カスタマイズには基本的にサーバ内のwp-contens/themes内の子テーマディレクトリを操作する必要があります。
そういう意味でFTPやレンタルサーバで提供されるファイルマネージャーサービスなどサーバにファイルをアップロードできる環境はないと難しいです。
ダッシュボードにしかアクセスしたことがないという初心者の方はここは頑張ってみてください！
テーマディレクトリの作成
上記で述べたWordPressの通常のテーマディレクトリパスであるwp-contents/themesに任意の名称で子テーマのディレクトリを作成します。
他のテーマと同じ場所に
スタイルシートの準備
作成した子テーマのディレクトリ内に以下内容のstyle.cssを作成します。
@charset "utf-8";
/*
Theme Name:TWF-Child
Template:twentyfourteen//親テーマディレクトリ名
Author:R3098
Theme URI: https://seous.info/
Description:twentyfourteen用オリジナル子テーマ
*/
@import url('../twentyfourteen/style.css');//親テーマのCSS読み込みスタイルシートを定義した時点でテーマとして認識しますので、管理画面よりこの子テーマを選択してカスタマイズを行っていきます。
ただし、現在は@import urlによる読み込みは推奨されていません。
wp_enqueue_script()という関数で親テーマのCSSを読み込みます。
functions.phpでCSS読み込みを定義する
後述しているようにfunctions.phpの取り扱いには注意が必要です。
動作自体に問題はありませんので、トラブルが怖い場合は現状では@import urlを使ってもよいでしょう。
テキストエディタで新規ファイルでfunctions.phpを作成します。
アップロード先は子テーマフォルダ内、文字コードはUTF-8Nです。
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style') );
}
?>これでベースの準備は完了です。
ダッシュボード上でテーマとして認識しているのが、確認できるはずです。
テーマビューは設定してませんが、テーマと認識されています。
テーマビューを付けたい場合はpng形式のスクリーンショット画像をscreenshot.pngとして作成して保存します。（640×480px以下が推奨のようです）
子テーマなので親テーマのscreenshot.pngを使ってもよいでしょう。
Twenty Seventeen用子テーマダウンロード
ここまでを丁寧に読んでいただければ、ほとんどの方が迷うこともないと思いますが、参考までにTwenty Seventeen用のベース構成ファイルを用意しましたした。
ZIP圧縮していますので、ダッシュボードからそのままアップロードできます。
FTPの場合は解凍してアップロードください。
他の子テーマにしたい場合はstyle.cssのTemplate項目を対処テーマのフォルダ名に変更します。
ダウンロード：Twenty Seventeen用子テーマ構成ファイル
テーマとして認識されない
スタイルシートの必須項目は親テーマと子テーマの定義となるTheme Name（4行目）とTemplate（2行目）の2つだけです。
逆にいうと、ダッシュボードにテーマとして認識されない、つまり、子テーマが反映されない場合はこの2つの項目に「2バイト文字」あるいは「余計なスペース」が含まれていることがほとんどです。
※「Twenty Seventeen」用の「TWF-Child」という子テーマの場合でダッシュボード上で確認できるテーマ名は「Twenty Seventeen」ですが、ディレクトリ名は大文字とスペースを含まない「twentyseventeen」ですので、とくに注意が必要です。
×→Template:Twenty Seventeen
〇→Template:twentyseventeen
必要に応じて各テンプレートを用意
基本的にはデザインのカスタマイズだけであればスタイルシートで可能でheader.php・single.php・sidebar.phpなどの各テンプレートは必要ないと思いますが、必要に応じて子テーマに追加します。
うまく表示できない・動作しない場合
上記の解説はTwenty Seventeenを例としており、これで問題なく動作するはずです。
ただし、ダッシュボード上でテーマとして認識しているが、表示がおかしいというような場合はテーマによっては使用パーツをテーマ内の専用ディレクトリから読み込んでいる可能性があります。
画像が表示されない、体裁が崩れる、メニューがないなどの場合は下記が正常に読み込まれているか確認してください。
1.追加CSS
2.スクリプト類
3.画像
また、CSSでの背景画像の指定や追加CSSテーマ内のimgディレクトリからロゴなどを読み込めば、そのままのパスでは当然表示できません。
そのような構成の場合でもほとんどがテーマ内のCSSから相対パスで指定してあるはずなので、これらのフォルダをコピーして子テーマに加えてしまうのが手っ取り早いでしょう。
例えば、このサイトのテーマはわたしがオリジナルで作っているenoughoneというものですが、jQueryのほかウェブフォントやロゴ画像などもテーマ内のディレクトリから読み込んでいます。
そのままのパスでは読み込まれないため、同じ階層になるようこれらを子テーマに加えています。
もちろん、パスを親テーマの対象ディレクトリに対して変更してもよいです。
左=親テーマ：右=子テーマ
ちなみに子テーマでファビコン表示がうまくいかない場合はテーマフォルダまでのパスの取得に失敗している可能性がありますので、「ファビコン設置で差をつけよう（WordPress編）」を参照してみてください。
子テーマのfunctions.php
上記のように子テーマでは該当するテンプレートが存在した場合は親テーマよりも優先されます。
しかし、functions.phpだけは扱いが異なり、子テーマが読み込まれたあとに親テーマが読み込まれます。
差分のような形で子テーマの関数が追加されることとなります。
ページが真っ白になってしまうことも
親テーマと子テーマで同じ名称の関数の定義を行った場合、エラーが発生してページそのものが表示できなくなってしまうこともあります。
親側と子側で別関数としたり、function_existsによる条件分岐で子テーマで同名の関数を定義するという方法もありますが、初心者向きではなくなってしまうため、ここでは割愛します。
いずれにしても、子テーマを扱っていて「ページが真っ白になった」という場合はまずfunctions.phpが原因と考えて間違いないです。
このような状況に陥った場合は子テーマのfunctions.phpの内容を一度消去してしまえば、復旧できるかと思いますが、慎重に取り扱う必要があります。
表示にどのテンプレートが使われているか把握する
WordPressではインクルードという形でテンプレート内に別のテンプレートを読み込むことができます。
今回、例に挙げたTwenty Seventeenもそうなのですが、テーマ構成が複雑になると、どのテンプレートを修正すれば、希望の出力結果になるのか分からない場合があります。
つまり、投稿ページの表示（single.php）をカスタマイズしたいが、実際にはパーツテンプレートが使われているというケースです。
テーマのカスタマイズにはまず該当の表示にどのテンプレートが使用されているか知る必要があります。
このインクルードされたテンプレートを確認する方法については別記事にしましたので、カスタマイズ初級者の方はぜひ参考にしてみてください。
WEBサービスの構築・監修が生業の