wordpress主题前台 用户中心 完全开发 教程大全 一个就够!

1:用户中心功能介绍

浏览网站时,我们会发现好多的网站都开放了用注册功能。我们注册登录进去后,我们还有一个个人用户中心,有的网站叫个人中心,有的网站叫个人空间,不管它的名称叫什么,大体的功能都是差不多的,主要是让用户在这个网站上有一个家的感觉。作为wordpress CMS主题的开发者,我们同样可以为我们的wordpress主题添加这个用户中心功能模块。从本章开始,我会简单介绍一下wordpress主题如何添加用户中心功能。

首先,我们来看看这个用户中心都有些什么东东,也就是说,我们的用户中心都是由哪些功能组的。这里,我参照了一下比较强大的CSDN博客和开源中国网站,wordpress主题用户中心主要包括如下这些功能模块:

1、用户中心我的博客的主页面;
2、用户在本站的积分体系;
3、本站用户之间的关注与粉丝体系;
4、个人帐号信息前台设置;
5、前台发表博客文章和修改文章;
6、发表下载资源文章;

当然,这只是一个简单的用户中心功能模块,我们还可以继续给它添加更加强大的功能,如:购物车、订单、网上支付等网上购物体系,就像淘宝、京东那样。不过,对于个人网站来说,这些没太必要,也不是这里我们所要研究的。如果感兴趣的,可以更加深入地去研究它。

2:创建用户中心必要的主题文件

我们根据这个构想来创建必段的主题php文件。

1:用户中心主页面:

因为我们不仅要让自己能看到我们的用户中心个人博客页面,也要展现给其它用户看。所以,这里给主页面的命名为author——作者的意思。即:author.php。这样的命名还有一个好处,wordpress主题默认是有这个author.php文件的,所以,我们可以用到is_author()这个判断函数的,也可以使用wordpress自带的与作者相关的函数的。

2:用户积分页面文件:

使用积分,是为了提高用户的积极性,本站会在下载资源栏目添加一些有用的资源,下载一次需要一定的积分,所以,需要一个地方来统计用户的积分。命名为:author_jifen.php,用来处理用户的积分。

3:用户关注和粉丝页面文件:

为了增加本站用户之间的互动,这里模仿了微博的互粉机制,当然,没有微博的那么强大,只是添加了一个这样功能而已。命名为:author_fanc.php,用来处理用户关注。

4:用户帐号设置页面文件:

既然用户注册到我们网站,有时后可能需要修改相应的信息,如:QQ、个人网站地址等信息。命名为:author_user.php,用来处理用户信息的修改。

5:用户前台发表文章页面文件:

既然在前台设置了用户中心个人博客页面,当然就少不了用户在前台发表文章了。这里命名为:author_write.php,用来处理前台用户发表文章。

6:用户前台修改文章页面文件:

既然在前台用户可以发表文章,当然也少不了用户在前台修改文章了。命名为:author_edit.php。

总体上来说,wordpress主题用户中心的实现,只需要给wordpress主题添加这6个处理文件即可。但在现实的开发中,还是需要整合其它wordpress主题文件,如:header.php、footer.php、functions.php。而且,可能在实现开发操作中会对它进行穿插。这是后话,等到时再做解说。今天就介绍到这里。下一章,我们就正式开发wordpress主题的用户中心。

3:编写用户中心页面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

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

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://8y-ad.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样式就全部完成。本章只是静态布局,没有调用后台数据。在下一章,我们就会慢慢地调用后台数据库的数据来完善这个页面,使它成为真正的用户中心页面。

5:完成author.php页面的后台数据调用

上一章我们为wordpress主题的用户中心author.php添加了静态代码布局,实现了前台页面的布局展现效果。现在,我们就要为它们调用后台数据:调用当前页面的作者信息、关注和粉丝、以及文章总浏览量等,修改a标签的链接,让它指向对应的页面。

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

第一步:为用户添加几个自定义字段:

从上一章我们实现的前台页面效果中我们可以看到,有以下几个字段:积分、关注、粉丝、文章总浏览量、个人网站地址、加入时间(注册时间)、最近登录时间。我们先为用户添加以上几个字段,以供后期之用。在wordpress主题的functions.php添加如下代码:

//自定义用户个人资料信息
add_filter( ‘user_contactmethods’, ‘wpdaxue_add_contact_fields’ );
function wpdaxue_add_contact_fields( $contactmethods ) {
$contactmethods[‘user_site’] = ‘人个网站’;
$contactmethods[‘user_fanc’] = ‘粉丝’; //粉丝,记下关注者的ID
$contactmethods[‘user_follow’] = ‘关注别人’; //关注别人,记下被关注者的ID
$contactmethods[‘user_jifen’] = ‘积分’;
$contactmethods[‘user_views’] = ‘总浏览量’;
return $contactmethods;
}

