前奏
在网站留言板有个访客评论自动排第一的功能,之前是这样做的:
把以下代码放入 functions.php 文件内。
/***
* 代码来自黑鸟博客
******/
function AutoFirst(){
global $wpdb;
$queryaf="select comment_author, comment_author_url, comment_date from $wpdb->comments where comment_ID in (select max(comment_ID) from $wpdb->comments where comment_approved='1' and comment_author_url !='' and user_id='0' GROUP BY comment_author_email) ORDER BY comment_date DESC LIMIT 20";
//这边取 20 条数据
$wally = $wpdb->get_results($queryaf);
foreach ($wally as $commentaf){
$tmpy= "<li><span style=\"color:#000000\">• </span><a target=\"_blank\" rel=\"nofollow\" href=\"/go.php?url=".$commentaf->comment_author_url."\">".$commentaf->comment_author."</a></li>";
$outputy .= $tmpy;
}
$outputy = "<ul class=\"liuyanpage-one\" style=\"padding-left: 0px;\">".$outputy."</ul>";
echo $outputy ;
}
本站参考样式:
/***
* 留言版评论自动排第一 - 黑鸟博客出品
******/
.liuyanpage-one ul{color:rgba(255,255,255,.15);font-size: 14px;;overflow: hidden}
.liuyanpage-one ul:after{content:" ";clear:both;display:block}
.liuyanpage-one li{float:left;width:20.0%;position:relative;transition:all .3s ease-out;border-radius:5px;line-height:1.5;height:26px;display:block;overflow: hidden;padding:0px 10px 0px 0px;}
.liuyanpage-one li:hover{background:rgba(230,244,250,.5)}
.liuyanpage-one li a{padding:0px 0px 0px 2px;color:#000000;overflow: hidden}
@media screen and (max-width:760px) {
.liuyanpage-one li{width:50%}
.liuyanpage-one ul{padding-left:5px}}
@media screen and (min-width:768px) and (max-width:990px){
.liuyanpage-one li{width:20%}
.liuyanpage-one ul{padding-left:5px}}
在需要调用的域名直接使用以下代码调用即可
<div>< ?php AutoFirst(); ?></div>
这样就基本可以用了,但是缺点也很明显,网站的留言板每次打开都得等上大几秒才开始显示页面,相当的影响访客体验。
AJAX 功能测试
站长首先想到的是不是可以延迟加载或者异步加载,我这一菜鸟本来还在找怎么通过 JavaScript 异步调用 PHP 函数,转了一圈明白自己多么二愣子,大家回答基本一致的,这基本只能 ajax 通过 get 或 post 提交数据请求服务器地址,再通过返回的值来处理。
首先还是在 wordpress 主题的 functions.php 函数内添加以下代码:
function fun_hello_world(){
echo '恭喜你,服务器响应成功!!';
wp_die();//停止内容
}
add_action('wp_ajax_hello_world', 'fun_hello_world'); //管理员调用
add_action('wp_ajax_nopriv_hello_world', 'fun_hello_world'); //登录用户可以调用
其次钩子函数必须是 wp_ajax_* (这个是 admin 用户的权限)和 wp_ajax_nopriv_*(这个是普通用户的权限),最后 fun_hello_world()函数里必须有一个 echo 和 wp_die()或 die()结束。并且 echo 的必须是 string 类型。
在前端需要调用的地方定义一个占位标签,我这边放在留言板的正文内容前。
<div id="ajaxtxtc"></div>
再引入以下 JavaScript 代码可以直接使用<script>
标签包裹放在任意可以调用的地方。
var data = {action: 'fun_hello_world'};
$.post("<?php echo admin_url('admin-ajax.php');?>", data, function (data) {
$("#ajaxtxtc").html(data); //获取内容回调
});
测试成功,再替换为 AutoFirst()函数,现在可以迅速地先显示留言板页面,并且再过几秒户也能正确显示 ajax 返回的结果。
其他
分享一个带参数的示例:
JS 请求端:
jQuery("#submit").click(function () {
jQuery.ajax({
type: 'POST',
url: ajaxurl,
// ajaxurl 为内置 js 变量,值为"/wp-admin/admin-ajax.php"
data: {
'action': 'xiangjia', // ajax action 名称
'param1': parseInt(100 * Math.random()),
'param2': parseInt(100 * Math.random())
},
success: function (data) {
alert("结果:" + data);
},
error: function (data) {
console.log(data);
}
});
});
PHP 响应端:
//action 中形参$tag 需以“wp_ajax_”作为前缀,
//前缀后面为 ajax action 名(如:“xiangjia”)
add_action('wp_ajax_xiangjia', 'xiangjia');
function xiangjia()
{
if (!empty($_POST)) {
$param1 = intval($_POST['param1'], 0);
$param2 = intval($_POST['param2'], 0);
echo $param1 . ' + ' . $param2 . ' = ' . ($param1 + $param2);
exit();
}
echo 0;
exit();
}
这样通过这两个例子基本可以完成需求,站长就一个面向百度编程的伪码农,能搞定着实欣喜。
暂无评论内容