ワードプレスで必要なfooterパーツの作成見本

WordPress

今回は、ワードプレスのテーマ作成で必要になってくる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パーツの作成見本」でした。

三浦圭人

最後まで閲覧頂きありがとうございます。
Twitterでは更に細かくWEBリテラシーのネタを発信しています。是非フォローお願い致します。感想/ご意見頂けたら喜びます✨

2021年5月9日WordPressphp,Thema,WP

Posted by KT