WordPress PR

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

記事内に商品プロモーションを含む場合があります

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

あるときカスタム投稿の記事1つ1つに別々の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
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。 ココナラでもお仕事募集しております。 HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。