WordPressで記事、固定ページ毎にCSS、JavaScriptを追加するプラグイン Custom CSS and JavaScriptを紹介します。
通常、CSSとJavaScriptを追加したい場合、使用テーマのheader.phpに記述するのが普通です。
しかしその場合、全ての投稿、固定ページに反映されてしまいます。
少量のCSSなら大して問題になりませんが、無駄なJavaScriptは確実に読込時間を長くします。
それはブロガーにとっても、ユーザーにとっても好ましくありません。
そこで登場するのが、Custom CSS and JavaScriptです。
このプラグインを使えば、特定の記事や特定の固定ページだけにCSSやJavaScriptを追加することが出来ます。
Custom CSS and JavaScriptの作者サイト
インストールと有効化
1.WordPress管理画面＞プラグイン＞新規追加＞Custom CSS and JSで検索。
2.今すぐインストールをクリック。
3.プラグインを有効化をクリック。
使い方
1.投稿＞新規追加で、記事作成画面を表示。
2.右上の表示オプションをクリック。
3.カスタムフィールドにチェックを入れ、表示オプションを再度クリックして閉じます。
4.記事作成画面の下部にカスタムフィールドが表示されます。
5.新規追加をクリックして、下記の様に入力、カスタムフィールドを追加をクリック。
＜CSSの場合＞
名前にcustom_css、値に.cssファイルのパスを入力。
＜JavaScriptの場合＞
名前にcustom_js、値に.jsファイルのパスを入力。
補足1
Google Hosted Librariesなどから、jQueryやjQuery UIを読み込むことも可能。
jQueryなら、名前にcustom_js、値にhttp://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js。
jQuery UIなら、名前にcustom_css、値にhttp://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css。
+名前にcustom_js、値にhttp://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js。
※パスの数字部分を変えれば、他のバージョンも使用できます。
補足2
.css、.jsファイルを読み込むのではなく、コードを直接記述することも出来ます。
＜CSSの場合＞
名前にcustom_css_code、値にコードを記述。
＜JavaScriptの場合＞
名前にcustom_js_code、値にコードを記述。
注意点
名前、値を入力後、カスタムフィールドを追加をクリックまでが、一つの流れとなっています。
最後のクリックをしないと、正しく反映されません。
上記画像の様に、空のカスタムフィールドがあるのが、正しい状態です。
