WP主题开发17：给wordpress主题trans添加主题设置页面

在前面的章节中，我们已经完成了WordPress主题trans的前端页面的动态模板的创建，我们创建了公共模板：头部模板、侧边栏模板、底部模板，我们完成了首页模板、列表页模板、文章详情页模板。但是，有一些细节问题，我们还没有处理好，如：logo图片如何修改？底部的一些信息如何修改？网站的关键词与描述在哪添加？当然，这些东西，我们可以手动添加到模板代码中，但是，在后期操作中就比较麻烦，难道每次修改时，我们都要去修改模板代码吗？如果用户是一个不懂代码的人，该如何操作呢？这时，如果在trans主题的后台有一个界面可以设置这些东西就好了，那样，不管你懂不懂代码，都可以操作。所以，我们将带着在大家来给trans主题添加一个主题设置页面。

第一步：给后台外观导航添加一个“主题设置”子菜单。

在trans主题的functions.php文件中添加如下代码：

//在后台“外观”菜单中添加 【主题设置】 这个子菜单
function Themes_Set(){
add_theme_page( 'title标题', '主题设置', 'administrator', 'ashu_slug','ssmay_set');
}
add_action('admin_menu', 'Themes_Set');
function ssmay_set(){ //主题设置函数
include("theme_set.php");//这里是我人创建的一个php文件，用来设置选项内容
}

这里我用到了wordpress的几个函数：

add_theme_page()：给“外观”导航创建子菜单；
参数解说：
参数1-----标题的内容
参数2-----显示在后台左边菜单的标题
参数3-----访问这个页面需要的权限
参数4-----别名，需要独一无二哦
参数5-----执行的函数（我们自定义的函数）

add_action()：这是一个添加勾子的函数，这里将“Themes_Set”函数添加到“admin_menu”后台菜单的勾子中。

这时，我们还不能测试，因为theme_set.php我们还没有创建，会报错的。

第二步：在trans主题目录下创建一个主题设置文件。

在主题文件夹里创建一个新文件——theme_set.php，也就是主题设置内容界面文件。在这个中添加如下代码：

我是trans主题设置

这时，我们打开后台的外观，可以看到一个“主题设置”的子菜单，点击“主题设置”，右侧内容栏会显示“我是trans主题设置”，如下图：

第三步：能主题设置界面添加设置表单。

接下来，我们就可以在后台“主题设置”的右侧内容栏中添加我们想要的设置表单内容了。在theme_set.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; }

< div class="theme_set">
< form action="" method="post" enctype="multipart/form-data">
< h2>主题设置
< dl>
< dt>网站Logo：
< dd>
< input type="file" name="logo">


< dl>

• 网站备案号：

• < dt>网站地图链接：




• < dd>

< dl>
< dt>网站关键词：
< dd>

< dl>
< dt>网站描述：
< dd>
< textarea name="description" >


< dl>
< dt>分享代码：
< dd>
< textarea name="share" >


< dl>
< dt>文章页广告代码：
< dd>
< textarea name="ad_single" >


< dl>
< dt>
< dd>

这时，主题设置界面的展示效果如下图，还只是一个静态界面，没有任何动态交互功能：

第四步：给上面的表单添加PHP处理代码。

在theme_set.php页面的顶部添加表单提交后的处理代码，如下：

< ?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("share",stripslashes($_POST["share"]));
update_option("ad_single",stripslashes($_POST["ad_single"]));

}

$logo_img = get_option("logo_img");
?>

这里，我们又用到了wordpress的几个函数：

wp_get_attachment_url()：获取附件的路径地址，参数是附件的ID。
media_handle_upload()：上传文件的函数，返回上传附件的ID。
参数1：< input name="logo">的name值；
参数2：文章ID，如果是0，表示不是文章。
update_option()：更新wp_options数据表中的选项。
参数1：数据表中的字段名；参数2：字段的值。

完成了这一步，我们就可以在后台的主题设置界面上传logo图片和添加相关信息了。

第五步：在设置表单中显示已添加的数据。

通过上面的步骤，我们只可以添加数据到数据库，但在下一次进入到这个主题设置界面时，我们并不知道有没有添加数据，因为，表单仍然是空的，它没有从数据库中调用相应的数据，这样就不友好了。所以，这里，我们要让表单中显示我们已添加到数据库中的数据。把表单的部分代码修改成如下代码：

< dl>
< dt>网站Logo：
< dd>
< input type="file" name="logo"> < img src="" height=50 >


< dl>
< dt>网站备案号：
< dd>

< dl>
< dt>网站地图链接：
< dd>< input type="text" name="map" value="">

< dl>
< dt>网站关键词：
< dd>< input type="text" name="keywords" value="">

< dl>
< dt>网站描述：
< dd>
< textarea name="description" >


< dl>
< dt>分享代码：
< dd>
< textarea name="share" >


< dl>
< dt>文章页广告代码：
< dd>
< textarea name="ad_single" >

这样，我们在后期进入这个主题设置界面后，在表单中就会显示已添加的数据和已上传的图片了。如下图所示：

通过上面的五大步骤，我们成功地为WordPress主题trans的后台添加了主题设置功能。在下一节中，我们再来介绍，如何在前端的代码中调用这些设置页面所设置的数据。本节我们就介绍到这里，如果喜欢我的课程，别忘了帮我“点赞、评论、收藏”哦。谢谢参阅。