１．「function.php」へのコード追加（2箇所）
２．新たに「sidebar-footer.php」の作成
３．「footer.php」へのコード追加
４．「style.css」の編集（2箇所）
function.phpへの追記
1 2 3 4 5 | function twentytwelve_widgets_init() {省略} |
function.phpのファイルに「function twentytwelve_widgets_init()」があります。
該当箇所は検索すればすぐに出てきます。似たようなコードが既にずらっと書かれていますのでわかりやすい。
その中に、以下のコードを追記します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | 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>',) ); |
次に、以下のコードを最下部に追記。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | 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;} |
これを最下部に追記。
次に、新しく「sidebar-footer.php」を作成
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <?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 --> |
新しいphpファイル「sidebar-footer.php」を作成。
ファイルは他のphpファイルが置いてある場所と同じところに放り込む。子テーマを使用しているなら、子テーマ用のフォルダに入れる。
フッターエリアを表示させます。
1 2 3 | </div><!-- #main .wrapper --><?php get_sidebar( 'footer' ); ?><footer id="colophon" role="contentinfo"> |
「footer.php」の「footer」の直線にハイライトされているコードを追記します。
style.cssの修正
スタイルの記載
1 2 3 4 5 | @media screen and (min-width: 600px) {省略} |
「@media screen and (min-width: 600px)」の中に以下のコードを追加します。これで、フッターエリアもレスポンシブデザインの回り込みなどが自動的に行われるようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | /* 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などの数値は後で自分の好みで修正します。
回り込み解除
1 2 3 | .footer-w-area after { clear: both;} |
回り込みなどがあった場合のクリアを入れておきます。
これで完了です。
ワードプレスのウィジェットからフッターエリアが追加されていますので、後はサイドバーと同じようにそこに適当なウィジェットを追加するだけです。
Leave a Reply