WordPress でBootstrap4を使ったレスポンシブ対応のオリジナルテーマを作る【footer.php】Bootstrap4編
Contents
Copyright © を記載します
ブログ内のコンテンツを守るためのの著作権表示を行います。日本でコンテンツの著作権保護をするにはコピーライト(C)の表記が必要です。
<?php echo date(‘Y’);?>で現在の西暦を、<?php bloginfo(‘name’); ?>でブログの名前を記載しますので
Copyright © 2019 ブログの名前 All Rights Reserved.
と表示されます。
<!-- footer -->
<div id="footer">
<div class="copyright">Copyright &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 © <?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(); ?>
最近のコメント