文章
文章商城快讯网址导航
外贸独立站的底层设计密码WordPress 成品站SaaS建站
当前位置：首页>WordPress建站>WordPress开发>WordPress添加页脚小工具区域

WordPress添加页脚小工具区域

在本文中，我将向你展示如何从WordPress管理后台使用 小工具管理WordPress主题的页脚区域。但是，我将向您展示的技术不仅限于页脚区域，而且可以应用于主题的其他不同部分。

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

<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">
            
            <section>
            
                <h4>Title</h4>
            
                [ Content ]
                
            </section>
            
        </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">
            
            <section>
            
                <h4>Title</h4>
            
                [ Content ]
                
            </section>
            
        </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">
            
            <section>
            
                <h4>Title</h4>
            
                [ Content ]
                
            </section>
            
        </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">
            
            <section>
                
                <h4>Title</h4>
            
                [ Content ]
                
            </section>
            
        </div>
        
    </div>
    
</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标题标签

注意：我们在这里使用register_sidebar()函数是因为WordPress的原始小工具将在文章内容旁边的侧边栏中使用。但是我们也可以注册多个小工具区域，只是在这里，名称可能会有些混乱。

如果将上面的代码保存到主题functions.php文件中，然后访问“ 外观>小工具”，您将看到一个名为“Footer area one”的小工具区域，如下所示：

有一个小工具区域

太好了，但是我们的页脚需要四个小工具区域，因此让我们再添加三个调用register_sidebar() 函数来扩展。

像下面一样更改你的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主题中显示小工具

此时，你可以从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()函数显示小工具区域的输出。该dynamic_sidebar()需要一个参数作为唯一的ID，这就是你在使用 register_sidebar()函数注册小工具区域时的id 参数 。例如 footer_area_one或 footer_area_two 等…

添加小工具内容

现在可以添加一些小工具到我们新建的小工具区域。比如上图，我们添加了一个文本小工具到 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的值所包围。

就是这么简单，你还可以使用该方法为主题不同地方添加不同的小工具区域！

参考： https://vanaf1979.nl/wordpress-adding-widget-areas-to-your-themes-footer/ ，由WordPress大学翻译整理，转载请保留该说明和本文网址。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
主题制作小工具
欢迎关注WordPress大学公众号 WPDAXUE
WordPress开发

为古腾堡区块添加Dashicons或自定义SVG图标

2019-9-28 8:09:54

WordPress开发

WordPress开发人员要了解的 PHP 7.4 新特性

2019-10-5 11:03:53

猜你喜欢
0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索

  • 扫码打开当前页

  • 微信扫一扫，联系我们

  • 关注微信公众号 WPDAXUE

返回顶部