自定义链接文本格式的最佳方法？

开发
1

自定义链接文本格式的最佳方法是什么？看起来编辑 CSS 并不是最佳方案，因为插件更新后更改将会丢失。

40
401738×632 42.5 KB

我希望将其设为粗体，并将文本颜色更改为与网站主题相匹配，这样有助于更好地融入整体设计。

目前链接显示如下：

03
03778×104 16.7 KB

而我希望它看起来像这样：

39
39802×114 16.2 KB

如果还能根据主题自定义文本样式那就更好了。我有一套深色主题和一套浅色主题，每种主题都配有不同的字体颜色。我希望能够将文本颜色设置为与当前主题相匹配。

2

您需要创建一个包含您更改的新主题组件，然后将其添加到与“自定义标题链接”相同的主主题中。

3

谢谢！我已经完成了，效果非常好。

出于好奇，网站是如何选择使用哪个 CSS 的？如果标准主题组件包含会将字体颜色设置为 $header_primary 的 CSS，例如：

.headerLink {
  list-style: none;
  a {
    padding: 6px 10px;
    color: $header_primary;
    font-size: $font-up-1;
  }
}

那么它是如何知道要使用我新组件中的 CSS 而不是上面的 CSS 呢？

.headerLink {
  list-style: none;
  a {
    color: #7A7A7A;
  }
}
4

你好 @Johani - 这个问题是否仍然存在？我的实例似乎不愿意采用 $header_primary 颜色，而且奇怪的是，即使我将 $primary 设置为我想要的颜色（白色），它仍然顽固地显示为黑色 :upside_down_face:！

Screenshot 2021-02-06 at 14.16.12

5

这很可能与颜色声明从 SCSS 切换到 CSS 变量有关。在自定义 CSS 中赋值 $header_primary 不起作用，但如果您使用

.custom-header-links .headerLink a {
    color: var(--header_primary);
}

颜色就能正确生效。

6

这个解决方案对我来说没有生效。您是将此添加到主题的自定义 CSS 中吗？

7

是的，确实如此。该组件现在使用 CSS 自定义属性，应该能为您修复此问题，@Daniel_R，您只需更新该组件即可。