第二步:修改上图第1部分代码:

因为是作者用户中心页面,所以我们要调用当前作者的头像和用户名。并且,如查当前登录用户与作者是同一人时,就显示“写博客”和“帐号设置”按钮,否则,就显示“关注”按钮。

修改后的代码如下:

<ul class=”author_set”>
<li class=”title”>
<a href=”<?php%20echo%20get_bloginfo(‘url’);%20?>/?author=<?php%20echo%20$uid;%20?>”>
<?php echo get_avatar( $uid ); //获取作者头像 ?>
<span><?php echo get_user_meta($uid,’nickname’)[0]; //用户呢称作为博客名 ?></span>
</a>
</li>
<li class=”write”>
<?php
if($current_user->ID==$uid){ //如果作者 与 当前登录用户是同一人,
echo ‘<a href=”‘.get_bloginfo(“url”).’/?author=’.$uid.’&act=author_write”>写博客</a>’;
echo ‘<a href=”‘.get_bloginfo(“url”).’/?author=’.$uid.’&act=user_edit”>帐号设置</a>’;
}else{
//如果已关注作者,就显示“已关注”,如果没有关注作者,就显示“关注”
   $user_follow = get_user_meta($current_user->ID,’user_follow’);
   $arr = explode(‘,’,$user_follow[0]);
   if(!in_array($uid,$arr)){
   echo ‘<a href=”javascript:;” id=”‘.$uid.'” class=”guan_zu guan_zu_’.$uid.'”>关注</a>’;
   }else{
   echo ‘<a href=”javascript:;” id=”‘.$uid.'” class=”quxiao quxiao_’.$uid.'”>已关注</a>’;
   }
}
?>
</li>
</ul>
这样,我们点击“写博客”时,就会进入到author_write.php写文章页面;点击“帐号设置”就会进入到author_user.php用户帐号设置页面;点击“关注”按钮,就会关注当前用户。

第三步:修改上图第2部分:

我们要调用后台的积分数据、关注数据、粉丝数据,以及发表了多少篇文章。代码如下:

<ul class=”author_fanc”>
<li class=”jifen_list”>
<a href=”<?php%20echo%20get_bloginfo(“url”); ?>/author_jifen”>
<span>
<?php
//注册积分
echo get_jefen($uid) ;
?>
</span><span>积分</span>
</a>
</li>
<li id=”<?php echo $uid; ?>” class=”guanzu_list”>
<a href=”<?php%20echo%20get_bloginfo(“url”); ?>/?author=<?php echo $uid;?>&act=guanzu”>
<span><?php echo get_guanzu($uid); ?></span><span>关注</span>
</a>
</li>
<li id=”<?php echo $uid; ?>” class=”fanc_list”>
<a href=”<?php%20echo%20get_bloginfo(“url”); ?>/?author=<?php echo $uid;?>&act=fanc”>
<span><?php echo get_fanc($uid); ?></span><span>粉丝</span>
</a>
</li>
<li class=”wenzang_list”>
<a href=”<?php%20echo%20get_bloginfo(“url”); ?>/?author=<?php echo $uid;?>&act=list”>
<span><?php echo get_the_author_posts(); //作者文章总数 ?></span><span>文章</span>
</a>
</li>
</ul>

上面调用积分、关注、粉丝时用到了自定义函数,所以我们要在functions.php中添加这几个函数:

//获取作者关注 的数
function get_guanzu($uid){
$author_follow = get_user_meta($uid,’user_follow’); //关注
if(empty($author_follow)){
$num1 = 0;
}else{
if($author_follow[0]==”){
$num1 = 0;
}else{
$follows = explode(“,”,$author_follow[0]);
$num1 = !empty($follows) ? count($follows) : 0;
}
}
return $num1;
}

//获取作者粉丝数
function get_fanc($uid){
$author_follow = get_user_meta($uid,’user_fanc’); //关注
if(empty($author_follow)){
$num1 = 0;
}else{
if($author_follow[0]==”){
$num1 = 0;
}else{
$follows = explode(“,”,$author_follow[0]);
$num1 = !empty($follows) ? count($follows) : 0;
}
}
return $num1;
}

//获取作者积分
function get_jefen($uid){
$user_jifen = get_user_meta($uid,’user_jifen’);
if(empty($user_jifen)){
$num = 0;
}else{
$num = ($user_jifen[0]==”) ? 0 : $user_jifen[0];
}
return $num;
}

第四步:修改上图第3部分:

因为要调用文章总浏览量,所以我们先在wordpress主题的functions.php文件中添加获取总浏览量的函数:

//获取作者文章总浏览量
function get_post_views($uid){
$user_views = get_user_meta($uid,’user_views’);
if(empty($user_views)){
$num = 0;
}else{
$num = ($user_views[0]==”) ? 0 : $user_views[0];
}
return $num;
}

