ワードプレステーマのTOPページ（front-page.php）の見本

この記事ではWordPress（ワードプレス）サイトのフロントページの作成手順とその見本を紹介します。サイトの肝となる要素なのでしっかりマスターしましょう。

ファイルの配置は他と変わらず以下のようになっています。

themes
┗original Thema
　┗front-page.php
　　index.php
　　・
　　・

ファイルの構成に関しては以下のページを参考にして下さい。

front-page.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の作成の仕方は以下を見て下さい。