では、Webサイトの顔とも言えるフロントページを作っていきましょう。
1.front-page.phpを新規作成する
index.htmlを複製して、名前をfront-page.phpに変更してください。
エディターでfront-page.phpを開きます。
<head>内、タイトルタグとstyle.cssのパスを直しましょう。
ファビコン（サイトアイコン）のパスもsingle.phpで使った、以下のコードを使って変更します。
<?php echo get_template_directory_uri(); ?>
ブラウザで表示を確認します。 管理画面から「サイトを表示」をクリックしてください。
ブログ一覧ページではなく、front-page.phpが表示されるようになっていればOK。
2.WordPressの構成に合わせて変更する
①背景画像のパスを修正
背景画像を設定している４箇所（ヒーロー,スコア,カルーセル,コンタクト）は、style.cssに記述している背景画像パスを直してください。
【例：ヒーローエリア】
↓
②imgタグのパスを修正
次は、front-page.php内に直接imgタグで表示させている画像のパスを修正します。
- 自己紹介カード（About me）
- カルーセル内の画像２つ
を修正してください。 PORTFOLIOセクションとBLOGセクションのカード内にある画像は、後程WordPressのインクルードタグに置き換えるのでそのままで構いません。
【例：カルーセルエリア】
↓
③footerのインクルード
フロントページもfooter部分は共通です。
<footer>タグ以下を削除してWordPressタグに置き換えましょう。
こちらはブラウザで確認して、これまで通りにフッターが表示されていれば大丈夫です。
3.PORTFOLIOのループ化
PORTFOLIOセクションで、前回作成したカスタム投稿タイプを呼び出せるようにします。
ループタグの追加
まず、カードを１枚だけ残して、他５枚分を削除してください。
<div class="row"> ～ </div> の間にループタグを入れます。
ここではカスタム投稿タイプ「works」のみを表示させたいので、query_postsを使って以下のように書きます。
<?php query_posts('post_type=works&showposts=3');
while (have_posts() ): the_post(); ?>
//繰り返し表示させたい内容
<?php endwhile; wp_reset_query(); ?>
- post_type=works・・・呼び出す記事はworksのみ
- showposts=3 ・・・・呼び出す件数は３件
実際にfront-page.phpに記述すると、以下のようになります。
書けたら、ブラウザで表示を確認してみましょう。 ３枚カードが表示されていればOKです。
インクルードタグに置き換える
カードの中身をWordPressのインクルードタグに変更していきましょう。
カスタム投稿タイプで投稿を作っていますので、カテゴリー名の表示箇所は無くします。 アイキャッチ画像と青色のプラスのアイコン部分、2箇所にリンクを設定してください。
追加するインクルードタグは下記３つです。
アイキャッチ画像部分(条件分岐)は、index.phpのアイキャッチ部分(<a>タグ内）を丸ごとコピーして張り付けてしまいましょう。
変更しなくても張り付けるだけで機能します。
<?php the_permalink(); //投稿のURLを取得 ?>
<?php the_title(); // タイトルを取得 ?>
<?php the_time('Y/m/d'); //投稿日時を取得 ?>
front-page.php(PORTFOLIOセクション)
↓
ブラウザでの表示
アイコンの色が変わってしまったので「w-blue」クラスの位置を変更します。
これでPORTFOLIOセクションは完成です。
4.BLOGのループ化
BLOGセクションも新しい投稿を３件表示させられるようにします。
ループタグの追加
先ほどと同じく、使わないカード２枚を削除してください。 カテゴリーの設定は少し難しいので、ラベル部分（.card-category-box）をコメントアウトしておいてください。カテゴリーの表示方法は番外編でご紹介します。
整理したBLOGセクションのコードがこちらです。
<div class="row"> ～ </div> の間にループタグを入れます。
今度は通常の投稿「post」を３件表示させるよう、query_postsで以下のように書きます。
<?php query_posts('post_type=post&showposts=3');
while (have_posts() ): the_post(); ?>
//繰り返し表示させたい内容
<?php endwhile; wp_reset_query(); ?>
ブラウザで確認して、３枚カードが並んでいればループが出来ています。
インクルードタグに置き換える
PORTFOLIOセクションと同じくリンク先、アイキャッチ画像などをWordPressのインクルードタグに変更していきます。こちらも先ほどと同じく、既に作成・使用しているインクルード箇所のコードをコピー＆ペーストしてしまいましょう。
タイトルの文字からも投稿ページが開けるようにリンクを入れます。
投稿者アバターや名前もindex.phpで作りましたね。 コピーして貼り付ければ表示されます。
front-page.php(BLOGループ内)
↓
ブラウザでの表示
それぞれの投稿の内容が表示され、リンクが効いていれば完成です。 次回はフォームを作っていきましょう。
※投稿記事が４枚になる場合
BLOG部分のループか書くと、下記のように投稿が４つ表示されることがあります。
これは「テンプレート: 先頭固定表示」が影響しているためです。
投稿一覧から、上記タイトルの記事を「編集」で開いて下さい。
設定部分に「ブログのトップに固定」という項目があります。 投稿が4枚表示されている場合は、下図のようにチェックが入っているはずです。
このチェックを外して「更新」すると、ブログカードが3枚になります。
固定表示はクエリと別カウントされます。
固定表示させたい記事がある場合は「showposts=3」を「showposts=2」に変更すると、合計3枚で収まりがよくなります。