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

hanchuan1234 2018-11-5 2419

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

今天开始,我们就正式开始编写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用户中心页面的总体外框架,如下图:


最新回复 (0)
全部楼主
返回