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>  <p>最后:使用过程中有任何疑问都可以联系我的QQ：244533241，如需要修改代码，需要另行收费。</p>  <h4 style="margin-left: 88%;position: relative;">感谢您选择由 <a href="https://www.xiaoxiaowu.me" 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"> 中的内容，可根据自己需要任意修改。