子テーマへの機能追加はフォルダ分けしてカセット式にすると便利

WordPressで子テーマを作るという方は、機能を追加するためにfunctions.phpへ追記したり、style.cssへデザイン変更用のコードを追加するなど、何かしらのカスタマイズを目的としているはず。

でも、コードをどんどん追加していると、何が何だか分からなくなりますよね。

今回はそうならないために、1つ1つの機能をカセット式にしてテーマへ追加する方法を紹介します。

機能を1つのフォルダにまとめよう

機能を1つにまとめる？なんだかピンとこないですね。

通常、どこかのサイトで紹介されている何等かのカスタマイズをする場合、

• テーマのfunctions.phpへ〇〇を追加（コピペ）する
• テーマのstyle.cssやテーマカスタマイザーの追加CSSへ〇〇を追加（コピペ）する

といった感じで書かれていることが多く、素直にその通りにすれば機能としては実装できます。

でも．．これがいくつも増えてくると、あれ？このコードなんだっけ？このスタイルなんだっけ？って必ずなってくるんです。

そうならないために、

1. 機能の動作を指示するファイル（functions.phpへ記述するようなコード）
2. 機能のデザインを指示するファイル（style.cssへ記述するようなコード）
3. 機能の特殊な動きを指示するファイル（〇〇.jsへ記述するようなコード）
4. 何かを出力するテンプレートファイル

など必要なファイルを作り、それをまとめたフォルダを作り、それを子テーマのfunctions.phpで一気に読み込ませるという手法を使うと、迷子にならなくなります。

例えば、このサイトでは、以下のような構造にしています。

まず、子テーマの中に「equip（装備の意）」というフォルダを作り、その中に機能として、「related-post（関連記事）」という機能フォルダを作り、その中に必要なファイルを入れるといった感じです。

このようにその機能に必要なものをすべてそのフォルダに入れておけば、他のサイトでその機能だけ使いたい時に移行が簡単にできますし、何より、どこに何が書かれているのかが明確になります。

さらにファイルの中で、いろいろなものを読み込ませる記述を書いておくと、子テーマのfunctions.phpへはたった1行追加するだけで済むようになります（これから方法を紹介していきます）。

フォルダの中に別のfunctions.phpを作ろう

先ほど表示した以下の画像の「related-post」フォルダを例にファイル構造の作り方を紹介します。

この「related-post」フォルダには、本文下（このページの下にもあります）に自動表示させる関連記事を作るための機能に必要な、以下のすべてのファイルが含まれています。

• デザインを決める「related-post-style.css」
• 2列表示させるためのテンプレート「related-post-double.php」
• モバイル表示の際に利用するテンプレート「related-post-mobile.php」
• 1列表示させるためのテンプレート「related-post.php」
• いろいろな条件や読み込み情報などを書いている「related-post-function.php」

最後に挙げた「related-post-function.php」には、本来子テーマのfunctions.phpへ記述するコードが書かれています。このファイルを独立させていることで、機能が1つのカセットになるわけです。

ここにはテンプレートを読み込ませたり、CSSを読み込ませたり、条件分岐をしたりするコードを書いています。

この例では別のサイトへ移行する際に誤って上書きしてしまうことのないよう、すべてのファイルに「related-post-」を付けていますが、名前の付け方は自身で管理しやすい方法でいいでしょう。特に読み込み用のファイルに「function」という文字列を付けなければならないこともありません

分割したファイル内に記述しておくべきコード

「.php」という拡張子のファイルの先頭には、必ず以下の記述を追加します。

<?php
//このファイルへの直接アクセスを禁止
if ( !defined( 'ABSPATH' ) ) exit;

これは「ここから下にはPHPプログラムを記述しますよ」という宣言と、このファイルへ直接接続して悪さをされないためのセキュリティ用のコードです。

また、テンプレートファイルなどで、このコードから下に個別のPHP(<?php～; ?>)を列記する場合には以下のようにして一旦phpの構文を閉じておきます。

<?php if ( !defined( 'ABSPATH' ) ) exit;//このファイルへの直接アクセスを禁止 ?>

いろいろな種類のコードを読み込ませるための基本コード

どこかのコードを参考に機能実装する場合と同じですが、いろいろなファイルを読み込ませるのに必要なコードの基本形をいくつか挙げておきます。

