Wordperss佈景製作教學系列(七):WordPress佈景分頁導覽製作




在上一次介紹完Single.php之後,其實整體的架構已經差不多,剩下的頁面在製作時就可以參照既有的檔案直接修改,所以在這之前我們需要開始將一些細節先做好,之後的頁面在製作時就會快很多,而首先我們要講到的就是WordPress佈景分頁的導覽製作,所謂分頁導覽是指在首頁如果設定每頁顯示5篇文章,而下方就會有導覽列讓我們切到下個5篇或上個5篇,另外還有在文章的部份,如果太冗長時我們也會將文章分段,這分段的連結也是分頁導覽,往下我們就來看怎麼製作吧。

如果你是突然看這篇的朋友,建議可以往前先回顧這系列的前文。

Wordperss佈景製作教學系列:

在頁面上加入分頁導覽:

這意思是像每頁顯示2篇文章,那下面可以換頁的導覽,首先在index.php裡加入以下語法,可以加在endif下面,這二行很明顯的一個是往前,一個是往後。

   1: <div class="nav-previous"><?php next_posts_link('&larr; 之前的文章'); ?></div>

   2: <div class="nav-next"><?php previous_posts_link('較新的文章 &rarr;'); ?></div>

然後加一下CSS語法,讓他分左右二邊。

   1: .nav-previous{

   2: float:left;

   3: }

   4: .nav-next{

   5: float:right;

   6: }

03

然後回到首頁來看,下方就有往舊文或新文的導覽連結囉,如果你是要顯示1.2.3.4的方式,可以利用外掛,WP內建並沒有這函式可以直接用,不過以後阿湯還是會寫到修改教學。

02

內頁分頁導覽:

當一篇文章很冗長時,你可能就會將文章切八段,讓人閱讀時更方便一些,而內頁要顯示這些分頁連結,則可以找到the_content,在下方加入以下語法:

   1: <div class="link_pages">

   2: <?php wp_link_pages('before=<p>頁次:&after=</p>&next_or_number=number&pagelink=%'); ?>

   3: </div>

04

然後再加一下CSS,讓他有間隔並置中。

   1: .link_pages{

   2: padding:20px 0;

   3: text-align:center;

   4: }

05

再到文章裡設定分頁符號,隔開文章。

06

回到文章內頁來看,就可以看到文章被切段而且有顯示頁數囉。

07

