自定义主题:调整配色方案设置和控件

wufei123 2024-06-02 阅读:56 评论:0
主题定制器是一个很棒的工具,可以让您的用户更自由地调整主题,而无需编辑代码。但如果您想让用户更改其网站的颜色,事情可能会变得复杂。为他们可以更改的每个元素添加一个控件将使事情变得很麻烦,并且用户最终可能会得到一个看起来花哨混乱的网站。...

自定义主题:调整配色方案设置和控件

主题定制器是一个很棒的工具,可以让您的用户更自由地调整主题,而无需编辑代码。但如果您想让用户更改其网站的颜色,事情可能会变得复杂。为他们可以更改的每个元素添加一个控件将使事情变得很麻烦,并且用户最终可能会得到一个看起来花哨混乱的网站。

您可以简单地创建一个配色方案,允许用户选择几种颜色,然后将它们应用到主题中的一系列元素,而不是为您希望用户能够更改的所有元素添加大量控件.

在本教程中,我将带您完成此过程的第一部分,即设置主题定制器控件。在下一部分中,我将向您展示如何将这些控件链接到您的主题,以便当用户选择颜色时,它们会被带入主题。

起点

首先安装启动主题并激活它。主题定制器将如下所示:

自定义主题:调整配色方案设置和控件

完成本教程后,您的定制工具将有两个额外的部分。

设置主题定制器

第一步是在主题中创建一个文件来保存定制器功能。我将使用一个基本的起始主题,该主题基于我在从静态 HTML 创建 WordPress 主题系列中创建的主题。我对其进行了一些修改,以便它可以与配色方案功能一起使用,因此如果您想完成本教程,我建议您下载起始主题。

在主题的主文件夹中,创建一个名为 inc 的文件夹,并在其中创建一个名为 customizer.php 的文件。

打开 functions.php 文件并添加以下内容,其中将包含您刚刚创建的新文件:

include_once( 'inc/customizer.php' );

现在在您的 customizer.php 文件中,添加以下函数:

function wptutsplus_customize_register( $wp_customize ) { } add_action( 'customize_register', 'wptutsplus_customize_register' );

这将创建一个包含所有设置和控件的函数,并将其挂钩到 customize_register 操作挂钩。您的主题已准备就绪!

创建配色方案设置和控件

第一步是添加配色方案的设置和控件。您将添加四个颜色选择器的控件:主颜色、辅助颜色和两个链接颜色。

添加新部分

在您刚刚创建的函数中,添加以下内容:

/******************************************* Color scheme ********************************************/ // add the section to contain the settings $wp_customize->add_section( 'textcolors' , array( 'title' => 'Color Scheme', ) );

这会为您的配色方案控件创建一个空白部分。

定义颜色参数

紧接着在下面添加:

// main color ( site title, h1, h2, h4. h6, widget headings, nav links, footer headings ) $txtcolors[] = array( 'slug'=>'color_scheme_1', 'default' => '#000', 'label' => 'Main Color' ); // secondary color ( site description, sidebar headings, h3, h5, nav links on hover ) $txtcolors[] = array( 'slug'=>'color_scheme_2', 'default' => '#666', 'label' => 'Secondary Color' ); // link color $txtcolors[] = array( 'slug'=>'link_color', 'default' => '#008AB7', 'label' => 'Link Color' ); // link color ( hover, active ) $txtcolors[] = array( 'slug'=>'hover_link_color', 'default' => '#9e4059', 'label' => 'Link Color (on hover)' );

这会向主题定制器添加一个名为“配色方案”的新部分。然后,它为您将使用的四种颜色设置参数:slug、默认值和标签。默认值是主题中使用的颜色,因此您可能需要将其更改为主题中的颜色。

创建颜色设置

接下来,您需要使用刚刚定义的参数创建颜色设置。在最后一个代码块下方,键入:

// add the settings and controls for each color foreach( $txtcolors as $txtcolor ) { // SETTINGS $wp_customize->add_setting( $txtcolor['slug'], array( 'default' => $txtcolor['default'], 'type' => 'option', 'capability' => 'edit_theme_options' ) ); }

