为wordpress主题添加点击加载更多功能：jQuery+Ajax+php+mysql

在开发wordpress主题模板时，客户可能需要各种各样的功能，比如：本章所要讲到的“点击加载更多”。其实，让wordpress主题实现“点击加载更多”，并不是一件复杂的事，但也不是一件简单的事，说它简单，因为它的实现并不算难，说它复杂，因为它会用到很多方面的知识：jQuery、Ajax、php、mysql，当然，还要用到html和css。下面，我们一起来看看如何为wordpress主题添加点击加载更多功能吧。

点击加载更多的步骤：前台点击 => Ajax传递参数到php处理 => 进数据库 => php读取数据 => Ajax返回数据

实现步骤如下：

第一步：前台代码

<div class="box">
 <?php query_posts('posts_per_page=5&caller_get_posts=1'); ?>
 <?php while (have_posts()) : the_post(); ?>
 <li>
 <a target="_blank" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="title"><?php the_title(); ?></a>
 </li>
 <?php endwhile; wp_reset_query(); ?>
 </div>
 <li class="hot">加载更多</li>

上面代码中的php 代码在点击前先显示了5篇文章。

第二步：jQuery + Ajax 代码

$(function(){
 var num = 5;//初始化从第几篇开始点击加载
 var numm = 3; //每点击一次加载多少篇
 $(".hot").click(function(){
 $.post( //使用Ajax 的 post方法
 "/wordpress/wp-content/themes/twentyfifteen/restart/get.php",//php文件路径
 { numb:num}, //传递参数：从第几篇开始
 function(response,status,xhr){ //回调函数，返回数据
 $(".box").html( $(".box").html() + response);
 });
 num +=numm; //num 累加
 });
 });

第三步：php 处理文件代码

require("config.php"); //引用数据库链接文件
$num = $_POST["numb"]; //接收 AJAX 传递过来的数字：从第几篇开始
//下面是读取数据库数据
$sql = "select ID,post_title,guid from wp_posts order by ID desc limit ".$num.",3";
$result = mysql_query($sql);

while($row = mysql_fetch_array($result)){
 echo '<li><a href="'.$row["guid"].'">'.$row["post_title"].'</a></li>';
 echo "<br>";
 }

mysql_close($conn); //关闭数据库

第四步：数据库链接文件代码：

//获取当前文件所在目录
$gen=$_SERVER['DOCUMENT_ROOT'];
require_once("$gen/wp-config.php");
// 方式二 结束

//链接mysql服务器 开始
$connection = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD);
mysqli_select_db($connection, DB_NAME);

通过上面这4步骤，我们就为wordpress主题添加了“点击加载更多”功能。当然，我这里只是简单实现了它的功能，具体前台显示样式你可以根据自己的需求来深入修改。

未经允许不得转载：哈勃私语 » 为wordpress主题添加点击加载更多功能：jQuery+Ajax+php+mysql