Twenty Twelveにはフッター領域にウィジェット追加エリアがありません。サイドバーだけでは足りない、サイトをもっと華やかに装飾したいという場合、フッター領域を使えるようにしておくと便利です。

以下のカスタマイズを行うと、サイドバー同様にワードプレスのウィジェット追加エリアから簡単にウィジェットの追加し、フッターエリアに表示することができます。

一見複雑そうに見えますが、手順どおり行うだけですので難しくありません。

参考にさせて頂いたサイト様
「Twenty Twelve」のフッター部分にウィジェットエリアを追加する方法

そのままで完璧でしたので、特にいじったり説明するようなところはないのですが、個人的な備忘録としても一応手順を残しておきます。

カスタマイズ方法

大きく分けると以下の手順になります。

１．「function.php」へのコード追加（2箇所）
２．新たに「sidebar-footer.php」の作成
３．「footer.php」へのコード追加
４．「style.css」の編集（2箇所）

function.phpへの追記

function twentytwelve_widgets_init() {

省略

}

function.phpのファイルに「function twentytwelve_widgets_init()」があります。

該当箇所は検索すればすぐに出てきます。似たようなコードが既にずらっと書かれていますのでわかりやすい。

その中に、以下のコードを追記します。

register_sidebar( array(
    'name' => __( 'Footer Widget Area 1', 'twentytwelve' ),
    'id' => 'footer-widget-1',
    'description' => __( 'Widget area is displayed on a footer portion', 'twentytwelve' ),
    '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 Area 2', 'twentytwelve' ),
    'id' => 'footer-widget-2',
    'description' => __( 'Widget area is displayed on a footer portion', 'twentytwelve' ),
    '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 Area 3', 'twentytwelve' ),
    'id' => 'footer-widget-3',
    'description' => __( 'Widget area is displayed on a footer portion', 'twentytwelve' ),
    '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 Area 4', 'twentytwelve' ),
    'id' => 'footer-widget-4',
    'description' => __( 'Widget area is displayed on a footer portion', 'twentytwelve' ),
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget' => '</aside>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>',
    ) );

これを追記します。次に、以下のコードを最下部に追記します。

function twentytwelve_footer_widget_class() {
    $count = 0;
 
    if ( is_active_sidebar( 'footer-widget-1' ) )
        $count++;
 
    if ( is_active_sidebar( 'footer-widget-2' ) )
        $count++;
 
    if ( is_active_sidebar( 'footer-widget-3' ) )
        $count++;
 
    if ( is_active_sidebar( 'footer-widget-4' ) )
        $count++;
 
    $class = '';
 
    switch ( $count ) {
        case '1':
            $class = 'one';
            break;
        case '2':
            $class = 'two';
            break;
        case '3':
            $class = 'three';
            break;
        case '4':
            $class = 'four';
            break;
    }
 
    if ( $class )
        echo $class;
}

これを最下部に追記。これでfunction.phpの修正は終わり。

sidebar-footer.phpの作成

次に、新しく「sidebar-footer.php」を作成します。

<?php
    if (   ! is_active_sidebar( 'footer-widget-1'  )
        && ! is_active_sidebar( 'footer-widget-2'  )
        && ! is_active_sidebar( 'footer-widget-3'  )
        && ! is_active_sidebar( 'footer-widget-4'  )
    )
        return;
?>
<div id="footer-w-area" class="footer-w-area">
    <div class="<?php twentytwelve_footer_widget_class(); ?>">
        <?php if ( is_active_sidebar( 'footer-widget-1' ) ) : ?>
        <div id="first" class="widget-area-footer" role="complementary">
            <?php dynamic_sidebar( 'footer-widget-1' ); ?>
        </div><!-- #footer-widget-1 .widget-area -->
        <?php endif; ?>
     
        <?php if ( is_active_sidebar( 'footer-widget-2' ) ) : ?>
        <div id="second" class="widget-area-footer" role="complementary">
            <?php dynamic_sidebar( 'footer-widget-2' ); ?>
        </div><!-- #footer-widget-2 .widget-area -->
        <?php endif; ?>
     
        <?php if ( is_active_sidebar( 'footer-widget-3' ) ) : ?>
        <div id="third" class="widget-area-footer" role="complementary">
            <?php dynamic_sidebar( 'footer-widget-3' ); ?>
        </div><!-- #footer-widget-3 .widget-area -->
        <?php endif; ?>
 
        <?php if ( is_active_sidebar( 'footer-widget-4' ) ) : ?>
        <div id="forth" class="widget-area-footer" role="complementary">
            <?php dynamic_sidebar( 'footer-widget-4' ); ?>
        </div><!-- #footer-widget-4 .widget-area -->
        <?php endif; ?>
    </div>
</div><!-- #footer-w-area -->

普通にterapadなどのエディタで新しいphpファイル「sidebar-footer.php」を作成します。中のコードは上記のものをそのままコピペするだけ。

できたファイルは他の基本的なphpファイルが置いてある場所と同じところに放り込んでおきます。子テーマを使用しているなら、子テーマ用のフォルダに入れるだけです。

footer.phpへの追記

フッターエリアを表示させます。

</div><!-- #main .wrapper -->
<?php get_sidebar( 'footer' ); ?>
<footer id="colophon" role="contentinfo">

「footer.php」の「footer」の直線にハイライトされているコードを追記します。

style.cssの修正

スタイルの記載

@media screen and (min-width: 600px) {

省略

}

「@media screen and (min-width: 600px)」の中に以下のコードを追加します。これで、フッターエリアもレスポンシブデザインの回り込みなどが自動的に行われるようになります。

/* Two Footer Widget Areas */
.footer-w-area .two .widget-area-footer {
    text-align:left;
    float: left;
    margin-right: 2%;
    width: 48%;
}
 
/* Three Footer Widget Areas */
.footer-w-area .three .widget-area-footer {
    text-align:left;
    float: left;
    margin-right: 2.5%;
    width: 31%;
}
 
/* Four Footer Widget Areas */
.footer-w-area .four .widget-area-footer {
    text-align:left;
    float: left;
    margin-right: 3%;
    width: 22.5%;
}
 
.footer-w-area .two .widget-area-footer + .widget-area-footer,
.footer-w-area .three .widget-area-footer + .widget-area-footer + .widget-area-footer,
.footer-w-area .four .widget-area-footer + .widget-area-footer + .widget-area-footer + .widget-area-footer {
    margin-right: 0;
}

widthなどの数値は後で自分の好みで修正します。

回り込み解除

.footer-w-area after {
    clear: both;
}

回り込みなどがあった場合のクリアを入れておきます。

これで完了です。

ワードプレスのウィジェットからフッターエリアが追加されていますので、後はサイドバーと同じようにそこに適当なウィジェットを追加するだけです。