Wordpress 中每页的自定义 CSS答案

【问题标题】：Custom CSS per page in WordpressWordpress 中每页的自定义 CSS
【发布时间】：2011-04-01 04:51:48
【问题描述】：

大家早上好，

我为我们网站中的某些页面创建了不同的背景和一些其他图像。目前，以下代码与我们网站上的“儿童”页面配合良好。

<body<?php if ( is_page(array('kids'))) {
echo ' class="kids" '; } ?>>

我正在试图弄清楚如何将相同的 CSS 添加到儿童页面“下”的其他页面。所以如果你去kids/block-party，我将如何将它添加到代码中以调用那个特殊的CSS？

我已经尝试了以下

<body<?php if ( is_page(array('kids, kids/block-party'))) {
echo ' class="kids" '; } ?>>

逗号似乎由于某种原因没有注册。

这是一个 wordpress 运行网站。

谢谢

【问题讨论】：

标签： css wordpress

【解决方案1】：

另一种选择是简单地替换

<body>

与

<body <?php body_class(); ?>>

然后你可以通过 css 来定位它，如下所示：

body.page-id-2, body.parent-pageid-2 { background-color: red; }

其中 ID 是您定位的页面/父页面的 ID。这将使您的模板保持逻辑清晰，并允许您使用当前方法使用的相同自定义选项。

【讨论】：

【解决方案2】：

发现我需要他们周围的“ ”

<body<?php if ( is_page(array('newsletter-1', 'newsletter-2', 'newsletter-3'))) { echo '   class="myclass" '; } ?>>

【讨论】：

【解决方案3】：

注意： 我知道当前的 3 个答案是 WP 解决此问题的常见解决方案，但实际上，我讨厌它。它会产生臃肿的 HTML 和单一的 CSS :/

答案： 您可以使用分配给任意数量页面的模板文件来添加特定的 CSS/Javascript，如下所示：

<?php
function my_scripts_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
    wp_enqueue_script( 'jquery' );
}    

add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

来源：http://codex.wordpress.org/Function_Reference/wp_enqueue_script

【讨论】：

这是一个很好的答案。使用这种方法，您不会加载大量无用的 css 代码，仅用于其他页面。您将能够准备仅针对此特定页面的简约 css。谷歌“css coverage”了解更多信息。

【解决方案4】：

我可能想多了，但这是我的解决方案。

下面的脚本会自动获取特定父页面的所有子页面并打印您需要的类。如果您不想手动更新子页面列表，此解决方案非常有用。

这在你的 header.php 文件中：

<?php 
    //set page id 
            $page_id = '98';

           //get page's children 
    $children = get_pages('child_of='.$page_id);
    foreach($children as $child){
       $children_ids = $child->ID;
    }

    if(is_page($page_id) || is_page($children_ids)){
       echo 'class="kids';
    }

谢谢，希望对你有帮助！

【讨论】：