iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 19
1
Modern Web

讓0基礎的你也能製作簡單wordpress主題系列 第 19

【Day 19】 文章要有分頁(page-break)?其實wordpress也能做到

文章分頁

有時候,去到一個網站,是不是會有同一篇文章,卻會有數個版面?你可能不知道的是,其實wordpress是可以做到的。

Wordpress 部分

這裡非常簡單,只需要點擊點選+號,然後點選page break 就可以了

wordpress設定page break的方法

編碼部分

當然單單只在wordpress裏設定是不行,我們還需要加入編碼,才能夠實現,還記得之前我們說過的上一頁和下一頁的按鈕嗎?

<?php previous_posts_link();>
<?php next_posts_link();>

我們可以先把那個編碼搬到文章內容的loop內,至於放在那,既然我們希望放在文章下方,當然就放在content下吧。

不過這樣子還不足夠,這個編碼並不能讓我們,連接到文章的下一頁。所以我們還需要加入額外編碼:
<?php wp_link_pages()?>
這樣我們在wordpress文章了設定了的 page break,就能夠通過數字按鈕(沒錯它原設就是這樣),可以看到了。

wp_link_pages使用後會出來的結果

參數

不過,你又怎可能會滿足於現在這個樣子呢,想必一定會想為它的樣式進行加加減減?例如改掉頁次這個字。就像之前那樣,這個也是有參數的,透過改變一下參數,我們可以就改變wordpress系統原先的設定,給大家先看一下修改後的編碼吧,這些都是要來代替<?php wp_link_pages()?>的:

<?php
$args = array (
    'before'            => '<div class="page-button-post ">',
    'after'             => '</div>',
    'link_before'       => '<button class="page-button-post btn btn-info btn-sm" type="button">',
    'link_after'        => '</button >',
    'next_or_number'    => 'next',
    'separator'         => ' | ',
    'nextpagelink'      => __( 'Next &raquo' ),
    'previouspagelink'  => __( '&laquo Previous'),
);
 
wp_link_pages( $args );
?>

解釋:

$args=array(): 之前好像沒有說過,其實他們是有意思在的,$args 就是代表著那些參數,不過更正確來說,應該是一個要來存放的地方,例如這裡就是要來存放那些參數了。而array以及()內,則是那些參數,內裡列出了多個的參數,透過把多個參數,比方說例子裏的separator,nextpagelink,這些就是那些參數,重新設定。

然後,我們不是$args 放在底部wp_link_pages的( )嗎。我們把這個資料庫,放到wp_link_pages,這樣系統就會懂得根據資料庫,按照你更改好的,來修改系統的原先設定,這最終,成為了大家看到的html編碼。而大家會看到=>的符號,就是在說,您希望把那些參數,設定成什麼。

那麼是不是一定要用$args?很遺憾,因為被wordpress定死了,所以必須要用。

最後再說一句,其實概念,在php裏,是蠻常用到的,他就是php的Array 数组來,想更深入了解,可以到php官方網站啊。

'before': 在編碼裏也是看到吧,before其實就是要來放,那個按鈕前的設定,應該說是html編碼才對,例如你之前看到的頁次就能夠在這裡更改,您可以選擇在div後,用span的形式,話者h的形式,來包裹著之後的文字,格式是像這樣:

<span class="page-link-text">' . __( 'More pages: ' ) . '</span>

這裡有兩個看似平凡的符號,但他們在php世界裡,其實都有著重要的意義在的:

__: 其實某程度上來說,你不一定需要加入這個的,不過假若你希望你的主題,能夠有多國語言,那麼就必須了,它能夠讓系統把字翻譯,並顯示出來。不過這樣子,當然並不是完整的編碼來的,但因為現在我們還沒到翻譯的部分,這部分就暫且不說了,現在只需要了解__的意思就足夠了。

. : 某程度您可以把它理解成是+,不過不是真的加在一起,而是兩個項目合在一起,例如'1'.'1'這樣,出來的結果就會是11,又例如'Hi'.' Tom'這樣,那麼出來的結果就會是Hi Tom。它呀,通常都會在我們,需要加入預先設定好的文字時,使用的。或者像現在這樣子,需要加入php,來修改文字時,也會用到。

到這裡,你應該會明白,為何 div 和 span,並不需要用.來相隔著,但後面的span,文字,以及/span之間,卻要相隔著.吧。這裡的重點,是在span和文字之間。假若文字是直接More pages:這樣,那麼當然就不用用到加入.來分隔著,但因為我們需要在之後加入翻譯,這些普通的文字是做不到的,需要用到額外的php才能達成,所以我們也才會用這種形式,來打編碼^^。

對了,因為這裡是可以加入div,更改class這些,換句話說,這裡又可以用bootstrap了。

after:你開了什麼那麼就在這裏關吧,例如在before我用了div,所以這裡就放/div

link_before:要來設定那個連結的,因為這裡我只想設定一個按鈕,所以這裡我就設定為button

link_after: 就和after功能一樣,不過這裡是要來關掉link_before所開的

next_or_number:想要數字還是next,previous按鈕,就在這裡設定了。

separator:假若你是使用數字按鈕,那麼更改了這個就能改變數字與數字之間的分隔符號,不過假若你是使用next和previous,那麼就沒差了。

'nextpagelink':設定下一頁按鈕的名稱,&raquo是一個html編碼,代表著»這個符號,想看其他常用的arrow符號,這個html符號的網站,可以看到。

'previouspagelink':設定上一頁按鈕的名稱

結果:

page-break在設定後的樣式

這樣就完成了,是不是很簡單呢?大家也來試試吧。/images/emoticon/emoticon37.gif


上一篇
【Day18】讓你著手建立wordpress文章頁面及加設文章封面圖片
下一篇
【Day 20】來為你的Wordpress主題,加設分類,標籤和獨立訂立列出文章數吧
系列文
讓0基礎的你也能製作簡單wordpress主題30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言