这使用 foreach 语句来处理您刚刚定义的每种颜色,并使用您定义的参数为每种颜色创建一个设置。但您仍然需要添加控件,以便用户可以使用主题定制器与这些设置进行交互。

添加控件

在 foreach 大括号内以及刚刚添加的 add_setting() 函数下方,插入以下内容:

// CONTROLS $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, $txtcolor['slug'], array('label' => $txtcolor['label'], 'section' => 'textcolors', 'settings' => $txtcolor['slug']) ) );

这会使用 WP_Customize_Color_Control() 函数为每种颜色添加一个颜色选择器,该函数为主题定制器创建颜色选择器。

整个 foreach 语句现在将如下所示:

// add the settings and controls for each color foreach( $txtcolors as $txtcolor ) { // SETTINGS $wp_customize->add_setting( $txtcolor['slug'], array( 'default' => $txtcolor['default'], 'type' => 'option', 'capability' => 'edit_theme_options' ) ); // CONTROLS $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, $txtcolor['slug'], array('label' => $txtcolor['label'], 'section' => 'textcolors', 'settings' => $txtcolor['slug']) ) ); }

现在,当您打开主题定制器并激活主题时,您将能够看到新部分:

自定义主题:调整配色方案设置和控件

当您展开其中一个控件时,您将能够看到颜色选择器:

自定义主题:调整配色方案设置和控件

目前,您对颜色选择器所做的任何操作都不会实际反映在您的主题中,因为您尚未添加任何 CSS使其发挥作用 - 我们将在本系列的第 2 部分中讨论这一点。现在,我们将添加另一个部分,以便用户更好地控制他们的配色方案。

创建纯色背景设置和控件

下一部分将不允许用户选择颜色,而是为他们提供向其网站的页眉和/或页脚添加纯色背景的选项。如果他们选择此选项,这些元素的背景和文本颜色将会改变。

在您刚刚添加的代码下方,但仍在 wptutsplus_customize_register() 函数内,添加以下内容:

/************************************** Solid background colors ***************************************/ // add the section to contain the settings $wp_customize->add_section( 'background' , array( 'title' => 'Solid Backgrounds', ) ); // add the setting for the header background $wp_customize->add_setting( 'header-background' ); // add the control for the header background $wp_customize->add_control( 'header-background', array( 'label' => 'Add a solid background to the header?', 'section' => 'background', 'settings' => 'header-background', 'type' => 'radio', 'choices' => array( 'header-background-off' => 'no', 'header-background-on' => 'yes', ) ) ); // add the setting for the footer background $wp_customize->add_setting( 'footer-background' ); // add the control for the footer background $wp_customize->add_control( 'footer-background', array( 'label' => 'Add a solid background to the footer?', 'section' => 'background', 'settings' => 'footer-background', 'type' => 'radio', 'choices' => array( 'footer-background-off' => 'no', 'footer-background-on' => 'yes', ) ) );

这将添加第二个名为“纯色背景”的新部分,然后向其中添加两个控件,这两个控件都是单选框。在每种情况下都有两种选择:是和否。在本系列的第二部分中,我将向您展示如何根据这些选择定义变量并使用它们来更改主题中的 CSS。

您现在可以在主题定制器中看到新部分:

自定义主题:调整配色方案设置和控件

同样,如果您选择其中一个单选框,则不会发生任何事情,因为您尚未将其链接到主题的 CSS ,但这终将到来。

摘要

在第一部分中,您添加了为您的配色方案创建主题定制器界面所需的设置和控件。

在下一部分中,我将向您展示如何根据用户在主题定制器中所做的选择来定义变量,然后使用这些变量来设置 CSS。

以上就是自定义主题:调整配色方案设置和控件的详细内容,更多请关注知识资源分享宝库其它相关文章!

版权声明

本站内容来源于互联网搬运,
仅限用于小范围内传播学习,请在下载后24小时内删除,
如果有侵权内容、不妥之处,请第一时间联系我们删除。敬请谅解!
E-mail:dpw1001@163.com

分享:

扫一扫在手机阅读、分享本文

