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，也就是主题设置内容界面文件。在这个文件中添加如下测试代码：

<h2>我是trans主题设置</h2>

这时，我们打开后台的外观，可以看到一个“主题设置”的子菜单，点击“主题设置”，右侧内容栏会显示“我是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; }</style>

< div class="theme_set">< form action="" method="post" enctype="multipart/form-data">< h2>主题设置</h2> < dl>< dt>网站Logo：</dt>< dd> < input type="file" name="logo"> </dd></dl>< dl><dt>网站备案号：</dt><dd><input type="text" name="beian" value=""></dd></dl><dl>< dt>网站地图链接：</dt>< dd><input type="text" name="map" value=""> </dd></dl>< dl>< dt>网站关键词：</dt>< dd><input type="text" name="keywords" value=""></dd></dl>< dl>< dt>网站描述：</dt>< dd>< textarea name="description" ></textarea></dd></dl>< dl>< dt>分享代码：</dt>< dd>< textarea name="share" ></textarea></dd></dl>< dl>< dt>文章页广告代码：</dt>< dd>< textarea name="ad_single" ></textarea></dd></dl>< dl>< dt></dt>< dd><input type="submit" name="theme_set" value="提交"></dd></dl></form></div>

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

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

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

< ?phpif($_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：</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="beian" value="<?php echo get_option("beian"); ?>"></dd></dl>< dl>< dt>网站地图链接：</dt>< dd>< input type="text" name="map" value="<?php echo get_option("map"); ?>"> </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>< textarea name="share" ><?php echo get_option("share"); ?></textarea></dd></dl>< dl>< dt>文章页广告代码：</dt>< dd>< textarea name="ad_single" ><?php echo get_option("ad_single"); ?></textarea></dd></dl>

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

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