因为要获取用户最后登录时间,所以,我们要为用户添加最后登录时间字段,同样,在functions.php文件中添加如下:

//在用户登录时,创建一个新字段存储用户登录时间
function insert_last_login( $login ) {
global $user_id;
date_default_timezone_set(PRC);// 纠正8小时时差
$user = get_userdatabylogin( $login );
update_user_meta( $user->ID, ‘last_login’, date(‘Y-m-d H:i:s’) );
}
add_action( ‘wp_login’, ‘insert_last_login’ );

再来修改上图第3部分的代码,如下:

<ul class=”author_option”>

<li>文章浏览:<?php echo get_post_views($uid) ?></li>
<li>个人网站:<?php echo get_user_meta($uid,’user_site’)[0]; ?></li>
<li>加入时间:<?php echo get_the_author_meta( ‘user_registered’,  $uid); //注册时间 ?></li>

<li>最近登录:<?php echo get_user_meta($uid, ‘last_login’, true); ?></li>
</ul>

第五步:修改上图第4部分:

第4部分是网站最新文章,代码如下:

<!– 最新文章 –>
<div class=”new_post”>
<?php
echo ‘<h2>最新文章</h2>’;
query_posts(‘posts_per_page=10&orderby=new&ignore_sticky_posts=1’);
while(have_posts()):the_post();
echo ‘<li><a href=”‘.get_permalink().'” title=”‘.$post->post_title.'”>’.$post->post_title.'</a></li>’;
endwhile;
wp_reset_query();
?>
</div>

第六步:修改上图第5部分:

上图第5部分,也就是author.php用户中心的右侧主体。默认情况下显示的是用户发表的文章列表,修改后的代码如下:

<!– 当前用户发表的文章列表 –>
<div class=”post_list”>
<?php
if(have_posts()): while(have_posts()):
the_post();
echo ‘<div class=”post”>’;
echo ‘<h2><a class=”title” href=”‘.get_permalink().'”>’.$post->post_title.'</a></h2>’;
echo ‘<div class=”intro”>’.mb_substr(strip_tags($post->post_content),0,150).’……</div>’;
echo ‘<div class=”info”>’;
echo ‘<span class=”tags”>’; the_tags(‘标签:’, ‘, ‘, ”); echo ‘</span>’;
echo ‘</div>’;
echo ‘<div class=”info”>’;
echo ‘<span class=”tags”>’; the_category(); echo ‘</span>’;
echo ‘<span class=”eye”>’;  post_views(‘ ‘, ”);   echo ‘</span>’;
echo ‘<span class=”pinglun”>’.$post->comment_count.'</span>’;
//当前登录用户是作者本人时,打开编辑
if($current_user->ID==$curauth->ID){
echo ‘<a href=”‘.get_bloginfo(“url”).’/?author=’.$current_user->ID.’&act=author_edit&pid=’.$post->ID.'”>编辑</a>’;
}
echo ‘</div>’;
echo ‘</div>’;
endwhile;
else:
echo ‘<div class=”post”>目前还没有发表文章。</div>’;
endif;
wp_reset_query();
?>
</div>

通过上面的几步骤,我们对wordpress主题用户中心主页面author.php进行了改造:修改a标签链接到对应的页面、调用后台数据展现作者的积分、关注数、粉丝数、发表的文章数、总浏览量以及用户发表的文章列表和网站的最新文章。嗯,今天就写到这里。谢谢参阅。

 

6:给author_write.php添加静态代码

在上一章中,我们为author.php这个wordpress主题用户中心页面调用了后台的数据:积分、关注数、粉丝数、文章数、文章总浏览量以及用户发表的文章列表等。本章,我们再来实现author_write.php的写博客功能。一般wordpress默认是在后台写文章的,而我们的wordpress主题用户中心需要前台用户可以在前台写博客文章。下面,一起来看看如何实现。

第一步:修改author.php文件:

给author.php文件添加如下代码来获取当前作者的信息:

<?php

global $wp_query;
$curauth = $wp_query->get_queried_object(); //获取作者信息

$uid = $curauth->ID;

?>

第二步:创建author_post_list.php文件:

这个文件是作者发表的文章列表。把原main.php文件中的代码剪切到author_post_list.php文件中。

第三步:修改main.php文件:

给main.php文件添加一个判断,如果act=list时,右侧主体显示文章列表;如果act=author_write时,右侧主体显示 写博客 页面。把main.php文件必成如下:

<?php
if($act == ‘list’){
require_once(“author_post_list.php”);
}else{
require_once(“author_write.php”);
}
?>
这样,在我们点击左边栏上的“文章”链接时,右侧主体会显示作者发表的文章列表;而点击“写博客”按钮时,就会在右侧显示“发表文章”页面。

第四步:添加author_write.php文件静态代码:

