wordpressで記事ごとにcssを指定できるプラグイン「Custom CSS and JS」

   2017年5月12日

年明けはやっぱり案件が混んできて忙しいですね。
ブログの日にちがあいてしまった自分への言い訳をしながら
はじめます。(笑)

今回はwordpressで記事ごとに
cssを指定できるプラグイン「Custom CSS and JS」をご紹介します。

以下の「共通設定」をしたあと、順番に

  • 個別のcssファイルを読み込む
  • 個別にcssを直接適用させる
  • JSを適用させる

と、説明していきます。
共通設定は、どちらの方法をする場合でも必要です。

Custom CSS and JSをインストール

プラグインを追加-‹-Web模様-—-WordPress

まず、ダッシュボードのプラグインから新規追加を選択し
「Custom CSS and JS」で検索します。

「今すぐインストール」をクリックでインストールが始まりますので
終わったら「有効化」にして完了です。

共通設定

Custom CSS and JSはカスタムフィールドを使用します。

新規投稿を追加-‹-Web模様-—-WordPress

投稿画面(固定ページでもOK)を開いて、「表示オプション」を選択。
「表示する項目」の「カスタムフィールド」にチェックを入れましょう。

新規投稿を追加2-‹-Web模様-—-WordPress

これで「カスタムフィールド」が表示されます。

新規投稿を追加3-‹-Web模様-—-WordPress

個別のcssファイルを読み込む

カスタムフィールドの「新規追加」をクリック。

そうすると名前と値を入力できるようになるので、
名前: custom_css
値: /xxx.css ※cssファイルを設置する場所とcssファイルの名前を入力します

入力したら、「カスタムフィールドを追加」をクリックで
cssを読み込むためのカスタムフィールドができました。

記事のソースには


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

と「xxx.css」を読み込むようになりますので、指定したcssファイルにcssを記述すれば
スタイルが適用されます。

個別にcssを直接適用させる

ひとつの投稿や固定ページにのみcssを反映させたい場合もありますよね。
この場合は、cssを読み込ませてわざわざcssファイルを作成して…というのは
ちょっと面倒ですよね。。

なので、ここでは直接cssを適用させる方法をご説明します。

カスタムフィールドの「新規追加」をクリック。
名前: custom_css_code
値: ここにcssを直接記述していってOKです

JSを指定したい場合

上記で説明してきた、cssファイルを読み込む方法・直接cssを記述する方法と同じように
名前・値に入力すればOK。

名前
jsファイルを読み込む custom_js ファイルまでのパスを入力
jsを直接入力 custom_js_code 値にJavaScriptを直接入力

最後に

とっても便利なプラグインですが、アップデートが止まっているようです…
自己責任でご利用ください。

ちなみにこのブログはwordpress4.4.1なので、このバージョンまではひとまずOKかなと思います。

web tipsの記事