为wordpress主题添加简单的选项设置

为wordpress后台添加简单的选项设置:此主题选项的核心代码并非本人原创,最早是提取于一个国外主题的,SO,各位随便拿。同时,我也想说对那些放国外那么多优秀主题不扒、偏偏找准别人的付费/私用主题扒还二次发布的同志道声:多行不义,请自重!

add_action('admin_menu', 'mytheme_page');

function mytheme_page (){

	if ( count($_POST) > 0 && isset($_POST['mytheme_settings']) ){

		$options = array ('keywords','description','analytics');

		foreach ( $options as $opt ){

			delete_option ( 'mytheme_'.$opt, $_POST[$opt] );

			add_option ( 'mytheme_'.$opt, $_POST[$opt] );	

		}

	}

	add_theme_page(__('主题选项'), __('主题选项'), 'edit_themes', basename(__FILE__), 'mytheme_settings');

}

function mytheme_settings(){?>

<style>

	.wrap,textarea,em{font-family:'Century Gothic','Microsoft YaHei',Verdana;}

	fieldset{width:100%;border:1px solid #aaa;padding-bottom:20px;margin-top:20px;-webkit-box-shadow:rgba(0,0,0,.2) 0px 0px 5px;-moz-box-shadow:rgba(0,0,0,.2) 0px 0px 5px;box-shadow:rgba(0,0,0,.2) 0px 0px 5px;}

	legend{margin-left:5px;padding:0 5px;color:#2481C6;background:#F9F9F9;cursor:pointer;}

	textarea{width:100%;font-size:11px;border:1px solid #aaa;background:none;-webkit-box-shadow:rgba(0,0,0,.2) 1px 1px 2px inset;-moz-box-shadow:rgba(0,0,0,.2) 1px 1px 2px inset;box-shadow:rgba(0,0,0,.2) 1px 1px 2px inset;-webkit-transition:all .4s ease-out;-moz-transition:all .4s ease-out;}

	textarea:focus{-webkit-box-shadow:rgba(0,0,0,.2) 0px 0px 8px;-moz-box-shadow:rgba(0,0,0,.2) 0px 0px 8px;box-shadow:rgba(0,0,0,.2) 0px 0px 8px;outline:none;}

</style>

<div>

<h2>主题选项</h2>

<form method="post" action="">

	<fieldset>

	<legend><strong>SEO 代码添加</strong></legend>

		<table>

			<tr><td>

				<textarea name="keywords" id="keywords" rows="1" cols="70"><?php echo get_option('mytheme_keywords'); ?></textarea><br />

				<em>网站关键词(Meta Keywords),中间用半角逗号隔开。如: 折腾WordPress,生活记录,独立博客,林木木</em>

			</td></tr>

			<tr><td>

				<textarea name="description" id="description" rows="3" cols="70"><?php echo get_option('mytheme_description'); ?></textarea>

				<em>网站描述(Meta Description),针对搜索引擎设置的网页描述。如: 这儿是林木木童鞋记录分享交流的私人领地</em>

			</td></tr>

		</table>

	</fieldset>

	<fieldset>

	<legend><strong>统计代码添加</strong></legend>

		<table>

			<tr><td>

				<textarea name="analytics" id="analytics" rows="5" cols="70"><?php echo stripslashes(get_option('mytheme_analytics')); ?></textarea>

			</td></tr>

		</table>

	</fieldset>

	<p>

		<input type="submit" name="Submit" value="保存设置" />

		<input type="hidden" name="mytheme_settings" value="save" style="display:none;" />

	</p>

</form>

</div>

<?php }

需要关注的是第4行,如果你需要添加更多的选项设置,那就得添加新的属性值。页面的HTML部分是以 fieldset 为代码段,把里面的 textarea 的 name 属性为第4行内对应的属性值。

搞定了输入,当然还需要输出的代码,SEO代码的调取代码:

<meta name=”keywords” content=”<?php echo get_option(‘mytheme_keywords’); ?>” />
<meta name=”description” content=”<?php echo get_option(‘mytheme_description’); ?>” />

统计代码的调取代码,先判断mytheme_analytics是否存在:

<?php if (get_option('mytheme_analytics')!="") {?>

<div id="analytics"><?php echo stripslashes(get_option('mytheme_analytics')); ?></div>

<?php }?>

统计代码部分不是直接echo,而多了一个stripslashes,啥作用?自行搜索了解,或者直接不加试试呗~

通过观察也不难发现这个 “mytheme_keywords”下划线后部分是与第4行里的,textarea里的name属性设置是对应的。理解了这个想自行再添加几个AD广告位应该米有问题了~

总结下扩展顺序:第4行添加新的属性值,加以fieldset为单位的HTML代码段,把textarea/input的name属性修改成相对应的值,调取代码只需修改下划线(_)后半部分即可。

关于这篇文章,也仅简单介绍了2类主题选项,另外比如单选、多选、下拉等,还是待下次再分享吧~