HTMLからトップページ（front-page.php）を作成する【WordPress制作入門講座】

• トップページをWordPress化する
• 1.front-page.phpを作成する
• 2.ファイルパスを直す

トップページをWordPress化する

いよいよ、本格的にhtmlページをWordPressテンプレートファイルに置き換えていきましょう。まずはトップページです。

1.front-page.phpを作成する

index.htmlをエディタで開きます。
別名で保存（名前をつけて保存）を使って、front-page.phpという名前で保存してください。

WordPressサイトを表示してみます。
front-page.phpが表示されました！

ただ、画像が表示されていなかったり、CSSが効いていなかったりと、うまく表示されていないところが沢山ありますね。

2.ファイルパスを直す

どうしてCSSや画像を読み込まないのでしょうか。
原因はファイルパス（開いているページから見た、cssや画像ファイルの場所）が違うからです。

今の書き方では、同じ階層にあるstyle.cssを読み込むように指示しています。

ですが、style.cssはテーマフォルダの中に入っています。
今開いているページとは、かなり離れた場所。
このため、style.cssを読み込めなくなってしまっているのですね。

WordPressでは「テーマフォルダの場所」を出力するタグが用意されています。

style.cssへのリンクに使ってみましょう
WordPressタグの後にスラッシュが必要なので、注意してください。

<link rel="stylesheet" href="<?php echo get_template_directory_uri()?>/style.css">

front-page.phpを上書き保存。
WordPressのページを再読み込みしてみましょう。

CSSが効いて、ヘッダーメニューやサイドが横並びに配置されました。

画像部分も、同じように <?php echo get_template_directory_uri()?> を使って、テーマフォルダ内にあるimagesフォルダに辿り着けるようにしてあげましょう。
トップ画像だと下記のようになります。

<img src="<?php echo get_template_directory_uri()?>/images/top.jpg">

サイドのバナーも同じように設定してみましょう。
ブラウザを再読み込みして、２枚の画像が表示されていれば成功です。

見た目は完全に復元されました。

ヘッダーメニューのリンクは、他のページもWordPress化しないと繋げません。
一旦置いておいて、次回はリンク先となるページを作りましょう。