本章只给author_write.php文件添加静态代码,因为实现这个页面的所有功能,需要比较麻烦的,所以,我们分2步来实现这个页面,在下一章我们再来实现这个页面的所有功能。前台发表文章,我们一般只需要以下几个字段:文章标题、文章分类目录、文章标签、文章内容,所以我们制作author_write.php页面时,只需要针对这几个字段添加表单元素即可。代码如下:

<div class=”authors”>
<h1>发表文章</h1>
<!– 关于表单样式,请自行调整–>
<form method=”post” action=”<?php echo $_SERVER[“REQUEST_URI”]; ?>” >
   <div class=”write_title”>
   <label for=”tougao_title”>文章标题<span>*</span></label>
       <input type=”text” size=”40″ value=”” id=”tougao_title” name=”tougao_title” />
   </div>
   <div class=”write_cat”>
        <label for=”tougaocategorg”>文章分类<span>*</span></label>
       <?php
                //调用网站的分类列表,以下拉列表形式展示
                wp_dropdown_categories(‘show_option_none=请选择文章分类&id=tougao-cat&show_count=1&hierarchical=1&hide_empty=0’);
            ?>
   </div>
        <div class=”write_tags”>
            <label >文章标签</label>
            <input type=”text” name=”post_tags” />
            <em>多个标签用 英文逗号 隔开</em>
        </div>
   <div class=”write_con”>
   <label>文章内容<span>*</span></label>
            <?php wp_editor( ”, ‘myeditor’, array() );  //调用wordpress自带的编辑器   ?>
   </div>
   <div class=”write_submit”>
       <input type=”hidden” value=”send” name=”tougao_form” />
            <input type=”hidden” name=”user_id” value=”<?php echo $current_user->ID; ?>”>
       <input type=”submit” id=”tougao_buttom” value=”提交” />
   </div>
</form>
</div>

给这些代码元素添加CSS样式:

