WordPress自定义主题设置

Mr.Wu 2,005 0 正在检测是否收录...

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

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;
}

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

本文作者为Mr.Wu，转载请注明，尊守博主劳动成果！

 由于经常折腾代码，可能会导致个别文章内容显示错位或者别的 BUG 影响阅读;
    如发现请在该文章下留言告知于我，thank you !

打赏
发表评论 取消回复
表情 图片 链接 代码

分享
微信
微博
QQ