WordPressで記事個別や固定ページ単体にCSS・JavaScriptを追加する(Custom CSS and JS)

この記事は約4分で読めます。

  • LINEで送る

個別CSS・JavaScript設定

WordPressで記事を書いていると「この記事だけ見出し変えたい」や
「この固定ページだけソートするJavaScriptを追加したい」ことがあります。
そんな時に、全てのページで使用されているcssファイルやJavaScriptファイルに追加していると、
それだけでファイルサイズが膨大になってしまいます。

そこで、ある記事単体・固定ページ単体でCSS・JavaScriptを追加する方法を説明します。

これを使うことで、例えば「見出しタグを紹介するページ」や「フォントを紹介する」ページ(デモページ)なども
そのページ固有のスタイルとして設定でき、他の記事や個別ページには影響せずに実現できます。

方法は、プラグインを利用する簡単導入バージョンとプラグインを使わずに独自実装するオリジナルバージョンがあります。

最近は更新されていないプラグインですが、
現時点でも使えますのでプログラムの変更に自信のない方は今回の記事を参考にしてください。

オリジナルバージョンは以下の記事をどうぞ。
WordPressで記事個別や固定ページ単体にCSS・JavaScriptを追加する(プラグインなし)

Custom CSS and JSを導入して個別対応

インストールして有効化するだけで使用できます。

インストール

Custom CSS and JS

「プラグイン > 新規追加」から「Custom CSS and JS」を検索します。
直接ダウンロードは以下のページから可能です。
WordPress › Custom CSS and JS « WordPress Plugins

Custom CSS and JS

Custom CSS and JS

「Custom CSS and JS」を今すぐインストールし、
インストール完了後にプラグインを有効化します。

これで、「Custom CSS and JS」のインストール、および初期設定は完了です。

個別のCSSファイルを追加する

Custom CSS and JS

まずは、記事投稿ページを開きます(固定ページでも構いません)。
そこで、「表示オプション > カスタムフィールド」にチェックを入れると、
記事投稿ボックスの下に、カスタムフィールドボックスが表示されます。

Custom CSS and JS

Custom CSS and JS

表示カスタムフィールドの「新規作成」をクリックし、
「名前」と「値」を以下のように設定し、「カスタムフィールドを追加」をクリックします。

  • 名前:custom_css
  • 値:/custom.css ※cssファイルが設置される場所とCSSファイルの名前(パス)です。

これで記事へのCSSファイル追加が完了しました。
記事ページのHTMLは以下のようにCSSが追加されています。

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

この場合、当然ですが「custom.css」がないと意味がありません。
いくつかの記事にピンポイントでスタイルを追加したい場合などには、
予めCSSファイルを準備しておき、該当記事にカスタムフィールドで適用しましょう。

賢威の場合には「wp-content/themes/keni61_wp_corp_131028」に
他のCSSファイルが置いてあるので、同じ場所を指定すればCSSファイルをまとめて管理できます。
(「keni61_wp_corp_131028」はテンプレートによって変わる)

個別のスタイルを直接追加する

Custom CSS and JS

次に、直接スタイルを指定する方法を説明します。
CSSファイルを追加した時と同様に、カスタムフィールドを以下のように設定します。
追加後に「カスタムフィールドを追加」のクリックを忘れないでください。

  • 名前:custom_css_code
  • 値:追加したいスタイル

これで記事へのスタイル追加が完了しました。
記事ページのHTMLは以下のようにCSSが追加されています。

<style type="text/css">
/* <![CDATA[ */
body{font-family: Verdana, Arial, Helvetica,  'MS Pゴシック', sans-serif;}
/* ]]> */
</style>

HTMLにスタイルが直接追加されて、HTMLのサイズが大きくなりますので、
あまり乱用はせず、本当に必要な場合に利用してください。

JavaScriptも同様の追加

Custom CSS and JS

JavaScriptの追加方法もCSSと同様です。

  • JavaScriptファイル追加:名前に「custom_js」、値にJavaScriptファイルのパス
  • JavaScript直接追加:名前に「custom_js_code」、値に追加したいJavaScriptコード

それぞれ、HTMLには以下のように追加されます。

<script type="text/javascript" src="/custom.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
alert('ようこそ');/* ]]> */
</script>

使い勝手がよいプラグインなので、個別にCSSやJavaScriptを追加したい方は試してください。

  • LINEで送る

“WordPressで記事個別や固定ページ単体にCSS・JavaScriptを追加する(Custom CSS and JS)” への2件のフィードバック

  1. […] 参考WordPressで記事個別や固定ページ単体にCSS・JavaScriptを追加する […]

  2. […] 知りました… 下記ページにプラグインの使い方が記載されています。プラグインの方が断然楽ちんです…。 WordPressで記事個別や固定ページ単体にCSS・JavaScriptを追加する(Custom CSS and JS) […]

コメントを残す

このページの先頭へ