WordPressの記事、固定ページに個別のスタイルを適用する

2015年7月25日wordpress

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

 

特定の記事にだけスタイルシートを適用したくて調べたメモを残しておきます。

こちらのページを参考にしています。
WordPressのカスタムフィールドを用いて個別ページにCSS・JavaScriptコードを組み込むカスタマイズ方法

 

テーマファイルの編集

  1. 上記サイトの記事に書かれているソースを「head-custom-field.php」という名前で、WordPressで使用中のテーマ内フォルダに保存します。私の場合はテーマフォルダ内に「myfiles」というフォルダを作っていて、そこに保存しました。
  2. 「head-custom-field.php」が読み込まれるように、テーマ内フォルダの「header.php」の</head>の直前に以下のコードを追加します。

※「myfiles/」の部分は、「head-custom-field.php」を保存したフォルダなので、フォルダを作っていなければ不要です。
上記までで、記事を投稿する際に「head_custom」というカスタムフィールドを追加することで、ヘッダ内に個別のCSS(カスタムフィールドに記載した文字列)を追加できるようになります。

 

カスタムフィールドの使い方

  1. ダッシュボードの右上の「表示オプション」をクリックし、オプションの内容を表示します。
    wp_customfield_01
  2. 「カスタムフィールド」にチェックを付けます。
    wp_customfield_02
  3. 記事を編集する画面の下の方にカスタムフィールドを編集するエリアが表示されます。「新規追加」をクリックすると、カスタムフィールドの名前を入力できるようになります。
    wp_customfield_03
  4. カスタムフィールドの名前を「head_custom」とし、値欄にCSSの内容を記載します。
    wp_customfield_04
  5. 「カスタムフィールドを追加」をクリックすれば完了です。

参考にしたページではfooterに挿入する方法も紹介されていました。