カセット化した場合はこれらを使って、機能フォルダ内のfunctions.phpへ記述していきます。

CSSを読み込ませるためのコードの書き方

基本は「登録して」「読み込ませる」という流れです。登録には「register_style」を、読み込みには「enqueue_style」というWordPress組み込み関数を使います。

コード例

「enqueue_script」のみを使った手法がよく紹介されていますが、「登録して読み込む」がWordPressの正しい作法です

/* スタイルの登録と読み込み */
if ( !function_exists( 'ユーザー定義関数名' ) ){
function ユーザー定義関数名() {
//スタイルシートの登録
wp_register_style( 'スタイルID', get_stylesheet_directory_uri() .'/CSSファイル', array(), filemtime(get_stylesheet_directory() .'/style.css'), 'all' );

//スタイルシートの読み込み
wp_enqueue_style('スタイルID', '', array(), '1.0', false);
}
}
add_action( 'wp_enqueue_scripts', 'ユーザー定義関数名');

• ユーザー定義関数名は他のプログラムと重複しないものにする（半角英数字とアンダーバー）
• スタイルIDは他のスタイル名と重複しないものにする（半角英数字と「-」「_」）

参考：wp_register_style

スクリプトを読み込ませるためのコードの書き方

基本は「登録して」「読み込ませる」という流れです。登録には「register_script」を、読み込みには「enqueue_sctipt」というWordPress組み込み関数を使います。

コード例

if ( !function_exists( 'ユーザー定義関数名' ) ){
function ユーザー定義関数名() {

//スクリプトの登録
    wp_register_script('スクリプトID', get_stylesheet_directory_uri() .'/スクリプトファイル', array ('jquery'),false, false);

//スクリプトの読み込み
    wp_enqueue_script('スクリプトID');
     
}
}
add_action('wp_enqueue_scripts', 'ユーザー定義関数名');

• ユーザー定義関数名は他のプログラムと重複しないものにする（半角英数字とアンダーバー）
• スクリプトIDは他のスタイル名と重複しないものにする（半角英数字と「-」「_」）

「enqueue_script」のみを使った手法がよく紹介されていますが、「登録して読み込む」がWordPressの正しい作法です

参考：wp_register_script

テンプレートをショートコードで出力する場合のコードの書き方

テンプレートを読み込ませるWordPress組み込み関数に「get_template_part」というのがあり、それを利用しますが、この関数は処理が本文の読み込みよりも早いため、以下のように記述します。

コード例

if ( !function_exists( 'ユーザー定義関数名' ) ){
function ユーザー定義関数名() {
        ob_start();
        get_template_part('テンプレートファイル');
        return ob_get_clean();
}
}
add_shortcode('ショートコードスラグ', 'ユーザー定義関数名');

• ユーザー定義関数名は他のプログラムと重複しないものにする（半角英数字とアンダーバー）
• テンプレートファイルは、ファイル階層とファイル名を入れる（先頭の「/」と拡張子は不要）
• ショートコードスラグはショートコードで使用する文字列を入れる

この方法で記述しないと、思わぬところに出力されてしまうことがありますので注意してください

headタグ内へテンプレートの内容を出力するためのコードの書き方

「wp_head」というWordPress組み込み関数を用いて、</head>タグの上へ何かを出力します。

コード例

if ( !function_exists( 'ユーザー定義関数名' ) ){
function ユーザー定義関数名(){
	get_template_part('テンプレートファイル');
}
}
add_action('wp_head','ユーザー定義関数名');

footerタグ内へテンプレートの内容を出力するためのコードの書き方

「wp_footer」というWordPress組み込み関数を用いて、</footer>タグの上へ何かを出力します。

コード例

if ( !function_exists( 'ユーザー定義関数名' ) ){
function ユーザー定義関数名(){
	get_template_part('テンプレートファイル');
}
}
add_action('wp_footer','ユーザー定義関数名');

機能のfunctions.phpを子テーマのfunctions.phpで読み込ませる

機能としてまとめたフォルダの中のファイル類が完成したら、いよいよ子テーマのfunctions.phpで、機能を読み込ませるためのコードを追加して、機能を動作させます。

冒頭部分でちらっと紹介した通り、子テーマのfunctions.phpへ追加するのは以下のコード1行だけです。

