WordPress主题后台控制面板Class类
发布于
by
给用户制作主题的时候，难免需要一些后台设置项，以便用户能够“所见所得”控制主题，常见设置项类型为：文本框、下拉…
给用户制作主题的时候，难免需要一些后台设置项，以便用户能够“所见所得”控制主题，常见设置项类型为：文本框、下拉选择框、复选框、单选框、文本域和图片上传。
为了便于以后制作主题，我写了一个WordPress主题后台控制面板类，能够轻松实现以上所述需求，同时没有繁琐的功能和代码，仅一个19k的php文件。实现效果如图：
可以添加若干个这样的设置页面，另外还可以添加一个欢迎页，页面内容可以自定义。
开始使用
在文章末尾下载这个类文件，将include文件夹拷贝到你的主题目录里，该文件夹中仅包含一个文件：ThemeSetting.php
在你的主题文件functions.php的开头添加以下代码：
require('include/ThemeSetting.php');
如此便已经成功引用了这个类。
添加页面
可以为主题后台控制面板制作欢迎页面，在主题文件functions.php中添加如下代码：
$themeControlOptions = array( 'welcome' => array( 'id' => 'welcome', 'heading' => '欢迎', 'type' => 'page', 'content' => '<p>欢迎使用背字根主题...</p>', ), ); $themeControl = new ThemeSetting(); $themeControl->options = $themeControlOptions; $themeControl->themeControl();
参数说明：
- id：选项卡的id，需要唯一性；
- heading：选项卡名称；
- type：类型，page表示输出一个页面，页面内容由content决定；
- content：页面内容，支持HTML标签；
添加幻灯片
事实上可以添加任何需要上传图片的设置项，但通常幻灯片用得比较多。
$themeControlOptions = array( 'slide' => array( 'id' => 'slide', 'heading' => '幻灯片', 'type' => 'slide', 'name' => 'theme_slide', 'width' => 200, 'height' => 80, ), ); $themeControl = new ThemeSetting(); $themeControl->options = $themeControlOptions; $themeControl->themeControl();
参数说明：
- id：选项卡的id，需要唯一性；
- heading：选项卡名称；
- type：类型，slide表示幻灯片功能；
- name：表单name的值，前台输出时需要用到这个值，具有唯一性；
- width：后台显示幻灯片的宽度，不影响前台输出，默认值：320；
- height：后台显示幻灯片的高度，不影响前台输出，默认值：80；
前台调用：
幻灯片的数据序列化后保存在wp_option表中，option_name的值为参数说明中的name值。调用示例：
$slides = get_option('theme_slide');
$slides = unserialize($slides);
foreach($slides as $slide) {
echo '<li><a href="' . $slide['link'] . '" target="_blank"><img src="' . $slide['img'] . '" alt="' . $slide['alt'] . '" /></a></li>';
}
以上代码会输出一个li列表。
常规设置项
这里统一说明添加文本框（input）、文本域（textarea）、下拉选择框（select）、复选框（checkbox）、单选框（radio）、上传图片的方法。
$themeControlOptions = array(
'routine' => array(
'id' => 'routine',
'heading' => '常规',
'dsc' => '<p>功能描述</p>',
'feild' => array(
'theme_logo' => array(
'type' => 'file',
'label' => '网站LOGO',
'name' => 'theme_logo',
'width' => 128,
'height' => 60,
'default' => get_bloginfo('template_url') . '/img/logo.png',
),
'home_title' => array(
'type' => 'input',
'label' => '首页SEO标题',
'name' => 'home_title',
'dsc' => '首页title标签的内容，只显示在首页title标签中',
'placeholder' => '填写网站标题',
),
'home_description' => array(
'type' => 'textarea',
'label' => '首页SEO描述',
'name' => 'home_description',
'dsc' => '首页description描述标签的内容，只显示在首页description标签中',
),
'link_open' => array(
'type' => 'radio',
'label' => '友情链接开关',
'name' => 'link_open',
'option' => array(
'yes' => '是',
'no' => '否',
),
),
'cat_list' => array(
'type' => 'checkbox',
'label' => '首页显示分类',
'name' => 'cat_list',
'option' => array(
'1' => '开发',
'3' => '资源',
'2' => '运营',
),
),
'pic_cat' => array(
'type' => 'select',
'label' => '图片分类',
'name' => 'pic_cat',
'option' => array(
'1' => '开发',
'3' => '资源',
'2' => '运营',
),
),
),
),
);
$themeControl = new ThemeSetting();
$themeControl->options = $themeControlOptions;
$themeControl->themeControl();
参数说明：
- id：选项卡的id，需要唯一性；
- heading：选项卡名称；
- dsc：功能说明，支持HTML标签；
- feild：一个数组，包含了各个设置项；
feild的参数说明：
- type：表单类型，支持：input、textarea、radio、checkbox、select、file；
- label：选项的标签名称；
- name：表单的name属性值；
- dsc：选项的简短描述，不支持HTML标签；
- default：表单默认值；
- placeholder：仅适用于input；
- size：input元素的size属性值，默认值：40；
- cols：textarea元素的cols属性值，默认值：50；
- rows：textarea元素的rows属性值，默认值：5；
- class：input和textarea元素的class值，默认为：large-text；
- width：当type为file时，指定后台显示的图片宽度，不影响前台显示，默认值：80；
- height：当type为file时，指定后台显示的图片高度，不影响前台显示，默认值：80；
- option：当type为radio、checkbox、select时，option指定选项的值和显示名称，option可以是一个键值对的数组，也可以是逗号分隔的字符串值（将用explode函数转换为数组），需要注意保存到数据时取的是该数组的key。
前台调用：
数据保存在wp_option表中，option_name的值为参数说明中name的值，调用示例：
get_option('home_title');
复选框由于可以选择多个值，保存到数据库时将值以半角逗号分隔保存，所以取出时可以用explode函数转为数组：
$cat_list = get_option('cat_list');
$cat_list = explode(',', $cat_list);
以上示例完整代码如下：
require('include/ThemeSetting.php');
$themeControlOptions = array(
'welcome' => array(
'id' => 'welcome',
'heading' => '欢迎',
'type' => 'page',
'content' => '<p>欢迎使用背字根主题...</p>',
),
'routine' => array(
'id' => 'routine',
'heading' => '常规',
'dsc' => '<p>功能描述</p>',
'feild' => array(
'theme_logo' => array(
'type' => 'file',
'label' => '网站LOGO',
'name' => 'theme_logo',
'width' => 128,
'height' => 60,
'default' => get_bloginfo('template_url') . '/img/logo.png',
),
'home_title' => array(
'type' => 'input',
'label' => '首页SEO标题',
'name' => 'home_title',
'dsc' => '首页title标签的内容，只显示在首页title标签中',
'placeholder' => '填写网站标题',
),
'home_description' => array(
'type' => 'textarea',
'label' => '首页SEO描述',
'name' => 'home_description',
'dsc' => '首页description描述标签的内容，只显示在首页description标签中',
),
'link_open' => array(
'type' => 'radio',
'label' => '友情链接开关',
'name' => 'link_open',
'option' => array(
'yes' => '是',
'no' => '否',
),
),
'cat_list' => array(
'type' => 'checkbox',
'label' => '首页显示分类',
'name' => 'cat_list',
'option' => array(
'1' => '开发',
'3' => '资源',
'2' => '运营',
),
),
'pic_cat' => array(
'type' => 'select',
'label' => '图片分类',
'name' => 'pic_cat',
'option' => array(
'1' => '开发',
'3' => '资源',
'2' => '运营',
),
),
),
),
'slide' => array(
'id' => 'slide',
'heading' => '幻灯片',
'type' => 'slide',
'name' => 'theme_slide',
'width' => 200,
'height' => 80,
),
);
$themeControl = new ThemeSetting();
$themeControl->options = $themeControlOptions;
$themeControl->themeControl();
文章元素数据
有时候我们需要为文章添加一个类似于SEO关键词设置的选项，或者其他一些元数据，示例如下：
$postMetaOptions = array( 'id' => 'seo-setting', 'heading' => 'SEO设置', 'screen' => 'post', 'context' => 'side', 'priority' => 'high', 'style' => 'v', 'upload' => false, 'feild' => array( 'seo_title' => array( 'type' => 'input', 'label' => 'SEO标题', 'name' => 'seo_title', ), 'seo_description' => array( 'type' => 'textarea', 'label' => 'SEO描述', 'name' => 'seo_description', ), ), ); $postMeta = new ThemeSetting(); $postMeta->options = $postMetaOptions; $postMeta->postMeta();
参数说明：
- id：盒子的id，需要唯一性；
- heading：盒子的标题；
- screen：值为post时，在文章编辑页面添加元数据，为page时，则在页面添加；
- context：盒子的位置，可选的值有：normal、side、advanced；
- priority：优先级，盒子的排序规则，可选的值有：high、low；
- style：表单排列方式，v为垂直排列，h为水平排列；
- upload：如果需要上传图片，那么需要指定upload的值为true以便加载支持上传的JS代码；
- feild：请参考前文的说明；
前台调用：
文章元数据的前台调用方法如下：
get_post_meta($post->ID, 'seo_title', true);
页面元数据
页面元数据与文章元数据使用方法相同，只需type属性指定为page即可，也可以使用如下方法：
$postMeta->pageMeta();
分类元数据
分类不仅需要SEO的一些设置项，有时还需要封面图片设置，示例如下：
$catMetaOptions = array( 'upload' => false, 'feild' => array( 'seo_title' => array( 'type' => 'input', 'label' => 'SEO标题', 'name' => 'seo_title', ), 'seo_description' => array( 'type' => 'textarea', 'label' => 'SEO描述', 'name' => 'seo_description', ), ), ); $catMeta = new ThemeSetting(); $catMeta->options = $catMetaOptions; $catMeta->catMeta();
参数说明：
- upload：如果需要上传图片，那么需要指定upload的值为true以便加载支持上传的JS代码；
- feild：请参考前文的说明；
前台调用：
在前台获取到分类或标签ID就可以调用后台的设置项：
get_term_meta( $tag->term_id, 'seo_title', true );
更新日志：
2017-05-14 发布代码
下载地址
类别：WordPress教程、
本文收集自互联网，转载请注明来源。
如有侵权，请联系 wper_net@163.com 删除。
还没有任何评论，赶紧来占个楼吧！