wordpress网站主题中添加主题设置页面的方法教程

新创建主题时，我们往往都要给新主题在后台添加一个主题设置页，可以在后台新增一个主题配置页面，用来让站长修改主题的一些配置，比如：更换logo，banner，添加网站关键词，统计代码等，让站长修改主题更方便，那么接下来就逼到如何开发一个后台配置页面！

那么如何“给WordPress主题添加主题设置页面”

方法一：

实现：1、改变主题配色方案；2、增加两个广告位内容；3、自定是否显示搜索框。

第一步：在主题函数function.php文件中添加如下代码：

<?php
// 设置选项页
function themeoptions_admin_menu()
{
// 在控制面板的侧边栏添加设置选项页链接
add_theme_page("主题设置", "主题选项", 'edit_themes', basename(__FILE__), 'themeoptions_page');
}
function themeoptions_page()
{
<div class="wrap">
<div id="icon-themes" class="icon32"><br /></div>
<h2>主题设置</h2>
<form method="POST" action="">
<input type="hidden" name="update_themeoptions" value="true" />
<h4>主题配色方案</h4>
<select name ="colour">
<?php $colour = get_option('mytheme_colour'); ?>
<option value="gray" <?php if ($colour=='gray') { echo 'selected'; } ?> >灰色</option>
<option value="blue" <?php if ($colour=='blue') { echo 'selected'; } ?>>浅蓝</option>
<option value="pink" <?php if ($colour=='pink') { echo 'selected'; } ?>>粉红</option>
</select>
<h4>图片广告位（1）</h4>
<p><input type="text" name="ad1image" id="ad1image" size="32" value="<?php echo get_option('mytheme_ad1image'); ?>"/> 广告图片</p>
<p><input type="text" name="ad1url" id="ad1url" size="32" value="<?php echo get_option('mytheme_ad1url'); ?>"/> 广告链接</p>
<h4>图片广告位（2）</h4>
<p><input type="text" name="ad2image" id="ad2image" size="32" value="<?php echo get_option('mytheme_ad2image'); ?>"/> 广告图片</p>
<p><input type="text" name="ad2url" id="ad2url" size="32" value="<?php echo get_option('mytheme_ad2url'); ?>"/> 广告链接</p>
<h4><input type="checkbox" name="display_search" id="display_search" <?php echo get_option('mytheme_display_search'); ?> /> 显示搜索框</h4>
<p><input type="submit" class="button-primary" name="bcn_admin_options" value="更新数据"/></p>
</form>
</div>
}
add_action('admin_menu', 'themeoptions_admin_menu');
?>

到这里，我们已经创建了一个主题选项页面。

方法二：

1.通过add_theme_page函数在配置文件functions.php中添加注册代码：

add_action('admin_menu', 'add_theme_options_menu');
    function add_theme_options_menu() {
        add_theme_page(
            'Qui主题设置', //页面title
            'Qui主题设置', //后台菜单中显示的文字
            'edit_theme_options', //选项放置的位置
            'theme-options', //别名，也就是在URL中GET传送的参数
            'theme_settings_admin' //调用显示内容调用的函数
        );
}
function theme_settings_admin() {
        require get_template_directory()."/admin/qui-admin.php";
}

2.主题根目录创建admin文件夹和qui-admin.php的文件，将以下代码复制进去

<style>
.theme_set{ width:98%; }
.theme_set h2{ font-size:20px; }
.theme_set dl{ margin-top:20px; }
.theme_set dd{ margin:5px 0; }
.theme_set dd input[type=text]{ width:50%; }
.theme_set dd textarea{ width:50%; }
.theme_set dd img{ margin-bottom:-30px; }
</style>
 
<?php
if($_POST['theme_set']){
 
$attachment_id = media_handle_upload( 'logo', 0 ); //上传图片，返回的是 附件的ID
$logo_url = wp_get_attachment_url($attachment_id); //获取 图片的地址
if($logo_url){
update_option("logo_img",$logo_url); //如果图片地址在在，就将图片的地址写入到数据库
}
 
update_option("beian",$_POST["beian"]); //更新数据表中的备案字段的值
update_option("map",$_POST["map"]);
update_option("keywords",$_POST["keywords"]);
update_option("description",$_POST["description"]);
update_option("phone_num",$_POST["phone_num"]);
update_option("qq_num",$_POST["qq_num"]);
update_option("Web_static",stripslashes($_POST["web_static"]));
update_option("ad_single",stripslashes($_POST["ad_single"]));
}
 
$logo_img = get_option("logo_img");
?>
<div class="theme_set">
<form action="" method="post" enctype="multipart/form-data">
<h2>主题设置</h2>
<dl>
    <dt>网站Logo：</dt>
    <dd>
    <input type="file" name="logo"> <img src="<?php echo $logo_img; ?>" height=50 >
    </dd>
</dl>
<dl>
    <dt>网站关键词：</dt>
    <dd><input type="text" name="keywords" value="<?php echo get_option("keywords"); ?>"></dd>
</dl>
<dl>
    <dt>网站描述：</dt>
    <dd>
        <textarea name="description"><?php echo get_option("description"); ?></textarea>
    </dd>
</dl>
<dl>
    <dt>网站备案号：</dt>
    <dd><input type="text" name="beian" value="<?php echo get_option("beian"); ?>"></dd>
</dl>
<dl>
    <dt>统计代码：</dt>
    <dd>
        <textarea name="web_static" ><?php echo get_option("web_static"); ?></textarea>
    </dd>
</dl>
<dl>
    <dt>客服热线/电话：</dt>
    <dd><input type="text" name="phone_num" value="<?php echo get_option("phone_num"); ?>"> </dd>
</dl>
<dl>
    <dt>全站/客服QQ：</dt>
    <dd><input type="text" name="qq_num" value="<?php echo get_option("qq_num"); ?>"> </dd>
</dl>
<dl>
    <dt>文章页广告代码：</dt>
    <dd>
        <textarea name="ad_single" ><?php echo get_option("ad_single"); ?></textarea>
    </dd>
</dl>
 
<dl>
    <dt></dt>
    <dd><input type="submit" name="theme_set" value="提交"></dd>
</dl>
 
</form>
</div>

这样，刷新后台，你会发现后台多了一个页面：外观——QUI主题设置，这样你就可以设置主题的自定义内容了。设置之后还有一步就是调用方法：

例如：调用设置的 电话号码：

<?php
            if (get_option("phone_num")) {
                echo "<p>联系电话：".get_option("phone_num")."</p>";
            }
?>

结束~wordpress教程学习网站丨模板定制、网站使用教程、插件推荐、代码优化、wp建站教程、数据文章采集、系统开发、系统优化，功能开发，仿站教程等各类WordPress技术知识，供网友学习了解。