/ 博客 / 1426浏览

为WordPress主题添加页脚小工具(footer widget)

某些主题不支持单列结构,小工具栏只能放在右侧,或者不少主题根本不带页脚小工具,常让包括我在内的强迫症患者烦恼不已!

改革方法如下:

1、在当前主题的functions.php文件里添加下面这段代码(三列):

// Register footer widgets
register_sidebar( array(
'name' => __( 'Footer Widget One', 'tto' ),
'id' => 'sidebar-4',
'description' => __( 'Found at the bottom of every page (except 404s, optional homepage and full width) as the footer. Left Side.', 'tto' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

register_sidebar( array(
'name' => __( 'Footer Widget Two', 'tto' ),
'id' => 'sidebar-5',
'description' => __( 'Found at the bottom of every page (except 404s, optional homepage and full width) as the footer. Center.', 'tto' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => "</aside>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

register_sidebar( array(
'name' => __( 'Footer Widget Three', 'tto' ),
'id' => 'sidebar-6',
'description' => __( 'Found at the bottom of every page (except 404s, optional homepage and full width) as the footer. Right Side.', 'tto' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => "</aside>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

2、在希望显示新widget的区域添加以下代码:

if (function_exists('register_sidebar')) {
register_sidebar(array(
'name' = 'Widgetized Area',
'id'   = 'widgetized-area',
'description'   ='This is a widgetized area.',
'before_widget' = '',
'after_widget'  = '',
'before_title'  = '',
'after_title'   = ''
));
}

上面的代码没有格式化,如果添加多个会导致乱七八糟。参考一些经典主题后,在footer.php处插入三列结构如下:

<?php
/* footer sidebar */
if ( ! is_404() ) : ?>
<div id="secondary" class="widget-area three">
<div id="left-sidebar">
<?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
<?php dynamic_sidebar( 'sidebar-4' ); ?>
<?php endif; ?>
</div>

<div id="middle-sidebar">
<?php if ( is_active_sidebar( 'sidebar-5' ) ) : ?>
<?php dynamic_sidebar( 'sidebar-5' ); ?>
<?php endif; ?>
</div>

<div id="right-sidebar">
<?php if ( is_active_sidebar( 'sidebar-6' ) ) : ?>
<?php dynamic_sidebar( 'sidebar-6' ); ?>
<?php endif; ?>
</div>

</div><!-- #footer-widgets -->
<?php endif; ?>

3、在style.css中定义格式:

#secondary{
width:100%;
clear:both;
}
//显示为三列,对电脑浏览器有效,对手机浏览器则展现为单列
@media only screen and (min-width: 600px) {
#left-sidebar{
float:left;
width:30%;
margin:30px 0 60px;
}
#middle-sidebar{
float:left;
width:30%;
margin:30px 0 60px 50px;
}
#right-sidebar{
float:right;
width:30%;
margin:30px 0 60px;
}}

4、完成!到后台小工具里添加你想添加的widget吧!

4

  1. Betty

    你真的很爱换模板耶,模板先生!

    Safari 7 · Mac OS X 10.9
    1. S

      @Betty嘻嘻。

      现在这个模版我很喜欢,改后也很合适,估计会用不少时间吧。

      Opera 23 · Windows 7
      1. Betty

        @S好的,就让我看你到底喜欢的能用多久!

        Safari 7 · Mac OS X 10.9
        1. S

          @Betty起码两个月吧我想

          Opera 23 · Windows 7

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注