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
上記画像の様に、空のカスタムフィールドがあるのが、正しい状態です。

WordPressのアイキャッチ

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

2 件のコメント

  • 実際のパス名を指定している記述をヒントにしたところ,私のブログでもうまくいきました。詳しく解説してくださいましてありがとうございます。

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)