时间戳

首页 > 解决方案 > 具有可自定义颜色的 WordPress 主题

php - 具有可自定义颜色的 WordPress 主题

问题描述

我目前正在尝试将我制作的 Bootstrap 单页网站转换为 WordPress 主题。我需要帮助的部分是允许自定义颜色；特别是附加到引导程序的主要和次要颜色。

我已经在其中注册了主题定制器，functions.php但是我需要一种方法来实际更改页面上的颜色。

我曾考虑过使用类似下面的东西，但是我有一些使用原色或辅助色的东西，然后是 bootstrap 自己的。有没有更简单/更快的方法来解决这个问题，还是我被迫这样做？

function customize_css() {
    $primary = get_theme_mod('primary_colour', '#F0AEAA');
    $secondary = get_theme_mod('secondary_colour', '#2C3E50');
    ?>
        <style>
            /* PRIMARY COLOUR OVERWRITES */
            a {
                color: <?= $primary ?>;
            }
            .bg-primary {
                background-color: <?= $primary ?> !important;
            }

            /* SECONDARY COLOUR OVERWRITES */
            .bg-secondary {
                background-color: <?= $secondary ?> !important;
            }
        </style>
    <?php
}
add_action('wp_head', 'customize_css');

标签： phpwordpressbootstrap-4wordpress-theming

解决方案

您的代码示例是显示背景颜色的最简单方法。

只是，您将代码放在主题的functions.php 文件中。

function customize_css() {
    $primary = get_theme_mod('primary_colour', '#F0AEAA');
    $secondary = get_theme_mod('secondary_colour', '#2C3E50');
    ?>
        <style>
            /* PRIMARY COLOUR OVERWRITES */
            a {
                color: <?= $primary ?>;
            }
            .bg-primary {
                background-color: <?= $primary ?> !important;
            }

            /* SECONDARY COLOUR OVERWRITES */
            .bg-secondary {
                background-color: <?= $secondary ?> !important;
            }
        </style>
    <?php
}
add_action('wp_head', 'customize_css');

一切顺利！！

推荐阅读