《PHP實(shí)例:使用PHP+AJAX讓W(xué)ordPress動(dòng)態(tài)加載文章的教程》要點(diǎn):
本文介紹了PHP實(shí)例:使用PHP+AJAX讓W(xué)ordPress動(dòng)態(tài)加載文章的教程,希望對(duì)您有用。如果有疑問(wèn),可以聯(lián)系我們。
PHP教程為什么要?jiǎng)討B(tài)加載文章?
PHP教程1. 快速向訪客展示頁(yè)面
文章很容是包含大量文字和多媒體資源 (如: 圖片, 視頻, 音樂(lè)), 加載這些內(nèi)容需要占用很多的時(shí)間. 如果你的頁(yè)面上存在大量文章, 當(dāng)訪客發(fā)現(xiàn)頁(yè)面久久沒(méi)有加載完成就感到不耐煩. 這是動(dòng)態(tài)加載文章的主要目的.
PHP教程2. 讓文章列表化
使頁(yè)面上的文章成為一個(gè)列表, 減少頁(yè)面的空間占用, 訪客可以方便的移動(dòng)到頁(yè)面下方, 提高舊文章被點(diǎn)擊的幾率. 并且你可以在頁(yè)面上放置更多的文章而不用擔(dān)心頁(yè)面過(guò)長(zhǎng).
PHP教程為什么不動(dòng)態(tài)加載文章?
PHP教程1. 對(duì)搜索引擎不友好
seo的目的是將有價(jià)值的東西盡量多的向搜索爬蟲(chóng)展示, 包括最新的文章內(nèi)容. 只有標(biāo)題的文章讓爬蟲(chóng)只知道這個(gè)文章而不知其文章側(cè)重, 使用 JavaScript 輸出的文章內(nèi)容未必可以被抓取和分析. 這些對(duì) SEO 來(lái)說(shuō)都是不好的.
后來(lái)發(fā)現(xiàn), 如果你的網(wǎng)站有固定的文章類型, 沒(méi)有畢業(yè)在文章列表頁(yè)顯示太多文章內(nèi)容, 表示影響不大.
PHP教程2. 增加了哀求次數(shù)
雖然將文章折疊起來(lái), 我們一般還是會(huì)想辦法向訪客顯示前面的幾篇文章. 這樣對(duì)用戶是友好的, 但是要增加哀求的次數(shù)和數(shù)據(jù)庫(kù)訪問(wèn)的次數(shù).
后來(lái)我有選擇地顯示部分文章內(nèi)容, 而且不是通過(guò)異步加載的方式, 也就是說(shuō), 這個(gè)問(wèn)題是可以通過(guò)簡(jiǎn)單的修改解決掉的.
PHP教程3. 一些插件失效
因?yàn)樾枰远x辦法抓取文章, 如果不添加特殊處理, 很可能令部分 WordPress 插件失效.
可以通過(guò)特殊處理解決掉, 以后文章中會(huì)提及.
PHP教程動(dòng)態(tài)加載文章的設(shè)計(jì)思路
PHP教程1. 找到頁(yè)面上所有文章
為每個(gè)文章添加一個(gè)展開(kāi)/折疊按鈕
PHP教程2. 向文章添加展開(kāi)/折疊按鈕
點(diǎn)擊按鈕, 如果文章內(nèi)容沒(méi)有加載, 加載并展開(kāi)文章內(nèi)容.
點(diǎn)擊按鈕, 如果文章內(nèi)容已經(jīng)加載, 則展開(kāi)/折疊文章內(nèi)容.
PHP教程3. 加載文章內(nèi)容
將文章的 id 發(fā)往后臺(tái), 在數(shù)據(jù)庫(kù)中找到相應(yīng)的文章內(nèi)容并進(jìn)行格式化, 返回響應(yīng)顯示在頁(yè)面上.
PHP教程JavaScript 處理代碼分析
PHP教程1. 找到頁(yè)面上所有文章
PHP教程
/ 在文檔加載完畢的時(shí)候遍歷所有匹配文章的元素
jQuery(document).ready(function(){
jQuery('div.post').each(function() {
// 如果元素相應(yīng)位置是文章 ID
var id = jQuery(this).attr('id');
if(/^post\-[0-9]+$/.test(id)) {
// 則為每個(gè)文章添加一個(gè)展開(kāi)/折疊按鈕
...
}
});
});
PHP教程
toggle.toggle(function() { // 展開(kāi)
// 如果文章內(nèi)容為空, 加載文章內(nèi)容
if(jQuery('#' + id + ' .content').text() == '') {
...
}
// 顯示文章內(nèi)容, 并切換按鈕樣式
jQuery('#' + id + ' .content').slideDown();
jQuery(this).removeClass('collapse').addClass('expand');
},
function() { // 折疊
// 暗藏文章內(nèi)容, 并切換按鈕樣式
jQuery('#' + id + ' .content').slideUp();
jQuery(this).removeClass('expand').addClass('collapse');
// 將按鈕追加到文章標(biāo)題前方
}).prependTo(jQuery('#' + id + ' h2'));
PHP教程3. 加載文章內(nèi)容
PHP教程
// 取得文章 ID
var postId = id.slice(5);
// 使用 AJAX 獲取并處理文章內(nèi)容
jQuery.ajax({
type: 'GET'
,url: '?action=load_post&id=' + postId
,cache: false
,dataType: 'html'
,contentType: 'application/json; charset=utf-8'
// 取得返回內(nèi)容之前顯示加載信息
,beforeSend: function(data){loadPostContent(id, '<p class="ajax-loader">Loading...</p>');}
// 獲取文章內(nèi)容成功, 更新文章內(nèi)容
,success: function(data){loadPostContent(id, data);}
// 獲取文章內(nèi)容失敗, 顯示出錯(cuò)提示
,error: function(data){loadPostContent(id, '<p>Oops, failed to load data.</p>');}
});
PHP教程后臺(tái)處理
處理思路
PHP教程從前臺(tái)傳到后臺(tái)的參數(shù)有兩個(gè), 一個(gè)是 action ID, 用于確定使用的接口, 另一個(gè)是文章的 ID, 用于獲取文章對(duì)應(yīng)的內(nèi)容.
PHP教程下面我們來(lái)分析一下wp-includes/post-template.php 的 get_the_content 辦法.
PHP教程
function get_the_content($more_link_text = null, $stripteaser = 0) {
global $id, $post, $more, $page, $pages, $multipage, $preview;
// 設(shè)定 "查看全文" 的鏈接文案
if ( null === $more_link_text )
$more_link_text = __( '(more...)' );
// 返回內(nèi)容
$output = '';
// More 標(biāo)簽是否存在的標(biāo)記位
$hasTeaser = false;
// 如果文章要求輸入密碼, 并且在 Cookie 中找不到處理過(guò)的信息, 則返回要求輸入密碼的查看表單
if ( post_password_required($post) ) {
$output = get_the_password_form();
return $output;
}
// 哀求的文章片段對(duì)應(yīng)的頁(yè)面大于最大頁(yè)數(shù) (即文章片段不存在), 則返回最大頁(yè)碼的文章片段
if ( $page > count($pages) )
$page = count($pages);
// 文章內(nèi)容是最后分頁(yè)中的文章片段
$content = $pages[$page-1];
// 如果文中有 More 標(biāo)簽, 要求切斷文章并輸出 "查看全文" 鏈接, 則重定義文章內(nèi)容, 標(biāo)記 More 標(biāo)簽存在
if ( preg_match('/<!--more(.*?)?-->/', $content, $matches) ) {
$content = explode($matches[0], $content, 2);
if ( !empty($matches[1]) && !empty($more_link_text) )
$more_link_text = strip_tags(wp_kses_no_null(trim($matches[1])));
$hasTeaser = true;
} else {
$content = array($content);
}
// 如果進(jìn)行了文章切斷處理, 且不存在分頁(yè)要求,
if ( (false !== strpos($post->post_content, '<!-- noteaser -->') && ((!$multipage) || ($page==1))) )
$stripteaser = 1;
// 獲取文章內(nèi)容的第一部分; 如果在獨(dú)立文章存在 Read more 和切斷處理, 則文章內(nèi)容為空
$teaser = $content[0];
if ( ($more) && ($stripteaser) && ($hasTeaser) )
$teaser = '';
$output .= $teaser;
// 如果文章分為多個(gè)片段, 在獨(dú)立文章中拼接上第二部分, 摘要內(nèi)容中顯示 "閱讀全文" 鏈接
if ( count($content) > 1 ) {
if ( $more ) {
$output .= '<span id="more-' . $id . '"></span>' . $content[1];
} else {
if ( ! empty($more_link_text) )
$output .= apply_filters( 'the_content_more_link', ' <a href="' . get_permalink() . "#more-$id\" class=\"more-link\">$more_link_text</a>", $more_link_text );
$output = force_balance_tags($output);
}
}
if ( $preview ) // preview fix for javascript bug with foreign languages
$output = preg_replace_callback('/\%u([0-9A-F]{4})/', create_function('$match', 'return "" . base_convert($match[1], 16, 10) . ";";'), $output);
// 返回文章內(nèi)容
return $preview;
}
PHP教程處理方法
PHP教程如果我們暫時(shí)不考慮輸入暗碼, 分頁(yè)等功能; 另外, 因?yàn)?More 和切斷功能不應(yīng)該在展開(kāi)文章內(nèi)容中存在, 響應(yīng)處理可以變得很簡(jiǎn)單. 我們要做的事就這么幾個(gè):
1. 做出 action 對(duì)應(yīng)的接口
2. 獲取指定文章的內(nèi)容
3. 格式化文章內(nèi)容
4. 返回文章內(nèi)容
PHP教程多說(shuō)無(wú)用, 直接上代碼, 加注釋:
PHP教程
function load_post() {
// 如果 action ID 是 load_post, 并且傳入的必須參數(shù)存在, 則執(zhí)行響應(yīng)辦法
if($_GET['action'] == 'load_post' && $_GET['id'] != '') {
$id = $_GET["id"];
$output = '';
// 獲取文章對(duì)象
global $wpdb, $post;
$post = $wpdb->get_row($wpdb->prepare("SELECT * FROM $wpdb->posts WHERE ID = %d LIMIT 1", $id));
// 如果指定 ID 的文章存在, 則對(duì)他進(jìn)行格式化
if($post) {
$content = $post->post_content;
$output = balanceTags($content);
$output = wpautop($output);
}
// 打印文章內(nèi)容并中斷后面的處理
echo $output;
die();
}
}
// 將接口加到 init 中
add_action('init', 'load_post');
維易PHP培訓(xùn)學(xué)院每天發(fā)布《PHP實(shí)例:使用PHP+AJAX讓W(xué)ordPress動(dòng)態(tài)加載文章的教程》等實(shí)戰(zhàn)技能,PHP、MYSQL、LINUX、APP、JS,CSS全面培養(yǎng)人才。
轉(zhuǎn)載請(qǐng)注明本頁(yè)網(wǎng)址:
http://www.snjht.com/jiaocheng/8254.html