今回はWordPressオリジナルテーマの作り方【第2回】トップページ編となります。
オリジナルテーマを作るのに必要なテンプレートファイルの準備に関しては前回の記事をご参照下さい。
WordPressオリジナルテーマの作り方①（ファイルの準備編）
効率よくWordPress制作したい人はこちら
WordPressオリジナルテーマ：トップページの作り方
トップページの作り方は以下の手順で進めます。
- front-page.phpにindex.htmlをコピペ
- front-page.phpから共通するパーツを分割
- header.phpを作成
- footer.phpを作成
- header.phpとfooter.phpを読み込む為のインクルードタグを追記
- 画像を表示させる関数を追記
- header.phpとfooter.phpに必須な関数を追記
ざっくり言うとベースとなるindex.htmlを、
- ヘッダー
- メインコンテンツ
- フッター
上記3つに分ける作業をします。
あとはWordPress特有の関数を追記していきます。
front-page.phpにindex.htmlのコードをコピペ
まずはトップページのテンプレートとなるfront-page.phpに、準備しておいた静的ページであるindex.htmlの中身を丸ごとコピペします。
index.htmlのファイルごとコピペして、ファイル名をfront-page.phpと拡張子ごと変えてしまっても構いません。
ここでちょっとややこしいのが、このthemesフォルダにはindex.phpというファイルがあることです。
名前からイメージするとindex.htmlの中身はindex.phpにコピペしたくなりますが、ここではindex.phpの中身は空のままです。
『ここでは』というのはindex.phpをトップページとする場合もあるからですが、ここではトップページはfront-page.phpとします。
なのでindex.html（左）の中身をまるっとfrotn-page.php（右）にコピペしたした状態がこちらになります。
ポイント
ちなみにHTMLはこちらになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>タイトル</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<header>ヘッダー</header>
<main>
<h1>大見出し</h1>
<section>
<h2>コンセプト</h2>
<div>
<img src="画像パス" alt="" />
</div>
<p>文章が入ります</p>
</section>
</main>
<footer>フッター</footer>
</body>
</html>
headタグ内のmetaタグ解説
次に進む前にheadタグ内にあるmetaタグについて少し解説します。
<meta charset="UTF-8" />
読み方は「メタ キャラセット」で、charasetではないので注意⚠️
意味は「文字コードのUTF-8を指定」となります。
他にも「Shift-JIS」や「EUC-JP」などがありますが、HTMLではUTF-8が推奨されています。
<meta name="format-detection" content="telephone=no" />
これはHTML内の電話番号を、自動でリンク設定にしないようにするタグです。
というのも、スマホでは電話番号と判断したら電話番号ではなくても自動でリンク設定してしまい、タップすると電話をかけてしまうからです。
また、電話番号以外にFAX番号なども電話番号と判断して自動でリンク設定してしまうので、これは設定しておきましょう。
この事については当ブログでも解説しています。
【HTML】スマホで自動的に設定される電話番号のリンクを消す方法【1行追加するだけ】
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
これはページの表示領域を指定するためのタグです。
PC、タブレット、スマホなど様々なデバイスで見ても、画面からはみ出したり小さく表示されないようにする為に必要です。
front-page.phpから共通するパーツ（ヘッダー、フッター）を分割
次からは1ページ物のLPではなく、複数ページのサイトをイメージしてください。
複数ページの場合、トップページ以外にお問い合わせ、会社概要、記事一覧ページなどあると思います。
ただこれらのページでもヘッダーやフッターは同じ場合が多いと思います。
なので、共通するパーツは切り取って専用のテンプレートを作成します。
そうすることで修正する際にはその専用のテンプレートだけ修整すればOKです。
もし分割していなかったら、
- トップページのヘッダーを修正
- 会社概要のヘッダーを修正
- お問い合わせのヘッダーを修正・・・
といった感じでページの数だけ同じ修正を繰り返すことになります。
Sassを使ったことがある人なら変数をイメージするといいかも知れません。
変数も元を変えれば全てを変更することが出来ますからね。
それでは説明が長くなりましたが、具体的にパーツを分けていきたいと思います。
順番に決まりはありませんが、以下の流れでやると分かりやすいと思います。
- front-page.phpからヘッダー部分を切り取りheader.phpを作成
- 切り取った箇所にheader.phpを読み込む為のインクルードタグを追記
- front-page.phpからフッター部分を切り取りfooter.phpを作成
- 切り取った箇所にfooter.phpを読み込む為のインクルードタグを追記
- 画像を表示させる関数を追記
- header.phpに必須な関数を追記
- footer.phpに必須な関数を追記
まず元のfront-page.phpを確認します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>タイトル</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<header>ヘッダー</header>
<main>
<h1>大見出し</h1>
<section>
<h2>コンセプト</h2>
<div>
<img src="画像パス" alt="" />
</div>
<p>文章が入ります</p>
</section>
</main>
<footer>フッター</footer>
</body>
</html>header.phpを作成
それではここからheader.php部分を切り取ります。
するとfront-page.phpは以下のようなコードになります。
<main>
<h1>大見出し</h1>
<section>
<h2>コンセプト</h2>
<div>
<img src="画像パス" alt="" />
</div>
<p>文章が入ります</p>
</section>
</main>
<footer>フッター</footer>
</body>
</html>そして切り取った部分はそのままheader.phpへコピーします。
こちらがheader.phpになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>タイトル</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<header>ヘッダー</header>閉じタグが分かれてしまったりちょっと気持ち悪いかも知れませんが、これで大丈夫です。
footer.phpを作成
そして次はfooter.php部分を切り取ります。
これもheader.phpと考え方は同じです。
するとfront-page.phpは以下のようなコードになります。
<main>
<h1>大見出し</h1>
<section>
<h2>コンセプト</h2>
<div>
<img src="画像パス" alt="" />
</div>
<p>文章が入ります</p>
</section>
</main>そして切り取った部分はそのままfooter.phpへコピーします。
こちらがfooter.phpになります。
<footer>フッターテキスト</footer>
</body>
</html>前回の記事でも書きましたが、それぞれ<header>から</header>や<footer>から</footer>ではありません。
header.phpとfooter.phpを読み込む為のインクルードタグを追記
そしてこのヘッダーとフッターがなくなったところにそれぞれを読み込む為のインクルードタグを書きます。
front-page.phpはこのようになります。
<?php get_header(); ?>
<main>
<h1>大見出し</h1>
<section>
<h2>コンセプト</h2>
<div>
<img src="画像パス" alt="" />
</div>
<p>文章が入ります</p>
</section>
</main>
<?php get_footer(); ?><?php get_header(); ?>がheader.phpを読み込み、
<?php get_footer(); ?>がfooter.phpを読み込みます。
結果として切り取る前のコードと同じ内容となります。
もちろん書く場所を間違えると変な所にヘッダーやフッターが表示されてしまうのでご注意ください。
あくまでも切り取った場所に置き換えるというイメージです。
そしてこれと同じようなことを固定ページでもやりますが、それはまた次回以降説明したいと思います。
画像を表示させる関数を追記
そしてトップページを完成させるにはもう1つしなければいけないことがあります。
このままでは画像が表示されません。
ちゃんと表示させるためには現在使っているテーマのディレクトリ（フォルダ）までのパスを出力させる必要があります。
こうする事でテスト環境から本番へURL変わっても正常に表示されるようになります。
それではfront-page.phpを見てみます。
<?php get_header(); ?>
<main>
<h1>大見出し</h1>
<section>
<h2>コンセプト</h2>
<div>
<img src="<?php echo get_theme_file_uri( '画像パス' ); ?>" alt="" />
</div>
<p>文章が入ります</p>
</section>
</main>
<?php get_footer(); ?>変更前 → <img src="画像パス" alt="" />
変更後 → <img src="<?php echo get_theme_file_uri( '画像パス' ); ?>" alt="" />
この<?php echo get_theme_file_uri(); ?>という関数が変更点になります。
ここで注意して欲しいのが、uri() の中の ' '（シングルクォーテーション）もしくは " "（ダブルクォーテーション）です。
どちらでも大丈夫ですが、これがないと画像が反映されません。
これでfront-page.phpは完了です・・・が、
header.phpとfooter.phpもあと1つずつ入れなければいけない関数があります。
header.phpとfooter.phpに必須な関数を追記
これも決まり事のようなものなので深く考えずに入れて大丈夫ですが、これがないとプラグインが動かないなど不具合が発生する事があるようです。
それではそれぞれのコードを見てみましょう。
まずはheader.phpから。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>タイトル</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<link href="style.css" rel="stylesheet" />
<?php wp_head(); ?>
</head>
<body>
<header>ヘッダー</header>次はfooter.php。
<footer>フッター</footer>
<?php wp_footer(); ?>
</body>
</html>header.phpは</head>の直前に<?php wp_head(); ?>
footer.phpは</body>の直前に<?php wp_footer(); ?>
を入れます。
これも書く場所は決まっているので間違えないようにしましょう。
あとはheader.phpではcssの読み込みなど出来るようにする関数を入れることも出来ますが、それはfunctions.phpというテンプレートファイルを使ってやっていきます。
それについては以下の記事を参照下さい。
WordPressオリジナルテーマの作り方③（functions.php編）
headタグに関数追加
最後にheadタグ内に関数を追加します。
まずこちらが現在のheader.phpになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>タイトル</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<header>ヘッダー</header>これを以下のようにします。
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title>タイトル</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<link href="style.css" rel="stylesheet" />
</head>
<body <?php body_class(); ?>><?php wp_body_open(); ?>
<header>ヘッダー</header>3ヶ所の追加した関数について少し解説します。
<?php language_attributes(); ?>
これはlang="ja"の代わりに書く関数で、サイトの言語が日本語のままであれば書き換える必要はありません。
ただ日本語以外にしたときに自動で変更されるようにする為にはこの関数を書きます。
ちなみに言語設定は管理画面の設定から変更できるサイトの言語になります。
<?php bloginfo( 'charset' ); ?>
使われている文字コード（UTF-8）を表示するための関数です。
<body <?php body_class(); ?>><?php wp_body_open(); ?>
body開始タグ内に<?php body_class(); ?>
その直後に<?php wp_body_open(); ?>を書きます。
これを書くとbodyタグにページ固有のclass名がページごとに付与されます。
例えば固定ページの場合はページIDが含まれたclassが付与されます（他にも色々とclassが付与されます）
特定のページのみデザインを変えたり出来るので、カスタマイズ性がアップします（あまり使わないかも知れませんが）
まとめ：ヘッダーとフッターは分けて作成！
これでトップページは完成となります。
今回のヘッダーとフッターを分けて作成する、というのがWordPressのオリジナルテーマ制作の特徴になるので、少しずつ慣れていきましょう。
トップページに、
- 投稿新着一覧表示
- カスタム投稿新着一覧表示
- 上記新着一覧をPC、SPで表示件数変更
という実装も良くありますが、それについては以下のコーディング&WordPressメモまとめ集にコピペ出来るように掲載しています。
Brainランキング1位獲得 ＆ 3日で500部突破 クチコミ約300件 今だけ！5つの無料特典あり🎁 👇画像をクリック
（平均スコア）
