WordPressのテーマのカスタマイズはいろいろな方法がありますが、主にLightningにおいての推奨カスタマイズ場所について解説します。
この記事は「Vektor WordPress Solution Advent Calendar 2020」の12月8日の記事になります。
- 1. 子テーマでカスタマイズしてほしくないケース
- 1.1. singular.php や index.php からカスタマイズするのは非推奨
- 1.1.1. 非推奨の理由
- 1.1.1.1. 構造的な仕様変更のアップデートに対応できない
- 1.2. header.php / footer.php もカスタマイズ非推奨
- 2. そもそもコードのカスタマイズの必要性
- 2.1.1. カラム数の変更やページヘッダー/パンくずの表示制御は設定で変更できる
- 2.1.2. 非表示にしたいだけならCSSで対応が無難
- 3. カスタマイズされそうな場所はテンプレートが小分けにしてある
- 4. アクションフック&フィルターフックでカスタマイズする
- 5. 子テーマとプラグインの違い
- 5.1. 子テーマ
- 5.1.1. 長所
- 5.1.2. 短所
- 5.2. 独自プラグイン
- 5.2.1. 長所
- 5.2.2. 短所
- 6. 結局どこに書くのがいいか?
子テーマでカスタマイズしてほしくないケース
WordPressは親テーマのファイルを子テーマに複製すると、子テーマの方が優先して読み込まれるという便利な仕組みがあります。しかし使い方によってはテーマのアップデートで影響が出るので注意が必要です。
singular.php や index.php からカスタマイズするのは非推奨
親テーマのsingle.phpをコピーして single-投稿タイプ名.php にしたり、特定の固定ページだけ page.php(Lightningではsingular.php)をコピーして page-スラッグ名(またはテンプレート名).php などにしてカスタマイズするのは常套手段ですが、Lightnningでは非推奨です。
非推奨の理由
index.php / single.php / page.php などはページ全体のテンプレートファイルですが、カスタマイズしたい範囲はどこですか?ページ全体をカスタマイズしたいわけではありませんよね?
おそらく「カラム数を指定したい」とか「ページヘッダーを非表示にしたい」とか「詳細ページで日付と投稿者を表示したくない」とか「本文エリアだけカスタムフィールドを追加したい」とか、ページ内の一部だけカスタマイズしたいケースがほとんどではないか思います。
構造的な仕様変更のアップデートに対応できない
Lightningでは過去のバージョンアップで、カラム数やページヘッダーやパンくずの表示制御などを設定で制御できる機能を追加しました。
こういったいわばレイアウトや表示要素に関する重要な変更は index.php や singular.php など、HTMLで外側に該当するファイルに書かれるので、これが子テーマに複製されてしまっていると、バージョンアップに応じて、自身がカスタマイズしたファイルの修正が必要になるので、子テーマに index.php 及び singular.php から派生したフィルがあるのは望ましくありません。
header.php / footer.php もカスタマイズ非推奨
header.php 及び footer.php も重要な仕様変更が入る可能性があるので、ファイルを子テーマに複製してカスタマイズするべきではありません。カスタマイズしたい場合は可能な限りアクションフックやフィルターフックで対応してください。
アクションフックやフィルターフックに関しては近日別途改めてブログに書きますが、よくわからなかったらフォーラム(Pro版ユーザーのみ書き込み可能)で質問してください。
そもそもコードのカスタマイズの必要性
カラム数の変更やページヘッダー/パンくずの表示制御は設定で変更できる
現行のLightningでは、カラム数の設定は 外観 > カスタマイズ > Lightning レイアウト設定 からできますし、ページヘッダーやパンくずの非表示(G3ではPro版のみ)及びカラム数も記事毎に編集画面の Lightningデザイン設定から表示制御可能で、他にもありとあらゆる項目がノーコードで設定できるようになっているので、そもそもテンプレートカスタマイズの必要性はかなり下がっています。
非表示にしたいだけならCSSで対応が無難
特定の要素を非表示にしたいだけなら何もPHPファイルをカスタマイズしなくても、対象箇所に対してcssで display:none; 指定するだけで十分です。
対象箇所のセレクタの指定は下記を参照ください。
できる!WordPressカスタマイズ #01 簡単なデザイン(CSS)カスタマイズ方法徹底解説
カスタマイズされそうな場所はテンプレートが小分けにしてある
そもそも singular.php からカスタマイズしようとして中身を見ると、おそらくカスタマイズしたい場所は singular.php には直接書いてなくて、singular.php の中で呼び出しているファイルではないでしょうか?
例えば本文欄まわりであれば、_g3/template-parts/entry.php を読み込んでいますが、これを特定の投稿タイプだけ変更したい場合は子テーマに同じ階層で複製して、_g3/template-parts/entry-投稿タイプ名.php としてカスタマイズすれば効きます。
特定の固定ページだけの場合は _g3/template-parts/entry-スラッグ名.php で効きます。
アクションフック&フィルターフックでカスタマイズする
アクションフックやフィルターフックを使うと、アクションフックが用意されている場所に対して好きな要素を追加したり、フィルターフックでは標準の出力内容を改変したりする事ができます。
PHPやフックの知識があればこの方法がアップデートの影響を受ける可能性が比較的小さいです。フックの書き方については以下の記事など参照ください。
子テーマとプラグインの違い
問題はそのカスタマイズのプログラムをどこに書くべきかという点で、主に
- 子テーマのfunctions.php などに書く
- 独自のカスタマイズ用のプラグインを用意してそこに書く
の2種類になるかと思います。
どちらでカスタマイズするかは特性を理解した上で判断しましょう。
子テーマ
長所
- テンプレートファイルを上書きするのはLightningでは非推奨ですが、フックを理解していなくてもカスタマイズしやすいし、フックでどうしようもないケース(ほぼないと思います)にも対応できる。
- style.css に書けばとりあえず CSS が上書きできる
短所
- 子テーマを解除すると 外観 > 追加CSS に入れた内容が効かなくなるなど、子テーマ内以外のカスタマイズに影響が出る事がある
独自プラグイン
長所
- 多くの案件で共通するカスタマイズと特定の案件でのみのカスタマイズなどを、内容に応じて分割して管理できる
- テーマに関する事以外のカスタマイズ内容であれば親テーマを変更してもそのまま使える
短所
- CSSを上書きする場合手動でcssファイルを読み込むコードを書く必要がある
(Lightning専用のカスタマイズ用プラグインでは予め用意されています)
結局どこに書くのがいいか?
個人的な見解としては
カスタマイズ内容 | カスタマイズ場所 | 理由 |
使用中のテーマに関するカスタマイズでどの案件でも使うような内容 | テーマ専用 オレオレ プラグイン | 他でも使い回しやすい。 |
案件固有のカスタマイズ | 案件専用 プラグイン | リニューアルでテーマ変更になった時に作業が少なく済む |
案件固有の表示要素部分 | 子テーマ or 案件専用 プラグイン | テンプレートファイルの上書きなど手軽にできる 途中から子テーマに切り替えると追加CSSなど効かなくなるなどもあるので、最初から子テーマは用意しておいて良いのでは? |
かなと思ったりしますが、カスタマイズ量が少なかったら子テーマだけで纏めてしまった方が管理が楽だったりもしますし、カスタマイズの分量に応じてケースバイケースになると思います。
以下の記事なども参考にしてみてください。
ちなみに明日WPZoomUpさんがこの話題のオンライン勉強会を開催されますので、興味のある方はそちらもどうぞ!
この記事を書いた人
-
名古屋のウェブ制作会社数社に10年程度務めた後、株式会社ベクトル設立。
企画・運営・コンサルティング〜WordPressを中心としたシステム開発まで幅広く携わる。
[ 著書 ]
・いちばんやさしいWordPressの教本(共著)
・現場でかならず使われているWordPressデザインのメソッド(共著)
[ 最近のWordPressコミュニティでの活動 ]
WordCamp Tokoy 2023 セッションスピーカー
WordCamp Asia 2023 セッションスピーカー(LT)
WordCamp Niigata 2019 セッションスピーカー
WordCamp Haneda 2019 セッションスピーカー
WordCamp Osaka 2018 セッションスピーカー
WordCamp Kyoto 2017 セッションスピーカー
他
最近の投稿
フルサイト編集対応ブロックテーマ
WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。
パターンを使って
よりクオリティの高いサイトに
パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中!コピペしながら高品質なサイトを簡単に作れます。
ブロックエディターで
ABテストを
自由に作成できる VK AB Testing
VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。