Loading... wordpress添加加载更多的功能。 > 这个我以wordpress默认的主题tweentyfifteen为例，我在主题根目录下新建一个模板文件，命名为：加载更多，文件名为page-more.php，然后在主题目录下新建一个restart文件夹，在这个文件夹里面新建两个php文件：get.php和config.php > > 然后我么你需要准备文件：jquery.dataTables.min.js这个库文件。把这个js文件放在主题的某个位置，通常我们放在js文件夹，然后在header.php引用这个javascript库。由于wordpress主题大都会引用了jquery这个库，所以一般不会再引用一次，当然，如果发现加载不出来，看下是否需要再次引用jquery。 > > 好的文件结构我们准备好了后，我们就先来说page-more.php的文件内容。 **page-more.php文件** --- 我们找到内容显示区的代码，大概是在main标签里面： ``` <!-- 添加自定义 开始 --> <div class="entry-content"> <div class="box"> <style type="text/css"> .hot{ cursor: pointer; } </style> <ul> <?php query_posts('posts_per_page=5&caller_get_posts=1'); ?> <?php while (have_posts()) : the_post(); ?> <li class="list-group-item"> <a target="_blank" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="title"><?php the_title(); ?></a> </li> <?php endwhile; wp_reset_query(); ?> </ul> </div> <span class="hot btn btn-info">加载更多</span> <script type="text/javascript"> $(function(){ var num = 5;//初始化从第几篇开始点击加载 var numm = 3; //每点击一次加载多少篇 $(".hot").click(function(){ $.post( //使用Ajax 的 post方法 "<?php bloginfo('template_url'); ?>/restart/get.php",//php文件路径 { numb:num}, //传递参数：从第几篇开始 function(response,status,xhr){ //回调函数，返回数据 $(".box").html( $(".box").html() + response); }); num +=numm; //num 累加 }); }); </script> </div> <!-- 自定义代码 结束 -->Copy ``` 添加的这些自定义内容是一个先显示部分文章，然后显示 “加载更多” 的链接，这就是全部，里面的javascript代码是一个ajax的post请求方式，这个至关重要，没有这个就不会发起请求，自然就不会产生数据。好的完成这个后，我们接着往下看。 **get.php文件** --- 这文件存放的是对数据库的查询代码，以及查询结果的输出，好的全部代码如下： ``` <?php //引用数据库链接文件 require("config.php"); //接收 AJAX 传递过来的数字：从第几篇开始 $num = $_POST["numb"]; //下面是读取数据库数据 $sql = "select ID,post_title,guid from wp_posts order by ID desc limit ".$num.",3"; $result = mysqli_query($connection,$sql) or die(mysqli_error($connection)); echo "<ul>"; while($row = mysqli_fetch_array($result)){ echo '<li class="list-group-item"><a href="'.$row["guid"].'">'.$row["post_title"].'</a></li>'; } echo "</ul>"; mysqli_close($connection); //关闭数据库 ?> 这个也Copy ``` 做一个简单的讲解，第一个是引入数据库连接的文件，这个文件的路径就是在同目录中的config.php文件，只有连接上数据库才能对数据库进行查询。好的，连接成功后，把page-more.php中的文件的请求字段numb，通过这个发起请求，接着对查询进行一个遍历，这里需要提醒的是这个mysqli\_query，在我以前使用纯php写的一个系统中貌似只需一个字段就行了，这里需要有两个字段，否则会报错，这里需要注意。参数一是连接信息，参数二是查询结果。 完成后就是对结果的循环遍历。最后关闭数据库连接。完成！ **config.php文件** --- 这个文件很简单，就是连接数据库的文件，之所以把这几个环节分别放在不同的文件，这样做是为了条理清晰，分工明确，便于排错。好的，这个文件中的全部代码如下： ``` <?php //获取当前网站的配置文件 $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); //设置字符编码 这个可以不设，保持默认就好 @mysqli_query('SET NAMES UTF8'); ?>Copy ``` 这个文件分两部分，第一部分就是连接wordpress网站的配置文件，这样我们就不需要输入数据库账号密码了，这样相对来说是比较安全的。然后就是连接服务器，接着就是连上数据库，最后是设置字符编码。完事！ 作为补充，我把page-more.php的全部代码贴一下吧： ``` <?php /** * Template Name: 加载更多 * * This is the template that displays all pages by default. * Please note that this is the WordPress construct of pages and that * other "pages" on your WordPress site will use a different template. * * @package WordPress * @subpackage Twenty_Fifteen * @since Twenty Fifteen 1.0 */ get_header(); ?> <!-- add custom --> <div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> <?php // Start the loop. while ( have_posts() ) : the_post(); // Include the page content template. get_template_part( 'content', 'page' ); // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) : comments_template(); endif; // End the loop. endwhile; ?> <!-- 添加自定义 开始 --> <div class="entry-content"> <div class="box"> <style type="text/css"> .hot{ cursor: pointer; } </style> <ul> <?php query_posts('posts_per_page=5&caller_get_posts=1'); ?> <?php while (have_posts()) : the_post(); ?> <li class="list-group-item"> <a target="_blank" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="title"><?php the_title(); ?></a> </li> <?php endwhile; wp_reset_query(); ?> </ul> </div> <span class="hot btn btn-info">加载更多</span> <script type="text/javascript"> $(function(){ var num = 5;//初始化从第几篇开始点击加载 var numm = 3; //每点击一次加载多少篇 $(".hot").click(function(){ $.post( //使用Ajax 的 post方法 "<?php bloginfo('template_url'); ?>/restart/get.php",//php文件路径 { numb:num}, //传递参数：从第几篇开始 function(response,status,xhr){ //回调函数，返回数据 $(".box").html( $(".box").html() + response); }); num +=numm; //num 累加 }); }); </script> </div> <!-- 自定义代码 结束 --> </main><!-- .site-main --> </div><!-- .content-area --> <?php get_footer(); ?>Copy ``` 补充一下：因为这个我都是写在一个模板文件里面的，所以只需要调用这个模板就行了，里面的加载更多的按钮位置也定义死了，这样可定制性就不太好，所以我们可以把html类的写在网站模板的后台编辑器里面。比如我把加载更多的这段代码： ``` <span class="hot btn btn-info">加载更多</span>Copy ``` 侵删转自：[鸢尾花序](http://helongquan.com/2018/01/09/%E4%B8%BAwordpress%E7%BD%91%E7%AB%99%E5%BC%80%E5%8F%91ajax%E5%8A%A0%E8%BD%BD%E6%9B%B4%E5%A4%9A%E7%9A%84%E5%8A%9F%E8%83%BD/) 最后修改：2024 年 10 月 07 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