今回はWordPressオリジナルテーマの作り方【第2回】トップページ編となります。
オリジナルテーマを作るのに必要なテンプレートファイルの準備に関しては前回の記事をご参照下さい。
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にコピペしたした状態がこちらになります。
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" class="html">
<head>
<meta charset="UTF-8" />
<title>タイトル</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<header>ヘッダーテキスト</header>
<main>
<h1>大見出し</h1>
<section>
<h2>コンセプト</h2>
<img src="img/concept.jpg" />
<p>本文が入ります</p>
</section>
</main>
<footer>フッターテキスト</footer>
</body>
</html>
header.phpを作成
それではここからheader.php部分を切り取ります。
するとfront-page.phpは以下のようなコードになります。
<main>
<h1>大見出し</h1>
<section>
<h2>コンセプト</h2>
<img src="img/concept.jpg" />
<p>本文が入ります</p>
</section>
</main>
<footer>フッターテキスト</footer>
</body>
</html>そして切り取った部分はそのままheader.phpへコピーします。
こちらがheader.phpになります。
<!DOCTYPE html>
<html lang="ja" class="html">
<head>
<meta charset="UTF-8" />
<title>タイトル</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<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>
<img src="img/concept.jpg" />
<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>
<img src="img/concept.jpg" />
<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>
<img src="<?php echo get_theme_file_uri( 'img/concept.jpg' ); ?>" />
<p>本文が入ります</p>
</section>
</main>
<?php get_footer(); ?>変更前 → <img src="img/concept.jpg" />
変更後 → <img src="<?php echo get_theme_file_uri( 'img/concept.jpg' ); ?>" />
この<?php echo get_theme_file_uri(); ?>という関数ですね。
ここで注意して欲しいのが、uri() の中の ' '（シングルクォーテーション）もしくは " "（ダブルクォーテーション）です。
どちらでも大丈夫ですが、これがないと画像が反映されません。
これでこのコードでのトップページ作成は完了です・・・が、
header.phpとfooter.phpもあと1つずつ入れなければいけない関数があります。
header.phpとfooter.phpに必須な関数を追記
これも決まり事のようなものなので深く考えずに入れて大丈夫ですが、これがないとプラグインが動かないなど不具合が発生する事があるようです。
それではそれぞれのコードを見てみましょう。
まずはheader.phpから。
<!DOCTYPE html>
<html lang="ja" class="html">
<head>
<meta charset="UTF-8" />
<title>タイトル</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<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というテンプレートファイルを使ってやっていきます。
以上でトップページは完成となります。
もちろんトップページの内容次第ではもっとやらなければいけない事がありますが、それもまた次回以降の記事で説明したいと思います。