/*用户写博客*/
.authors h1{ width:100%; font-size:0.2rem; margin-bottom: 0.3rem; padding-bottom: 0.1rem; border-bottom:1px dashed #ccc; }
.authors h1 a{ float:right; font-size:0.16rem; color:#FF7256; }
.authors form{ width:100%; float:left; font-size:0.16rem; margin-bottom:0.3rem; }
.authors form label{ width:1rem; display:inline-block; }
.authors form span{ color:red; }
.authors form .write_title,.authors form .write_cat,.authors form .write_con{ width:100%; float:left; margin-bottom:0.2rem; }
.authors form .write_title input{ width:80%; line-height: 0.3rem; }
.authors form .write_cat select{ width:40%; height: 0.3rem; line-height: 0.3rem; }
.authors form .write_con textarea{ width:80%; height: 3rem; line-height: 0.3rem; vertical-align:top; }
.authors form .write_submit{ margin-left:1.1rem; float:left; }
.authors form .write_submit input{ width:1.5rem;height: 0.4rem; line-height: 0.4rem; text-align:center; font-size:0.2rem; }
#wp-myeditor-wrap{ margin-top:0.15rem; }
.authors form .write_tags{ width:100%; float:left; margin-bottom:0.2rem; }
.authors form .write_tags input{ width:50%; }
.authors form .write_tags em{ font-size:0.13rem; }

这样,我们就把author_write.php写博客文章页面的静态代码就写好了。实现的效果如下图:

wordpress CMS主题用户中心开发 6:给author_write.php添加静态代码

7:author_write.php添加php处理代码

我们接着来对wordpress主题的用户中心的author_write.php写博客文章页面进行完善。上一章中我们只是给它添加了前台静态代码,实现前台的展示效果。本章,我们将对author_write.php页面表单提交的数据进行处理,进而写入到wordpress数据库中。

第一步:判断页面是否提交了表单:

在这个页面的表单中我们添加了一个隐藏的表单元素tougao_form,我们只需判断这个表单元素在提交的数据中是否存在,如果存在,就表示正在提交表单数据,如下:

//发表文章
if( isset($_POST[‘tougao_form’]) && $_POST[‘tougao_form’] == ‘send’){

//在这里对表单提交的数据进行处理,下面的Php代码都写在这里

}

第二步:限制频繁发表文章

为了防止机器人乱发表文章,这里设置一个瓶颈,限制同一用户发表2篇文章之间的间隔是120秒。

global $wpdb;
$last_post = $wpdb->get_var(“SELECT post_date FROM $wpdb->posts WHERE post_type = ‘post’ ORDER BY post_date DESC LIMIT 1”);

// 博客当前最新文章发布时间与要投稿的文章至少间隔120秒。
if ( current_time(‘timestamp’) – strtotime($last_post) < 120 ){
echo (‘<script>alert(“您写博客也太勤快了吧,先歇会儿!”); history.back(); </script>’);
return;
}

第三步:获取表单数据。

这里获取表单提交上的数据,这些数据将会被写入到wordpress数据库中。代码如下:

// 表单变量初始化
$title = isset( $_POST[‘tougao_title’] ) ? trim(htmlspecialchars($_POST[‘tougao_title’], ENT_QUOTES)) : ”;  //文章标题
$category = isset( $_POST[‘cat’] ) ? (int)$_POST[‘cat’] : 0; //文件分类
$content = isset( $_POST[‘myeditor’] ) ? $_POST[‘myeditor’] : ”; //文章内容
$user_id = isset( $_POST[‘user_id’] ) ? (int)$_POST[‘user_id’] : 0;//发表文章的用户ID

$post_tags = isset( $_POST[‘post_tags’] ) ? trim(htmlspecialchars($_POST[‘post_tags’], ENT_QUOTES)) : ”; //文章的tags标签

第四步:对数据进行必要的判断:

判断的目的,为了防止以下情况:空标题、标题在数据库是否已经存在、没有选择分类、文章内容过短或过长。代码如下:

// 标题是否为空
if ( empty($title) || mb_strlen($title) > 100 ){
echo (‘<script>alert(“标题必须填写,且长度不得超过100字”); history.back(); </script>’);
return;
}

//判断标题是否存在
$rel = $wpdb->get_row(‘select * from wp_posts where post_title=”‘.$title.'”‘);
if($rel){
echo (‘<script>alert(“内容重复,请重新填写。”); history.back(); </script>’);
return;
}

//分类有没有选择
if($category<=0){ //选择分类
echo (‘<script>alert(“你没有选择分类”); history.back(); </script>’);
return;
}
//文章内容长度判断
if ( empty($content) || mb_strlen($content) > 10000 || mb_strlen($content) < 100){
echo (‘<script>alert(“内容必须填写,且长度不得超过10000字,不得少于100字”); history.back(); </script>’);
return;
}

第五步:将表单数据写入到数据库。

经过以上几步的过滤,我们可以把表单数据写入到wordpress的数据库中了。代码如下:

$tougao = array(
    ‘post_status’   => ‘publish’, //publish表示正式发表。
        ‘post_title’ => $title,
        ‘post_content’ => $content,
        ‘post_category’ => array($category)
    );
    // 将文章插入数据库
    $status = wp_insert_post( $tougao ); //返回文章ID

第六步:添加文章的tag标签。

因为wordpress的文章与文章标签在数据库中不是在同一张数据表中的,所以,wp_insert_post()函数在插入数据时,并没有把tags标签写入到数据库中,所以,我们要在此对tag进行插入操作,如下:

if ($status != 0){ //如果wp_insert_post()插入成功

wp_set_post_tags( $status, explode(“,”,$post_tags) );//插入tags标签

wp_die(‘文章发表成功!’,’文章发表成功!’);

}else{
wp_die(‘文章发表失败!’,’文章发表失败!’);
}

一般情况下,到这里,我们就可以结束了。但是,我们这里是在制作wordpress主题的用户中心,不仅是为了发表文章,我们还要在发表文章时实现积分的累加。这个在下一章中,我们再接着往下讲。嗯,本章就介绍到这里。谢谢大家参阅哦。

8:用户积分体系的形成

wordpress主题的用户积分由几个部分组成:发表文章获取积分、发表评论获取积分、第天限制前5篇文章可以获取积分、每天前10个评论可以获取积分。即:用户积分=发表文章数+评论数。下面,我们就来完成wordpress CMS主题的用户积分体系。

第一步:每发表一篇文章增加积分

这个要在我们写好的author_write.php文件的php处理代码中添加积分代码,就是在发表文章成功的时候,我们增加该用的积分,每发表成功1篇,就增加2个积分。并限制每天只有前5篇文章可以获取积分。代码如下:

if ($status != 0){

//插入tags标签
wp_set_post_tags( $status, explode(“,”,$post_tags) );

$num = get_today_posts($user_id);//获取今天发表文章的总数
$author_write_num = 5; //后台设置 每天获积分几次,当然这里可以直接写一个数字

if($num <= $author_write_num){ //在今天发表的前 5 篇文章,记录积分

//发表成功,就记录一次当前用户的积分:积分=
$jifens_add = 2; //发表成功,就加2个积分
$jifen = get_user_meta($user_id,’user_jifen’)[0] + $jifens_add;
update_user_meta($user_id,’user_jifen’,$jifen);

}

wp_die(‘文章发表成功!’,’文章发表成功!’);

}else{

wp_die(‘文章发表失败!’,’文章发表失败!’);

}

上面代码中的加粗的部分,就是我们添加的积分代码。

第二步:添加获取当前发表的文章数。

要想限制每天只有前5篇文章可以获取积分,就必须获取到每天所发表的文章数,在functions.php代码中添加如下代码:

//获取今天作者发表的文章数
function get_today_posts($uid,$post_type =’post’) {

global $wpdb;
$date = date(“Y-m-d”,time());
$sql = “SELECT COUNT(ID) FROM {$wpdb->posts} WHERE post_status=’publish’ AND post_author={$uid} AND post_type=’post’ AND (DATE_FORMAT(post_date,’%Y-%m-%d’) = ‘{$date}’)”;
//return $sql;
$numposts = $wpdb->get_var($sql);
return $numposts;

}

第三步:每评论一次获取积分。

这里,当用户每评论一次,就增加1个积分。并且限制每天只有前10个评论或以获取积分。在wordpress CMS主题的functions.php文件中添加如下代码:

//每天前10次评论 给 积分
function add_comment_difen( $commentdata ) {

global $wpdb;
$currentUser = wp_get_current_user();
$uid = $currentUser->ID;
$sql = “SELECT comment_date FROM {$wpdb->comments} WHERE user_id={$uid} ORDER BY comment_date DESC LIMIT 1”;
$last_post = $wpdb->get_var($sql);
// 间隔120秒,才能再次评论
if ( current_time(‘timestamp’) – strtotime($last_post) < 120 ){

wp_die(“<script>alert(‘您评论也太勤快了吧,先歇会儿!’); history.back(); </script>”);

}

if(!empty($currentUser->roles)) {

$date = date(“Y-m-d”,time());
$sql = “SELECT COUNT(comment_ID) FROM {$wpdb->comments}
WHERE user_id={$uid} AND (DATE_FORMAT(comment_date,’%Y-%m-%d’) = ‘{$date}’)”;
$num = $wpdb->get_var($sql); //获取当前用户的评论次数

$author_commen_num = get_option(“swt_author_commen_num”); //后台设置 每天评论获几次积分
if($num < $author_commen_num){ //如果当天评论次数 < 11

$jifen = get_jefen($uid); //获取当前用户积分
update_user_meta($uid,’user_jifen’,$jifen+1); //

}

}
return $commentdata;

}
add_action( ‘preprocess_comment’ , ‘add_comment_difen’, 20);

通过上面的3步,我们的wordpress CMS主题基本上就完成了积分体系。当然,在后期,我们还可以为积分体系添加新的成员,如:推为精品文章可以获10个积分、获取点赞就增加1个积分等等。

9:帐号设置页面author_user.php静态代码添加

wordpress CMS主题用户中心的开发至今,已经完成了author.php用户中心主页面和author_write.php写博客文章页面,以及用户积分体系的完善。在接下来的2节中,我们们来完成author_user.php用户帐号设置页面。作为一个比较完善的wordpress主题用户中心,我们当然要考虑到注册用户可能需要添加或修改一些自己的相关信息,如:个人网站、QQ、个性签名等。

本章我们将主要是添加author_user.php文件 的静态代码,在下一章中,我们再添加php处理代码。

author_user.php帐号设置页面的表单,我们要包含以下几个元素:用户名、博客名、所在城市、个人网站、QQ号、新浪博客、个性签名、个人说明等,整体布局上,为了效果齐整,我们将采用table表格来布局。效果如下图:

wordpress CMS主题用户中心开发 9:帐号设置页面author_user.php静态代码添加

第一步:修改author_main.php代码。

因为author_user.php帐号设置页面也是在author.php用户中心页面的右侧主体中显示,所以,我们要先修改author_main.php代码,判断,如果是act==user_edit,就显示author_user.php页面内容。修改后台的代码如下:

if($act == ‘list’){
require_once(“author_post_list.php”);
}elseif($act == ‘author_write’){
require_once(“author_write.php”);
}elseif($act == ‘user_edit’){
require_once(“author_user.php”);
}

第二步:添加author_user.php静态代码:

<div class=”user_option”>
<h1>个人资料修改</h1>
<form id=”your-profile” action=”” method=”post” novalidate=”novalidate”>
<table class=”form-table” cellspacing=15>
<tr class=”user-user-login-wrap”>
<th><label for=”user_login”>用户名</label></th>
<td>
<input type=”text” name=”user_login” id=”user_login” value=”<?php echo $current_user->user_login; ?>” disabled=”disabled” >
<span class=”description”>用户名不可更改。</span>
</td>
</tr>
<tr class=”user-nickname-wrap”>
<th><label for=”nickname”>博客名 <span class=”description”></span></label></th>
<td>
<input type=”text” name=”nickname” id=”nickname” value=”<?php echo $current_user->nickname; ?>” >
</td>
</tr>
<tr class=”user-email-wrap”>
<th><label for=”addess”>所在城市<span class=”description”></span></label></th>
<td>
<input type=”text” name=”addess” id=”addess” value=”<?php echo $current_user->addess; ?>” class=”regular-text ltr”>
</td>
</tr>
<tr class=”user-url-wrap”>
<th><label for=”user_site”>个人网点</label></th>
<td><input type=”url” name=”user_site” id=”user_site” value=”<?php echo $current_user->user_site; ?>” ></td>
</tr>
<tr class=”user-qq-wrap”>
<th><label for=”qq”>QQ</label></th>
<td><input type=”text” name=”qq” id=”qq” value=”<?php echo $current_user->qq; ?>” ></td>
</tr>
<tr class=”user-sina_weibo-wrap”>
<th><label for=”sina_weibo”>新浪微博</label></th>
<td><input type=”text” name=”sina_weibo” id=”sina_weibo” value=”<?php echo $current_user->sina_weibo; ?>”></td>
</tr>
<tr class=”user_sign”>
<th><label for=”user_sign”>个性签名</label></th>
<td><input type=”text” name=”user_sign” id=”user_sign” value=”<?php echo $current_user->user_sign; ?>”></td>
</tr>
<tr class=”user-description-wrap”>
<th><label for=”description”>个人说明</label></th>
<td>
<textarea name=”description” rows=”5″ cols=”30″><?php echo $current_user->description; ?></textarea>
<p class=”description”>分享关于您的一些信息。可能会被公开。</p>
</td>
</tr>
<tr class=”user-profile-picture”>
<th><label>资料图片</label></th>
<td>
<?php echo get_avatar( $current_user->ID,30 ); //获取作者头像 ?>
<p class=”description”>您可以在 <a href=”https://cn.gravatar.com/”>Gravatar头像网站</a> 添加和修改您的资料图片。</p>
</td>
</tr>
<tr>
<th></th>
<td>
<input type=”hidden” name=”action” value=”update_user”>
<input type=”hidden” name=”user_id” id=”user_id” value=”<?php echo $current_user->ID; ?>”>
<input type=”submit” name=”submit” value=”更新个人资料”>
</td>
</tr>
</table>
</form>
</div>

通过上面的代码,我们就完成了author_user.php帐号设置页面的静态代码添加。这时,我们进入wordpress主题用户中心页面author.php后,点击“帐号设置”按钮,就可以进入到author_user.php帐号设置页面。当然,这时,还没有设置帐号的功能,只能添加了静态代码布局而已。在下一章中,我们添加好php处理代码后,我们就可以对我们的帐号在帐号设置页面进行设置了。

10:添加author_user.php的php处理代码

author_user.php文件添加了静态的表单代码,我们要想实现前台设置用户帐号的功能,就必须为这个author_user.php文件添加php处理代码,用来处理这个页面提交的表单数据。

第一步:添加用户判断。

我们制作wordpress主题用户中心的帐号设置时,只允许用户自己才可以修改自己的帐号信息,而其它人是不能修改别人的信息的。所以,在author_user.php代码中我们要添加一个判断:如果 当前用户==作者,就允许修改,否则就不允许修改,代码如下:

<?php
    //这里是表单数据处理代码
    //如果当前用户 = 文章作者  ,就可以编辑
    if($current_user->ID == $curauth->ID){
?>
    这里放上一章中的author_user.php静态表单代码
<?php } ?>

第二步:添加表单数据处理代码。

在上面的用户判断代码的上面添加如下代码:

//先判断form表单提交
if(isset($_POST[‘submit’]) && isset($_POST[‘action’]) && $_POST[‘action’]==’update_user’ ){
//获取表单数据,把它保存在数组中,当然,也可不保存为数组
$data[‘uid’] = isset($_POST[‘user_id’]) ? $_POST[‘user_id’] : ”;
$data[‘nickname’] = isset($_POST[‘nickname’]) ? $_POST[‘nickname’] : ”;
$data[‘addess’] = isset($_POST[‘addess’]) ? $_POST[‘addess’] : ”;
$data[‘user_site’] = isset($_POST[‘user_site’]) ? $_POST[‘user_site’] : ”;
$data[‘qq’] = isset($_POST[‘qq’]) ? $_POST[‘qq’] : ”;
$data[‘sina_weibo’] = isset($_POST[‘sina_weibo’]) ? $_POST[‘sina_weibo’] : ”;
$data[‘user_sign’] = isset($_POST[‘user_sign’]) ? $_POST[‘user_sign’] : ”;
$data[‘description’] = isset($_POST[‘description’]) ? $_POST[‘description’] : ”;
//这里用update_user_meta()来更新用户字段,要一一对应
update_user_meta($data[‘uid’],’nickname’,$data[‘nickname’]);
update_user_meta($data[‘uid’],’addess’,$data[‘addess’]);
update_user_meta($data[‘uid’],’user_site’,$data[‘user_site’]);
update_user_meta($data[‘uid’],’qq’,$data[‘qq’]);
update_user_meta($data[‘uid’],’sina_weibo’,$data[‘sina_weibo’]);
update_user_meta($data[‘uid’],’user_sign’,$data[‘user_sign’]);
update_user_meta($data[‘uid’],’description’,$data[‘description’]);
echo ‘<script>alert(“修改成功。”);  history.back(); </script>’;
return;
}
有人可能要问了:为什么不直接更新wp_users用户数据表呢?那样不是更简单一点吗?是的,如果直接更新wp_users表是要简单的多。但是,这里的用户字段并不都是放在wp_users表中的,有的是自定义字段,而用户的自定义字段是放在wp_usermeta表中的,这样一样,就要进行多表操作。而wordpress自己就提供了修改自定义字段的函数update_user_meta(),为什么不用它呢?所以,这里我们就用到它了。

11:用户关注与粉丝代码处理

在前面的章节中,我们介绍了wordpress CMS主题用户中心开发的主页面开发、前台写博客文章、前台用户帐号设置修改、用户积分体系等。今天,我们是wordpress主题用户中心开发的最后一章——用户关注和粉丝的实现。

我们要实现的功能:我们登录后,进入到其它用户的用户中心,点击“关注”按钮后,其它用户会增加1个粉丝,而我们自己增加1个关注。

 

这个实现起来不难。前面我们已经为每一个用户添加了2个自定义字段:关注字段和粉丝字段。本章我们就会用到它们。点击“关注”后,自己的关注字段增加1,别人的粉丝字段增加1。

第一步:添加jquery点击事件处理。

当点击“关注”按钮时,就通过ajax向服务器提交数据,数据包括:当前登录的用户id和act动作,代码如下:

//点击关注
$(“.guan_zu”).click(function(){
var uid = this.id;
$.ajax({
url: “<?php echo THEME_PATH; ?>/author_fanc.php”, //php处理文件
type:’post’,
data:{ uid:uid,action:’add_fanc’ },
success:function(e){
if(e==’false’){
alert(‘请先登录。’);
location.href = “<?php%20echo%20get_bloginfo(‘url’); ?>/wp-login.php”; //跳转到登录页面
return;
}else{
location.href=location.href;
}
}
})
});

这里通过ajax做了一个处理:把数据传递到author_fanc.php关注粉丝处理文件。然后,author_fanc.php就会对当前用户和被点击用户在数据库中进行相关处理。

第二步:添加author_fanc.php处理代码。

1:连接数据库。

因为这个author_fanc.php不是wordpress主题模板文件,而是一个单独的处理文件,所以,我们要先连接wordpress数据库。我们可以通过php的原始方法mysql_connect()来连接数据库,但我们这里用的是wordpress,wordpress的根目录下的wp_load.php已连接数据,所以,我们只需要引用到它就可以了。代码如下:

define(‘BASE_PATH’,str_replace( ‘\\’ , ‘/’ , realpath(dirname(__FILE__).’/../../../’)));//获取根目录
require(BASE_PATH.’/wp-load.php’ );

2:接收数据并处理。

接收通过ajax提交过来的数据,并对当前用户和被点击用户的自定义字段——关注或粉丝进行更新,代码如下:

$uid = isset($_POST[‘uid’]) ? $_POST[‘uid’] : 0;

//点击关注
if(isset($_POST[‘action’]) && $_POST[‘action’]==’add_fanc’){

if(!empty($uid)){

//获取当前登录的用户信息
$current_user = wp_get_current_user();
$user_follow = get_user_meta($current_user->ID,’user_follow’); //是一个二维数值 ,一维只有一个元素
$arr = explode(‘,’,$user_follow[0]); //二维元素是一个字符串

if(!in_array($uid,$arr)){

//向当前用户添加关注
array_push($arr,$uid);
$str = implode(“,”,$arr);
$str = trim($str,”,”);
update_user_meta($current_user->ID,’user_follow’,$str);

//向作者添加粉丝
$user_fanc = get_user_meta($uid,’user_fanc’);
$arr2 = explode(“,”,$user_fanc[0]);
if(!in_array($current_user->ID,$arr2)){
array_push($arr2,$current_user->ID);
$str2 = implode(“,”,$arr2);
$str2 = trim($str2,”,”);
update_user_meta($uid,’user_fanc’,$str2);
}
echo “关注成功”;

}else{
echo ‘你已关注’;
}

}else{
echo 0;
}

}

能过上面的代码,我们就实现了用户关注和粉丝功能。当然,这里我们只添加了“增加关注和增加粉丝”的功能模块,没有添加“取消关注和减少粉丝”的功能模块。其实,原理是一样的,如果你感兴趣,可以根据这篇文章的原理来添加“取消关注”的功能。好了,有关wordpress主题用户中心的教程写到这里就全部结束了。如果对你有所帮助,就点个赞吧。

© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容