WordPressで記事、固定ページ毎にCSS、JavaScriptを追加するプラグイン Custom CSS and JavaScript

WordPressのアイキャッチ

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.投稿>新規追加で、記事作成画面を表示。
Custom CSS and JavaScriptの使い方01

2.右上の表示オプションをクリック。
Custom CSS and JavaScriptの使い方02

3.カスタムフィールドにチェックを入れ、表示オプションを再度クリックして閉じます。
Custom CSS and JavaScriptの使い方03

4.記事作成画面の下部にカスタムフィールドが表示されます。
Custom CSS and JavaScriptの使い方04

5.新規追加をクリックして、下記の様に入力、カスタムフィールドを追加をクリック。

<CSSの場合>
名前にcustom_css、値に.cssファイルのパスを入力。
Custom CSS and JavaScriptの使い方05

<JavaScriptの場合>
名前にcustom_js、値に.jsファイルのパスを入力。
Custom CSS and JavaScriptの使い方06

補足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、値にコードを記述。

注意点

名前、値を入力後、カスタムフィールドを追加をクリックまでが、一つの流れとなっています。
最後のクリックをしないと、正しく反映されません。

Custom CSS and JavaScriptの使い方07
上記画像の様に、空のカスタムフィールドがあるのが、正しい状態です。

スポンサーリンク

お役に立ちましたら、シェアをお願いします

プロフィール

九荻 新のプロフィール画像

名前:九荻 新(くおぎ あらた)
埼玉県在住のブロガー。
1983年11月30日生まれ。

趣味は自作PC。
30歳を過ぎて、手の脂が減り、
ビニール袋を開けられなくなった。
詳しいプロフィール

サイト内検索