WordPressでオリジナルテーマを作ろう #5: フッターの作成

前回の続きです。

####フッター要素の追加

管理画面＞外観＞メニューに進み、フッター用のメニューを作成します。

フッターナビゲーションにチェックを入れてください。

次にfooter.phpにコードを追加します。

footer.php

<footer id="footer" class="footer">
    <div class="footer-inner">
        <!--ここから-->
        <div class="footer-nav-wrap">
            <?php wp_nav_menu( array(
                'theme_location' => 'footer-nav',
                'container' => 'nav',
                'container_class' => 'footer-nav',
                'container_id' => 'footer-nav',
                'fallback_cb' => ''
            ) ); ?>
        </div>

        <div class="copyright">
            <p>&copy; 2020 <?php bloginfo( 'name' ); ?></p>
        </div>
        <!--ここまで-->
    </div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

ブラウザを確認します。

きちんと表示できたら、次はデザインを整えていきます。

####デザインの調整

まず、レイアウト確認用に記述した部分を削除します。

style.css

footer {
  background-color: #777;
}
.footer-inner{
  background-color: #ddd;
  height: 250px;
}

次にPC用のデザインをstyle.cssに記述します。

style.css

.footer {
  background-color: #007bff;
}

.footer-nav,
.copyright {
  text-align: center;
}

.footer-nav {
  font-size: 0;
  margin-bottom: 3rem;
}

.footer-nav li {
  font-size: 1rem;
  display: inline-block;
  margin-right: 1.5rem;
}

.footer-nav li a {
  text-decoration: none;
  color: #fff;
}

.footer-nav li a:hover {
  opacity: .6;
}

.copyright p {
  font-size: 1rem;
  color: #fff;
}

ブラウザを更新します。（更新しても変化がない場合は、デベロッパーツールを開いた状態でリロードボタンを右クリックし、「キャッシュの消去とハード再読み込み」をクリックしてください）

上のような画面が表示されれば、PC用のデザインは出来上がりです。

同じように、タブレット用とスマートフォン用のデザインも記述していきます。

style.css

// @media(max-width: 600px)内に追記
.footer-nav {
  margin-bottom: 1.5rem;
}

.footer-nav ul {
  text-align: left;
}

.footer-nav li {
  width: 48%;
  margin-right: 4%;
  margin-bottom: 1rem;
}

.footer-nav li:nth-of-type(2n) {
  margin-right: 0;
}

タブレットやスマートフォンでは、メニューが横2列で並ぶようにしました。

以上でフッターの作成は完了です。

次回はサイドバーを作成していきます。

WordPressでオリジナルテーマを作ろう #6: サイドバーの作成