為什么要動態(tài)加載文章?
1. 快速向訪客展示頁面
文章很容是包含大量文字和多媒體資源 (如: 圖片, 視頻, 音樂), 加載這些內(nèi)容需要占用很多的時間. 如果你的頁面上存在大量文章, 當(dāng)訪客發(fā)現(xiàn)頁面久久沒有加載完成就感到不耐煩. 這是動態(tài)加載文章的主要目的.
2. 讓文章列表化
使頁面上的文章成為一個列表, 減少頁面的空間占用, 訪客可以方便的移動到頁面下方, 提高舊文章被點擊的幾率. 并且你可以在頁面上放置更多的文章而不用擔(dān)心頁面過長.
為什么不動態(tài)加載文章?
1. 對搜索引擎不友好
搜索引擎優(yōu)化的目的是將有價值的東西盡量多的向搜索爬蟲展示, 包括最新的文章內(nèi)容. 只有標(biāo)題的文章讓爬蟲只知道這個文章而不知其文章側(cè)重, 使用 JavaScript 輸出的文章內(nèi)容未必可以被抓取和分析. 這些對 SEO 來說都是不好的.
后來發(fā)現(xiàn), 如果你的網(wǎng)站有固定的文章類型, 沒有畢業(yè)在文章列表頁顯示太多文章內(nèi)容, 表示影響不大.
2. 增加了請求次數(shù)
雖然將文章折疊起來, 我們一般還是會想辦法向訪客顯示前面的幾篇文章. 這樣對用戶是友好的, 但是要增加請求的次數(shù)和數(shù)據(jù)庫訪問的次數(shù).
后來我有選擇地顯示部分文章內(nèi)容, 而且不是通過異步加載的方式, 也就是說, 這個問題是可以通過簡單的修改解決掉的.
3. 一些插件失效
因為需要自定義方法抓取文章, 如果不添加特殊處理, 很可能令部分 WordPress 插件失效.
可以通過特殊處理解決掉, 以后文章中會提及.
動態(tài)加載文章的設(shè)計思路
1. 找到頁面上所有文章
為每個文章添加一個展開/折疊按鈕
2. 向文章添加展開/折疊按鈕
點擊按鈕, 如果文章內(nèi)容沒有加載, 加載并展開文章內(nèi)容.
點擊按鈕, 如果文章內(nèi)容已經(jīng)加載, 則展開/折疊文章內(nèi)容.
3. 加載文章內(nèi)容
將文章的 id 發(fā)往后臺, 在數(shù)據(jù)庫中找到相應(yīng)的文章內(nèi)容并進行格式化, 返回響應(yīng)顯示在頁面上.
JavaScript 處理代碼分析
1. 找到頁面上所有文章
/ 在文檔加載完畢的時候遍歷所有匹配文章的元素jQuery(document).ready(function(){ jQuery('div.post').each(function() { // 如果元素相應(yīng)位置是文章 ID var id = jQuery(this).attr('id'); if(/^post/-[0-9]+$/.test(id)) { // 則為每個文章添加一個展開/折疊按鈕 ... } });}); toggle.toggle(function() { // 展開 // 如果文章內(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')); 3. 加載文章內(nèi)容
// 取得文章 IDvar 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)容失敗, 顯示出錯提示 ,error: function(data){loadPostContent(id, '<p>Oops, failed to load data.</p>');}}); 后臺處理
處理思路
從前臺傳到后臺的參數(shù)有兩個, 一個是 action ID, 用于確定使用的接口, 另一個是文章的 ID, 用于獲取文章對應(yīng)的內(nèi)容.
下面我們來分析一下wp-includes/post-template.php 的 get_the_content 方法.
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 中找不到處理過的信息, 則返回要求輸入密碼的查看表單 if ( post_password_required($post) ) { $output = get_the_password_form(); return $output; } // 請求的文章片段對應(yīng)的頁面大于最大頁數(shù) (即文章片段不存在), 則返回最大頁碼的文章片段 if ( $page > count($pages) ) $page = count($pages); // 文章內(nèi)容是最后分頁中的文章片段 $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); } // 如果進行了文章切斷處理, 且不存在分頁要求, if ( (false !== strpos($post->post_content, '<!-- noteaser -->') && ((!$multipage) || ($page==1))) ) $stripteaser = 1; // 獲取文章內(nèi)容的第一部分; 如果在獨立文章存在 Read more 和切斷處理, 則文章內(nèi)容為空 $teaser = $content[0]; if ( ($more) && ($stripteaser) && ($hasTeaser) ) $teaser = ''; $output .= $teaser; // 如果文章分為多個片段, 在獨立文章中拼接上第二部分, 摘要內(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;} 處理方法
如果我們暫時不考慮輸入密碼, 分頁等功能; 另外, 因為 More 和切斷功能不應(yīng)該在展開文章內(nèi)容中存在, 響應(yīng)處理可以變得很簡單. 我們要做的事就這么幾個:
1. 做出 action 對應(yīng)的接口
2. 獲取指定文章的內(nèi)容
3. 格式化文章內(nèi)容
4. 返回文章內(nèi)容
多說無用, 直接上代碼, 加注釋:
function load_post() { // 如果 action ID 是 load_post, 并且傳入的必須參數(shù)存在, 則執(zhí)行響應(yīng)方法 if($_GET['action'] == 'load_post' && $_GET['id'] != '') { $id = $_GET["id"]; $output = ''; // 獲取文章對象 global $wpdb, $post; $post = $wpdb->get_row($wpdb->prepare("SELECT * FROM $wpdb->posts WHERE ID = %d LIMIT 1", $id)); // 如果指定 ID 的文章存在, 則對他進行格式化 if($post) { $content = $post->post_content; $output = balanceTags($content); $output = wpautop($output); } // 打印文章內(nèi)容并中斷后面的處理 echo $output; die(); }}// 將接口加到 init 中add_action('init', 'load_post'); 
