大多数网站的页脚区域分为多个区域，如下面的html代码所示。这个基本示例使用PureCss创建四个列的页脚，当然，你也可以将其更改为使用Bootstrap或其他网格系统。

  1. <section class="footer">
  3.     <div class="pure-g">
  5.         <div class="pure-u-1 pure-u-sm-1 pure-u-md-1 pure-u-lg-1-5 pure-u-xl-1-5">
  7.             <section>
  9.                 <h4>Title</h4>
  11.                 [ Content ]
  13.             </section>
  15.         </div>
  17.         <div class="pure-u-1 pure-u-sm-1-3 pure-u-md-1-3 pure-u-lg-1-5 pure-u-xl-1-5">
  19.             <section>
  21.                 <h4>Title</h4>
  23.                 [ Content ]
  25.             </section>
  27.         </div>
  29.         <div class="pure-u-1 pure-u-sm-1-3 pure-u-md-1-3 pure-u-lg-1-5 pure-u-xl-1-5">
  31.             <section>
  33.                 <h4>Title</h4>
  35.                 [ Content ]
  37.             </section>
  39.         </div>
  41.         <div class="pure-u-1 pure-u-sm-1-3 pure-u-md-1-3 pure-u-lg-1-5 pure-u-xl-1-5">
  43.             <section>
  45.                 <h4>Title</h4>
  47.                 [ Content ]
  49.             </section>
  51.         </div>
  53.     </div>
  55. </section>

注册小工具区域

首先，我们首先需要向WordPress管理后台注册其他小工具区域。 将以下代码复制到主题的functions.php文件中：

function register_widget_areas() {

  // 小工具区域代码添加到这里...

}

add_action( 'widgets_init', 'register_widget_areas' );

在这里，我们使用add_action()函数将一个操作添加到widgets_init钩子，并注册回调函数register_widget_areas()。
这段代码还没什么功能，让我们来添加第一个小工具区域。像下面一样修改你的 functions.php新增的代码：

function register_widget_areas() {

  register_sidebar( array(
    'name'          => 'Footer area one',
    'id'            => 'footer_area_one',
    'description'   => 'This widget area discription',
    'before_widget' => '<section class="footer-area footer-area-one">',
    'after_widget'  => '</section>',
    'before_title'  => '<h4>',
    'after_title'   => '</h4>',
  ));

}

add_action( 'widgets_init', 'register_widget_areas' );

现在，从register_widget_areas()函数内部，调用register_sidebar()函数并将其传递给选项数组。这些选项是：

  • name: 小工具区域的名称，在WP后台中显示
  • id: 小工具区域的唯一ID。必须全部为小写且不能有空格
  • description: 将在管理后台显示的小工具区域的描述
  • before_widget: 放置在小工具前面的一些html。通常，使用像div或section标签之类的开头的容器标签
  • after_widget: 放置在小工具后面的一些html。通常，关闭容器标签（例如div或section标签）
  • before_title: 放置在小工具标题前面的一些html。通常是H标题标签
  • after_title: 放置在小工具标题后面的一些html。通常是一个关闭的H标题标签

注意：我们在这里使用registersidebar()函数是因为WordPress的原始小工具将在文章内容旁边的侧边栏中使用。但是我们也可以注册多个小工具区域，只是在这里，名称可能会有些混乱。
如果将上面的代码保存到主题_functions.php文件中，然后访问“ 外观>小工具”，您将看到一个名为“Footer area one”的小工具区域，如下所示：
WordPress添加页脚小工具区域 - 图1
有一个小工具区域
太好了，但是我们的页脚需要四个小工具区域，因此让我们再添加三个调用registersidebar() 函数来扩展。
像下面一样更改你的_functions.php相关代码：

