WordPress自定义主题设置-工具盒子

制作主题过程中总会需要与后台交互，所以强大的主题，后台都应该有一个设置功能，对主题各处进行设置，发个文章做个笔记，方便以后查阅。

1.在主题 function.php 中添加代码：

$dname = 'XiaoXiaoWu';
function dopt($e){
		return stripslashes(get_option($e));
	}
require_once ( get_template_directory() .'/admin/XiaoXiaoWu.php' );

2.在主题根目录下创建 admin 目录然后创建 XiaoXiaoWu.php 添加如下代码：

<?php
$themename = $dname.'主题';
$options = array(
"d_description", "d_keywords","d_lunbo1","d_lunbo2","d_lunbo3","d_fenlei","d_weixin","d_mobile","d_anli"
);
function mytheme_add_admin() {
global $themename, $options;
if ( $_GET['page'] == basename(FILE) ) {
if ( 'save' == $_REQUEST['action'] ) {
foreach ($options as $value) {
update_option( $value, $_REQUEST[ $value ] );
}
header("Location: admin.php?page=XiaoXiaoWu.php&saved=true");
die;
}
}
add_theme_page($themename." Options", "主题设置", 'edit_themes', basename(FILE), 'mytheme_admin');
}
function mytheme_admin() {
global $themename, $options;
$i=0;
if ( $_REQUEST['saved'] ) echo '<div class="updated settings-error"><p>'.$themename.'修改已保存</p></div>';
?>
<div class="wrap d_wrap">
<link rel="stylesheet" href="<?php%20bloginfo('template_url')%20?>/admin/admin.css"/>
<h2>主题设置
</h2>
<div style="background: rgba(0,0,0,.07);padding: 11px 15px 5px;margin-bottom: 20px;">
<h4>注意事项</h4>
<p>1.所有同项目下的图片尺寸需要相同，否则将会显示错位。</p>
<p>2.上传图片步骤：点击上传按钮---选择图片上传---点击文件URL---复制图片地址---关闭小窗口粘贴到图片地址框中。</p>
<h4 style="margin-left: 88%;position: relative;">感谢您选择由 <a href="https://www.mrwu.red" target="_blank"> Mr.Wu </a>制作。</h4>
</div>
<form method="post" class="d_formwrap">
<table>
<thead>
<tr>
<th width="200"></th>
<th></th>
</tr>
</thead>
<tr>
<td class="d_tit">网站描述</td>
<td>
<input class="ipt-b" type="text" id="d_description" name="d_description" value="<?php echo dopt('d_description'); ?>">
</td>
</tr>
<tr>
<td class="d_tit">网站关键字</td>
<td>
<input class="ipt-b" type="text" id="d_keywords" name="d_keywords" value="<?php echo dopt('d_keywords'); ?>">
</td>
</tr>
<tr>
<td class="d_tit"></td>
<td>
<div class="d_desc">
<input class="button-primary" name="save" type="submit" value="保存设置">
</div>
<input type="hidden" name="action" value="save">
</td>
</tr>
</table>
</form>
</div>
<script>
var aaa = []
jQuery('.d_wrap input, .d_wrap textarea').each(function(e){
if( jQuery(this).attr('id') ) aaa.push( jQuery(this).attr('id') )
})
console.log( aaa )
</script>
<?php } ?>
<?php add_action('admin_menu', 'mytheme_add_admin');?>

代码说明：
$options = array("d_description", "d_keywords"); // 创建数组，储存设置。
name="d_description" //标签中需要加上该标签对应的数组名。
<?php echo dopt('d_description'); ?>//数组调用。

3.在 admin 目录中创建 admin.css 文件，添加以下样式：

