WordPressの記事ごとに個別のCSS, JavaScriptを追加できるプラグイン -Custom CSS and JS
WordPressの記事やページごとに、それぞれ個別のCSS, 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>
Post on:2010年12月10日
Comments
miyake
on 2010年12月10日
ありがとうございます。
とても探していたプラグインです。
早速ためさせていただきます。
いつも、とてもよい示唆をいただいています。
ありがとうございました。
コリス
on 2010年12月10日
> miyake さん
当サイトでも導入してみました。
ページ内にデモなどを配置できるので、便利そうです。
WP:記事個別のCSS,JavaScriptを追加するプラグイン « まさやんデジ
on 2010年12月10日
[...] http://coliss.com/articles/blog/wordpress/plugin/wordpress-plugin-custom-css-js.html [...]
WordPressで各記事ごとにCSSやJavaScriptを追加できるプラグインCustom CSS and JS | 茂吉のWeb学習録
on 2011年2月10日
[...] も方法が分からず悩んでいたのですが、この悩みを解決するプラグイン「Custom CSS and JS」がコリスさんで紹介されていて一気に解決しました。 この素晴らしいプラグイン「Custom CSS and JS」 [...]
たつみんのMEMOφ(・ω・) » 投稿画面にJavaScriptを適用させる。
on 2011年5月30日
[...] 「Custom CSS and JS」インストール WordPressの記事ごとに個別のCSS, JavaScriptを追加できるプラグイン -Custom CSS and JS [...]
カスタムフィールドを使用して投稿別に個別のCSSを適用する方法【WordPress】 - ウェブなとき。
on 2011年6月6日
[...] あるようでコリスさんでもご紹介されていますので、プラグイン希望の方は参照してみてください。 【coliss】WordPressの記事ごとに個別のCSS, JavaScriptを追加できるプラグイン -Custom CSS and JS [...]
カスタム投稿の実装に失敗。と今日のラノベ！ | Kamio-Box
on 2011年8月3日
[...] のcssやjsを読みこませるカスタムフィールドの実装を行っていたのですが、どうにもうまく行かず。 WordPressの記事ごとに個別のCSS, JavaScriptを追加できるプラグイン -Custom CSS and JS | コリス [...]
WEBCRE8.jp » Blog Archive » [ブログ投稿]単一の記事にCSS/JSを適用する方法を調べた
on 2011年9月10日
[...] WordPressの記事ごとに個別のCSS, JavaScriptを追加できるプラグイン -Custom CSS and JS | コリス [...]
ページごとにCSS/JSを適用させる方法[wordpress] | InfinityScope
on 2011年10月16日
[...] 参照サイト ： コリスWordPressの記事ごとに個別のCSS, JavaScriptを追加できるプラグイン -Custom CSS and JS 参照サイト ： とりさんのソフト屋さんcssやJavaScriptをヘッダに追加するプラグイ [...]
ken
on 2012年2月26日
Custom CSS and JSを、インストールさせていただきました。
インストール後、プラグインを有効かしましたが、記事投稿→編集画面での、「カスタムフィールド」が表示されません！
有効化後になにか設定が必要でしょうか？
ワードプレスのバージョンは、3.3.1です。
よろしくお願いします。
コリス
on 2012年2月26日
> ken さん
カスタムフィールドはWordPressの標準機能なので、特に設定などは必要なく、記事の投稿画面で表示されると思います。
頂いた情報だけでは判断できないですが問題があるとすれば、別のプラグインや設定でカスタムフィールドや投稿画面に関するものをいれていないか、くらいでしょうか。
当サイトも3.3.1ですが、問題無く動作しています。
WordPress：ページや記事ごとに個別のCSSやJavaScriptを追加する方法 | NxWorld
on 2012年3月1日
[...] WordPressの記事ごとに個別のCSS, JavaScriptを追加できるプラグイン -Custom CSS and JS | コリス [...]
jQueryでサンプルを作ってブログで動かすための制作環境をスムーズ化させました | LogicA
on 2012年5月5日
[...] WordPressの記事ごとに個別のCSS, JavaScriptを追加できるプラグイン -Custom CSS and JS | コリス [...]