发表评论
热门文章
  • BioWare埃德蒙顿工作室面临关闭危机,龙腾世纪制作总监辞职引关注(龙腾.总监.辞职.危机.面临.....)

    BioWare埃德蒙顿工作室面临关闭危机,龙腾世纪制作总监辞职引关注(龙腾.总监.辞职.危机.面临.....)
    知名变性人制作总监corrine busche离职bioware,引发业界震荡!外媒“smash jt”独家报道称,《龙腾世纪:影幢守护者》制作总监corrine busche已离开bioware,此举不仅引发了关于个人职业发展方向的讨论,更因其可能预示着bioware埃德蒙顿工作室即将关闭而备受关注。本文将深入分析busche离职的原因及其对bioware及游戏行业的影响。 Busche的告别信:挑战与感激并存 据“Smash JT”获得的内部邮件显示,Busche离职原...
  • boss直聘怎么取消面试预约 boss直聘上面试爽约了会怎么样(面试.爽约.预约.取消.boss.....)

    boss直聘怎么取消面试预约 boss直聘上面试爽约了会怎么样(面试.爽约.预约.取消.boss.....)
    求职宝典:boss直聘面试技巧及取消预约方法 各位求职者注意啦!在Boss直聘上,随意取消面试预约会留下爽约记录,影响后续求职!本文将指导您如何避免爽约,以及如何取消已预约的面试。 如何取消Boss直聘面试预约? 打开Boss直聘APP,进入“我的”页面。 点击“待面试”,查看面试日程。 选择需要取消的面试,点击“取消面试”按钮即可。 Boss直聘面试爽约的后果? 爽约行为会在HR端留下记录,影响您的求职成功率。其他HR也能看到您的不良记录,所以务必重视面试预约。...
  • 闪耀暖暖靡城永恒怎么样-闪耀暖暖靡城永恒套装介绍(闪耀.暖暖.套装.介绍.....)

    闪耀暖暖靡城永恒怎么样-闪耀暖暖靡城永恒套装介绍(闪耀.暖暖.套装.介绍.....)
    闪耀暖暖钻石竞技场第十七赛季“华梦泡影”即将开启!全新闪耀性感套装【靡城永恒】震撼来袭!想知道如何获得这套精美套装吗?快来看看吧! 【靡城永恒】套装设计理念抢先看: 设计灵感源于夜色中的孤星,象征着淡然、漠视一切的灰色瞳眸。设计师希望通过这套服装,展现出在虚幻与真实交织的夜幕下,一种独特的魅力。 服装细节考究,从面料的光泽、鞋跟声响到裙摆的弧度,都力求完美还原设计初衷。 【靡城永恒】套装设计亮点: 闪耀的绸缎与金丝交织,轻盈的羽毛增添华贵感。 这套服装仿佛是从无尽的黑...
  • 蛋仔派对2025最新皮肤兑换码汇总 最新皮肤兑换码一览(兑换.皮肤.最新.派对.汇总.....)

    蛋仔派对2025最新皮肤兑换码汇总 最新皮肤兑换码一览(兑换.皮肤.最新.派对.汇总.....)
    蛋仔派对2025最新皮肤兑换码大放送!游戏内新增多款皮肤兑换码,包含最新、福利和通用三种类型,助你轻松获取精美奖励! 赶紧来看看如何兑换吧! 兑换码列表: 最新兑换码: ccewndj4k4k、cdkqdfm4fh、peetnmp4ef、cdxymk8f67 福利兑换码: cca863ywtfa、eggy2310am、eggy2311gz、eggyeggy9wz 通用兑换码: pec74dkcty、jsrqkrrjmh、cd3wt7wrph、ccepn7d8cjf...
  • python怎么调用其他文件函数

    python怎么调用其他文件函数
    在 python 中调用其他文件中的函数,有两种方式:1. 使用 import 语句导入模块,然后调用 [模块名].[函数名]();2. 使用 from ... import 语句从模块导入特定函数,然后调用 [函数名]()。 如何在 Python 中调用其他文件中的函数 在 Python 中,您可以通过以下两种方式调用其他文件中的函数: 1. 使用 import 语句 优点:简单且易于使用。 缺点:会将整个模块导入到当前作用域中,可能会导致命名空间混乱。 步骤:...