文章分頁功能與樣式美化

2,388次閱讀
尚無留言

共计 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://lostsakura.com/14.html

http://bavotasan.com/2012/a-better-wp_link_pages-for-wordpress/

http://blog.brain1981.com/1267.html

https://prinzeugen.net/add-pagination-for-wordpress/

正文完
 0
評論(尚無留言)