質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.99%

WordPressのfunctions.phpでの記事毎に別々のCSS読み込み

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 75

hirokuro900

score 6

functions.phpの条件分岐を少しスッキリとさせたいです。
現在はWordPressのfunctions.phpで固定ページごとに違う種類のcssをif文で読み込んでいます。

function pages_styles() {
  if ( is_page('aaa')){
    wp_enqueue_style( 'aaa-style', get_template_directory_uri() . '/css/aaa.css', array());
  }
  if ( is_page('bbb')){
    wp_enqueue_style( 'bbb-style', get_template_directory_uri() . '/css/bbb.css', array());
  }
}
add_action( 'wp_enqueue_scripts', 'pages_styles' );

この方法だとうまくいくのですが、switch文などを使うとうまくいきません..

function pages_styles() {
  switch ( is_page($slug)) {
    case $slug = 'aaa':
      wp_enqueue_style( 'aaa-style', get_template_directory_uri() . '/css/aaa.css', array());
      break;

    case $slug = 'bbb':
      wp_enqueue_style( 'bbb-style', get_template_directory_uri() . '/css/bbb.css', array());
      break;

    default:
      wp_enqueue_style( 'style', get_template_directory_uri() . '/css/style.css', array());
      break;
  }
}
add_action( 'wp_enqueue_scripts', 'pages_styles' );


このswitch文だとどのページでもaaa.cssを読み込んでしまいます。
予定の動作は、
・aaaのページではaaaのみ
・bbbのページではbbbのみ
を読み込んでもらう予定でした。

他の方法でも良いのですが個別CSSの読み込みをもう少しスッキリと記述する方法は
ありませんでしょうか?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+3

switchの使い方が間違ってます

if(is_page($slug)){
 switch ($slug) {
   case 'aaa':....;break;
   case 'bbb':....;break;
   default:.....;
 }
}

シンプルにするなら

if(in_array($slug,['aaa','bbb'],true)){
   wp_enqueue_style( $slug.'-style', get_template_directory_uri() . '/css/'.$slug.'.css', []);
}
else{
  ...
}

柔軟に スラッグに対応するcssがあれば読み込み

if(file_exists(get_template_directory().'/css/'.$slug.'.css')){
  wp_enqueue_style( $slug.'-style', get_template_directory_uri() . '/css/'.$slug.'.css', []);
}
else{
  ....
}

追記

もしかして・・・

switch(true){
  case ($hoge=='fuga'):...;break;
  case ($hoge=='piyo'):...;break;
 ...
}

みたいなTips使おうとしてましたかね

とすればswitchの使い方が間違っているではなく
同値判定は=でなく==
is_page($slug)がfalseだったらどうするの
ってところが問題ですね

しかしこのTipsの使いどころではないとも思いますが


switchの使い方が違うってとこだけ言ってましたが
そもそも$slugって変数はどっから湧いて出たのか
って問題もあります

多分

$slug=$GLOBALS['post']->post_name;

みたいなコードが抜けてます

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/12/03 20:09

    貴重なご回答ありがとうございますm(_ _)m

    現在色々検証をしているのですが、
    function pages_styles() {
    if (is_page($slug)) {
    if(in_array($slug,['aaa,'bbb'],true)){
    wp_enqueue_style( $slug.'-style', get_template_directory_uri() . '/css/'.$slug.'.css', []);
    }
    }
    }
    add_action( 'wp_enqueue_scripts', 'pages_styles' );



    function pages_styles() {
    if(in_array($slug,['aaa','bbb'],true)){
    wp_enqueue_style( $slug.'-style', get_template_directory_uri() . '/css/'.$slug.'.css', []);
    }

    add_action( 'wp_enqueue_scripts', 'pages_styles' );
    など色々試しているのですがCSSは読み込まれないです..

    エラーにはなっていなくて、cssのファイル名などは確認しているので記述ミスはないと思うのですが、他にも何か記述が必要なのでしょうか?

    キャンセル

  • 2019/12/03 20:51

    お恥ずかしながら、何も定義せずにいきなりifのところから使い初めていました..すみません。

    いただいた情報を元に調べながら頑張ってみます!
    ありがとうございますm(_ _)m

    キャンセル

  • 2019/12/03 21:19

    貴重なお知恵を貸していただきとても感謝しています!本当にありがとうございますm(_ _)m
    僕一人ではとてもじゃないですが、見つけ出す事はできませんでした。

    初心者の方で困っている方がいらっしゃるかもしれないので今回の「特定の固定ページに特定のCSSを読み込む方法」を記載させていだきます。

    //functions.php(親テーマを直接編集していますので子テーマの場合はget_template_directory_uri()が変わります。)
    function page_styles() {
    //スラッグを定義
    $slug=$GLOBALS['post']->post_name;
    //もし固定ページだったら
    if (is_page($slug)) {
    switch ($slug) {
    case 'AAA': //スラッグ名
    wp_enqueue_style( $slug.'-style', get_template_directory_uri() . '/css/'.$slug.'.css?' . date("Y-m-d-His", filemtime( get_template_directory() . '/css/'.$slug.'.css')), array());
    // AAA固定ページ専用のJS読み込み
    wp_enqueue_script( $slug.'-js', get_template_directory_uri() . '/js/'.$slug.'.js' ,array(), '1.0', true);
    break;
    case 'BBB':
    wp_enqueue_style( $slug.'-style', get_template_directory_uri() . '/library/css/'.$slug.'.css?' . date("Y-m-d-His", filemtime( get_template_directory() . '/library/css/'.$slug.'.css')), array());
    break;
    }
    }
    add_action( 'wp_enqueue_scripts', 'page_styles' );

    cssファイル名に毎回日付を付け足してスーパーリロード対策をしています。
    jsもオリジナルのファイルを読み込んでいます。

    ご回答をしてくださった先輩方にとても感謝しています!ありがとうございました。

    キャンセル

+1

switchの使い方が間違っています。
switchでやるのであれば、現在のページのスラッグを取得、それをもとにcaseを作っていきます。

switch ($i) {
    case "apple":
        echo "i is apple";
        break;
    case "bar":
        echo "i is bar";
        break;
    case "cake":
        echo "i is cake";
        break;
}


例えばこれなら、$iにapple、bar、cakeのいずれかが入る前提です。
同じようにswitch()に開いているページのスラッグ名を入れ、caseにそれぞれのパターンを入れれば実現可能です。


別方向からのアプローチとして、カスタムフィールドを使う方法もあるようです。
WordPress 固定ページごとにCSSを読み込ませる方法

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる