WordPress PHP：如何为每个页面应用不同的 CSS 样式？

Question

我是 Web 开发的新手，并且一直在使用 HTML 和 CSS（+ 一点点 Javascript）开发我的第一个 WordPress 网站。我的网站对每个 HTML 页面都有不同的 CSS 样式表，但我似乎无法将多个表单正确链接到我的 WordPress 网站。我在本地 wp 主题位置中有一个文件夹，专门用于 CSS 文件，每个都标记为 pagename_style.css。

我相当肯定这是我的functions.php 中缺少的东西，我猜我必须为每个网站页面使用条件，但我很难弄清楚它是什么样子的。我在互联网上搜索过类似的情况，但奇怪的是什么也没找到（也许是因为答案很明显我错过了）。

在一个不太相关的说明中，我的 Google 字体被完全忽略了，当它们之前可以正常链接到我的 html 时。有什么想法，也许这是我的语法？

以下是我尝试过的，如果有帮助的话。非常感谢提前t-t

function my_setup() {
    wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300&family=Press+Start+2P&family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300;1,400&display=swap');
   
    wp_enqueue_style('home', get_template_directory_uri() . '/css/home_style.css', microtime());

    wp_enqueue_style('about', get_template_directory_uri() . '/css/about_style.css', microtime());

    wp_enqueue_style('diary', get_template_directory_uri() . '/css/diary_style.css', microtime());

    wp_enqueue_style('post', get_template_directory_uri() . '/css/post_style.css', microtime());

    wp_enqueue_style('work', get_template_directory_uri() . '/css/work_style.css', microtime());

    wp_enqueue_style('web-dev', get_template_directory_uri() . '/css/web-dev_style.css', microtime());

    wp_enqueue_style('storyteller', get_template_directory_uri() . '/css/storyteller_style.css', microtime());

    wp_enqueue_style('fashion', get_template_directory_uri() . '/css/fashion_style.css', microtime());

    wp_enqueue_style('contact', get_template_directory_uri() . '/css/contact_style.css', microtime());

    if(is_page('home')) {
        wp_enqueue_style('home');
    }
    
    if(is_page('about')) {
        wp_enqueue_style('/css/about_style.css');
    }
}

add_action('wp_enqueue_scripts', 'my_setup');

Answer 1

如果你 wp_enqueue_style()，就像你在开始时所做的那样，样式已经在每个页面上全局加载。 如果你想对某个页面做一些条件，你就可以开始了。 如果您想了解我们的更多信息，请阅读 WP 的官方文章及其著名​​的 codex website。

function my_setup() {
    wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300&family=Press+Start+2P&family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300;1,400&display=swap');
  

    if(is_page('home')) {
    wp_enqueue_style('home', get_template_directory_uri() . '/css/home_style.css');
    }
    
    if(is_page('about')) {
    wp_enqueue_style('about', get_template_directory_uri() . '/css/about_style.css');
    }
    // etc

}

add_action('wp_enqueue_scripts', 'my_setup');

Answer 2

看看documentation for wp_enqueue_style()。 $dependency 参数中有 microtime()。这意味着它们不会被加载，因为没有加载带有句柄 1234567891011（或任何当前时间）的样式，因为它不存在。

如果我是你，我会重新评估每个页面是否需要一个完全独立的 CSS 文件。但话虽如此，我认为你也让事情变得复杂了一点。您可以使用wp_register_style() 准备好文件，然后将它们排入适当的页面，但wp_enqueue_style 实际上注册并 将它们排入队列。所以在你的例子中，如果他们正在加载，他们都会加载。

由于您有一个方便的命名约定 post_name = post_name_style.css，我认为您最好查看当前页面名称并加载该 CSS 文件。

另外请注意，不要使用microtime() 作为版本，因为它会阻止任何和所有缓存。最好的办法是使用filemtime() 和get_stylesheet_directory() 来获取文件最后一次修改为版本的时间。这意味着它会在您每次更改时刷新，但在此之前一直保持缓存（当然，基于您的服务器/浏览器设置）

最后，get_template_[…] 和 get_stylesheet_[…] 函数之间存在差异。通常，最好在主题中使用get_stylesheet_[…]，因为它引用当前活动的主题，而get_template_[…] 将引用父主题（如果有的话）（这也可能是您问题的一部分，具体取决于您的结构是什么样的)

（回复：谷歌，它应该可以工作？也许可以尝试更换手柄）

再次，我会重新评估对单个 CSS 文件的需求，但是唉，鉴于您当前的代码，只要您保留 post_name = @，执行以下类似操作可能是最简单/最可维护的987654341@结构：

function my_setup() {
    wp_enqueue_style('google-fonts-notosanjp-press-start-2p-roboto', 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300&family=Press+Start+2P&family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300;1,400&display=swap');
    
    $slug = get_post_field( 'post_name', get_the_ID() ); // 'home', 'about', 'web-dev', etc.
    if( file_exists( get_stylesheet_directory()."/css/{$slug}_style.css" ) ){
        wp_enqueue_style( $slug, get_stylesheet_directory_uri()."/css/{$slug}_style.css", [], filemtime( get_stylesheet_directory()."/css/{$slug}_style.css" ) );
    }
}
add_action('wp_enqueue_scripts', 'my_setup'); 

Answer 3

感谢那些回答的人！我实际上找到了一个更简单的解决方案，即在每个单独的 PHP 页面中包含相应的 CSS 文件。我是从另一个SO post 间接发现的。将来我会尽可能地坚持一个 css 文件，这是肯定的。下面是我所做的一个例子，以防它帮助其他人：

<style>
<?php include 'CSS/single_style.css'; ?>
</style>
//where single_style is the file name