首頁 >web前端 >js教程 >WordPress 單頁上一頁下一頁的實作方法【附程式碼】_javascript技巧

WordPress 單頁上一頁下一頁的實作方法【附程式碼】_javascript技巧

WBOY
WBOY原創
2016-05-16 15:11:051764瀏覽

WordPress的文章頁頁有實作上一篇下一篇的功能函數,不過我們想在單頁page.php裡面實作上一頁下一頁的功能,previous_post_link()和next_post_link() 函數還不能完全滿足我的需要,所以就自己寫函數實作。
頁面有分級功能,需求是按 menu order 排序的子級頁面之間有上一篇、下一篇鏈接,如:

Themes(父級頁)
---- zBench(子級頁面1)
---- zBorder(子級頁2)
---- zSofa(子級頁3)

如果目前頁面是 zBorder,那麼就要上一篇連結是 zBench 的,下一篇連結是 zSofa 的。

把下面函数代码放入 functions.php(注:函数随手写的,可能不够精简)

/**
* get subpage previous/next page link by zwwooooo
*/
function subpage_nav_link($prevText='', $nextText='') {
global $post;
if ( !$post->post_parent ) return null; //如果不是子页面返回Null
$args = array(
'sort_order' => 'ASC',
'sort_column' => 'menu_order',
'child_of' => $post->post_parent,
'post_type' => 'page'
);
$pages = get_pages($args);
$num = count($pages);
$i = 0;
$index = -1;
foreach ($pages as $page) {
if ($page->ID == $post->ID) {
$index = $i;
break;
}
++$i;
}
if ($i == 0) {
$prev = '';
$next = $pages[$index+1];
} elseif ($i == $num-1) {
$prev = $pages[$index-1];
$next = '';
} else {
$prev = $pages[$index-1];
$next = $pages[$index+1];
}
if ($prev) {
if ($prevText) {
if ( substr_count($prevText, '%title') > 0 ) {
$explode = explode('%title', $prevText);
$prevText = $explode[0] . get_the_title($prev->ID) . $explode[1];
}
} else {
$prevText = get_the_title($prev->ID);
}
$prevlink = '<a class="previous-page-link" href="' . get_page_link($prev->ID). '">' . $prevText . '</a>';
}
if ($next) {
if ($nextText) {
if ( substr_count($nextText, '%title') > 0 ) {
$explode = explode('%title', $nextText);
$nextText = $explode[0] . get_the_title($next->ID) . $explode[1];
}
} else {
$nextText = get_the_title($next->ID);
}
$nextlink = '<a class="next-page-link" href="' . get_page_link($next->ID). '">' . $nextText . '</a>';
}
return array($prevlink, $nextlink);
}

[函數]

subpage_nav_link($prevText, $nextText)

[參數]

$prevText: 為前一篇文章連結文字,為空時預設是頁面標題
$nextText: 為下一篇文章連結文字,為空時預設為頁面標題;

例如:一般的主題是在 page.php 的 loop 迴圈裡面(不知道就在 the_content(); 下面吧)插入呼叫程式碼

複製程式碼 程式碼如下:

if ( function_exists('subpage_nav_link') ) {
if ( $subpage_nav_link = subpage_nav_link() ) {
echo $subpage_nav_link[0]; //上一篇(頁)連結
echo $subpage_nav_link[1]; //下一篇(頁)連結
}
}
?>

註:可以用 if (!$subpage_nav_link[0]) 來判斷有沒有上一篇,同樣 if (!$subpage_nav_link[1]) 來判斷有沒有下一篇。

PS: $prevText 和 $nextText 也支援字元組合,如 subpage_nav_link('oo %title xx', '') 這樣的話,前一篇文章連結文章會變成「oo 頁名 xx」


另一篇實用文章:實作wordpress文章頁呼叫同分類上/下一篇

wordpress提供的顯示上一篇、下一篇文章的函數代碼是按照發布順序調用的,前幾天做的wordpress小說模板,由於使用每個分類添加一部小說《博客吧首款wordpress小說網站主題模板wpnovel》,如果使用這樣的上下篇文章調用順序顯示不合適,讓文章頁顯示同分類下的上一篇、下一篇文章才是正道,wordpress是強大的,總能滿足用戶的想法,透過搜尋找到了相關的函數代碼。

預設直接呼叫的程式碼


當文章處於首篇或末篇時,會顯示空白,但可以透過增加判斷還填補空白


經過測試雖然顯示同分類下的文章,但首篇文章和末尾的文章會不顯示對應的提示訊息「已是最後文章」和「已是最後文章」。只要在get_previous_post()函數中指定一下文章所屬分類ID便能使程式碼完全有效。

以下是完整的程式碼:

複製程式碼 程式碼如下:

$categories = get_the_category();
$categoryIDS = array();
foreach ($categories as $category) {
array_push($categoryIDS, $category->term_id);
}
$categoryIDS = implode(",", $categoryIDS);
?>



開啟主題目錄下的文章頁single.php,在要顯示的位置新增程式碼,儲存檔案即可。

以上這篇WordPress 單頁上一頁下一頁的實現方法【附代碼】就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn