首页>技术知识>WordPress WP主题开发17:给wordpress主题trans添加主题设置页面
WordPress教程学习网站
2022-06-23
WordPress教程学习网站丨模板定制、网站使用教程、插件推荐、代码优化、wp建站教程、数据文章采集、系统开发、系统优化,功能开发,仿站教程等各类WordPress技术知识,供网友学习了解。


在前面的章节中,我们已经完成了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主题设置”,如下图:

image.png

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

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

  • 网站备案号:





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



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

image.png

第四步:给上面的表单添加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" >

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

image.png

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

显示全部内容...