如何添加WordPress小工具？主題集成Widgets區域

自定義菜單功能和側邊欄小工具，是WordPress主題中比較有特色的功能.

• 製作一個主題，如果不包含這兩個功能，就像雞肋一樣……

陳溈亮在之前的蓋站教程裡，分享瞭如何給WordPress主題添加自定義菜單。

本文介紹一下製作主題的時候，如何添加自定義小工具功能。

和給主題一樣添加自定義菜單一樣，自定義添加小工具Widgets只需3個步驟。

第一步、小工具註冊

要使用小工具，先要進行註冊，打開WordPress主題下面的functions.php 文件，

在functions.php文件裡面，添加如下代碼：

<?php

//侧边栏小工具
if ( function_exists('register_sidebar') ) {
    register_sidebar( array(
        'name' => __( 'Top Sidebar' ),
        'id' => 'top-sidebar',
        'description' => __( 'The top sidebar' ),
        'before_widget' => '<li>',
        'after_widget' => '</li>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ) );
}

?>

修改functions.php裡的li、h2標籤，使之對應sidebar.php裡的標籤：

'before_widget' 和'after_widget' 的li和模塊h2標題，按實際情況修改代碼。

（也可能不用修改）

        'before_widget' => '<li>',
        'after_widget' => '</li>',

        'before_title' => '<h2>',
        'after_title' => '</h2>',

以上代碼註冊了一個名為“top-sidebar”的小工具區域：

• 顯示的名稱是“Top Sidebar”。
• 標題加上h2 標籤。
• 內容條目加上li 標籤。

登錄WordPress後台儀錶盤，依次進入外觀 → 小工具。

如果能看到下圖中右邊的Top Sidebar 小工具區域，說明註冊成功了 ▼

第二步、小工具調用

小工具註冊之後就可以在主題模板文件中調用了，把下面的代碼放到sidebar.php文件中就可以調用了。

1）在sidebar.php文件中，最大的li或div標籤下方，插入 ▼

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(top-sidebar) ) : ?>

2）在sidebar.php文件中，最大的或上方，添加▼

<?php endif; ?>

第三步、設置小工具

1）小工具註冊好了，顯示位置也在主題文件中定義好了。

• 就可以在WordPress後台對小工具組區域進行設置了 ▼

2）保存之後，刷新前台頁面。

• 我們的網站側邊欄，就會變成下圖這個樣子 ▼

能看到上圖，說明我們的小工具已經製作完成，並如常運行了。

如何在不同區域，添加多個WordPress小工具？

重複第一步和第二步，就能讓你的WordPress主題，支持不同位置中的widget小工具了。

假設你需要將一個小工具添加到主題的頭部、側邊欄、和底部。

1）首先，你需要將以下代碼複製到functions.php文件中 ▼

if (function_exists('register_sidebar')) {

register_sidebar(array(
'name' => 'Header',
'id' => 'header',
'description' => 'This is the widgetized header.',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
register_sidebar(array(
'name' => 'Sidebar',
'id' => 'sidebar',
'description' => 'This is the widgetized sidebar.',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
register_sidebar(array(
'name' => 'Footer',
'id' => 'footer',
'description' => 'This is the widgetized footer.',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));

}

2）接下來，將以下代碼分別添加到header.php、sidebar.php和footer.php文件中。

header.php ▼

<div id="widgetized-header">

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('header')) : else : ?>

<div>
<p><strong>Widgetized Header</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>

<?php endif; ?>

</div>

sidebar.php ▼

<div id="widgetized-sidebar">

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar')) : else : ?>

<div>
<p><strong>Widgetized Sidebar</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>

<?php endif; ?>

</div>

footer.php ▼

<div id="widgetized-footer">

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('footer')) : else : ?>

<div>
<p><strong>Widgetized Footer</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>

<?php endif; ?>

</div>

到此成功！

• 當然，你也可以根據需要修改代碼裡的各種細節^_^
• 上面的2個步驟，允許主題的其餘部分集成小工具的功能。

接下來，繼續分享WordPress使用小工具widget的技巧。

WordPress主題集成小工具widget技巧

高效管理自定義widget小工具：

1）向主題添加widget小工具後，你可以創建一個單獨的文件，並將其命名為widgets.php。

• 以便將所有在第1步添加的自定義widget小工具代碼，保存到此文件夾。

2）將代碼添加到functions.php文件中：

if ($wp_version >= 2.8) require_once(TEMPLATEPATH.’/widgets.php’);

3）將所有在第1步添加的自定義widgets小工具代碼，保存到widgets.php文件裡。

此方法可確保所有widgets小工具順暢加載，並在所有支持widgets小工具的WordPress版本上運行。

這樣，你就可以更高效率地管理的WordPress主題文件。