トップページの作り方

2026年3月4日2026年3月5日

WordPressはトップページ表示時、優先的に front-page.php を読み込みます。
そのため、トップページをテンプレートで作る場合は 子テーマ直下に front-page.php を配置します。

例

swell_child/
└ front-page.php

トップページのHTMLは front-page.php 内に直接コーディングしてOKです。

実装の基本構造

トップページは以下の骨組みで実装します。

<?php get_header(); ?>
<main>
    <article id="top">        <!-- トップページのコンテンツ -->    </article>
</main>
<?php get_footer(); ?>

ポイント

トップページでは 必ず h1 を1つ設置します。

ルール

例

<h1>企業チャンネル専門のYouTubeコンサルティング・運用代行会社 株式会社BIRDY</h1>

トップページは管理画面タイトルを使用しないため、
テンプレート内に直接h1を記述します。

テーマ内の画像は以下の関数を使用します。

<?php echo get_stylesheet_directory_uri(); ?>

例

<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/img/mv-01.png" alt="画像を表現するテキスト">

これにより

があっても画像パスが壊れません。

トップページ専用のCSSは pageフォルダに記述します。

assets/css/page/

例

assets/css/page/
├ styles.css
├ pc.css
├ tablet.css
└ smart.css

トップページのCSSは 共通CSS（common）には書きません。

理由

トップページ制作時は以下を確認してください。