SOTA-JP.COM

書評、WordPress、アフィリエイト、米国株投資

記事ごとに異なるCSSを適用する方法。WordPressのカスタムフィールドを活用する。

投稿日:2018年6月22日 更新日:

記事別CSS

ワードプレスで、記事ごとに個別のCSSを適用する方法を紹介します。

サイトを運営していると、1つの記事でしか適用しないCSSって結構ありますよね。

そういうコードをstyle.cssとは別に管理することで、CSSファイルの容量削減につながります。

特にAMPページの場合はCSSファイルの容量の上限が50キロバイトに制限されているので、別管理するメリットが大きいと思います。

具体的な方法としては、カスタムフィールドを使います。

「css」という名前のカスタムフィールドを用意して、そこに個別のCSSコードを記入する。

プログラムの側で記事を表示するたびにカスタムフィールドをチェックして、「css」という名前でコードが保存されていれば、それを表示するという流れになります。

functions.phpに次のコードを追加します。

function stjp_css_load(){
  $css = '';
  if(is_single() || is_page()){
    $cf = get_post_meta(get_the_ID(), 'css', false);
    if(!empty($cf)){
      foreach($cf as $val){
        $css .= $val;
      }
    }
  }
  return $css;
}

そして、header.phpのCSSの表示エリアに例えば次のコードを書けば完了です。

<?php echo stjp_css_load(); ?>

「css」というカスタムフィールドに書いたコードが記事に反映されます。

簡単ですが便利なのでどうぞ。

ちなみに、CSSの容量削減については、こちらの記事にも書いています。
合わせてご覧ください。

外部CSSを圧縮してインラインに読み込む方法。WordPressサイトの高速化。