• wordpress CMS主题:ssmay主题 wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > WP主题开发17:给wordpress主题trans添加主题设置页面

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

    作者: 分类:wordpress CMS主题制作 点击: 47 次
    wordpress CMS主题:ssmay主题

      扫描下面的二维码,“关注”我的头条号,我会每天更新免费视频课程。

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

      WP主题开发17:给wordpress主题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>

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

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

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

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

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

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



      欢迎“关注”我的头条号,我会每天更新免费视频课程。

      头条二维码
      关注我的头条号
      头条二维码
      加入我的QQ群

    文章作者:码不停蹄
    本文地址:http://wanlimm.com/77202006258703.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.