如何在单页上编辑H1的字体颜色?

时间:2017-11-27 作者:Lisa

我正在开发一个包含会员资格的新网站,我希望页面标题在会员页面上是不同的颜色,而不会在任何其他页面上更改。我看到过有助于更改主页标题颜色的代码(使用.home),但没有使用不同页面的代码。页面标题是“关心的声音”,因此即使我使用此代码,它也不会改变:

.a-voice-that-cares .gk-logo-text.inverse > span {
    color: blue!important;
}

.a-voice-that-cares .h1 {
    color: blue!important;
}
如有任何帮助/建议,将不胜感激!非常感谢。

3 个回复
SO网友:Tom J Nowell

如果您正在使用body_classpost_class 正确地说,您应该有可以匹配的CSS类postid-0001

接下来,您需要CSS来更改h1 颜色

找到您的成员身份页的ID,并在CSS选择器中使用CSS类,使其仅在该页上匹配。

e、 g。.postid-0001 h1 { color: red; }

当然,您的会员头衔可能不是h1 元素,此时这是一个纯CSS问题。使用定制器输入CSS代码,嘿,presto,你的标题颜色已经改变了

SO网友:Patrice Poliquin

首先,我建议您创建一个自定义模板页面(WordPress templates documentation).

<?php /* Template Name: Example Template */ ?>

在新页面上,可以复制粘贴HTML代码page.php 例如,在周围快速工作。

<?php

/* Template Name: Membership */

get_header(); 

?>

<div id="primary" class="site-content">

    <div id="content" role="main">

        <?php while ( have_posts() ) : the_post(); ?>

            <h1 class="membership-title"><?php the_title(); ?>

                <!-- Your content ... -->

        <?php endwhile; ?>

    </div>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>
在CSS中,只需创建类即可。

h1.membership-title {
    color: blue;
}
保存并上载文件后,返回管理面板并更改页面属性parent 给你需要的人。

使用此新模板,所有默认页面将具有您设置的默认样式,新页面将具有新样式。此样式仅适用于您设置的页面Membership.

希望这就是你要找的。

SO网友:Pat J

下面是我的做法(可能是在活动主题的functions.php, 由于您试图影响页面的外观):

add_action( \'wp_enqueue_scripts\', \'wpse_287062_add_style\', 100 );
function wpse_287062_add_style() {
    if ( is_page( \'a-voice-that-cares\' ) ) {
        wp_add_inline_style( \'stylesheet-handle\', \'h1 { color: blue !important; }\' );
    }
}
你需要找出你的主题stylesheet-handle.

例如,我将使用当前的默认主题,Twenty Seventeen. 当我查看WordPress生成的使用2017主题的页面的源代码时,我看到以下行:

<link rel=\'stylesheet\' id=\'twentyseventeen-style-css\'  href=\'http://example.com/wp-content/themes/twentyseventeen/style.css?ver=4.9\' type=\'text/css\' media=\'all\' />
样式表句柄是id, 减去-css 后缀所以在2017年的案例中stylesheet-handle 在上述代码中,应替换为twentyseventeen-style.

参考文献is_page()
  • wp_add_inline_style()
  • wp_enqueue_scripts hook
  • 结束

    相关推荐

    Remove and change pages label

    我想更改搜索页面标签并删除项目数。我还想修改页面列表中可见页面的数量,现在是20页。解决方案:function wpd_change_page_labels( $labels ) { $labels->search_items = \'put the new name\'; return $labels; } add_filter( \'post_type_labels_page\', \'wpd_change_page_labels\'