小鹿学院 > SEM营销 > 资讯正文
WordPress评论框输入QQ获取头像和昵称的教程
2018-01-15 21:28 小鹿推广

小鹿系列竞价软件覆盖百度、360、搜狗、神马四大搜索平台,采用独创的竞价算法,智能精准出价,一键批量查排名,根据关键词位置实时调整出价,降低出价虚高,稳定排名,节省企业预算。

小鹿竞价软件专题介绍:https://www.xiaolutg.com/bidding/fengchao?ref=menu

评论框输入 QQ 获取头像和昵称这个功能在很多 emlog 博客上都兴起了,不过我发现 wordpress 圈里还不太常见,所以把这个功能做到 wordpress 上,由于每个人的主题评论表单结构节点名称都不太一样,所以根据本教程你不一定能立刻达到想要的效果,要仔细看我下面代码注释。首先我们先看效果图吧:

小鹿推广,竞价软件,SEM营销

WordPress评论框输入QQ获取头像和昵称步骤

步骤一:评论表单插入 QQ字段

这个网上能找到代码,前端找到你主题输出昵称、邮箱、网址的表单结构依样画葫芦添加 input 标签,比如我的表单结构是:

  1. <pclass=“comment-form-author”>
  2. <label>昵称</label>
  3. <inputid=“yuao-comt-author”class=“bs-bb”name=“author”type=“text”value=“<?phpechoesc_attr($comment_author);?>”size=“30”maxlength=“245”required=“required”placeholder=“必填”/>
  4. </p>

添加 QQ 结构照着复制就行了,昵称等文本改成 QQ,注意 name 属性值要改成 new_field_qq,下面传参要用到。

前端加了 input,后端就要添加字段用来存储前端提交到数据库的 QQ 信息。下面的代码添加到主题的 functions.php 里面,注意看注释。

  1. //数据库插入评论表单的qq字段
  2. add_action(‘wp_insert_comment’,’inlojv_sql_insert_qq_field’,10,2);
  3. functioninlojv_sql_insert_qq_field($comment_ID,$commmentdata){
  4. $qq=isset($_POST[‘new_field_qq’])?$_POST[‘new_field_qq’]:false;
  5. update_comment_meta($comment_ID,’new_field_qq’,$qq);//new_field_qq是表单name值,也是存储在数据库里的字段名字
  6. }
  7. //后台评论中显示qq字段
  8. add_filter(‘manage_edit-comments_columns’,‘add_comments_columns’);
  9. add_action(‘manage_comments_custom_column’,‘output_comments_qq_columns’,10,2);
  10. functionadd_comments_columns($columns){
  11. $columns[‘new_field_qq’]=__(‘QQ号’);//新增列名称
  12. return$columns;
  13. }
  14. functionoutput_comments_qq_columns($column_name,$comment_id){
  15. switch($column_name){
  16. case“new_field_qq”:
  17. //这是输出值,可以拿来在前端输出,这里已经在钩子manage_comments_custom_column上输出了
  18. echoget_comment_meta($comment_id,‘new_field_qq’,true);
  19. break;
  20. }
  21. }

步骤二:核心代码–输入qq号实时获取昵称和头像

思路是这样的:

访客在 QQ 表单填入 qq 号之后,鼠标离开,表单失去焦点的时候,用 ajax 方法向后端发送 get 请求,将 qq 号传给后端 API 文件进行处理,处理完毕再把信息返回到前端,依靠 js 把信息(昵称和头像)输出到前端评论表单上。而当访客评论完毕,刷新页面时,我仍然希望昵称和头像显示在评论表单上,这时候就要用到 cookie 操作。

卧龙

百度

点睛

搜狗

标签: 小鹿运营推广
<< 上一篇

给begin主题友情链接页面添加评论

下一篇 >>

WordPress侧边栏如何实现一图三按钮的效果?

相关资讯

关注公众号 获取更多干货资讯

400-998-8026