カスタム投稿で記事のみに個別のCSSを適用する
あるときカスタム投稿の記事１つ１つに別々のCSSを使用しないといけない場面がありました。
固定ページだと個別のIDでヘッダーやfunctions.phpにif文で割り振ればいいですが、カスタム投稿や投稿のsingle.phpに個別指定はなかなか見つかりませんでした。
phpはあまり詳しくないので、もっと簡単な方法やいい方法があるのかもしれませんが、今回これで実装できたのでメモとして残しておきます。
また実装にはカスタムフィールドも使用しました。
実装方法
①カスタムフィールドでカスタム投稿になんのCSSを指定するのか入力欄を作る。
今回は「Smart Custom Fields」というプラグインで作成しました。
※2023年現在「Smart Custom Fields」は移行を推奨されています。新規で開発されている方は他のプラグインやfunctions.phpなどで実装したほうが良いです。
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を読み込めるようになります。
WordPressオリジナルテーマを作れるようになるための記事を制作しています！
随時更新しているので、ぜひ覗いてみてください！！
WordPressオリジナルテーマの作り方！0から作れるようになるまで
ABOUT ME
