十一年专注,只做WordPress定制开发一件事

wordpress主题开发中如何自定义网站主题色调

王超
2017-10-20
主题开发
4,955 次

在本站开发的wordpress中文企业主题mxtheme02和Mxtheme03中都包含了网站主题色调自定义(直接使用色值随意设置),这个功能其实是很有用的,这样如果想改变网站主题的主色调就不用到代码里修改了,可以一键修改。也不用通过预设多种配色方案来切换了。今天超哥就跟大家分享一下我是通过什么方法和思路实现的。

一、创建色调设置字段

想要在后台随意更改主题色调,首先需要有一个颜色设置的字段,关于字段在这里就不多说了,自己可以去研究一下自定义字段,或者使用《wordpress主题开发中如何添加主题设置页面》这篇文章中提到的Options Framework框架来实现。

二、创建存放使用主题色CSS的文件

在主题制作过程中,将您希望自定义色调的标签的关于颜色的CSS样式都写到一个PHP文件中(注意不要写到您的CSS文件里),并且CSS样式要包含在<style></style>中间,格式见下面的截图。名字你可以随便叫,colorstyle.php,然后在您的头部文件header.php中引入这个colorstyle.php文件。引入方法:将代码<?php include 'colorstyle.php'; ?>放到</header>前。

当然,您也可以不单独创建colorstyle.php这个文件,直接把关于自定义颜色的CSS写到您的html里,但是建议单独创建,方便管理。

三、定义相关内容的颜色样式

当你定义颜色相关CSS的时候,因为我们是要后台自定义(也就是说是个不固定的色值),所以我们不能用color:#333;这样的形式来定义,应该用类似这样的

 其中background后面的php代码就是获取的自定义颜色的色值,具体用什么样的PHP代码,需要根据你创建自定义字段的方法。

WordPress日记主要承接WordPress主题定制开发PSD转WordPressWordPress仿站以及以WordPress为管理后端的小程序、APP,我们一直秉持“做一个项目,交一个朋友”的理念,希望您是我们下一个朋友。如果您有WordPress主题开发需求,可随时联系QQ:919985494 微信:18539976310

搜索

嘿,有问题找我来帮您!