wordpress CMS主题 微信
Home > wordpress CMS主题制作 > 为wordpress主题添加点击加载更多功能:jQuery+Ajax+php+mysql

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

高时银博客 wordpress CMS主题制作 点击: 2,981 次 0 3
  • 标签:
  • [文章目录]

    在开发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/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); //关闭数据库

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

    //获取当前文件所在目录
    define("__S__",str_replace("\\","/",dirname(__FILE__)));
    //获取wordpress所在目录
    define("__ROOT__",substr(__S__,0,-25));
    //引用wp-config.php文件,获取数据库信息
    require(__ROOT__."/wp-config.php");

    //链接mysql 服务器
    $conn = mysql_connect(DB_HOST,DB_USER,DB_PASSWORD) or die("连接服务器出错:".mysql_error());
    //链接网站所在数据库
    mysql_select_db(DB_NAME) or die("连接数据库出错:".mysql_error());
    //设置字符编码
    @mysql_query('SET NAMES UTF8');

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


    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201510314865.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    目前还没有评论。赶快来坐沙发吧。

    发表评论