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'★１, '/wp-content/themes/lightning_child_sample/js/jquery.example.js'★２, array('jquery')★３, '4.1.2'★４, true★５);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );★１がスクリプトの識別名です。jQueryプラグインの名前を書きます。
★２はスクリプトのパス。使っている子テーマの中にjsというフォルダーを作り、そこにアップロードしましょう。FTPソフトにパスは表示されています。
★３はスクリプトが依存しているファイルを書きます。WordPressに読み込まれているiQuery本体が先にないと動かないスクリプトの場合に書きます。ない場合は空の配列array()にします。
★４はバージョン情報。ない場合はfalseにします
★５は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で使われるテーマファイルの基本の構造はパターンがあるので、覚えておくと良いでしょう。
基本を押さえておこう！
この基本がわかっていれば様々なカスタマイズ方法が使える！
せっかく正しいコードを見つけても、間違った書き方をしては効かないですよね。
どんなコードをどこに書き込むかがわかれば、拾ってきたコードに説明がなくても使うことが出来ます。
これでカスタマイズの幅が広がりました！
さやに相談してみる
自分では解決しない…けど専門業者に頼むのはちょっと…
自分で進めたいけどサポートが欲しい！というとき
お気軽にご相談ください！
記事内容のカスタマイズ代行、さらにご希望に合わせたカスタマイズ、ご希望の機能やデザインの制作、コンテンツ作成のお手伝いまでウェブ制作全般にご対応！
ご利用ガイド