ゼロから始めるWordPress自作テーマ #6「ヘッダーとフッターをつくろう」
WordPress
「ゼロから始めるWordPress自作テーマ」では、既成のテーマを使わずにゼロからWordPressサイトを構築する方法を、私のブログサイト「OUNI studio」の構築例をもとに紹介します。
WordPressの既成テーマは簡単にインストールできますが、実際にサイトを構築する際には、既成のテーマをカスタマイズするよりも、自分でテーマを作成した方が簡単な場合が多いです。自分でWordPressテーマを作れるようになれば、サイトを自由にデザインできるようになります。
第６回は「ヘッダーとフッターをつくろう」です。
index.php から header.php と footer.php に共通部分を分割して、それぞれを作成していきます。またヘッダーで表示するタイトルロゴにGoogle Fontsを使う方法や、ナビゲーションをレスポンシブルに対応させる方法も紹介します。
今回の完成形
今回の完成形は以下のようになります。
今回の記事の完成形のソースコード一式は以下に公開しています。
ヘッダーとフッター用のファイルに分割する
これまでは、ページの全体を１つの index.php というファイルに入れていました。ですが、一般的にウェブサイトは、ヘッダーやフッターは共通で、内部のコンテンツがページによって変わります。そこで、ヘッダーやフッター部分は共通として、別ファイルに分割しておきます。このように共通部分を分けることで、コードの管理がしやすくなります。
WordPressは、こういった共通部分を分けて管理しやすい仕組みが用意されています。
以下のように、<main>タグの部分だけを index.php に残して、それ以外の部分を header.php と footer.php に分割します。WordPressでは、 header.php や footer.php など特定の名前のファイルが存在している場合、それらが優先的に読み込むような仕組みになっています。
フッターの作成
フッターは、シンプルにコピーライトだけ載せます。シンプルですね。
<footer class="site-footer">
<p class="copyright">© 2021 OUNI studio.</p>
</footer>
<!-- wp_footer は </body> 直前に書く。 -->
<?php wp_footer(); ?>
</body>
</html>ヘッダーの作成
ヘッダーもフッターと同様に以下のように分割します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MY BLOG</title>
<?php wp_head(); ?>
</head>
<body>
<header class="site-header">
</header>ブログタイトルのフォントをNoto Sans JPにする
ブログのタイトルをヘッダーに表示させます。
タイトル部分は目立たせたいので、太文字のフォントを使用します。フォントは Noto Sans JPというウェブフォントを使用します。Noto Sans JP は、とても使い勝手の良いWeb Fontです。Google Fontsなので安心して使えますし、文字の太さも各種揃っています。以下の公式サイトで、読み込むフォントの種類と太さを指定して、リンクを取得することができます。
上記サイトのリンクをコピーして、以下のように header.php にフォントの読み込みを追加します。今回は 400 , 700 , 900 の太さを指定して読み込ませます。
<head>
<!-- NotoSansJPのFontを読み込む -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap" rel="stylesheet">
</head>以下のように header.php と style.css で指定します。
<header class="site-header">
<div class="site-header-wrapper">
<!-- Title -->
<a href="<?php echo home_url(); ?>" class="brand">MY BLOG</a>
</div>
</header>body {
font-family: "Noto Sans JP", sans-serif; /* Font指定 */
}
.brand {
font-weight: 900; /* Fontの太さを指定 */
font-size: 20px; /* Fontのサイズを指定 */
color: dimgray;
text-decoration: none;
transition: color 0.5s;
letter-spacing: 8px;
}
.brand:hover {
color: silver;
}これで、ブログタイトル部分は完成です。
レスポンシブル対応したナビをつくる
最後に、ヘッダー部分に各ページへのリンクをまとめたナビをつくります。今回は、AboutとCategoryとContactというページへのリンクを用意しました。
<header class="site-header">
<div class="site-header-wrapper">
<!-- Navi -->
<nav class="nav">
<ul class="nav-wrapper">
<li class="nav-item"><a href="#">About</a></li>
<li class="nav-item"><a href="#">Category</a></li>
<li class="nav-item"><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>あとは、cssで整えていきます。スマホの場合は、画面の横幅が狭くなるためナビが表示しきれないケースがあります。そこで、画面の横幅によって表示方法を変えます。
/* 600px以上の幅だったら横並びで、599px以下なら縦並びで表示させる */
@media (min-width: 600px) {
.nav-wrapper {
display: flex;
}
}
@media (max-width: 599px) {
.nav-wrapper {
line-height: 0px;
}
}
/* ナビの表示を整える */
li.nav-item {
list-style: none;
}
li.nav-item > a {
display: block;
padding: 1rem 1rem;
text-transform: uppercase;
font-size: x-small;
letter-spacing: 1.5px;
color: dimgray;
text-decoration: none;
transition: color 0.5s;
}
li.nav-item > a:hover {
color: silver;
}まとめ
今回は、ヘッダーとフッターをつくりました。トップページの見た目はかなり完成に近づいてきましたね。
また、これまで index.php という一つのファイルで管理していましたが、その共通部分として header.php と footer.php を分割しました。
次回は、投稿一覧から各投稿ページに遷移して、その投稿ページの内容を表示させます。