第3回：网络小白使用wordpress建立网站纪实（3）

2022-05-02 • 管理员 • 0 • 955 • 2 • 0

师示一偈曰：百丈竿头不动人，虽然得入未为真。百尺竿头须进步，十方世界是全身。

引自宋·释道原《景德传灯录》卷十

通过主题课程制作并修改的主体已经大体令人满意，当整个网站似乎缺了一点互动，而互动肯定需要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>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;             
                        <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建站的文章就会告一段落了。

         不喜欢 0

D7FECB19D148C1AD1D829F1CD0E23DB0

发表回复

站内搜索

最新评论

归档日历

2024 年 9 月
一 二 三 四 五 六 日
 1
2345678
9101112131415
16171819202122
23242526272829
30  

标签云

C++ (3) QT (4) wordpress (4) 人工智能 (1) 变量抽象 (1) 工程实践 (4) 建立网站 (4) 开发环境 (1) 框架 (2) 物理 (2) 状态机 (5)