WordPressの記事ごとに個別のCSS, JavaScriptを追加できるプラグイン -Custom CSS and JS

WordPressの記事やページごとに、それぞれ個別のCSS, JavaScriptの外部ファイルやコードを追加できるプラグインを紹介します。

Custom CSS and JS

• Custom CSS and JSのインストール
• WordPressの記事ごとに個別のCSSを追加
• WordPressの記事ごとに個別のJavaScriptを追加

Custom CSS and JSのインストール

プラグインのインストールは、WordPressの管理画面「プラグイン」の「新規追加」から行えます。キーワードに「Custom CSS and JS」を入力して、「プラグインの検索」ボタンをクリックしてください。

プラグインの新規追加画面のキャプチャ

検索結果に表示された「Custom CSS and JS」の「プラグインのインストール」でインストールが始まります。
また、下記ページからファイルを直接ダウンロードしてサーバーにアップロードして、インストールすることもできます。
Custom CSS and JS

ダウンロードが完了しプラグインを有効化すると、カスタムフィールドでCSS, JavaScriptの外部ファイルやコードを追加できるようになります。

WordPressの記事ごとに個別のCSSを追加

CSSを追加するには、記事投稿・編集画面から行います。
最初はカスタムフィールドに登録されていないため、「新規追加」をクリックします。

カスタムフィールドの「名前」の欄に下記のキーワードを入力します。

custom_css

追加するCSSの外部ファイルのパスを記述

custom_css_code

追加するCSSのコードを記述

CSSのコードと外部ファイルは値の欄に記述します。

生成される記事のHTMLは、下記のようになります。

追加されたCSSのコード

<style type="text/css" media="screen">/*<![CDATA[ */
p{color:#fff}
/* ]]>*/</style>

追加されたCSSの外部ファイル

<link rel="stylesheet" type="text/css" href="/custom.css" />

WordPressの記事ごとに個別のJavaScriptを追加

JavaScriptを追加するには、CSSと同じように記事投稿・編集画面から行います。

カスタムフィールドの「名前」の欄に下記のキーワードを入力します。

custom_js

追加するJavaScriptの外部ファイルのパスを記述

custom_js_code

追加するJavaScriptのコードを記述

JavaScriptのコードと外部ファイルは値の欄に記述します。

生成される記事のHTMLは、下記のようになります。

追加されたJavaScriptのコード

<script type="text/javascript">//<![CDATA[
var _wpcf7 = { cached: 1 };
alert('hellow, world');/* ]]> */
var AKPC_IDS = "";
//]]></script>

追加されたJavaScriptの外部ファイル

<script type="text/javascript" src="/custom.js"></script>