师示一偈曰:百丈竿头不动人,虽然得入未为真。百尺竿头须进步,十方世界是全身。
引自宋·释道原《景德传灯录》卷十
通过主题课程制作并修改的主体已经大体令人满意,当整个网站似乎缺了一点互动,而互动肯定需要Javascript的支持(也许要ajax支持),这个对我来说就进算入了无人区了,本着需求必须实现的原则,直接使用百度搜索(wordpress 点赞),直接搜索到以下代码加入主题文件:
- 下方代码添加到主题functions.php中:
add_action('wp_ajax_nopriv_bigfa_like', 'bigfa_like');
add_action('wp_ajax_bigfa_like', 'bigfa_like');
function bigfa_like(){
global $wpdb,$post;
$id = $_POST["um_id"];
$action = $_POST["um_action"];
if ( $action == 'ding'){
$bigfa_raters = get_post_meta($id,'bigfa_ding',true);
$expire = time() + 99999999;
$domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false; // make cookies work with localhost
setcookie('bigfa_ding_'.$id,$id,$expire,'/',$domain,false);
if (!$bigfa_raters || !is_numeric($bigfa_raters)) {
update_post_meta($id, 'bigfa_ding', 1);
}
else {
update_post_meta($id, 'bigfa_ding', ($bigfa_raters + 1));
}
echo get_post_meta($id,'bigfa_ding',true);
}
die;
}
- 将下面的代码添加到主题footer.php,此代码依赖于jQuery,因此请确保您已经提前引入jQuery,否则不能正常使用:
<script type="text/javascript">
$.fn.postLike = function() {
if ($(this).hasClass('done')) {
return false;
} else {
$(this).addClass('done');
var id = $(this).data("id"),
action = $(this).data('action'),
rateHolder = $(this).children('.count');
var ajax_data = {
action: "bigfa_like",
um_id: id,
um_action: action
};
$.post("/wp-admin/admin-ajax.php", ajax_data,
function(data) {
$(rateHolder).html(data);
});
return false;
}
};
$(document).on("click", ".favorite",
function() {
$(this).postLike();
});
</script>
- 修改文章页面singular.php,在评论之后的位置添加一个点赞按钮,代码如下:
<a href="javascript:;" rel="external nofollow" target = "_blank" rel="external nofollow" target = "_blank" data-action="ding" data-id="<?php the_ID(); ?>" class="favorite<?php if(isset($_COOKIE['bigfa_ding_'.$post->ID])) echo ' done';?>">喜欢 <span class="count">
<?php if( get_post_meta($post->ID,'bigfa_ding',true) ){
echo get_post_meta($post->ID,'bigfa_ding',true);
} else {
echo '0';
}?>
</span>
</a>
我看过有人把鱼放进瓶子
节选自电影极度深寒/Deep Rising (1998)台词 01:10:00
拿瓶塞紧紧封住
然后丢给小章鱼
章鱼先用触角摸摸瓶子
不到两分钟时间
就打开瓶塞吃掉里头的鱼
这故事有什么教训?
以上代码经过实验,基本能实现要求,但是有几点不足:
- 每人每次只能点击一次,很不爽,这个本身就是一个互动,作者不希望添加什么cookie限制。
- 在本地执行,效率还可以,但是,在服务器上运行,网页刷新速度特别慢,而且点击执行也很慢,作者分析下来是因为js代码保存在footer.php中,没有经过require.js加速。
- 没有点赞图片,不太好看。
- 作者希望也添加点踩的功能,进一步添加互动性。
对于以上问题,作者做了一下优化:
- 删除cookie限制,以及标志页面进入的done类(CSS类)限制,测试成功。
- 将JavaScript脚本(jQuery语言)放到app.js里,删除JavaScript标签,测试失败,根本不执行(这时候我内心是崩溃的,一度想放弃需求,但我想我应该比章鱼聪明一点),但后来我参考了app.js里其他函数的写法,发现了一点我以前在书中读过的,为防止jquery中的$符号被解释成其他意思,要使用匿名函数(应该是这个名词,名词太多了)把jQuery语句包含起来(Java的语法始终怪怪的),抱着试一试的态度,依葫芦画瓢,把这个脚本函数包含起来之后,竟然ok了,可见每次都是一个起承转合的过程。
- 使用Font Awesome框架里的图标装饰点赞按钮,并且可以根据Font Awesome框架里css类,并调整图标大小,具体见后续代码(这个功能在Font Awesome示例页也有写)。
- 使用wordpress文章的自定义字段功能,重新添加了两个自定义字段,用于保存点赞数和点踩数,并按照原先的阅读量字段读写/设置方式,添加了四个函数,注意,在两个字段的设置函数里,并不能使用is_singular()函数,这是因为,设置函数是由js调用的,并不在singular.php文件中。
修改后的代码如下:
- functions.php中添加的代码:
function wordpresskt_set_like( $post_id )
{
if ( ! empty( $post_id ) )
{
$like = get_post_meta($post_id, 'bigfa_like', true);
$like = ! empty( $like ) ? $like : 0;
$like++;
update_post_meta($post_id, 'bigfa_like', $like);
}
}
function wordpresskt_get_like( $post_id ) {
if ( ! empty( $post_id ) ) {
$like = get_post_meta($post_id, 'bigfa_like', true);
$like = ! empty( $like ) ? (int)$like : 0;
return $like;
}
}
function wordpresskt_set_unlike( $post_id )
{
if ( ! empty( $post_id ) )
{
$unlike = get_post_meta($post_id, 'bigfa_unlike', true);
$unlike = ! empty( $unlike ) ? $unlike : 0;
$unlike++;
update_post_meta($post_id, 'bigfa_unlike', $unlike);
}
}
function wordpresskt_get_unlike( $post_id ) {
if ( ! empty( $post_id ) ) {
$unlike = get_post_meta($post_id, 'bigfa_unlike', true);
$unlike = ! empty( $unlike ) ? (int)$unlike : 0;
return $unlike;
}
}
add_action('wp_ajax_nopriv_bigfa_like', 'bigfa_action_like');
add_action('wp_ajax_bigfa_like', 'bigfa_action_like');
function bigfa_action_like(){
global $wpdb,$post;
$id = $_POST["um_id"];
$action = $_POST["um_action"];
if ( $action == 'like')
{
wordpresskt_set_like( $id ) ;
echo wordpresskt_get_like( $id ) ;
}
if ( $action == 'unlike')
{
wordpresskt_set_unlike( $id ) ;
echo wordpresskt_get_unlike( $id ) ;
}
die;
}
- app.js中添加的代码:
(function($) {
$.fn.postLike = function() {
var id = $(this).data("id"),
action = $(this).data('action'),
rateHolder = $(this).children('.count_like');
var ajax_data = {
action: "bigfa_like",
um_id: id,
um_action: action
};
$.post("/wp-admin/admin-ajax.php", ajax_data,
function(data) {
$(rateHolder).html(data);
});
return false;
};
$(document).on("click", ".like",
function() {
$(this).postLike();
});
$.fn.postunLike = function() {
var id = $(this).data("id"),
action = $(this).data('action'),
rateHolder = $(this).children('.count_unlike');
var ajax_data = {
action: "bigfa_like",
um_id: id,
um_action: action
};
$.post("/wp-admin/admin-ajax.php", ajax_data,
function(data) {
$(rateHolder).html(data);
});
return false;
};
$(document).on("click", ".unlike",
function() {
$(this).postunLike();
});
})(jQuery);
- singular.php中添加的代码(在评论框后面):
<!--点赞-->
<hr />
<div class="my-thumbs">
<a href="javascript:;" rel="external nofollow" data-action="like" data-id="<?php the_ID(); ?>"class="like" style="color:green !important;">
<span class="fa fa-thumbs-up"></span>喜欢 <span class="count_like"><?php echo wordpresskt_get_like(get_the_ID()); ?> </span></a>
<a href="javascript:;" rel="external nofollow" data-action="unlike" data-id="<?php the_ID(); ?>"class="unlike" style="color:red !important;">
<span class="fa fa-thumbs-down"></span>不喜欢 <span class="count_unlike"><?php echo wordpresskt_get_unlike(get_the_ID()); ?> </span></a>
</div>
作者还额外在文章的元信息显示的位置添加了点赞数和点踩数显示,就不一一赘述了。下一回,会总结一下宝塔页面部署课程的心得,之后,wordpress建站的文章就会告一段落了。
D7FECB19D148C1AD1D829F1CD0E23DB0
发表回复
要发表评论,您必须先登录。