WordPress學習筆記：使用jQuery實做ajax無限捲軸
使用jQuery在 WordPress 中實做ajax無限捲軸:
參考文章：getting-loopy-ajax-powered-loops-with-jquery-and-wordpress–wp
一、前製準備：
- 在網站版型目錄下新增一個 .php 的 file （此以 loopHandler.php 為此 php 檔案做命名）
- 在網站版型目錄下新增一個 js 目錄以存放所需的 js 檔案
- 於 剛新增的 js 目錄下新增一個 .js 的 file （此以 ajaxLoop.js 為此 js 檔案做命名）
在 WordPress 中引入 javascript 檔案 需要在 function.php 中進行引入：
在引入 ajaxLoop.js 前我們要先引入 jQuery 以使用 jQuery 提供 ajax 的方法：
<?php
function add_jquery(){
wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js');
}
add_action( 'wp_enqueue_scripts', 'add_jquery' );
?>
接著就引入 ajaxLoop.js 的檔案：
<?php
function add_custom_scripts() {
wp_enqueue_script('ajaxLoop', get_template_directory_uri() . '/js/ajaxLoop.js');
}
add_action( 'wp_enqueue_scripts', 'add_custom_scripts' );
?>
二、使用 jQuery ajax 在 WordPress 完成資料傳輸：
loopHandler.php：
先從我們要取得的資料進行下手
Step 1：
引入 wp-load.php ：
wp-load.php 是在 WordPress 中相當重要的核心的一部分，在位於網站根目錄中，你必須引入它才可以使用我們經常在 WordPress 的 shortcode 與包含 wp_query() 等重要方法與參數
<?php
require_once('../../../wp-load.php');//路徑寫法僅供參考
?>
Step 2：
使用 wp_query() 去向 WordPress 我們要索取資料：
wp_query() 的參數詳細可以到他的網站查詢，這邊只先把第一頁所有的 post 資料給撈出來
<?php
require_once('../../../wp-load.php');
//new 一個新的 WP_Query 查詢
$the_query = new WP_Query(
array(
'post_type' => 'post',
'paged' => 1
//'category_name' => 'l',
// 'posts_per_page' => $posts_per_page,
// 'offset' => $offset + ($posts_per_page*$page),
// 'order' => $order,
// 'orderby' => $orderby,
// 'post_status' => $post_status,
// 'ignore_sticky_posts' => true,
));
?>
Step 3：
使用 wp_query() 與 WordPress shortcode 將我們要的架構打印出來：
<?php
require_once('../../../wp-load.php');
$the_query = new WP_Query(
array(
'post_type' => 'post',
'paged' => 1
//'category_name' => '',
// 'posts_per_page' => $posts_per_page,
// 'offset' => $offset + ($posts_per_page*$page),
// 'order' => $order,
// 'orderby' => $orderby,
// 'post_status' => $post_status,
// 'ignore_sticky_posts' => true,
));
?>
<!--打印想要顯示出的資料架構-->
<?php if($the_query->have_posts()) :?>
<?php while($the_query->have_posts()) : $the_query->the_post(); ?>
<div class ='article'>
<div><?php the_title(); ?></div>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata();//reset wp_query() 查詢 ?>
<?php endif; ?>
Step 4：
最後在加上一個變數 $page ：
$page 這個變數會在 ajaxLoop.js 檔案中從藉由 jquery ajax 的 data屬性來傳值，過來， 講白一點：就是 ajaxLoop.js 會將 頁碼 這個參數傳過來告訴 loopHandler.php 裡的 wp_Query()，說他要 第幾頁 的資料
<?php
require_once('../../../wp-load.php');
$page = (isset($_GET['pageNumber'])) ? $_GET['pageNumber'] : 0;
//宣告 $page 變數： 如果有 get到 ajax data 傳的 pageNumber資料，$page 就 = pageNumber的資料，沒有了話就 ＝ 0
$the_query = new WP_Query(
array(
'post_type' => 'post',
'paged' => $page //並將其帶入 WP_Query 的 paged 中
//'category_name' => '',
// 'posts_per_page' => $posts_per_page,
// 'offset' => $offset + ($posts_per_page*$page),
// 'order' => $order,
// 'orderby' => $orderby,
// 'post_status' => $post_status,
// 'ignore_sticky_posts' => true,
));
?>
<!--打印想要顯示出的資料架構-->
<?php if($the_query->have_posts()) :?>
<?php while($the_query->have_posts()) : $the_query->the_post(); ?>
<div class ='article'>
<div><?php the_title(); ?></div>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata();//reset wp_query() 查詢 ?>
<?php endif; ?>
到這裡，我們要撈取的 loopHandler.php 資料已經設定的差不多了，接下來我們將從 loopHandler.php 換到 ajaxLoop.js
ajaxLoop.js：
jQuery ajax 請求資料
Step 1：
建立變數與立即涵式：
jQuery(function ($) {
var $page = 2 //顯示的頁碼
var $element = $('.ajax-bottom') //觸發 ajax 事件的物件
})
Step 2：
建立 ajax 事件：
建立 ajax 事件，向 loopHandler 請求所需要的資料，並藉由 ajax{data} 將參數遞給 loopHandler.php ， 告知他需要請求的 頁碼
jQuery(function ($) {
var $page = 2
var $element = $('.ajax-bottom')
var load_posts = function () {
$.ajax({
type: 'GET',
data: {pageNumber: page} //將 pageNumber資料傳給 loopHandler.php ,
dataType: 'html',
url: 'wp-content/themes/theme-name/loopHandler.php' // 路徑僅供參考,
beforeSend: function () {
},
success: function (data) {
console.log('success')
console.log(data)
},
error: function (jqXHR, textStatus, errorThrown) {
console(jqXHR + ' :: ' + textStatus + ' :: ' + errorThrown)
}
})
}
load_posts();
})
到這邊，如過你 console.log 的資料是如你預期的，那恭喜你 jQuery ajax 在 WordPress 完成資料傳輸，就已經告了一段落，你可以開始對 ajax 取得的 data ， 與 ajax success的事件進行任何操作，讓我們繼續往下看:
三、實做 ajax 無限捲軸：
Step 1：
在 ajax success 的事件中，進行操作：
將 ajax 取得資料加在觸發物件的前面 ： .before()
jQuery(function ($) {
var $page = 2
var $element = $('.ajax-bottom')
var load_posts = function () {
$.ajax({
type: 'GET',
data: {pageNumber: page} //將 pageNumber資料傳給 loopHandler.php ,
dataType: 'html',
url: 'wp-content/themes/theme-name/loopHandler.php' // 路徑僅供參考,
beforeSend: function () {
},
success: function (data) {
$content.before(data) //將 ajax 取得資料加在觸發物件的前面
},
error: function (jqXHR, textStatus, errorThrown) {
console(jqXHR + ' :: ' + textStatus + ' :: ' + errorThrown)
}
})
}
load_posts();
})
Step 2：
綁定 scroll 事件：
這邊要注意的地方就是 $page++ 了，這段是這邊最重要的地方，因為總不能回來的資料都是第一頁吧，所以在這邊使用$page++，而 scroll event裡的判斷，折是根據座標位置判斷觸發物件是否在畫面內
jQuery(function ($) {
var $page = 2
var $element = $('.ajax-bottom')
var load_posts = function () {
$.ajax({
type: 'GET',
data: {pageNumber: page} //將 pageNumber資料傳給 loopHandler.php ,
dataType: 'html',
url: 'wp-content/themes/theme-name/loopHandler.php' // 路徑僅供參考,
beforeSend: function () {
},
success: function (data) {
$content.before(data) //將 ajax 取得資料加在觸發物件的前面
},
error: function (jqXHR, textStatus, errorThrown) {
console(jqXHR + ' :: ' + textStatus + ' :: ' + errorThrown)
}
})
}
// add scroll event
$(document).ready(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > $content.offset().top - $(window).height()) {
$page++
load_posts()
}
})
})
})
Step 3： 最後可以在 beforeSend 事件中，插入 loading 的圖片來騙一下，並在 success 事件中移掉：
jQuery(function ($) {
var $page = 2
var $element = $('.ajax-bottom')
var load_posts = function () {
$.ajax({
type: 'GET',
data: {pageNumber: page} ,
dataType: 'html',
url: 'wp-content/themes/theme-name/loopHandler.php',
beforeSend: function () {
$content.after('<div id="temp_load" style="text-align:center">\
<img src="../images/ajax-loader.gif" />\
</div>'); //加入 loading.gif圖
},
success: function (data) {
$("#temp_load").remove(); //成功仔入後移除 loading.gif圖
$content.before(data)
},
error: function (jqXHR, textStatus, errorThrown) {
console(jqXHR + ' :: ' + textStatus + ' :: ' + errorThrown)
}
})
}
// add scroll event
$(document).ready(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > $content.offset().top - $(window).height()) {
$page++
load_posts()
}
})
})
})
至於 fadein 的效果就憑前端的功力摟～
結語：
接下來我要來說一些，跟我一樣努力到這一部的你不愛聽的話了！
直接開門見山的說～我們在 loopHandler.php 裡引用的 wp-include.php ， 剛剛也說過他是 WordPress 核心的一部分，可是有沒有發現？ 我們現在用的工具就是 WordPress 阿～～，為什麼要等到 WordPress 跑完之後在跑一遍 WordPress 的核心，而且我們上面的作法，會變成說每 ajax 一次，就會執行一次 WordPress的核心，光到這邊就充滿了各種不合理，而且對網站效能的影響也是不可忽視的～～在開發時也會碰到很多非預期錯誤。
不過也不用氣餒（這邊是在說些安慰自己的話）， 至少藉由上述步驟，你也學到了一種方法，和一些 WordPress 的觀念，尤其重要的是 使用工具的經驗 ，盡量使用工具提供的方法和工具，通常你想到的事情，工具都應該要有提供對應的工具和方法才是合理的。
而在這篇教學的部份其實我們只要使用 WordPress 提供的 action ， wp_ajax_(action) 就可以了～
![[jQuery] 事件處理技巧：Decide resize (and scroll)](https://s3-ap-northeast-1.amazonaws.com/zwh.zone/2017/07/001-1.png)