function register_widget_areas() {

  register_sidebar( array(
    'name'          => 'Footer area one',
    'id'            => 'footer_area_one',
    'description'   => 'This widget area discription',
    'before_widget' => '<section class="footer-area footer-area-one">',
    'after_widget'  => '</section>',
    'before_title'  => '<h4>',
    'after_title'   => '</h4>',
  ));

  register_sidebar( array(
    'name'          => 'Footer area two',
    'id'            => 'footer_area_two',
    'description'   => 'This widget area discription',
    'before_widget' => '<section class="footer-area footer-area-two">',
    'after_widget'  => '</section>',
    'before_title'  => '<h4>',
    'after_title'   => '</h4>',
  ));

  register_sidebar( array(
    'name'          => 'Footer area three',
    'id'            => 'footer_area_three',
    'description'   => 'This widget area discription',
    'before_widget' => '<section class="footer-area footer-area-three">',
    'after_widget'  => '</section>',
    'before_title'  => '<h4>',
    'after_title'   => '</h4>',
  ));

  register_sidebar( array(
    'name'          => 'Footer area four',
    'id'            => 'footer_area_four',
    'description'   => 'This widget area discription',
    'before_widget' => '<section class="footer-area footer-area-four">',
    'after_widget'  => '</section>',
    'before_title'  => '<h4>',
    'after_title'   => '</h4>',
  ));

}

add_action( 'widgets_init', 'register_widget_areas' );

在这里，我们又调用了3次 register_sidebar()函数，并适当地修改了函数的参数选项，来添加了“Footer area two”、“Footer area three”等小工具区域……
保存此代码，就可以在“外观>小工具”界面看到4个小工具区域，如下图所示：
WordPress添加页脚小工具区域 - 图2
有四个小工具区域

在WordPress主题中显示小工具

此时，你可以从WordPress管理后台开始填充小工具区域。但是你仍然需要一种使它们在主题中可见的方法。
要显示小工具区域的内容，你需要修改我们文章开头的html代码，为下面所示：

<section class="footer">

    <div class="pure-g">

        <div class="pure-u-1 pure-u-sm-1 pure-u-md-1 pure-u-lg-1-5 pure-u-xl-1-5">

            <?php dynamic_sidebar( 'footer_area_one' ); ?>

        </div>

        <div class="pure-u-1 pure-u-sm-1-3 pure-u-md-1-3 pure-u-lg-1-5 pure-u-xl-1-5">

            <?php dynamic_sidebar( 'footer_area_two' ); ?>

        </div>

        <div class="pure-u-1 pure-u-sm-1-3 pure-u-md-1-3 pure-u-lg-1-5 pure-u-xl-1-5">

            <?php dynamic_sidebar( 'footer_area_three' ); ?>

        </div>

        <div class="pure-u-1 pure-u-sm-1-3 pure-u-md-1-3 pure-u-lg-1-5 pure-u-xl-1-5">

            <?php dynamic_sidebar( 'footer_area_four' ); ?>

        </div>

    </div>

</section>

在这里，我们使用dynamic_sidebar()函数显示小工具区域的输出。该dynamicsidebar()需要一个参数作为唯一的ID，这就是你在使用 register_sidebar()函数注册小工具区域时的id 参数 。例如 _footer_area_one或 _footer_area_t_wo 等…
WordPress添加页脚小工具区域 - 图3
添加小工具内容
现在可以添加一些小工具到我们新建的小工具区域。比如上图，我们添加了一个文本小工具到 Footer area two，并填写了一些内容，保存 以后，我们就可以在前台页面的代码中看到下面的代码输出：

<div class="pure-u-1 pure-u-sm-1-3 pure-u-md-1-3 pure-u-lg-1-5 pure-u-xl-1-5">

    <section class="footer-area footer-area-two">

        <h4>Contact info</h4>

        <div class="textwidget">

            <p>Streetname 123<br />
            1234 AB – Cityname<br />
            Phone: 12-34567890<br />
            Email: info@example.com</p>

        </div>

    </section>  

</div>

请注意，小工具及其标题被我们之前传递给register-sidebar()函数的before_widget，after_widget，before_title和after_title的值所包围。