有時單個文章頁面篇幅過長,會影響頁面加載速度和用戶體驗,這時我們需要使用wordpress長文章分頁顯示。實現(xiàn)分頁有二種方法,一種是使用wordpress長文章分頁插件,另一種是通過修改代碼來實現(xiàn)。
WordPress長文章分頁的操作步驟:
第一步:進(jìn)入WordPress網(wǎng)站后臺,在外觀下找到“編輯”選項,然后找到文章頁面模塊single.php,在single.php中找到下面的代碼
<?php the_content(); ?>
第二步:找到上面的代碼之后,在其下方添加wordpress自帶的分頁功能函數(shù)代碼:
<?php wp_link_pages(); ?>
第三步:第二步的代碼可以實現(xiàn)簡單的分頁效果,如果你想讓分頁按鈕更加美觀的話,可以將第二步的代碼替換成下面的調(diào)用代碼:
<?php wp_link_pages(array('before' =>?'<div>分頁閱讀:',?'after'?=>?'',?'next_or_number'?=>?'next',?'previouspagelink'?=>?'上一頁',?'nextpagelink'?=>?""));??>?<?php wp_link_pages(array('before' =>?'',?'after'?=>?'',?'next_or_number'?=>?'number',?'link_before'?=>'<span>',?'link_after'=>'</span>'));??>?<?php wp_link_pages(array('before' =>?'',?'after'?=>?'</div>',?'next_or_number'?=>?'next',?'previouspagelink'?=>?'',?'nextpagelink'?=>?"下一頁"));??>
通過下面的CSS代碼來控制分頁按鈕的顯示樣式,直接復(fù)制下面的CSS樣式到style.css文件中,這樣就可以實現(xiàn)下面的效果
/**頁面分頁**/ .fenye{text-align:center;margin:0px?auto?10px;font-weight:bold} .fenye?span{background-color:#DDDDDD;color:#fff;font-weight:?bold;margin:0px?1px;padding:1px?6px;display:inline-block;text-decoration:none;border:1px?solid?#e0e0e0;} .fenye?a{text-decoration:none;} .fenye?a?span{background-color:#F6F6E8;font-weight:?normal;color:?#000;text-decoration:?none;} .fenye?a:hover?span{background-color:#DDDDDD;color:?#fff;}
第四步:在文章中需要分頁的位置插入分頁代碼【必須在代碼文本模式下插入】
<p><!--nextpage--></p>
第五步:如果覺得每次使用分頁代碼比較麻煩,可以通過在編輯器上方添加一個“分頁按鈕”來使用,即在文章中需要分頁的地方點一下“分頁按鈕”就會自動的添加分頁代碼。【此步可做可不做】
1、找到 /wp-includes/class-wp-editor.php 文件。查找 ‘wp_more’, 標(biāo)簽:(在366行處)
$mce_buttons?=?apply_filters('mce_buttons',?array('bold',?'italic',?'strikethrough',?'|',?'bullist',?'numlist',?'blockquote',?'|',?'justifyleft',?'justifycenter',?'justifyright',?'|',?'link',?'unlink',?<span><strong><span>'wp_more',</span></strong></span>?'|',?'spellchecker',?'fullscreen',?'wp_adv'?),?$editor_id);
2、在 ‘wp_more’ 后添加 ‘wp_page’, (含單引號和逗號)。修改后代碼如下:
$mce_buttons?=?apply_filters('mce_buttons',?array('bold',?'italic',?'strikethrough',?'|',?'bullist',?'numlist',?'blockquote',?'|',?'justifyleft',?'justifycenter',?'justifyright',?'|',?'link',?'unlink',?<span><strong><span>'wp_more','wp_page',</span></strong></span>?'|',?'spellchecker',?'fullscreen',?'wp_adv'?),?$editor_id);
3、此時,你就可以在后臺寫文章及編輯文章頁面的文本編輯器上看到一個跟 more 標(biāo)簽按鈕相似的圖標(biāo)。
同樣,在代碼編輯器也會相應(yīng)出現(xiàn)一個 nextpage 按鈕。
第六步:消除分類后不同頁面的文章的標(biāo)題相同的問題,避免影響網(wǎng)站SEO優(yōu)化。在主題模板文件 header.php 找到類似
<?php if ( is_single() ) { ?><title> <?php echo trim(wp_title('',0)); ?><?php if (get_query_var('page')) { echo '-第'; echo get_query_var('page'); echo '頁';}?>?—?<?php bloginfo('name'); ?> </title><?php } ?>
第七步:實現(xiàn)分頁功能后,會導(dǎo)致Feed頁面的文章被分頁,一般只顯示第一頁的內(nèi)容,解決方法:打開 wp-includes 目錄下的 query.php 文件,找到下面這行代碼(大概在3578行)
if?(?strpos(?$content,''?)?)?{
把它修改為下面這行代碼。
if?(?strpos(?$content,?'<!--nextpage-->'?)?&&?(!is_feed())?)?{
這樣我們就完成了完美的長文章分頁閱讀的效果了。
更多wordpress相關(guān)技術(shù)文章,請訪問wordpress教程欄目進(jìn)行學(xué)習(xí)!