【WP】指定のカスタム投稿で記事のみに個別のCSSを適用する方法

カスタム投稿で記事のみに個別のCSSを適用する

あるときカスタム投稿の記事1つ1つに別々のCSSを使用しないといけない場面がありました。
固定ページだと個別のIDでヘッダーにif文で割り振ればいいですが、カスタム投稿や投稿のsingle.phpに個別指定はなかなか見つかりませんでした。
phpはあまり詳しくないのでもっと簡単な方法やいい方法があるのかもしれませんが、今回これで実装できたのでメモとして残しておきます。
また実装にはカスタムフィールドも使用しました。

 

実装方法

①カスタムフィールドでカスタム投稿になんのCSSを指定するのか入力欄を作る。
今回は「Smart Custom Fields」というプラグインで作成しました。
CSS名を入力できるように作成します。

 

②使用するCSSをFTPでテーマ内にアップロード

 

③header.phpのheadに下記を追加

<?php if( is_single() ) : ?>
<?php if($cf_sample = SCF::get('カスタムフィールド名')): ?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/common/css/<?php $media_id = SCF::get( 'カスタムフィールド名' ); ?><?php echo esc_html( $media_id ); ?>.css">
<?php endif; ?>
<?php endif; ?>

※リンク先はテーマに合わせて変更してください。

 

これで個別記事内でカスタムフィールド内にCSSを指定した時のみそのCSSを読み込めるようになります。

コメント

タイトルとURLをコピーしました