CSS Styling a specific page

时间:2019-11-06 作者:jade newport

我熟悉通过添加类在WordPress上设置特定页面的样式

.page-id-123
在样式化元素前面。然而,这似乎不适用于“子页面”(抱歉,不知道它们叫什么),当页面后面有一个特定的标记(?)已添加。

示例:

URL:wordpressweb。com/我的帐户CSS:.page-id-123 .header { background-color: yellow; }

URL:wordpressweb。com/我的帐户/?add-new-business=true
CSS:??? .header { background-color: yellow; }

有没有一种方法可以用CSS来定位这些类型的页面?

1 个回复
最合适的回答,由SO网友:Howdy_McGee 整理而成

这是URL查询字符串。它仍然是同一页,不是子页。您可以通过$_GET 您可以使用body_class hook 查找此查询字符串并相应地添加一个类。WordPress不会为查询字符串添加类,这不是一件正常的事情。

下面是一个示例,说明如何使用body_class 钩子根据查询字符串添加其他类:

/**
 * Look for query string and add an additional class to the body
 *
 * @param Array $classes
 *
 * @return Array $classes
 */
function wpse352069_body_class_mods( $classes ) {

    if( isset( $_GET, $_GET[\'add-new-business\'] ) && true == $_GET[\'add-new-business\'] ) {
        $classes[] = \'add-new-business\';
    }

    return $classes;

}
add_filter( \'body_class\', \'wpse352069_body_class_mods\' );
如果该查询字符串存在且为true,则它将添加add-new-business 类设置为body标记。您可以使用以下CSS设置样式:

body.add-new-business .header { background-color: yellow; }