記事別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;
}
$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サイトの高速化。」
スポンサーリンク