WordPressでJSとCSSを特定のページだけに読みこませる方法
よく読まれている記事
wordpressのスピードをあげることが目的
ひとつの記事に対して、jsを利用したい場合、wordpressの共通header.phpを利用して、jsを読みこませると、必要のないページでも、jsを読み込むことになります。
これは、関係のないページの表示スピードを下げる原因になりますので、避けたいところです。
そこで、個別のページだけに、jsとCSSを読みこませる方法をご紹介します。
カスタムフィールドを利用する
個別のページに独自の読み込みを行う場合は、カスタムフィールドを利用すると便利です。そのカスタムフィールドを便利に利用する為のプラグインを利用します。
実際の利用方法
管理画面のサイドメニュー [設定] > [カスタムフィールドテンプレート]を開きます。管理画面の設定
テンプレートタイトル:|
1 |
custumTag |
テンプレートコンテンツ:
|
1 2 3 4 |
[custumTag] type = textarea rows = 30 cols = 100 |
と入れます。
数字は、表示したい横幅と高さに合わせて、適宜変更してください。
↓こんな感じです
テンプレートへの記述追加
header.phpなどのテンプレートに|
1 2 3 4 5 6 |
<!-- 記事にjs追加 --> <?php if(get_post_meta($post->ID,'custumTag',true)): ?> <?php echo post_custom( 'custumTag' ); ?> <?php endif; ?> |
を追加します。
custumTagがある場合は、custumTagを表示してください。という指示です。
記事を書く
記事の投稿の時に、カスタムテンプレート部分から、custumTagを読み込みます。
custumTagの中に、必要なjsやcssを書き込めばOKです。例えば、
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> ここにjsを。 </script> <style> ここにcssを。 </style> |
↓こんな感じに入力していきます
これで、wordpressのブログ記事、一つ一つにJSとcssを入れることができます。
カスタムフィールドを利用すると、記事のカスタマイズの自由度があがりますので、是非利用してみてください。