WordPressの記事ごとに個別のCSS, JavaScriptを追加できるプラグイン -Custom CSS and JS
Post on:2010年12月10日
sponsors
WordPressの記事やページごとに、それぞれ個別のCSS, JavaScriptの外部ファイルやコードを追加できるプラグインを紹介します。
[ad#ad-2]
Custom CSS and JSのインストール
プラグインのインストールは、WordPressの管理画面「プラグイン」の「新規追加」から行えます。キーワードに「Custom CSS and JS」を入力して、「プラグインの検索」ボタンをクリックしてください。
プラグインの新規追加画面のキャプチャ
検索結果に表示された「Custom CSS and JS」の「プラグインのインストール」でインストールが始まります。
また、下記ページからファイルを直接ダウンロードしてサーバーにアップロードして、インストールすることもできます。
Custom CSS and JS
[ad#ad-2]
ダウンロードが完了しプラグインを有効化すると、カスタムフィールドで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>
sponsors
