WordPressでカスタマイズ用のコードをどこにどう書けばいいかわからない!functions.phpの編集やjQueryのコードの書き方
WordPressではコピペでコードを書くだけで設定や機能が変えられるコードがたくさんあります。
カスタマイズの方法をググってコードは見つけたものの、
どこにどう書けばいいのかがわからない。自分のサイトで使うために変える部分は?
と困らないよう、基本の場所を覚えておきましょう。
この問題を解決するには……?と検索したときに、このコードでOK!という記事を見つけることがあります。
え?このコードをどこに?と初心者が困ってしまうことは多いですが、
慣れていれば、コードを見ただけでどうやって使うかがわかるんです。
functions.phpに書くもの・header.phpに書くもの・テーマのテンプレートファイルに書くものを見分けましょう!

どのファイルだとしても基本は親テーマのフォルダーから使うファイルを見つけてダウンロード、編集したあと子テーマにアップロードします。
functions.phpに書くコード
add_filter( 'filter_hook_name', 'filter_hook_add_name', 10, 2 );
funcion filter_hook_add_name( ){
//
//PHPのコード
//
}
add_xxxx(‘filter_hook_name’, ‘●●●●●’);
の記述とfunction ●●●●●{ PHPのコード }
で囲まれたコードのセットになっているのがfunctions.phpのコードである証拠。
そのコードはfunctions.phpの一番下(最後)に追加します。
header.phpに書き込むコード
<script type="text/javascript">
$(function(){
//
//JavaScriptのコード★
//
});
</script>
この形がJavaScriptのコードです。このような形を見つけたら、基本的にはheader.phpに追加します。
(例外的にページ内に書き込む場合もあり。)
ですが、WordPressでは、このままの形では使うことが出来ません。
<script type="text/javascript">
jQuery(function ($) {
//
//$(function)){});の中身(javascriptのコード★)をこの中に書けばOK
//
});
</script>
WordPressでは、$マークの部分をiQueryに書き換えないと使えないというルールがあるからです。
いちいち書き換えるのは面倒なので、上記のコードをheader.phpの正しい位置に追加しておき、その中に拾ってきたコードを追加していけばOK。
header.phpのこのコード↓の下に<!--?php wp_head(); ?-->
このコード↓を追加しておきましょう。
<script type="text/javascript">
jQuery(function($){
//ここから普通のjQuery
//
//ここに拾ってきたjavascriptコードを追加する
//
//ここまでがiQuery
});
</script>
iQueryプラグインやCSSファイル、ライブラリ等を読み込むときの方法
iQueryとはJavaScriptのライブラリのことで、読み込むと様々な機能が使えるものですが、WordPressではテーマなどによって既に読み込まれています。
iQueryプラグインなどを追加するときにコピペしたコードを使うと、iQueryが二重に読み込まれたり、連携がうまくいかずにコンフリクトを起こすことが。
読み込みのために使われる一般的なコードはこんな感じになっています。jQueryのコードとセットになってコピペ用に紹介されていることも。
<script type="text/javascript" src="/wp-content/themes/lightning_child_sample/js/jquery.example.js"></script>
このようなコードがあったときはheader.phpの<head>
の上に追加するという指示が書いてあるときもありますが、もっと良い方法があります。
WordPressでは、WordPressの関数を使ってfunctions.phpに追加することが推奨されています。
wp_enqueue_scriptという関数を使って読み込みます。
function my_scripts_method() {
wp_enqueue_script('example', '/wp-content/themes/lightning_child_sample/js/jquery.example.js', array('jquery'), '4.1.2', true);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
wp_enqueue_scriptという関数でjQueryプラグインを読み込んでいます。
array(‘jquery’)
の部分で既にWordPressに読み込まれているiQueryを使用するようになっているので、コピペしたコードにiQueryを読み込む部分があってもそこは省略しましょう。
同時にCSSファイルを読み込む場合は、同じような記述でwp_enqueue_styleという関数を使えば読み込むことが出来ます。
wp_enqueue_scriptの詳細解説
function my_scripts_method() {
wp_enqueue_script('bxSlider'★1, '/wp-content/themes/lightning_child_sample/js/jquery.example.js'★2, array('jquery')★3, '4.1.2'★4, true★5);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
★1がスクリプトの識別名です。jQueryプラグインの名前を書きます。
★2はスクリプトのパス。使っている子テーマの中にjsというフォルダーを作り、そこにアップロードしましょう。FTPソフトにパスは表示されています。
★3はスクリプトが依存しているファイルを書きます。WordPressに読み込まれているiQuery本体が先にないと動かないスクリプトの場合に書きます。ない場合は空の配列array()にします。
★4はバージョン情報。ない場合はfalseにします
★5はfaultがデフォルトで、ヘッダーでスクリプトを読み込みます。trueでフッターで読み込みます。サイトスピードのためにiQueryをフッターに移動している場合などにtrueにします。
複数読み込む場合は、wp_enqueue_script{ファイルの情報}の枠で増やしましょう。
その他のPHPのコード
functions.phpの形式になっていないPHPのコードは、基本的にテーマのテンプレートファイル内で使うものです。functions.phpと違い、表示したい場所・適用したい場所に直接書きます。テンプレートファイルとは、ページのどこに何を表示するかを決めているファイルのことで、ページの構成によっていくつか用意されています。
ページでどのテンプレートファイルが使われているかを調べる
追加したいページで使われているテンプレートファイルがわからないときは、フッターに表示するためのコードを追加しておくと表示することが出来ます。
<footer class="section siteFooter">
このコードの下に、
if ( is_user_logged_in() ) { // ログイン中の場合
global $template;
echo 'このページで使用しているテンプレートファイル:'. basename($template);
}
これで使用されているテンプレートファイルがわかります。
あとは、コードを使用する場所に記入するだけです。
テンプレートファイルを見ても、デベロッパーツールなどで見たHTMLコードの場所がどこに該当するかわかりにくいかもしれませんが、CSSのクラス名などを参考に場所を突き止めましょう。
デベロッパーツールで、コードを追加したい場所を見る
→直前または直後にある要素のCSSクラス名を見る
→テンプレートファイル内でそのCSSクラス名を探す
この方法で見つからないのは、テンプレートファイル内で更に別のテーマファイルを読み込んでいる場合です。
WordPressで使われるテーマファイルの基本の構造はパターンがあるので、覚えておくと良いでしょう。
基本を押さえておこう!
この基本がわかっていれば様々なカスタマイズ方法が使える!
せっかく正しいコードを見つけても、間違った書き方をしては効かないですよね。
どんなコードをどこに書き込むかがわかれば、拾ってきたコードに説明がなくても使うことが出来ます。
これでカスタマイズの幅が広がりました!