最近主题博客打赏的人越来越多,想着给打赏做个反馈功能,不然都不知道谁打赏我了,打赏的人也没有看到什么不一样的。然后想起了 直播中的打赏效果。嘿嘿!造一个来。

wp/wordpress如何查询数据库,调用指定数据表的内容!-Qui-Note

1.先用前端技术:html+js+css,实现会动的效果。

<style type="text/css"> 
    .reward-slide{position: fixed;right: 20px;bottom: 20px;z-index: 666;width: 280px;height: 200px;overflow: hidden;font-size: 14px;}
    .reward-item{padding: 10px 30px;margin-bottom: 10px;background:rgba(0,0,0,.8);border-radius: 30px;color: #fff;}
    .reward-price{color: #ff2222;font-weight: 500;font-size: 16px;}
    .close{position: fixed;right: 20px;bottom: 260px;background: rgba(0,0,0,.6);width: 30px;cursor: pointer;height: 36px;color: #fff;text-align: center;line-height: 36px;transform:scaleY(0.8) ;}
</style>
    	<div class="reward-slide">
    		<div class="close">X</div>
    		<div class="slider-ul">
	    		<div class="reward-item">
	    			<span class="reward-name">张1**</span> 赞助了 陈小知 <span class="reward-price">9.9</span> 元
	    		</div>
	    		
	    		<div class="reward-item">
	    			<span class="reward-name">张2**</span> 赞助了 陈小知 <span class="reward-price">19.9</span> 元
	    		</div>
	    		
	    		<div class="reward-item">
	    			<span class="reward-name">张3**</span> 赞助了 陈小知<span class="reward-price">8.8</span> 元
	    		</div>
	    		
	    		<div class="reward-item">
	    			<span class="reward-name">张4**</span> 赞助了 陈小知 <span class="reward-price">1.9</span> 元
	    		</div>
	    		
	    		<div class="reward-item">
	    			<span class="reward-name">张5**</span> 赞助了 陈小知 <span class="reward-price">2.9</span> 元
	    		</div>
    		</div>
    		<div class="slider-ul2"></div>
    	</div>
 
<script type="text/javascript" async>
     let slide = document.querySelector('.reward-slide');
     let items = document.querySelectorAll(".reward-item");
			 reward(1000);
     function reward(time){
     	if(items.length<4){
     		return
     	}
     	let ul1 = document.querySelector('.slider-ul');
     	let ul2 = document.querySelector('.slider-ul2');
     	ul2.innerHTML = ul1.innerHTML;
     	slide.scrollTop = 0;
     	var timer = setInterval(rollStart,time)
     }
     function rollStart(){
    	let ul1 = document.querySelector('.slider-ul');
     	let ul2 = document.querySelector('.slider-ul2');
    	 if (slide.scrollTop >= ul1.scrollHeight) {
			 slide.scrollTop = 0;
			     } else {
			 slide.scrollTop = slide.scrollTop + 51;
			     }
     }
     $(".close").click(function(){
     	$(".reward-slide").hide()
     })
</script>

2.连接WP数据库,读取数据(我的支付是用的模板兔的Erphpdown插件)

静态功能实现了,那么动态数据怎么办?当然是调取了,可不能有一个手动添加一个,首先那样不及时,再者后期多了会类似的,最好还是直接查询数据库!
wp连接数据库时通过 全局变量 $wpdb ,这个$wpdb 全局变量是负责与WordPress数据库交流的类的实例化,怎么用?

global $wpdb;  
$res = $wpdb -> get_results(sql); 

这样sql语句查询的结果就返回给了 $res ,不会sql的可以看看我之前总结的入门级别的myql常用方法:https://course.51qux.com/category/webshare/msq

我们想要的是 谁 打赏了多少钱,连上数据库发现数据在  icealipay 数据表里面 ,支付成功是ice_success为1,最后再遍历这个返回结果就行了。

 function getOrder(){
  global $wpdb;  
  $list = $wpdb->get_results("SELECT * FROM $wpdb->icealipay where ice_success=1 order by ice_time DESC"); 
  if($list) {
  	foreach($list as $value){
  	    echo "<div class='reward-item'>";
  	    echo "<span class='reward-name'>".get_the_author_meta( 'user_login', $value->ice_user_id )."</span> 赞助了 陈小知 <span class='reward-price'>".$value->ice_price."</span> 元";
  	    echo "</div>";	
  	}
  }
}

学会了这一招,以后可以根据功能自己实现了,调用自己需要的数据,还不受wp的功能显示,是不是听起来很酷!二次开发确实简单的多,wp/wordpress如何查询数据库就需要使用 $wpdb 链接!