如何新增wordpress的widget area

由 Andrew · 已發表 2017-01-24 · 已更新 2017-05-31

最近在學習自己開發一個wordpress的佈景主題，想來開個專題為自己做個筆記，發現到自己以前實在是太混拉！！

首先我來講一下今天碰到的問題，以前我在使用一些既有的主題時，會想要自己新增一些文字或者是html程式碼或甚至是一些social的plugin，許多現成寫死的主題，都要進入原始的php中去修改十分的麻煩。Wordpress很貼心的幫我們開發了「小工具(widget)」的功能，讓user可以去自由的新增自己想要的widget；這邊我以Wordpress內建的基本文字區塊來做為示範(因為目前開發的主題只有文字可以顯示QQ)

以下code節錄自wordpress的官方網站：
https://codex.wordpress.org/Widgetizing_Themes#How_to_Register_a_Widget_Area

在function.php中放入以下code

<?php
function arphabet_widgets_init() {

	register_sidebar( array(
		'name'          => '你的widget區塊名稱',
		'id'            => 'widget的ID',
		'before_widget' => '<div>(在widget開始前的內容)',
		'after_widget'  => '</div>(在widget開始後的內容)',
		'before_title'  => '<h2>(標題開始前的內容ex：樣式)',
		'after_title'   => '</h2>(標題開始後的內容ex：樣式)',
                'description' => __( '說明文字', 'text_domain' ),
	) );

}
add_action( 'widgets_init', 'arphabet_widgets_init' );
?>

實際撰寫的狀況如下：

<?php
function arphabet_widgets_init() {

	register_sidebar( array(
		'name'          => '底部資訊左',
		'id'            => 'footer1'
		'before_widget' => '<div class="footer-col">',
		'after_widget'  => '</div>',
		'before_title'  => '<h3 class="heading-title">',
		'after_title'   => '</h3>',
                'description' => __( '這個區塊編輯底部資訊左(僅可使用文字)', 'text_domain' ),	) );

}
add_action( 'widgets_init', 'arphabet_widgets_init' );
?>

接下來就是在各個模板中，加入您想要顯示的位置，以下拿我的case來做示範；今天我想要在我的footer.php加入一個可由cms編輯的文字區塊，在footer這個區塊之中置入這個wordpress說明中的這串code

<?php if ( is_active_sidebar( 'footer1' ) ) : ?>
     <?php dynamic_sidebar( 'footer1' ); ?>
<?php endif; ?>

置入在我的footer模板欲呈現位置的區塊如下：

<footer>
            <?php if ( is_active_sidebar( 'footer1' ) ) : ?>
                <?php dynamic_sidebar( 'footer1' ); ?>
            <?php endif; ?>
</footer>

置入這串code在我的footer.php中之後，我們將function.php與footer.php儲存，在到wordpress的CMS中的「外觀」或是「自訂」中會出現「小工具」的選項。

點擊小工具後，我們會看到畫面中會出現一個名為「底部資訊」的區塊，也就是剛剛我們在function.php的地方給的名稱與區塊簡述：

'name' => '底部資訊左',
'description' => __( '這個區塊編輯底部資訊左(僅可使用文字)', 'text_domain' ),

wordpress後台「小工具」介面示意圖

這時我們將上圖左區塊中的「文字」拉入右側的區塊中，我們就可以編輯文字類型widget的區塊了！

鍵入了我想要的資訊後，以上的步驟所產生出來的HTML就會是：

<div class="footer-col">
    <h3 class="heading-title">底部資訊測試2</h3>
    <div class="textwidget">這是測試</div>
</div>

上方程式碼中，.textwidget為，wordpress中文字方塊所產生的div，我們在針對.textwidget這個class去做一些css的設定，就可以讓版面變得更好看囉！

在function.php中的array中，除了上述我們提到的這些之外在wordpress的說明文件裡面還有更多的項目可以做設定，對user維護與操作會有更方便的體驗，也比較不會搞不清楚前後台的對應關係，可以再去細細的琢磨。

以上。

如何新增wordpress的widget area

近期文章