• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > wordpress CMS主题用户中心开发 3:编写用户中心页面author.php

    wordpress CMS主题用户中心开发 3:编写用户中心页面author.php

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

      今天开始,我们就正式开始编写wordpress主题用户中心。首先,我们把用户中心主页面author.php布局写好。总体布局是这样的:页面左侧是用户信息及导航的相关代码,页面右侧是放置用户所发表的文章列表(如下图)。如想了解用户中心具体功能,可以在本站注册一个帐号,登录进去看一下。

      wordpress CMS主题用户中心开发 3:编写用户中心页面author.php

      开发wordpress主题时,一般情况下,我们会先把静态页面的布局写好,然后再添加动态的数据。所以,我们先写author.php页面的静态代码。

      第一步:从大处入手,先写总布局。

      编辑静态代码时,养成一个习惯,先写大布局,再写细微处。页面是左右布局的。代码如下:

      <?php  require_once("header.php");  //引入页面头部 ?>

      <div class="authors">
      <div class="left">
      <?php require_once("author_sidebar.php");  //左侧边栏?>
      </div>
      <div class="right">
      <?php require_once("author_main.php");  //右侧主体?>
      </div>
      </div>
      <?php  require_once("footer.php"); //引入页面底部  ?>

      第二步:添加CSS样式:

      给authors、left左边框、right右侧主体添加CSS样式,代码如下:

      /* 用户中心 */
      .authors{ width:100%; float:left; }
      .authors .left{ width:30%; float:left; border:1px solid #ccc; padding:0.3rem 0; margin-bottom:0.3rem; }

      .authors .right{ width:67%; float:left;margin-left:2%; }

      第三步:给author_sidebar.php文件和author_main.php文件添加内容:

      这里只是为了演示一下,所以只添加一行中文解说文字,在后面的章节中我们再为它们添加功能代码。

      给author_sidebar.php文件添加:这里用户中心左边栏。

      给author_main.php文件添加:这是用户中心页面右侧主体。

      通过这2步,我们就勾勒出了author.php用户中心页面的总体外框架,如下图:

      wordpress CMS主题用户中心开发 3:编写用户中心页面author.php

      本章解说完毕,下一章我们接着往下讲。

       



      QQ二维码

    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201808066470.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

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

    或许你会感兴趣的文章:

    发表评论

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

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