在逐页基础上用自定义CSS覆盖所有CSS

Question

我有一个7页的静态网站，我建立了一个网页建设者的主题，子主题和一些插件。我想覆盖所有CSS (主题和插件)与自定义CSS样式表的一个页面的基础上。

我该怎么做？我能用functions.php和我的子主题来完成这个任务吗？请在你的回答明确--我还在学习Wordpress！

更多信息:如果您好奇的话，我使用了一个方便的工具-- purifycss.online --删除未使用的CSS，并为每个页面保存CSS样式表。我很想删除所有其他CSS，并将它们应用到适当的页面中。PurifyCSS链接到部分描述此过程的博客帖子。然而，文章描述了如何将每个样式表分配给页面类型，而不是页面类型。我试图根据我的需要修改该方法，但失败了。

Answer 1

您可以将页面类型条件替换为使用ID或match替换为。

https://www.webperftools.com/blog/how-to-remove-unused-css-in-wordpress/

函数enqueue_pure_styles() { $suffix = ''；if (is_front_page()) { $suffix =‘.首页’；} if (is_page()) { $suffix =‘..pages’；} if (is_single()) { $suffix =‘..blog’；} if (is_archive()) { $suffix =‘..blog’；}‘纯样式’，get_stylesheet_directory_uri().'/styles'.$suffix.'.pure.css')；}

因此，上面来自参考博客的代码可以修改为按页面检查，.You可以为每个具有名称的页面保存样式表

styles.page1.pure.css, styles.page2.pure.css, etc.

然后，您可以使用下面的代码来根据当前页面段塞对样式表进行排队。

function enqueue_pure_styles() {
    $valid_page_slugs = ['page1', 'page2', 'page3', 'page4' ....]; //Just replace wiht you page slugs.
    global $post;

    $post_slug = $post->post_name;

    //Bail early if page is not in the list. Or enqueue some default stylesheet
    if (!in_array($post_slug, $valid_page_slugs)) {
      return;
    }

    wp_enqueue_style('pure-styles', get_stylesheet_directory_uri().'/styles.'.$post_slug.'.pure.css');
}

你也可以有一些默认的css，以防子弹不匹配。

Answer 2

您可以在不使用任何PHP函数引用body类的情况下应用CSS，其中页面id为：

body.page-id-48>header>div{}

但是，您可能需要使用完整的选择器，以便有更多的特定选择器。

body.page-template-default.page.page-id-182 div#page.site header#masthead.site-header>div{}

或者，如果仍然希望使用PHP函数，请检索页面url以了解必须应用哪些CSS：

$page_id = get_permalink( get_the_ID() );
if($page_id==48){
    echo "div{width:100%;}</<style>";}
else{
}</code></pre><div>或使用：</div><pre><code>global $wp;
echo home_url( $wp->request );</code></pre><div>获取页面段塞</div>