【HTMLサイトをWordPress化しよう】⑥フッター編

フッターファイルの作成

テーマディレクトリの直下に、フッターのテンプレートファイル「footer.php」を作成します。

C:\Users\ユーザー名\Local Sites\fd\app\public\wp-content\themes\fd\footer.php

フッターのコピー

さきほど「index.html」で分割したフッター部分のコードを抜き出し、そのまま「footer.php」にはりつけます。

下記の通りです。

    footer.php
    
    <footer id="footer" class="wrapper">
      <ul class="menu">
        <li><a href="https://www.instagram.com/" target="_blank" rel="noopener">INSTAGRAM</a></li>
        <li><a href="https://twitter.com/" target="_blank" rel="noopener">TWITTER</a></li>
        <li><a href="https://www.facebook.com/" target="_blank" rel="noopener">FACEBOOK</a></li>
      </ul>
      <p class="copyright">&copy; Furniture Design</p>
    </footer>
  </body>
</html>
    
  

コードの修正

はりつけたコードを、WordPressの記述に修正していきます。

修正する箇所は下記の通りです。

コピーライトのサイト名

bloginfo()を使用して管理画面から取得

wp_footer()

bodyタグの一番最後に追加

修正後のコード

修正後のコードは下記の通りです。

    footer.php
    
  <footer id="footer" class="wrapper">
    <ul class="menu">
      <li><a href="https://www.instagram.com/" target="_blank" rel="noopener">INSTAGRAM</a></li>
      <li><a href="https://twitter.com/" target="_blank" rel="noopener">TWITTER</a></li>
      <li><a href="https://www.facebook.com/" target="_blank" rel="noopener">FACEBOOK</a></li>
    </ul>
    <p class="copyright">&copy; <?php echo bloginfo('name'); ?></p>
  </footer>

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