WordPressでJSとCSSを特定のページだけに読みこませる方法

wordpressのスピードをあげることが目的

ひとつの記事に対して、jsを利用したい場合、
wordpressの共通header.phpを利用して、jsを読みこませると、必要のないページでも、jsを読み込むことになります。
これは、関係のないページの表示スピードを下げる原因になりますので、避けたいところです。

そこで、個別のページだけに、jsとCSSを読みこませる方法をご紹介します。

カスタムフィールドを利用する

個別のページに独自の読み込みを行う場合は、カスタムフィールドを利用すると便利です。
そのカスタムフィールドを便利に利用する為のプラグインを利用します。

実際の利用方法

管理画面のサイドメニュー [設定] > [カスタムフィールドテンプレート]を開きます。

管理画面の設定

テンプレートタイトル:

テンプレートコンテンツ:

と入れます。
数字は、表示したい横幅と高さに合わせて、適宜変更してください。

↓こんな感じです
カスタムタグ設定

テンプレートへの記述追加

header.phpなどのテンプレートに

を追加します。
custumTagがある場合は、custumTagを表示してください。という指示です。

記事を書く

記事の投稿の時に、カスタムテンプレート部分から、custumTagを読み込みます。
カスタムタグ利用 custumTagの中に、必要なjsやcssを書き込めばOKです。

例えば、


↓こんな感じに入力していきます
カスタムタグ入力 これで、wordpressのブログ記事、一つ一つにJSとcssを入れることができます。
カスタムフィールドを利用すると、記事のカスタマイズの自由度があがりますので、是非利用してみてください。