WordPressでカスタマイズ用のコードをどこにどう書けばいいかわからない!functions.phpの編集やjQueryのコードの書き方

2019年7月20日WordPressの設定&カスタマイズの基礎知識

WordPressではコピペでコードを書くだけで設定や機能が変えられるコードがたくさんあります。

カスタマイズの方法をググってコードは見つけたものの、
どこにどう書けばいいのかがわからない。自分のサイトで使うために変える部分は?
と困らないよう、基本の場所を覚えておきましょう。

この問題を解決するには……?と検索したときに、このコードでOK!という記事を見つけることがあります。

え?このコードをどこに?と初心者が困ってしまうことは多いですが、

慣れていれば、コードを見ただけでどうやって使うかがわかるんです。

functions.phpに書くもの・header.phpに書くもの・テーマのテンプレートファイルに書くものを見分けましょう!

functions.php-header.php-iquery

どのファイルだとしても基本は親テーマのフォルダーから使うファイルを見つけてダウンロード、編集したあと子テーマにアップロードします。

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で使われるテーマファイルの基本の構造はパターンがあるので、覚えておくと良いでしょう。

基本を押さえておこう!

wordpress テンプレート階層

この基本がわかっていれば様々なカスタマイズ方法が使える!

せっかく正しいコードを見つけても、間違った書き方をしては効かないですよね。

どんなコードをどこに書き込むかがわかれば、拾ってきたコードに説明がなくても使うことが出来ます。

これでカスタマイズの幅が広がりました!