WordPress でBootstrap4を使ったレスポンシブ対応のオリジナルテーマを作る【footer.php】Bootstrap4編

2018年11月07日

Copyright © を記載します

ブログ内のコンテンツを守るためのの著作権表示を行います。日本でコンテンツの著作権保護をするにはコピーライト(C)の表記が必要です。

<?php echo date(‘Y’);?>で現在の西暦を、<?php bloginfo(‘name’); ?>でブログの名前を記載しますので

と表示されます。

<!-- footer -->
<div id="footer">
<div class="copyright">Copyright &amp;copy; <?php echo date('Y');?> <?php bloginfo('name'); ?> All Rights Reserved.</div>
</div>
</footer>

header.php で開いたタグを閉じます

header.php に記載した<html>と<body> タグをfooter.php で忘れずに閉じましょう。

</body>
</html>

<?php wp_footer(); ?>

WordPressのfooter.phpには、</body>の直前に<?php wp_footer(); ?>を必ず入れます。

<?php wp_footer(); ?>はWordPressから自動で書き出されるjQueryやスクリプトのタグがこのタイミングで読み込まれます。重要なテンプレートタグです。

<?php wp_footer(); ?>
</body>
</html>

以上で footer.php 最低限の設定が完了しました。

次にレスポンシブレイアウトにBootstrap4をCDNで利用するためにheader.phpのcssに続いてfooter.phpでjavascriptを読み込みます。

BootstrapCDN – JS, Popper.js, and jQuery

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Bootstrap4のスタイルシートはheader.phpで読み込みます。詳しくは下の記事にて確認してください。

footer.php 記入例:

<!-- footer -->
<div id="footer">
<div class="copyright">Copyright &copy; <?php echo date('Y');?> <?php bloginfo( 'name' ); ?> All Rights Reserved.</div>
</div>
<?php wp_footer(); ?>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

<?php get_footer(); ?>

index.php に <?php get_footer(); ?> というインクルードタグを記載します。

<?php get_header(); ?>
<?php get_footer(); ?>