共计 2577 个字符,预计需要花费 7 分钟才能阅读完成。
最近寫文章發現如果將文章全部擺在同一個頁面,使用者體驗不是很好,拆成每個頁面來閱讀,看起來也比較舒服,於是開始使用分頁功能,才發現原來主題的分頁功能寫得相當單調,只是簡單呼叫函式而已,上網找了相關客製化的分享後,經過測試效果十分不錯,寫成文章筆記下來囉。
- 原本的主題是在 single.php 置入下述的程式碼
<?php wp_link_pages('before=&after=&next_or_number=next&previouspagelink= 上一頁 &nextpagelink='); wp_link_pages('before=&after=&next_or_number=number'); echo ""; wp_link_pages('before=&after=&next_or_number=next&previouspagelink= &nextpagelink= 下一頁'); ?>
效果就像是「上一頁 1 2 3 下一頁」這樣的概念,相當醜且也不能自己寫 CSS 去調整,因為都只是 <a href=..> 標籤。因此如果需要自訂 CSS 樣式就必須重新寫一個函式來進行呼叫,方法如下。
- 在 functions.php 裡面置入下述的程式碼
// 內容分頁 function custom_wp_link_pages($args = '') { $defaults = array( 'before' => '<div class="pagelist">', 'after' => '</div>', 'text_before' => '','text_after'=>'', 'next_or_number' => 'number', 'nextpagelink' =>'下一頁', 'previouspagelink' =>'上一頁', 'pagelink' => '%', 'echo' => 1 ); $r = wp_parse_args($args, $defaults); $r = apply_filters('wp_link_pages_args', $r); extract($r, EXTR_SKIP); global $page, $numpages, $multipage, $more, $pagenow; $output = ''; if ($multipage) {if ( 'number' == $next_or_number) { $output .= $before; for ($i = 1; $i < ( $numpages + 1); $i = $i + 1 ) {$j = str_replace( '%', $i, $pagelink); $output .= ' '; if ($i != $page || ( ( ! $more) && ($page == 1) ) ) $output .= _wp_link_page($i); else $output .= '<span>'; $output .= $text_before . $j . $text_after; if ($i != $page || ( ( ! $more) && ($page == 1) ) ) $output .= '</a>'; else $output .= '</span>'; } $output .= $after; } else {if ( $more) { $output .= $before; $i = $page - 1; if ($i && $more) {$output .= _wp_link_page( $i); $output .= $text_before . $previouspagelink . $text_after . '</a>'; } $i = $page + 1; if ($i <= $numpages && $more) {$output .= _wp_link_page( $i); $output .= $text_before . $nextpagelink . $text_after . '</a>'; } $output .= $after; } } } if ($echo) echo $output; return $output; }
- wordpress 版本過舊 可能內建的編輯器沒有支援 分頁標籤的功能 那就必須另外新增下述程式碼
add_filter('mce_buttons','add_next_page_button'); function add_next_page_button($mce_buttons) {$pos = array_search('wp_more',$mce_buttons,true); if ($pos !== false) {$tmp_buttons = array_slice($mce_buttons, 0, $pos+1); $tmp_buttons[] = 'wp_page'; $mce_buttons = array_merge($tmp_buttons, array_slice($mce_buttons, $pos+1)); } return $mce_buttons; }
- 新增完函式後 自訂 CSS 樣式 打開主題的 style.css
/* 分頁標籤樣式 */ .pagelist { padding: 10px 0; background: #f3f3f3; text-align: center; margin-top: 20px } .pagelist>span, .pagelist>a { background-color: #fff; border: 1px#ddd solid; color: #000; margin-left: 5px; padding: 4px 10px; text-transform: uppercase; } .pagelist>a:hover, .pagelist>span { background-color: #363636; color: #fff !important; }
- 最後在 single.php 呼叫自訂的函式
<?php custom_wp_link_pages();?>
- 完成後的效果如附圖
參考資料
http://www.111cn.net/wy/wordpress/87698.htm
http://bavotasan.com/2012/a-better-wp_link_pages-for-wordpress/
正文完