.d_wrap{position: relative;}
.d_wrap h2{border-bottom: solid 1px #ddd;padding-bottom: 10px;margin-bottom: 20px;}
.d_themedesc{
	font-size: 16px;
}
.d_tip{
	color: #D36B6B;line-height: 20px;
}
table{
	width: 100%;
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
}
table td{
vertical-align: middle;
padding-bottom: 15px;
}
table td.d_tit{
padding-top: 6px;
vertical-align: top;
}
dl {
margin-bottom: 15px;
}
dt,
dd {
line-height: 20px;
}
dd {
margin-left: 10px;
}
.d_li {
*zoom: 1;
}
.d_li:before,
.d_li:after {
display: table;
content: "";
line-height: 0;
}
.d_li:after {
clear: both;
}
.d_li dt {
float: left;
width: 160px;
clear: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.d_li dd {
margin-left: 180px;
}
input,
select,
textarea {
margin: 0;
font-size: 100%;
vertical-align: middle;
}
input {
*overflow: visible;
line-height: normal;
}
input::-moz-focus-inner {
padding: 0;
border: 0;
}
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
label,
select,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
cursor: pointer;
}
input[type="search"] {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
textarea {
overflow: auto;
vertical-align: top;
}
label,
input,
button,
select,
textarea {
font-size: 12px;
font-weight: normal;
line-height: 20px;
}
input,
button,
select,
textarea {
font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
display: inline-block;
height: 20px;
padding: 5px 6px 3px;
margin-bottom: 0;
font-size: 12px;
line-height: 20px;
color: #555555;
border-radius: 0;
vertical-align: middle;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
}
input,
textarea,
.uneditable-input {
width: 406px;
}
input[type="number"]{
width: 40px;
}
textarea,
input.ipt-b {
height: auto;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
background-color: #fff;
border: 1px solid #D9D9D9;
border-top-color: #C0C0C0;
border-left-color: #d0d0d0;
-webkit-transition: border linear .2s;
-moz-transition: border linear .2s;
transition: border linear .2s;
}
textarea:hover,
input[type="text"]:hover,
input[type="password"]:hover,
input[type="datetime"]:hover,
input[type="datetime-local"]:hover,
input[type="date"]:hover,
input[type="month"]:hover,
input[type="time"]:hover,
input[type="week"]:hover,
input[type="number"]:hover,
input[type="email"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="color"]:hover,
.uneditable-input:hover,
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
border-color: #b9b9b9;
border-top-color: #A0A0A0;
border-left-color: #b0b0b0;
outline: 0;
outline: thin dotted \9;
/* IE6-9 */
}
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
border-color: #999;
}
/* line 142 */
input[type="radio"],
input[type="checkbox"] {
margin: 0 0 0;
margin-top: 0;
/ IE7 */
margin-top: 1px \9;
/* IE8-9 */
line-height: normal;
}
/* line 151 /
input\[type="file"\],
input\[type="image"\],
input\[type="submit"\],
input\[type="reset"\],
input\[type="button"\],
input\[type="radio"\],
input\[type="checkbox"\] {
width: auto;
}
select,
input\[type="file"\] {
height: 30px;
/ In IE7, the height of the select element cannot be changed by height, only font-size */
margin-top: 4px;
/ For IE7, add top margin to align select with labels */
line-height: 30px;
}
select {
width: 220px;
border: 1px solid #cccccc;
background-color: #fbfbfb;
}
select[multiple],
select[size] {
height: auto;
}
select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #999999;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #999999;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #999999;
}
.radio,
.checkbox {
min-height: 20px;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
margin-right: 5px;
vertical-align: -2px;
}
.controls > .radio:first-child,
.controls > .checkbox:first-child {
padding-top: 5px;
}
.radio.inline,
.checkbox.inline {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
margin-right: 20px;
}
.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
margin-left: 10px;
}
.ipt-m {
width: 60px;
}
.ipt-s {
width: 100px;
}
.ipt-medium {
width: 150px;
}
.ipt-large {
width: 210px;
}
.ipt-xlarge {
width: 270px;
}
.ipt-xxlarge {
width: 530px;
}

大致效果图：
红框中的内容为 <div class="wrap d_wrap"> 中的内容，可根据自己需要任意修改。