wordpress CMS主题用户中心开发 4:完成author.php用户中心页面的静态代码布局

hanchuan1234 2018-11-5 2527

wordpress CMS主题用户中心开发 4:完成author.php用户中心页面的静态代码布局。

上一章我们为author.php用户中心主页面添加了总体框架布局:左边栏和右边主体。今天,我们就要为author.php的左边栏和右边主体添加细节布局。同样,本章不调用后台数据库的数据,依然是以静态布局为目标。今天要实现的效果发下图:

wordpress CMS主题用户中心开发 4:完成author.php用户中心页面的静态代码布局

我们先来写左侧的代码,也就是给author_sidebar.php文件添加代码。从上图中,我们可以看出,左侧有2大块,用户信息和最新文章。从布大局,再布细节。添加代码:

<!-- 用户信息开始 -->
<div class="author_op">
这里放用户信息
</div>
<!-- 用户信息结束 -->
<!-- 最新文章 -->
<div class="new_post">
这里放最新文章
</div>

然后在添加用户信息模块里的代码。第1部分代码如下:

<ul class="author_set">
<li class="title">
<a href="/">
<img src="/wp/wp-content/themes/mlong/images/author.jpg" alt="用户gaogao的头像">
<span>gaogao</span>
</a>
</li>
<li class="write">
<a href="/">写博客</a>
<a href="/">帐号设置</a>
</li>
</ul>

上图中第2部分的代码:

<ul class="author_fanc">
<li class="jifen_list">
<a href="/">
<span>0</span><span>积分</span>
</a>
</li>
<li id="<?php echo $uid; ?>" class="guanzu_list">
<a href="/">
<span>0</span><span>关注</span>
</a>
</li>
<li  class="fanc_list">
<a href="/">
<span>0</span><span>粉丝</span>
</a>
</li>
<li class="wenzang_list">
<a href="/">
<span>3</span><span>文章</span>
</a>
</li>
</ul>

上图第3部分的代码:

<ul class="author_option">
<li>文章浏览:0</li>
<li>个人网站:http://wanlimm.com</li>
<li>加入时间:2018-5-3 22:23:12</li>
<li>最近登录:2018-8-7 09:08:32</li>
</ul>

这样,上图左侧第一大部分——用户信息部分的静态代码就添加好了。接下来我们再来添加左侧第二大部分——最新文章的静态代码,也就是上图中的第4的位置,代码如下:

<!-- 最新文章 -->
<div class="new_post">
<h2>最新文章</h2>
<li><a href="/" title="/">wordpress教程wordpress教程</a></li>
<li><a href="/" title="/">wordpress教程wordpress教程</a></li>
<li><a href="/" title="/">wordpress教程wordpress教程</a></li>
<li><a href="/" title="/">wordpress教程wordpress教程</a></li>
</div>

我们再这左侧的元素添加CSS样式:

.author_op{ width:100%; }
.author_op ul{ float:left; width:92%; margin-bottom:0.15rem; padding:0 4%; }
.author_op ul.author_set li{ width:100%; text-align:center; padding:0.06rem 0; }
.author_op ul.author_set li.title a{ display:inline-block; width:100%; text-align:center; }
.author_op ul.author_set li.title a span{ display:inline-block; width:100%; font-size:0.2rem; font-weight:800; }
.author_op ul.author_set li img{ width:1.5rem; height:auto; border-radius:50%; }
.author_op ul.author_set li.write a{ display:inline-block; width:0.8rem; line-height: 0.3rem; border:1px solid #ccc; text-align:center; margin:0 0.05rem; }
.authors .left .new_post{ margin:0.2rem 0; float:left; width:92%; margin-left:4%; border-top:1px solid #ccc; padding:0.2rem 0; border-bottom:1px solid #ccc; }
.authors .left .new_post h2{ width:100%; padding-bottom:0.03rem; border-bottom:1px dashed #ccc; font-size:0.18rem; margin-bottom:0.07rem; }
.authors .left .new_post li{ width:100%; float:left; height:0.3rem; line-height: 0.3rem; list-style:disc; }

通过上面几步,左边栏的静态代码布局就弄好了。接下来,我们现来弄右边主体的代码。我们的预想是:进入用户中心后,右侧默认是当前用户的发表过的文章列表,如上图所示。author_main.php的静态代码如下:

<!-- 当前用户发表的文章列表 -->
<div class="post_list">
<div class="post">
<h2>
<a class="title" href="/">为author.php用户中心主页面添加了总体框架布局</a>
</h2>
<div class="intro">们为author.php用户中心主页面添加了总体框架布局:左边栏和右边主体。今天,我们就要为author.php的左边栏和右边主体添加细节布局。同样,</div>
<div class="info">
<span class="tags">wordpress主题制作</span>
</div>
<div class="info">
<span class="tags">wordpress CMS主题制作</span>
<span class="eye">18</span>
<span class="pinglun">0</span>
<a href="/">编辑</a>
</div>
</div>
<div class="post">
<h2>
<a class="title" href="/">总体框架布局:左边栏和右边主体</a>
</h2>
<div class="intro">依然是以静态布局为目标。今天要实现的效果发总体框架布局:左边栏和右边主体们为author.php用户中心主页面添加了总体框架布局:</div>
<div class="info">
<span class="tags">wordpress主题制作</span>
</div>
<div class="info">
<span class="tags">wordpress CMS主题制作</span>
<span class="eye">18</span>
<span class="pinglun">0</span>
<a href="/">编辑</a>
</div>
</div>
</div>

再来给右侧主体的文章列表添加CSS样式:

.authors .right{ width:67%; float:left;margin-left:2%; }
.authors .right .post{ width:100%; padding:0.25rem 0; border-top:1px dashed #aaa; float:left; }
.authors .right .post h2{ margin-bottom:0.1rem; font-size:0.16rem; width:100%; }
.authors .right .post .intro{ font-size:0.14rem; line-height: 0.2rem; width:100%; float:left; margin-bottom:0.1rem; overflow:hidden; }
.authors .right .post .info{ font-size:0.13rem; line-height: 0.2rem; width:100%; float:left; }
.authors .right .post .info span{ float:left; margin-right:0.15rem; color:#999; }
.authors .right .post .info .eye{ padding-left:0.23rem; background:url('images/opt_1.jpg') no-repeat 0 0.02rem; }
.authors .right .post .info .pinglun{ padding-left:0.26rem; background:url('images/opt_2.jpg') no-repeat 0 0.02rem; }
.authors .right .post .info .edit{ padding-left:0.26rem; background:url('images/opt_3.jpg') no-repeat 0 0.02rem; }
.authors .right .post .info .del{ padding-left:0.26rem; background:url('images/opt_4.jpg') no-repeat 0 0.02rem; }
.authors .right .post .info a{ color:#999; }
.authors .right .post .info a:hover{ color:#16599b; }

嗯,到这里,author.php用户中心页面的总体布局静态代码和CSS样式就全部完成。本章只是静态布局,没有调用后台数据。在下一章,我们就会慢慢地调用后台数据库的数据来完善这个页面,使它成为真正的用户中心页面。


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