【WP】全投稿ページに自作CSSをfunctions.phpで読み込ませたい

HTMLサイトをWP化する練習をしていますが、どうしても１箇所、CSSの反映がうまくいかず、お知恵を貸していただけないでしょうか。

php
1<!--functions.php-->
2<?php 
3function page_script() {
4    if ( is_page( 'page1' ) ) {
5      wp_enqueue_style( 'page1',get_template_directory_uri() . '/css/page1.css' );
6    }
7    else if ( is_page( 'page2' ) ) {
8      wp_enqueue_style( 'page2',get_template_directory_uri() . '/css/page2.css' );
9    }   
10    else if ( is_page( 'page3' ) ) {  <!--archive.php-->
11      wp_enqueue_style( 'page3',get_template_directory_uri() . '/css/page3.css' );
12    }     
13    else if ( is_single() ) {  <!--single.php-->
14      wp_enqueue_style( 'page4',get_template_directory_uri() . '/css/page4.css' );
15    }  
16}
17add_action( 'wp_enqueue_scripts', 'page_script' ); 
18?>
19

①functions.phpでページごとに専用CSSの読み込みを指示しています。
②個別ページ（archive.php）に投稿ページ（single.php）の一覧を表示させていて、個別ページには「page3.css」のスタイルが適用・正しく表示されています。
③個別ページから投稿ページに飛べますが、投稿ページに適用しているはずの「page4.css」の反映順が後になってしまっているため正しく表示されません。検証ツールで確認すると、reset.cssが一番最初に適用されているようです。
↓これが影響しているのかなと思いましたが、他のページはそれぞれの専用CSSが最初に反映されています。

php
1<!--header.php-->
2<head>
3    <!--自作CSS-->
4    <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri();?>/css/reset.css">
5    <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri();?>/css/common.css">
6    <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri();?>/css/index.css">
7</head>
8

試してみたこと

読み込み順を変えようとheader.php内の自作CSSを削除し、functions.phpの最初や最後に追加してみたり、if内に組み込んだりしてみましたがレイアウトが崩れてしまいました。

php
1<!--functions.php-->
2<?php 
3function page_script() {
4    wp_enqueue_style( 'reset', get_template_directory_uri() . '/css/reset.css' );
5    wp_enqueue_style( 'common', get_template_directory_uri() . '/css/common.css' );
6    wp_enqueue_style( 'index', get_template_directory_uri() . '/css/index.css' );
7    if ( is_page( 'page1'  ~...

きちんと表示されているページとの差は、
・個別ページ VS 投稿ページ
・functions.phpis-page VS is-single
かなと思い、それをもとに調べながらやってみましたが解決できず何か気づくきっかけが見つかればと思いこちらに質問させていただきました。

行動規範の内容に同意します

回答1件

自己解決

<?php 
function register_style() {
  wp_register_style('common', get_bloginfo('template_directory').'/css/common.css');
  wp_register_style('home', get_bloginfo('template_directory').'/css/index.css');
  wp_register_style('about', get_bloginfo('template_directory').'/css/about.css');
}
 
function plus_stylesheet() {
 
     register_style();                        
     if (is_home()){
        wp_enqueue_style('home');
     }          
     else if (is_page( 'about' )) {
        wp_enqueue_style('about');
     }
}
add_action('wp_print_styles', 'plus_stylesheet');
?>

投稿2021/11/21 11:20

gmgmynt

総合スコア3