カスタムフィールドを使用して投稿別に個別のCSSを適用する方法【WordPress】

それぞれの投稿に個別のcssやjsを適用したいときの対処方法。

もちろんidなどをつけてテーマのstyle.cssに記述しても反映されるのだが、全頁で読み込まれてしまい好ましくない。
よって個別のcssをつくり読み込む方法をメモ。

カスタムフィールドで読み込むファイルを指定します。
head内の読みこませたい箇所に下記を記述 。

<?php
 if (is_single()) {
  //カスタムフィールド「post_css」の値があればCSSファイル読み込み
  $post_css = get_post_meta( $post->ID , 'post_css' , true );
  if ($post_css !== "") {
   echo '<link href="' .get_bloginfo('template_directory') . '/css/' . $post_css .'.css" rel="stylesheet" type="text/css" />';
  }
  //カスタムフィールド「post_js」の値があればJSファイル読み込み
  $post_js = get_post_meta( $post->ID , 'post_js' , true );
  if ($post_js !== "") {
   echo '<script type="text/javascript" src="' .get_bloginfo('template_directory') . '/js/' . $post_js .'.js"></script>';
  }
 }
?>

テーマフォルダに「css」フォルダと「js」フォルダを作成し、その中に各ページ個別のcssファイル、jsファイルを入れる。
各投稿の新しいカスタムフィールドを加して、名前に「post_css」または「post_js」、値にファイル名を入れる。

例：
投稿ID35にpost35.css　をリンクしたい場合、post35.cssをテーマ内cssフォルダに入れる。
投稿編集でカスタムフィールドを新規追加し、名前に「post_css」、値に「post35」と入力する。

これでスタイルシートが読み込まれる。
また個別ページの他、ページにも適用したい場合は

if (is_single() || is_page()) {
...
}

といった感じで条件を変更すればOK。

プラグインなどもいくつかあるようでコリスさんでもご紹介されていますので、プラグイン希望の方は参照してみてください。
【coliss】WordPressの記事ごとに個別のCSS, JavaScriptを追加できるプラグイン -Custom CSS and JS

【参考記事】
【作業メモ】WordPressで投稿毎に特定のCSSやJavascriptを読み込む

関連記事

• WordPress管理画面のロゴを変える方法
• IE6だけ読み込ませない条件分岐
• スムーズにスライドするタブ型コンテンツ
• Flash（swf）をlightbox風に表示させたい【IE6対応】【FancyBox】【jQuery】
• プラグインを使わずにログイン画面をカスタマイズしよう【WordPress】
• 【wordpress】wordpressの外にあるhtmlに、カテゴリーAの新着リストを表示したい
• サイトを表示のリンクを新しいタブで開く【WordPress管理画面】
• WordPress のアドレス (URL)を誤って変更してしまったら…【WordPress】
• IEのバージョン別に読み込むCSSを変える+CSSハックメモ
• 特定の投稿（記事）の条件分岐方法【wordpress】