web-dev-qa-db-ja.com

ページごとに異なるCSSファイルをロードする方法

いくつかのページがあります。それらのすべては異なるCSSリンクを持っています。 CSSリンクではなく、それらのページのhead要素内のすべての項目が同じです。 get_header()を使ってheadを含めることができるように、それらのhead要素をheader.phpにシフトする必要があります。

それではどのように私は別のページに別のCSSファイルを読み込むことができますか？私は約20の異なるページを持っているので、条件チェックの後にファイルをロードすることは私にとって少し面倒です。
this より良い方法はありますか。
可能であれば、カスタムプラグインを使用してこの問題を解決することをお勧めしますか？

ページ1： 

<html lang="en">
<head>
     <link rel="stylesheet" href="css/one.css" />
     .......
 </head>

ページ2： 

<html lang="en">
<head>
     <link rel="stylesheet" href="css/two.css" />
     .......
 </head>
pluginsplugin-developmentwp-enqueue-stylewp-head
1
unreleased

あなたのスタイルをキューに入れる関数の中で conditionals を使ってこれを達成することができます。

function wpdocs_theme_name_scripts() {
    wp_enqueue_style( 'global', get_stylesheet_uri() );

    if ( is_page(5) ) {
      wp_enqueue_style( 'page-five', get_stylesheet_uri() . '/page-five-styles.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

ページのマークアップと読み込むCSSファイルの両方をもっと細かく制御したい場合は、WordPressのテンプレート階層を使用してページテンプレートまたはpage-5.phpのようなより具体的なものを作成できます。これらのテンプレートファイル内からwp_enqueue_scriptsを呼び出すと、それらのページのアセットのみがロードされます。

3
Andrew

あなたがあなたのテンプレートでそれをしたいのなら、あなたは以下をすることができます。

Is_page関数の詳細については、こちらを参照してください。 https://developer.wordpress.org/reference/functions/is_page/

<html lang="en">
<head>
     <?php if ( is_page(1) ): //Change this number to id of page ?> 
     <link rel="stylesheet" href="css/one.css" />
     <?php endif; if ( is_page(2) ): //Change this number to id of page ?>
     <link rel="stylesheet" href="css/two.css" />
     <?php endif; ?>
 .......
</head>
1
Liam Stewart
<html lang="en">
    <head>
<?php global $post;
if( $post->ID == 346) { ?>
       <link rel="stylesheet" href="css/one.css" />
<?php } ?>
    elseif ( $post->ID == 342){ ?> 
         <link rel="stylesheet" href="css/two.css" />
         <?php } else{ //Change this number to id of page ?>
         <link rel="stylesheet" href="css/three.css" />
         <?php } ?>
     .......
    </head>
0
Dharmishtha Patel