如何在WordPress(Moderne)上的网站标题中显示单独的颜色?

Question

我有一个运行Moderne主题的WordPress网站 - https://wordpress.org/themes/moderne/。

到目前为止，它绝对是我最喜欢的，并且真正符合我想要的网站。但是我正在努力弄清楚如何更改我的网站标题，以便我可以有单独的颜色，以匹配我的徽标，即白黄白。

我知道我可以通过样式.css编辑颜色本身，但我似乎无法弄清楚如何分离这些部分。

这是我的网站：http://nobetterdan.com/。

理想情况下，我想尝试做的是——

• 没有白色
• 黄色的贝特丹
• 结尾处的句号为白色

这可能超级容易，但不确定。

Answer 1

这可以通过javascript完成。

var _title = document.querySelector("#site-title a");
_title.innerHTML = _title.innerHTML.replace("no","<span class='logo-white'>no</span>").replace("betterdan","<span class='logo-yellow'>betterdan</span>").replace(".","<span class='logo-white'>.</span>");

body{background:#000}
.logo-yellow{color:yellow}
.logo-white{color:white}

<h1 id="site-title"><a href="http://nobetterdan.com/" rel="home">nobetterdan.</a></h1>

Answer 2

这比看起来要复杂一些，因为在CSS中，您只能定位第一个字母，而不能定位单词中的每个字母：

h1::first-letter {}

https://www.w3schools.com/cssref/sel_firstletter.asp

您必须将页面标题与主题文件夹中的所需单元(标题.php分开(：

<h1 id="site-title">
<a href="<?php echo get_home_url(); ?>" rel="home">no<span class="yellow">betterdan</span>.</a>
</h1>

因此，您可以在 CSS 中定位这些字符：

.site-title { color: white; }
.yellow { color: yellow; }

这样，您就无法使用主题标题.php中的<?php echo get_the_title(); ?>功能。但是，如果您可以编写没有动态值的标题，您只需在包含 h1 标签的文件中进行调整即可。

重要提示：您使用的是主题背景，该主题有时会有更新。保持最新非常重要，因此，如果要在主题文件中进行更改，请确保运行子主题，以便覆盖父主题文件并在需要时进行更新。这是创建子主题的漂亮而简单的教程：https://www.smashingmagazine.com/2016/01/create-customize-wordpress-child-theme/

---

另一种方法是使用javascript来为标题着色。还有一个jquery插件：http://letteringjs.com/但我认为对于这个单一的用例，对于页面标题的样式，这将是一个重载和很多你实际上不需要的代码。因此，使用 span 和 css 的方式将是更合适的方式。