この記事ではWordPress（ワードプレス）サイトのフロントページの作成手順とその見本を紹介します。サイトの肝となる要素なのでしっかりマスターしましょう。
ファイルの配置は他と変わらず以下のようになっています。
themes
┗original Thema
┗front-page.php
index.php
・
・
ファイルの構成に関しては以下のページを参考にして下さい。
front-page.phpの考え方
front-page.phpはWordPressでWEBサイトを作成する際のフロントページを表示するためのテンプレートファイルです。
front-page.phpが存在しない場合はhome.phpが読み込まれます。それも存在しない場合はindex.phpがフロントページとなりますが、通常のサイトの場合はフロントページにfront-page.phpを使い、ブログページにindex.phpもしくはhome.phpを使用することが多いです。（このようなWPテンプレファイルには優先順位が設けられています。）
またfront-page.phpでフロントページを作成する際は固定ページで「HOME」ページを作成してテンプレートとしてfront-page.phpを使用する事をおすすめします。（何かしらの不備でindex.phpやhome.phpをフロントで読み込ませないための保険です。）その方法を次で紹介します。
フロントページを固定ページで読み込む
まずは「front-page.php」という名前でファイルを作ります。そこに以下の記述をして下さい。
中身はコメントですが、WordPressではこのようにしてテンプレートファイルの設定を行う事が出来ます。
今回の場合は「TOPページ」という名前のテンプレートを作成しています。
<?php
/*
Template Name: TOPページ
*/
?>すると以下の固定ページの設定部分のページ属性に「TOPページ」が追加されています。
固定ページの名前は「HOME」で作成しています。
次にダッシュボード→設定→表示設定の「ホームページの表示」の部分を「固定ページ」にします。そこの「ホームページ」の選択を先程作った固定ページの「HOME」にします。
フロントページの要素を作成する
まずは以下は見本です。
<?php
/*
Template Name: TOPページ
*/
?>
<!-- header.phpを呼び出す -->
<?php get_header(); ?>
<main>
<!-- トップニュース -->
<div class="container top_left_container">
<div class="m-5">
<h1 class="text-center top_h2">TOP NEWS</h1>
<p class="text-center">トップニュース</p>
</div>
<div class="row">
<?php
$args = array(
'posts_per_page' => '6', //表示件数。-1なら全件表示
'post_type' => 'post', //カスタム投稿タイプの名称を入れる
'post_status' => 'publish', //取得するステータス。publishなら一般公開のもののみ
'orderby' => 'post_date', //日付順
'paged' => $paged,
);
$customPosts = get_posts($args);
if ($customPosts) : foreach ($customPosts as $post) : setup_postdata($post);
$terms = get_the_terms($post->ID, 'category');
foreach ($terms as $term) {
$term_slug = $term->slug;
}?>
<div class="col-md-6 pr-md-5 pl-md-5 top_card">
<a href="<?php the_permalink(); ?>">
<div class="top_card_inner mb-4">
<?php if ( has_post_thumbnail() ): ?>
<img src="<?php the_post_thumbnail_url(); ?>" loading="auto" alt="<?php the_title(); ?>のサムネイル">
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/noimg.png" alt="noimg">
<?php endif; ?>
<div class="top_card_text">
<p class="m-0 post_alts"><i class="far fa-calendar-alt"></i><?php echo get_the_date(); ?><span class="mr-1 ml-1"><i class="far fa-user"></i><?php the_author(); ?></span></p>
<p class="mt-1 mb-1 post_title"><?php the_title(); ?></p>
<?php
$cat = get_the_category();
$cat_name = $cat[0]->cat_name;
$cat_slug = $cat[0]->category_nicename;
?>
<p class="mt-1 mb-1 top_category <?php echo $cat_slug ?>"><?php echo $cat_name; ?></p>
</div>
</div>
</a>
</div>
<?php endforeach; wp_reset_postdata(); ?>
<?php else: ?>
<p>表示できる情報はありません。</p>
<?php endif; wp_reset_postdata(); ?>
</div>
<div class="btn-wrap">
<a href="/archive/" class="lookBtn btn-border-shadow">もっと見る</a>
</div>
<!-- バナーエリア -->
<div class="banner_area">
<?php dynamic_sidebar('sidenavi03'); ?>
</div>
</main>
<!-- テンプレートパーツ内のサイドバーを呼び出す -->
<?php get_template_part( '/template-parts/sidebar' ); ?>
<!-- footer.phpを呼び出す -->
<?php get_footer(); ?>フロントページではヘッダーとフッターそしてサイドバーやウィジェット、投稿一覧など全てのコンテンツを呼び出す想定でいます。
header.phpの作成の仕方は以下を見て下さい。
footer.phpの作成の仕方は以下を見て下さい。
ウィジェットの有効化については以下を見て下さい。
記事一覧の取得表示に関しては以下を見て下さい。
その他、HTMLベースでもphpを使ってもどちらでも、好きな感じでレイアウトしてフロントページの完成です。
以上が「ワードプレステーマのTOPページ（front-page.php）の見本」でした。
