Home>

I want to make the conditional branch of functions.php a little cleaner.
Currently, in WordPress functions.php, different types of css are loaded as if statements for each fixed page.

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');

This method works, but it doesn't work if you use a switch statement.

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');


This switch statement will read aaa.css on any page.
The planned behavior is
・ Only aaa on the aaa page
・ For bbb pages, only bbb
Was supposed to be loaded.

Although other methods are acceptable, how to write individual CSS load a little more clearly
Isn't it?

  • Answer # 1

    Incorrect usage of switch

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

    For simplicity

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

    Flexibly load css that supports slug

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

    Appendix

    Maybe ...

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

    Did you try to use tips like

    isn't the wrong way to use switch
    Equivalency determination is not ===
    What if is_page ($slug) is false
    Is the problem

    But I don't think you can use this tip


    I just told you that the switch is used differently
    In the first place, where did the variable $slug spring from?

    Maybe

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

    like code is missing

  • Answer # 2

    The usage of switch is wrong.
    If you do with switch, get the slug of the current page and make a case based on it.

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


    For example, this assumes that apple, bar, or cake is included in $i.
    In the same way, it can be realized by putting the slug name of the open page in switch () and putting each pattern in case.


    Another approach is to use custom fields.
    How to load CSS for each WordPress fixed page

Related articles