• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > 为wordpress主题添加点击加载更多功能:jQuery+Ajax+php+mysql

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

    作者: 分类:wordpress CMS主题制作 点击: 5,287 次
    wordpress CMS主题:ssmay主题

      在开发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主题添加了“点击加载更多”功能。当然,我这里只是简单实现了它的功能,具体前台显示样式你可以根据自己的需求来深入修改。



      QQ二维码

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

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.