投稿ページのみで適用させる方法ってない？
投稿ページを作成していて、なんだか寂しい感じだから装飾しよ～としてカスタムCSSに記述しようと思ったけれども、フロントページの装飾にまで影響してしまっては困る・・と考えたことはありませんか？
意図しない箇所まで変化してしまうことはサイトの運営において避けたいところではありますので、範囲を小さくしてカスタムＣＳＳを適用させたいときに便利な方法があります。
[speech_balloon_left1 user_image_url=”https://notebook.starrylabo.com/wp-content/uploads/2022/01/顔２.png” user_name=””]カスタムCSS書いたら変更したくないトップページも変わっちゃったぞ・・[/speech_balloon_left1]
例えば『h1』タグに対して装飾したいとして、ただh1にそのままCSSを書いてしまうと、テーマで使われているh1にclass名がなければ全部に適用されてしまうので、サイト全体の装飾をする場合でなければ意図しない箇所が変わってしまい「なんだこりゃ」となってしまうことがあります。
そんなとき投稿ページのみに適用させることができれば便利ですね。
投稿ページのみにCSSを適用させよう
WordPressの投稿ページにだけカスタムCSSを適用する方法は、下記のコードのCSSの部分を任意のものに変更して管理画面の「外観」→「テーマの編集」→「functions.php」に記述していきましょう！
/**
* 投稿ページにのみあるcssを適用させる
*/
function custom_inline_style() {
if( is_single() ) {
// CSSスタイルファイルをキューに追加しています
wp_register_style( 'style' , false );
wp_enqueue_style( 'style' );
//追加するCSS
$css = "h1 {
padding: 0.4em 0.5em;
color: #494949;
background: #f4f4f4;
border-left: solid 5px #7db4e6;
border-bottom: solid 3px #d7d7d7;
}";
// インラインにCSSの内容を出力
wp_add_inline_style( 'style', $css );
}
}
add_action( 'wp_enqueue_scripts', 'custom_inline_style' );書き込んだら保存を押して、投稿ページを確認してみましょう。
投稿ページにのみCSSが適用されて他の部分においては適用されていないのが分かると思います。
解説
is_single()関数というのは添付ファイルや固定ページを除く個別の投稿記事（シングルページ）を表示しているかどうかを判別してくれる関数です。
if( is_single() ) なのでこちらはこのページ投稿ページなら下記コードを実行するよという記述になります。
WordPressでスタイルシートを読み込むには、<head>に<link>タグを直接書き込むのではなく、wp_enqueue_style()という関数を使用します。
テーマのスタイルシート、style.cssを読み込むには、wp_enqueue_style()という関数を使用します。
WordPress関数
wp_enqueue_style( $handle, $src, $deps, $ver, $media )
WordPressで使用するスタイルをキューに追加します。すでにwp_register_style()を使って登録している場合は、ハンドル名を渡すだけでキューへ追加されます。
$handle | スタイルの名前。すでに登録済みの名前を入れると、新しいスタイルはキューへ追加されないので注意 |
|---|---|
$src | スタイルシートまでのURL |
$deps | このスタイルを読み込む前に読み込むべきスタイルの名前（$handle）を配列形式で渡す。初期値はarray() |
$ver | バージョン番号を指定できる。ブラウザのキャッシュにかかわらず、新規スタイルを確実に読み込ませる場合などに使用できる。初期値はfalse |
$media | <link>の目media属性を指定できる。初期値は'all' |
まとめ
[speech_balloon_left1 user_image_url=”https://notebook.starrylabo.com/wp-content/uploads/2022/01/顔-1.png” user_name=””]投稿ページにだけ見出しを装飾できたよ[/speech_balloon_left1]
投稿ページにだけカスタムCSSを適用させたい場合は使ってみてくださいね
No responses yet