时间戳

首页 > 解决方案 > 基于 WP_Customize 更改 Wordpress 模板 CSS

php - 基于 WP_Customize 更改 Wordpress 模板 CSS

问题描述

我正在制作一个 Wordpress 模板，我希望在内置的 Wordpress 定制器中提供一些选项，例如强调颜色、自定义字体等，然后将在整个模板中使用这些选项。但是，这意味着我不能只编写静态 CSS 代码，而必须以某种方式传入一个变量。我该怎么做呢？

标签： phpcsswordpresswordpress-theming

解决方案

在https://www.cssigniter.com/how-to-create-a-custom-color-scheme-for-your-wordpress-theme-using-the-customizer/找到了答案。

这是最相关的代码：

function theme_enqueue_styles() {
  wp_enqueue_style( 'theme-styles', get_stylesheet_uri() ); // This is where you enqueue your theme's main stylesheet
  $custom_css = theme_get_customizer_css();
  wp_add_inline_style( 'theme-styles', $custom_css );
}

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

theme_get_customizer_css()这是一个自定义函数，它返回一个 CSS 字符串，它直接覆盖主样式表中与颜色有关的任何代码。因为它是在 PHP 中生成的，get_theme_mod()所以可以用来检查/插入任何定制器设置。生成此 CSS 后，wp_add_inline_style()将其添加到主样式表；如果一切都被正确编码，CSS 的级联性质将使新添加的代码覆盖早期的代码，而不需要!important任何类似的东西。

我想知道，内联插入是否可以（或应该）是唯一可能由定制器更改的 CSS 声明，而不是覆盖，即theme_get_customizer_css()如果没有定制器选项集返回默认代码而不是电子表格中的默认代码开始。这将防止出现大量重复的 CSS，依赖级联层次结构来工作，但样式表本身也是不完整的，所以也许有理由不这样做？如果有人有想法，我会很乐意输入。

推荐阅读