[WordPress 3] 將Twenty Eleven佈景主題加上分頁導航樣式

本篇介紹改造WordPress 3預設的Twenty Eleven佈景主題的分頁瀏覽器，將原本簡單的「Older posts」、「Newer posts」改成美觀又具有功能性的分頁導航樣式。改裝步驟很簡單，安裝WP-PageNavi外掛並依照本篇介紹的步驟就可以了。

預設的分頁導航樣式	使用WP-PageNavi後的分頁導航樣式

• 首先要到後台安裝WP-PageNavi外掛，並啟用之。
• 繼續使用上一篇介紹的子主題(Child Theme)，修改wp-content/themes/twentyeleven-child裡的functions.php，加上下列指令：

 
// Show Wp-PageNavi when it's active - 
//   change twentyeleven_content_nav in index.php to twentyeleven_child_content_nav
function twentyeleven_content_nav( $nav_id ) {
  global $wp_query;
  if ( $wp_query->max_num_pages > 1 ) : ?>
        <?php /* add wp-pagenavi support for posts */ ?>
    <?php if(function_exists('wp_pagenavi') ) : ?>
      <?php wp_pagenavi(); ?>
      <br />
        <?php else: ?>
    <nav id="<?php echo $nav_id; ?>">
      <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
      <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'twentyeleven' ) ); ?></div>
      <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?></div>
    </nav><!-- #nav-above -->
  <?php endif; ?>
  <?php endif;
}

• 再修改同一目錄的style.css，稍加修飾外觀：

 
/*---------------------------------------
 * Wp-PageNavi style
 *---------------------------------------*/
.wp-pagenavi {margin-top:10px;}
.wp-pagenavi a, .wp-pagenavi span {
  margin-right: 10px;
  padding: 3px 5px;
  font-size: 12px;
  color: #222;
  text-decoration: none;
  border: 3px solid #dddddd !important;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
  background: black;
  color: #fff;
}
/* This is optional and not valid CSS but it looks cool, adds a delay hover effect */
.wp-pagenavi a:hover {
  -moz-transition-duration: 300ms; /* Firefox 4 */
  -webkit-transition-duration: 300ms; /* Safari and Chrome */
  -o-transition-duration: 300ms; /* Opera */
  -moz-transition-timing-function: ease; /* Firefox 4 */
  -webkit-transition-timing-function: ease; /* Safari and Chrome */
  -o-transition-timing-function: ease; /* Opera */
}

回前台重新整理就可以看到新的分頁導航出現了。

參考

• Easily add Wp-PageNavi to Twenty Eleven
• WordPress.com Theme: Twenty Eleven CSS Style Sheet Modification. Change Site Title,Description,Post Title,Comments,Menus,Sidebar and More.

範例網站

• 簡睿的美好新人生

＃＃

您可能也會有興趣的類似文章

• [WordPress 3] 以Child Theme機制修改Twenty Eleven佈景主題為中文版 (0則留言, 2012/01/19)
• [WordPress 3] 修改Twenty Eleven佈景主題在iPad瀏覽側邊欄的問題 (2則留言, 2012/01/23)
• Step by Step安裝WordPress 3.0與啟用 Multi-Site多站點功能 (20則留言, 2010/07/10)
• [WordPress外掛] 顯示外部連結小圖示以方便辨識 (2則留言, 2008/12/28)
• WordPress瀏覽圖片的FancyBox外掛 (8則留言, 2010/07/10)
• 示範Atahualpa 3.5.1佈景主題表頭區的調整 (0則留言, 2010/07/11)
• 修改WordPress 2.8最新迴響的顯示格式 (0則留言, 2009/06/17)
• WordPress跑馬燈外掛：Running Line (1則留言, 2010/06/10)
• 用jQuery改造WordPress網頁 (2則留言, 2009/10/27)
• 自製WordPress-mu 2.7的繁體中文語言檔[修訂] (10則留言, 2009/02/09)
• 最具彈性的WordPress樣版引擎Atahualpa 3.5.1－超神奇！ (9則留言, 2010/07/04)
• WordPress網站遭植後門網頁 😡 (0則留言, 2022/08/12)
• [WordPress] 使用Anchor在目前網頁裡瞬間移動 (0則留言, 2008/11/30)
• WP Widget Cache造成WordPress有問題 (2則留言, 2009/10/26)
• 手動撰寫WordPress隨機文章功能 (2則留言, 2010/07/13)