WordPressによるサイト運営[4-4] [WordPress]
「同じ表示となる部分を共通化する」
５．footer.phpのテンプレート化
フッターでは、フッターウィジェットエリア、フッターナビゲーション、コピーライトの表示をテンプレート化する。フッターウィジェットエリアの中は、4つのウィジェットエリアが利用できる。
①フッターウィジェットエリアの条件分岐
4か所のウィジェットエリアの場所を配列で定義します。次にis_active_sidebar_areaタグで複数のエリアにウィジェットの登録があるか判別し条件分岐を行う。
<?php
$area_widgets = array(
'first-footer-widget-area',
'second-footer-widget-area',
'third-footer-widget-area',
'fourth-footer-widget-area'
);if ( is_active_sidebar_area( $area_widgets ) ) :
?>
<div id="footer-widget-area" class="widgets <?php wp_area_widget_num_class( $area_widgets ); ?>">
<?php if ( is_active_sidebar( 'first-footer-widget-area' ) ) : ?>
<section id="first" class="widget-area">
<?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
</section>
<?php endif; ?>
<?php if ( is_active_sidebar( 'second-footer-widget-area' ) ) : ?>
<section id="second" class="widget-area">
<?php dynamic_sidebar( 'second-footer-widget-area' ); ?>
</section>
<?php endif; ?>
<?php if ( is_active_sidebar( 'third-footer-widget-area' ) ) : ?>
<section id="third" class="widget-area">
<?php dynamic_sidebar( 'third-footer-widget-area' ); ?>
</section>
<?php endif; ?>
<?php if ( is_active_sidebar( 'fourth-footer-widget-area' ) ) : ?>
<section id="fourth" class="widget-area">
<?php dynamic_sidebar( 'fourth-footer-widget-area' ); ?>
</section>
<?php endif; ?>
<!--/* ▼ #footer-widget-area 終了 */-->
</div>
<?php endif; ?>
②表示されるウィジェットのエリア数に応じたclassを出力
wp_area_widget_num_classタグで表示されるエリア数に応じたCSSのclassが出力され、エリアの幅が自動的に調整される。
<div id="footer-widget-area" class="widgets <?php wp_area_widget_num_class( $area_widgets ); ?>">
③フッターのウィジェットエリアをテンプレート化
is_active_sidebarとdynamic_sidebarタグで、ウィジェットエリアの表示が反映されるようにする。
<?php if ( is_active_sidebar( 'first-footer-widget-area' ) ) : ?>
<section id="first" class="widget-area">
<?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
</section>
<?php endif; ?>
④すべてのフッターウィジェットエリアをテンプレート化
残り3つのウィジェットエリアもテンプレート化する。
<?php if ( is_active_sidebar( 'second-footer-widget-area' ) ) : ?>
<section id="second" class="widget-area">
<?php dynamic_sidebar( 'second-footer-widget-area' ); ?>
</section>
<?php endif; ?>
<?php if ( is_active_sidebar( 'third-footer-widget-area' ) ) : ?>
<section id="third" class="widget-area">
<?php dynamic_sidebar( 'third-footer-widget-area' ); ?>
</section>
<?php endif; ?>
<?php if ( is_active_sidebar( 'fourth-footer-widget-area' ) ) : ?>
<section id="fourth" class="widget-area">
<?php dynamic_sidebar( 'fourth-footer-widget-area' ); ?>
</section>
<?php endif; ?>
⑤フッターナビゲーションを表示
wp_nav_menuで置き換える。
<?php wp_nav_menu(
array(
'container' => 'nav',
'container_id' => 'footer-nav',
'theme_location' => 'footer',
'fallback_cb' => null
)
); ?>
⑥コピーライトを表示
bloginfoなどのテンプレートタグでテンプレート化する。
<p id="copyright">
<small>Copyright © <?php echo date_i18n( 'Y' ); ?>
<a href="<?php echo home_url( '/' ); ?>"><?php bloginfo( 'name' ); ?></a>
All rights reserved.</small>
</p>
⑦「Page Top」の画像パスを合わせる
get_default_imageタグでブラウザでスクロールした際にページ最上部まで移動するリンクの画像のパスを合わせる。
<p id="go-top"><a href="#header" onclick="scrollup(); return false;">
<img src="<?php echo get_default_image( 'go-top.png' ); ?>" alt="go top">
</a></p>
⑧スクロール用JavaScriptへのパスを合わせる
ブラウザーのスクロールの最上部までの移動を滑らかにするJavaScriptファイルへのパスを合わせる。
<script src="<?php bloginfo( 'template_url' ); ?>/js/scroll.js"></script>
⑨wp_footerパグを記述
wp_footerタグで管理バーの表示に必要なソースがこのタグを通じて表示される。
<?php wp_footer(); ?>
⑩表示
参考資料
