今回は、ワードプレスのテーマ作成で必要になってくるfooterのパーツ作成を紹介します。
footerはサイト全体で見たらそこまで目立った要素ではありませんが、サイトマップの表示やjsの読み込みなどの仕事があります。これらはサイト全体で共通して表示、読み込みされるべき要素なので非常に重要なパーツとなっています。
ファイルの構成は以下のようになっています。
themes
┗original Thema
┗footer.php
index.php
・
・
ファイルの構成に関しては以下のページを参考にして下さい。
フッターコンテンツを作成
まずはフッターに入れるコンテンツ内容を作成していきましょう。
フッターではサイトマップとなるフッターメニューやコピーライト、TOPへ戻るボタンなどが入る事が多いです。
以下はその1例です。
<!-- フッター -->
<footer>
<div class="footer_logo">
<p class="text-center"><a href="/"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.png"></a></p>
</div>
<?php
// アバウトメニューを表示
if ( has_nav_menu( 'about-menu' )){
$abutMenu = array(
'theme_location' => 'about-menu',
'menu_id' => 'about-menu',
'menu_class' => 'menu',
'container' => false,
'link_before' => '<span>',
'link_after' => '</span>',
'depth' => 0,
);
wp_nav_menu( $abutMenu );
};
?>
<p class="text-center copy">Copyright © 2021 KEITO All Rights Reserved.</p>
</footer>
<a href="#top" class="d-none" id="page-top">TOPへ</a>
</body>wp_footerを読み込む
WordPressでデフォルトで導入されているfooter要素を丸っと呼び出すために以下のタグを入れます。こちらに関しては必須なので忘れずに。
<?php wp_footer(); ?>JAvaScriptを読み込む
JavaScriptはfooterで読み込む事が多いです。footer.phpで読み込んでおけば全ページ共通で使用することができます。
ページ毎に振り分けたい場合は条件分枝を使います。
またコンテンツの最後のパーツなので、bodyタグ、htmlタグの閉じ忘れに注意しましょう。
<!-------- Javascript -------->
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/drawer.min.js"></script>
<?php if (is_front_page()): ?>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/plugin/slick/slick.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/top.js"></script>
<?php endif; ?>
</body>
</html>footer.phpを呼び出す
これまでに作成したfooter.phpを呼び出すには、以下の記述をすればOKです。
<!-- footer.phpを呼び出す -->
<?php get_footer(); ?>まとめ
これまでの内容をまとめると以下のようになります。
<!-- フッター -->
<footer>
<div class="footer_logo">
<p class="text-center"><a href="/"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.png"></a></p>
</div>
<?php
// アバウトメニューを表示
if ( has_nav_menu( 'about-menu' )){
$abutMenu = array(
'theme_location' => 'about-menu',
'menu_id' => 'about-menu',
'menu_class' => 'menu',
'container' => false,
'link_before' => '<span>',
'link_after' => '</span>',
'depth' => 0,
);
wp_nav_menu( $abutMenu );
};
?>
<p class="text-center copy">Copyright © 2021 KEITO All Rights Reserved.</p>
</footer>
<a href="#top" class="d-none" id="page-top">TOPへ</a>
</body>
<?php wp_footer(); ?>
<!-------- Javascript -------->
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/drawer.min.js"></script>
<?php if (is_front_page()): ?>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/plugin/slick/slick.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/top.js"></script>
<?php endif; ?>
</body>
</html>以上が「ワードプレスで必要なfooterパーツの作成見本」でした。