18 Comments

  1. BTJIM -  2015 年 01 月 25 日 - 17:48:45 (Your Comment is Under Moderation)

    讚^^ 我喜歡^^

    回覆
  2. 威客 -  2015 年 01 月 12 日 - 11:26:03 (Your Comment is Under Moderation)

    正在学习中,一起加油吧

    回覆
  3. steven -  2014 年 05 月 01 日 - 13:29:25 (Your Comment is Under Moderation)

    請教問題:
    我也是無法切段,插入繼續閱讀不懂意思???
    在主頁 新舊文章都能切換,但進入內頁卻沒顯示,不知道是那程序搞錯

    回覆
  4. 呂笨笨 -  2013 年 07 月 18 日 - 15:20:43 (Your Comment is Under Moderation)

    請教您一個問題
    我安裝好部落格後,有匯入另一個部落格的文章,但是新部落格的文章部分無法輸入文字,輸入文字的地方好像變成一張圖,無法使用,請問是沒安裝好嗎?還是設定上哪邊有問題?

    回覆
    • 阿湯 -  2013 年 09 月 30 日 - 13:17:55 (Your Comment is Under Moderation)

      換一個瀏覽器試試

      回覆
  5. ki1418 -  2013 年 06 月 27 日 - 11:56:36 (Your Comment is Under Moderation)

    看來我必須慢慢爬文才看得懂

    回覆
    • 阿湯 -  2014 年 04 月 18 日 - 23:50:35 (Your Comment is Under Moderation)

      加油

      回覆
  6. Kevin -  2013 年 03 月 20 日 - 12:04:41 (Your Comment is Under Moderation)

    阿湯站長:
    你好~我是個Wordpress新手,遇到了些問題想要請教您^^

    http://www.showfun.com.tw/
    這是我們公司的網站(進入公司之前就已經做好了)
    最近在修改首頁的一些資訊,但問題出現了!
    我用IE開起時上方的FB登入與下方的七個選項都向右偏移了,但是在GOOGLE Chrome開啟又是正確的,實在不知道是那裡出了問題!

    但在修改時完全未動到任何語法,只有使用FTP修改圖片內容與刪除多的選項。

    謝謝版主!

    回覆
    • 阿湯 -  2013 年 03 月 21 日 - 15:38:22 (Your Comment is Under Moderation)

      表示你們有一些CSS語法在IE上不相容吧

      回覆
  7. 小霍 -  2013 年 03 月 11 日 - 16:26:51 (Your Comment is Under Moderation)

    我有4個問題,還想請教您!

    我已經幫網站申請 google analytics 和 webmaster!
    也安裝了外掛 Google Analyticator & Google XML Sitemaps!


    我想問 Google Analyticator外掛我設定好了後,下面卻出現!
    You have not authenticated with Google - you cannot use dashboard widgets! Reset the plugin to authenticate..
    ( 但是回到google analytics看 狀態:已安裝追蹤功能 )應該是正常的阿!


    然後 Google XML Sitemaps外掛,我也設定好了,我照著香腸炒魷魚的教學,應該不用在裡面調整什麼吧??(我的意思是,其他設定是不是默認就可以?)
    外掛裡面顯示這樣:
    已經成功地通知 Google 您網站的更新。
    已經成功地通知 Bing 您網站的更新。


    這兩個設定好之後,我安裝了PuSHPress,又在"更新服務ping service"新增了提供的服務!
    如果安裝 PuSHPress 又新增 ping service,這樣會不會跟上面的google analytics 和 webmaster衝突?
    還是都有意義,可以同時存在?


    使用webmaster功能後,然後安裝了Google XML Sitemaps,還有必要主動去跟google和bing提交網站嗎?

    非常謝謝您!!

    回覆
  8. 小霍 -  2013 年 02 月 21 日 - 21:49:54 (Your Comment is Under Moderation)

    站長你好
    我有一個問題想要請教您!
    國外的 Themes 有些沒有辦法在文章內顯示標籤,所以在原始碼裡面也找不到TAG,但是在寫文章的時候,確實有填寫標籤,而且我也確定標籤是成功填寫的!
    因為我安裝SEO外掛,有把"將標籤當成關鍵字"打勾,所以看原始碼,確實有出現輸入的標籤在keyword裡面,所以標籤是成功輸入的,但是卻不能顯示TAG!

    有兩個問題
    1. 如果是這種問題,有沒有辦法改善,就是讓文章可以裡面顯示TAG,有沒有辦法用外掛的方式達到?或是其他方法?
    2. 如果是確實有成功標籤,但是像我說的佈景主造成無法顯示TAG,這樣會不會影響SEO呢?

    謝謝版主!

    回覆
    • 阿湯 -  2013 年 02 月 24 日 - 00:17:07 (Your Comment is Under Moderation)

      1。改佈景
      2。SEO 部份不回答,謝謝

      回覆
  9. 研習 -  2013 年 01 月 09 日 - 01:19:29 (Your Comment is Under Moderation)

    感謝大大分享,
    學習中^^

    回覆
  10. 王煜傑 -  2012 年 10 月 15 日 - 12:32:47 (Your Comment is Under Moderation)

    阿湯站長:
    請問文章『切段』是否需至後台設定,因為我發了一篇文章(大約20行),可是他還是全都顯示出來,沒有內文分頁的效果?

    不好意思在問一個問題,『Wordpress 入門基礎』我全都看完了,是否有比較推薦的書藉能夠在研究的。

    打擾了

    謝謝~~

    回覆
    • 阿湯 -  2012 年 10 月 17 日 - 10:03:25 (Your Comment is Under Moderation)

      切段要插入繼續閱讀

      回覆
      • 王煜傑 -  2012 年 10 月 18 日 - 23:32:29 (Your Comment is Under Moderation)

        謝謝您!!

        知道問題點出在哪了。

        感謝百忙中抽空回覆~~

        回覆
  11. 小Y -  2012 年 07 月 12 日 - 13:30:09 (Your Comment is Under Moderation)

    我剛加入blog行列2個多月了
    看原始碼看得霧煞煞
    還有好多要學習的地方

    回覆
    • 阿湯 -  2012 年 07 月 16 日 - 11:29:51 (Your Comment is Under Moderation)

      加油

      回覆

Leave A Comment

Your email address will not be published. Required fields are marked (required):

留言前請輸入「YA」

Back to Top