wordpress 兩欄式改為三欄式

2012年6月28日星期四

wordpress 兩欄式改為三欄式

昨天有一個鄉民碰到 wordpress 的問題蠻有創意的，就是要將預設主題佈景的欄位配置改為自訂的欄位配置，苦於對 wordpress 不了解，所以就將這個問題問我。

而剛升級為 wordpress 中學等級的我，要教幼稚園等級的他可以順便練練功 ( 不要笑他 )。

回歸主題，要將 wordpress 佈景主題兩欄式改為三欄式的每個動作雖然簡單，但必須要去了解這個動作會影響到哪一塊，不然網站掛掉就不要哭哭，所以在要動哪一個檔案前，先將那個檔案備份起來，這樣比較保險。

要改 wordpress 之前先拍一張正面照：

接下來依照以下的步驟做修改，但還是要依照各佈景主題配置的程式碼做調整。

1

在「後台」，外觀 > 主題編輯器，找尋 function.php ( 佈景函式庫 ) 做編輯，在這個檔案內，搜尋「register_sidebar」字樣，此時必須要針對側欄區做判斷，因為要將側欄區複製一塊再做版面配置。搜尋到側欄區的程式碼如下：

register_sidebar( array(
    'name' => __( 'Main Sidebar', 'twentyeleven' ),
    'id' => 'sidebar-1',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget' => "</aside>",
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>',
) );

把這一段程式碼複製後貼在後面，將 id 改為唯一值，由於版面已經用到 sidebar-5，所以我將新區塊 id 命名為 sidebar-6，命名為 "次主邊欄"。

register_sidebar( array(
    'name' => __( '次主邊欄', 'twentyeleven' ),
    'id' => 'sidebar-6',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget' => "</aside>",
    'before_title' => '<h3 class="widget-title">hi',
    'after_title' => '</h3>',
) );

到外觀 > 模組就會看到 "次主邊欄" 的區塊，並且可以拖曳模組進去，但於頁面上並無太大更動。

2

要讓你所新增的區塊 "次主邊欄" 在頁面上顯示，就要在外觀 > 主題編輯器找尋 sidebar.php ( 邊欄 ) 做編輯，其實檔案裡面已經很明顯地說明這一區塊在做 id 為 sidebar-1 的區塊內容，而動作只需要將它的程式碼在複製一份貼在後面，然後 id 命名為 sidebar-6：

<?php
/**
 * The Sidebar containing the main widget area.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */

$options = twentyeleven_get_theme_options();
$current_layout = $options['theme_layout'];

if ( 'content' != $current_layout ) :
?>
  <div id="secondary" class="widget-area" role="complementary">
   <?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>

    <aside id="archives" class="widget">
     <h3 class="widget-title"><?php _e( 'Archives', 'twentyeleven' ); ?></h3>
     <ul>
      <?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
     </ul>
    </aside>

    <aside id="meta" class="widget">
     <h3 class="widget-title"><?php _e( 'Meta', 'twentyeleven' ); ?></h3>
     <ul>
      <?php wp_register(); ?>
      <li><?php wp_loginout(); ?></li>
      <?php wp_meta(); ?>
     </ul>
    </aside>

   <?php endif; // end sidebar widget area ?>
  </div><!-- #secondary .widget-area -->
<?php endif; ?>
<?php
if ( 'content' != $current_layout ) :
?>
  <div id="third" class="widget-area" role="complementary">
   <?php if ( ! dynamic_sidebar( 'sidebar-6' ) ) : ?>

    <aside id="archives" class="widget">
     <h3 class="widget-title"><?php _e( 'Archives', 'twentyeleven' ); ?></h3>
     <ul>
      <?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
     </ul>
    </aside>

    <aside id="meta" class="widget">
     <h3 class="widget-title"><?php _e( 'Meta', 'twentyeleven' ); ?></h3>
     <ul>
      <?php wp_register(); ?>
      <li><?php wp_loginout(); ?></li>
      <?php wp_meta(); ?>
     </ul>
    </aside>

   <?php endif; // end sidebar widget area ?>
  </div><!-- #secondary .widget-area -->
<?php endif; ?>