include (get_stylesheet_directory() .'/目的のファイルまでの階層.php');

よく使われる「get_stylesheet_directory_uri()」ではなく、テンプレート階層を示す「get_stylesheet_directory()」であることに注意してください

「目的のファイルまでの階層」という部分は、別フォルダ内に作ったfunctions.phpを開くと、下図の赤枠内のように、画面上部へ表示されますからコピーすれば大丈夫です。

問題なく追加・保存できたら、サイトと機能の動作チェックをして完成です。

エラー発生時の対応

前項で紹介したコードを子テーマのfunctions.phpへ追加した途端、「重大なエラーが発生しました．．」などと出てサイトがストップしてしまうこと、よくあります。

これは、子テーマのfunctions.phpへ何かのカスタマイズコードを追加した時には、保存時にチェックが働いてエラーがあれば保存前の状態でストップするのに対して、別ファイルに書いたものはチェックされないからです。

まあ、最終的に子テーマ内へ読み込ませるコードを書くまでは、単なるファイルなのですから、コード追加したらエラーが噴き出す．．当たり前なんですが、ちょっとびっくりしますね。

ただ、原因は、今子テーマで読み込ませた機能のコードでエラーが出てることに間違いないのですから、あわてずに対処すれば大丈夫です。

読み込みコードの削除orコメント化

本ページの通りに作業をしたのであれば、機能を有効にするために書いたコードは以下の1行ですよね？

include (get_stylesheet_directory() .'/目的のファイルまでの階層.php');

これを書いた途端にエラーになったのですから、これを削除すればいいんです（笑）。

または、先頭に「//」(スラッシュを2つ)つけて、コメント化すればいいんです。

エラー画面が出たら、ブラウザの「戻る」ボタンをクリックすると、前画面（エラー前の画面）に戻るので、そこで削除orコメント化すれば、正常に動作するようになります。

もしも、もう戻れなくなってしまったときは、FTPで一旦子テーマのfunctons.phpをダウンロードして処置→再アップロードするか、サーバーのファイルマネージャーで直接コード編集すればいいでしょう

とにかく慌てないことと、エラー発生が分かるように、機能は1つ1つ追加していくことが大切です。

正常に動作する状態に戻ったら、コードを見直して再度有効化して、エラーが出ないようにしましょう。

どうしてもエラー原因が分からないときは

目を皿のようにして見てもコードの誤りに気づけない時があります。

そんな時は、読み込み用コードを一旦削除orコメント化した状態で、別フォルダのfunctions.phpへ書いた内容を、そのまま子テーマのfunctions.phpへコピーして保存してみましょう。

すると．．．WordPressのコードチェックが働いて、どの行辺りでどんなエラーが出るのかを下に示してくれます。

本当にコード自体の誤りがある場合もありますが、結構見つけにくいのは以下のような場合ですからしっかりチェックしましょう。

• コードの中に全角の文字や全角のスペースが入っている
• コードの中のコメントアウトの方法が間違っている
• コードの中の接尾語（「;」セミコロン）や括弧（「{}()」）が抜けていたり多すぎたりしている
• コードの中で使えない文字が入っている
• コードの先頭の空白が無効状態になっている（空白を削除するとうまくいくことが多い）

子テーマのfunctions.php上で動作したら、それを機能別フォルダのfunctions.phpへ移動させたのち、子テーマのfunctions.phpへそのファイルを読み込ませればうまく動作するはずです。

最後に　コード分割することによるサイト動作への影響

実際にこのサイトでは、「本サイト（Twenty Twenty-Twoデモサイト）でTT2へカスタマイズした内容一覧」の独自に行っている機能追加の項目で列記している機能は、すべてこのページの方法でフォルダ・ファイルを分割して追加しています。

いかがでしょう？サイトの表示に影響はありますか？表示速度は遅くなってますか？

Google PageSpeed Insightsなどでチェックしても、特に問題のある項目は見つからないでしょう。

長い経験から、むしろ、同一ファイル内にごちゃごちゃ書いていた頃の方が、重複する処理があったり、非効率なコードがあったりして、動作に影響が出ていたと思います。

このページをご覧になる方は、もうすでにごちゃごちゃ．．なのでしょうから、1つ1つ機能分けをして、効率の良い、メンテナンスのしやすいサイト作りをしていきましょう！！