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

wufei123 2024-06-02 阅读:16 评论: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离职原...
  • 奇迹暖暖诸星梦眠怎么样-奇迹暖暖诸星梦眠套装介绍(星梦.暖暖.奇迹.套装.介绍.....)

    奇迹暖暖诸星梦眠怎么样-奇迹暖暖诸星梦眠套装介绍(星梦.暖暖.奇迹.套装.介绍.....)
    奇迹暖暖全新活动“失序之圜”即将开启,参与活动即可获得精美套装——诸星梦眠!想知道这套套装的细节吗?一起来看看吧! 奇迹暖暖诸星梦眠套装详解 “失序之圜”活动主打套装——诸星梦眠,高清海报震撼公开!少女在无垠梦境中,接受星辰的邀请,馥郁芬芳,预示着命运之花即将绽放。 诸星梦眠套装包含:全新妆容“隽永之梦”、星光面饰“熠烁星光”、动态特姿连衣裙“诸星梦眠”、动态特姿发型“金色绮想”、精美特效皇冠“繁星加冕”,以及动态摆件“芳馨酣眠”、“沉云余音”、“流星低语”、“葳蕤诗篇”。...
  • 斗魔骑士哪个角色强势-斗魔骑士角色推荐与实力解析(骑士.角色.强势.解析.实力.....)

    斗魔骑士哪个角色强势-斗魔骑士角色推荐与实力解析(骑士.角色.强势.解析.实力.....)
    斗魔骑士角色选择及战斗策略指南 斗魔骑士游戏中,众多角色各具特色,选择适合自己的角色才能在战斗中占据优势。本文将为您详细解读如何选择强力角色,并提供团队协作及角色培养策略。 如何选择强力角色? 斗魔骑士的角色大致分为近战和远程两种类型。近战角色通常拥有高攻击力和防御力,适合冲锋陷阵;远程角色则擅长后方输出,并依靠灵活走位躲避攻击。 选择角色时,需根据个人游戏风格和喜好决定。喜欢正面硬刚的玩家可以选择战士型角色,其高生命值和防御力能承受更多伤害;偏好策略性玩法的玩家则可以选择法...
  • 龙族卡塞尔之门昂热角色详解-龙族卡塞尔之门昂热全面介绍(之门.龙族.卡塞尔.详解.角色.....)

    龙族卡塞尔之门昂热角色详解-龙族卡塞尔之门昂热全面介绍(之门.龙族.卡塞尔.详解.角色.....)
    龙族卡塞尔之门:昂热角色深度解析 在策略手游《龙族卡塞尔之门》中,卡塞尔学院校长昂热凭借其传奇背景和强大技能,成为玩家们竞相选择的热门角色。作为初代狮心会的最后一人,他拥有超过130岁的阅历,沉稳成熟的外表下,藏着一颗爽朗豁达的心。游戏中,昂热不仅具备出色的单体输出,更擅长通过控制和辅助技能,为团队创造优势。 技能机制详解 昂热的技能组合灵活多变,包含普通攻击、言灵·时零以及随星级提升解锁的被动技能。虽然普通攻击仅针对单体目标,但言灵·时零却能对全体敌人造成物理伤害,并有几率...