今回は、WordPressテーマのindex.phpを編集してWordPressサイトのトップページをカスタマイズする方法についてお伝えします。
本来、WordPressのトップページは、表示設定において「最新の投稿」をリスト表示するか、固定ページを選択して表示を行います。その他、フロントページ機能を用いて、トップページ用の固定ページテンプレートを使いながらトップページ表示を決めていきます。
WordPress 表示設定 ホームページの表示
しかしながら、WordPressのこうした機能を超えて、phpやWordPress関数を利用し、独自のトップページを作成する場合があります。この時、WordPressテーマのindex.phpを編集してWordPressサイトのトップページをカスタマイズします。
WordPressテーマのindex.phpを編集する
Main Index Template
WordPressテーマの中にあるindex.phpを編集していきます。通常は、一般設定の設定に応じて最近の投稿や固定ページを呼び出すための関数が組み込まれています。
index.phpを直接編集しつつ、部分的なコンテンツは何かしらの固定ページ・フロントページで記述する形にするのであれば、そうした該当部分は残しておきます。
アーカイブとしての機能
通常、カテゴリーやタグページなどのアーカイブ系のページは、カテゴリーページ→category.php、タグページ→tag.phpなどで設定され、その他アーカイブはarchive.phpで一括設定されていたりします。しかし、これらが存在しない場合は、index.phpの内容が呼び出されます。こうしたことからアーカイブ系の記述は残しておくに越したことはありません。
管理画面からindex.phpを確認し、編集する
WordPressにログインし、WordPress管理画面の左側に操作メニューの「外観」から「テーマの編集」を選択して、画面右側に表示されるindex.phpをクリックしてください。index.phpは必ず存在します。
index.phpをカスタマイズすることでできること
index.phpをカスタマイズすると、例えば、任意文章の後に特定カテゴリーのリストを5件表示し、また別の任意文章を記述して、その次に別のカテゴリーのリストを3件表示する、といった事ができるようになります。
また、トップページの任意の場所にスライドショーを組み込むこともできます。
トップページに固定ページを反映したり、フロントページ機能を利用することである程度トップページらしいトップページに仕上げることもできますが、複数のカテゴリーやカスタム投稿タイプがあり、それの新着投稿リストをたくさん表示したい場合などは、index.phpをカスタマイズして反映する必要があります。
WordPressサイトのトップページをブログタイプから固定ページに設定する方法
index.phpカスタマイズ例トップページに特定タームの記事を新着リスト表示
<?php $posts = get_posts('post_type=good_value&posts_per_page=5'); ?>
<?php if (!empty($posts)): ?>
<ul>
<?php foreach ($posts as $post):setup_postdata($post); ?>
<li><a href="<?php the_permalink(); ?>" class="toku"><?php the_title(); ?></a>｜<?php the_author_meta( 'display_name' ); ?><br> <?php echo get_the_term_list($post->ID,'good_value_type'); ?>
<span class="bs"><?php the_time('Y年n月j日'); ?></span>
<?php
$tarms = get_the_terms( $post -> ID ,'good_value_type' );
foreach ($tarms as $tarm) {
echo '<img style="width:50px; margin-left:5px;" src="' . 'https://marutto-kusatsu.com/wp-content/uploads/i/' . $tarm -> slug . '.png" alt="' . $tarm -> name . '">';
}
?>
</li>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
</ul>
<?php endif; ?>
<?php echo get_the_term_list($post->ID,'good_value_type'); ?>
（初回投稿日 2015年10月13日）
静的な一覧表示から「動的な情報ハブ」への転換・マルチクエリの実装戦略
これまでの解説では、WordPressが自動的に生成するメインクエリ（そのページで本来表示すべきデータ）をそのままループさせて表示する方法を見てきました。しかし、事業用のホームページにおいて、単純に新着記事が時系列に並んでいるだけのトップページは、ユーザーにとって使いやすいとは言えません。
「会社からのお知らせ（News）」、「技術ブログ（Blog）」、「制作実績（Works）」など、情報の種類ごとにエリアを分け、それぞれ最新の数件だけを表示させたいという要望が必ず出てきます。これを実現するために必須となる技術が、サブループ（WP_Query）を駆使したマルチクエリの実装です。
WP_Queryクラスを用いた自在なコンテンツ取得
トップページを情報のハブ（結節点）として機能させるためには、メインクエリだけに頼るのではなく、必要な場所で必要なデータをデータベースから引っ張ってくる処理を書く必要があります。ここで活躍するのが WP_Query クラスです。
例えば、トップページの上部には「重要なお知らせ」を3件、下部には「スタッフブログ」を4件表示したいとします。この場合、index.php（または front-page.php）の中で、複数のクエリインスタンスを作成します。
// お知らせ（news）の取得
$args_news = array(
'post_type' => 'news',
'posts_per_page' => 3,
'orderby' => 'date',
'order' => 'DESC',
);
$news_query = new WP_Query( $args_news );
if ( $news_query->have_posts() ) {
while ( $news_query->have_posts() ) {
$news_query->the_post();
// ここにお知らせの表示処理（タイトルや日付など）
}
wp_reset_postdata(); // 非常に重要
}
ここで技術的に最も注意すべき点は、wp_reset_postdata() の記述です。サブループを使用すると、グローバル変数である $post の内容が書き換わってしまいます。これをリセットせずに次の処理に進むと、その後のページの挙動がおかしくなったり、メインクエリのデータが正しく取得できなくなったりする不具合の原因になります。プロの現場では、このリセット処理の書き忘れは致命的なミスとみなされます。
情報の優先度をコードで制御する「スティッキー投稿」の扱い
WordPressには「ブログのトップに固定」という機能（スティッキー投稿）があります。標準のメインクエリでは、この設定がされた投稿は自動的に最上部に表示されますが、WP_Query を使ったサブループでは、パラメータで明示的に制御しない限り、この「固定」設定が無視されたり、逆に意図せず含まれてしまったりすることがあります。
事業において「見てほしい記事」をコントロールすることは非常に重要です。ignore_sticky_posts パラメータを適切に設定し、固定表示すべきものを意図通りに扱う設計が求められます。
例えば、新着一覧の中に固定記事を含めたくない（固定記事は別の目立つエリアに出しているから重複させたくない）場合は、以下のように記述します。
$args = array(
'post_type' => 'post',
'posts_per_page' => 5,
'ignore_sticky_posts' => 1, // 固定表示を無視して時系列順にする
);
このように、クライアントが管理画面で設定した「固定」の意図を、テンプレート側でどのように解釈して出力するかを緻密に設計するのがエンジニアの役割です。
パフォーマンス・バジェットを意識した高速化技術・Transient APIの活用
トップページはサイトの顔であり、最もアクセスが集中するページです。ここで複数の WP_Query を走らせるということは、それだけデータベースへのアクセス回数が増え、サーバーへの負荷が高まることを意味します。
Googleが提唱するCore Web Vitals（コアウェブバイタル）の指標、特にLCP（Largest Contentful Paint）やTTFB（Time to First Byte）を改善するためには、PHPの処理時間を極限まで短縮する必要があります。そこで、トッププロが必ず導入を検討するのが、WordPressの「Transients API（トランジェントAPI）」を利用した断片的なキャッシュ戦略です。
データベースクエリの結果を一時保存する
Transients APIとは、複雑な処理結果やデータベースからの取得結果を、時間を指定して一時的にデータベース（wp_optionsテーブル）に保存しておく機能です。
例えば、トップページに表示する「人気記事ランキング」などは、アクセスがあるたびに集計処理を行うと非常に重くなります。しかし、ランキングは1分1秒ごとに変動するものではありません。「1時間に1回だけ集計し、あとは保存された結果を表示する」だけで十分なはずです。
// キャッシュされたクエリ結果があるか確認
$top_query = get_transient( 'my_top_page_query' );
if ( false === $top_query ) {
// キャッシュがない場合のみDBから取得
$args = array(
‘post_type’ => ‘post’,
‘posts_per_page’ => 5,
);
$top_query = new WP_Query( $args );
// 結果を1時間（3600秒）キャッシュする
set_transient( ‘my_top_page_query’, $top_query, 3600 );
}
// 以下、通常のループ処理
if ( $top_query->have_posts() ) {
// …
}
この記述を加えるだけで、2回目以降のアクセスでは重いデータベース検索処理がスキップされ、劇的な高速化が実現します。特にアクセスの多い事業サイトにおいては、サーバーコストの削減とユーザー体験の向上の両面で大きなメリットがあります。記事の更新時にフックを使ってこのキャッシュを削除（delete_transient）する処理を組み合わせれば、情報の鮮度とパフォーマンスを両立させた完璧な運用が可能になります。
構造化データとセマンティックマークアップによるSEO強化
トップページの index.php をカスタマイズする際、見た目のデザインと同じくらい重要なのが、検索エンジンに対する情報の伝え方、つまりSEO（検索エンジン最適化）への配慮です。
単に div タグで囲ってCSSでレイアウトするだけでは不十分です。Googleのクローラーに「ここはヘッダー」「ここはメインコンテンツ」「ここはナビゲーション」と正しく伝えるセマンティックなマークアップを行う必要があります。
mainタグとsectionタグの適切な使い分け
HTML5以降、ページの構造を表すタグが定義されています。トップページにおいても、メインとなるコンテンツエリアは
JSON-LDによる構造化データの記述
さらに一歩進んだSEO対策として、index.php のヘッダー部分（通常は header.php に記述しますが、条件分岐でトップページのみに出力）に、JSON-LD形式での構造化データを埋め込むことを強く推奨します。
特に「WebSite」や「Organization（組織）」の構造化データは、そのホームページがどのような組織によって運営され、どのような名称で呼ばれているかをGoogleに明示的に伝える手段です。これを実装することで、検索結果にサイト内検索ボックスが表示されたり、ナレッジパネルに正しいロゴが表示されたりする可能性が高まります。
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"url": "https://funfairfanfare.com/",
"logo": "https://funfairfanfare.com/logo.png",
"name": "株式会社ファンフェアファンファーレ",
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+81-00-0000-0000",
"contactType": "customer service"
}
}
</script>
このような「目に見えないコード」の品質が、競合他社との検索順位の差を生む要因となります。
テンプレート階層の理解とfront-page.phpの利用
ここまで index.php のカスタマイズとして解説してきましたが、実はWordPressにはテンプレート階層という厳密なルールが存在します。事業用のホームページを制作する場合、トップページのテンプレートファイルとして index.php を使い続けることは稀です。
なぜなら、index.php は「最後の砦」として、カテゴリーアーカイブや検索結果など、専用のテンプレートが見つからない場合にすべてのページで使われてしまう可能性があるからです。トップページ専用のデザインや機能を実装する場合、より優先順位の高い front-page.php を作成して使用するのがベストプラクティスです。
ホームページ設定と表示ロジックの分離
WordPressの管理画面「設定 > 表示設定」において、「ホームページの表示」を「最新の投稿」にするか「固定ページ」にするかによっても、読み込まれるテンプレートファイルが変わります。
front-page.php が存在すれば、この設定に関わらず最優先でトップページとして利用されます。これにより、ブログの一覧ページ（home.php や index.php）と、企業の顔としてのトップページ（front-page.php）を明確に分離して開発・管理することができます。
開発の初期段階でこのファイル構成を正しく設計しておくことが、将来的な機能拡張やメンテナンス性を担保する上で重要です。
レスポンシブイメージとFirst Contentful Paint (FCP)の最適化
トップページのカスタマイズにおいて、最後に触れておきたいのが画像の扱いです。特にメインビジュアル（ヒーローイメージ）は、ユーザーが最初に目にする要素であり、サイトの印象を決定づけます。しかし、ここにとてつもなく巨大な画像ファイルを使用しているサイトをよく見かけます。これはSEO的にもUX的にも大きなマイナスです。
srcset属性とWebPの活用
WordPress標準の関数（the_post_thumbnail や wp_get_attachment_image）を使用すれば、自動的にレスポンシブ対応の srcset 属性が付与され、閲覧しているデバイスの画面幅に応じた適切なサイズの画像がブラウザによってダウンロードされます。
しかし、トップページのデザインによっては、PCとスマホで全く異なる比率の画像（例えばPCは横長、スマホは正方形）を出し分けたい場合があります。この場合は、CSSの display: none で切り替えるのではなく、
また、画像のフォーマットとして、従来のJPEGやPNGよりも圧縮率の高い次世代フォーマット「WebP」や「AVIF」を採用することも、現代のWeb制作では標準的になりつつあります。
フォールバックコンテンツの用意
どれだけ技術を駆使しても、ユーザーの通信環境によっては画像の読み込みに時間がかかることがあります。その際、画面が真っ白のまま待たせるのではなく、背景色を先に表示したり、プレースホルダーを表示したりすることで、体感速度を向上させる工夫も必要です。
これら一つひとつの細かな配慮の積み重ねが、プロフェッショナルが作る「成果の出るホームページ」と、そうでないものとの決定的な違いとなります。
事業成長を支える強固なトップページへ
トップページ（index.php や front-page.php）のカスタマイズは、単にPHPコードを書く作業ではありません。それは、訪問してくれたユーザーに対して「我々は何者で、あなたにどのような価値を提供できるか」を、瞬時に、かつストレスなく伝えるためのプレゼンテーション設計そのものです。
WP_Queryによる適切な情報抽出 Transient APIによる高速化 セマンティックな構造化によるSEO対策 デバイスに最適化された画像配信
これらの技術要素を複合的に組み合わせ、クライアントの事業課題を解決するページを作り上げることこそが、我々エンジニアやマーケターの使命です。ぜひ、ワンランク上のカスタマイズに挑戦し、サイトのポテンシャルを最大限に引き出してください。
WordPressカスタマイズ・修正
ホームページ制作 京都のWeb制作会社ファンフェアファンファーレでは、WordPressで制作されたウェブサイト・ホームページのカスタマイズサービスとして、WordPress（ワードプレス）のテーマ（テンプレート）やプラグインのカスタマイズサービスを提供しております。
WordPressカスタマイズの他、WordPressに関する様々な機能の実装や調整、編集はもちろん、各種エラーの修正・復旧に対応しております。
復旧・復元・エラー修正
ホームページ制作 京都のWeb制作会社ファンフェアファンファーレでは、WordPress（ワードプレス）で制作されたウェブサイト・ホームページの復旧（復元）、エラー修正サービスを提供しております。弊社制作のWordPress（ワードプレス）サイトの復旧、エラー修正も承っておりますが、自社制作・運営、他社制作・管理のWordPressサイトのエラー復旧（復元）・修正にも対応可能です。
WordPressの保守・セキュリティ・バックアップと復元
WordPressの保守やセキュリティについては、基本的にはバックアップによる保守管理で十分だと考えています。トラブル時のWordPressの復旧のためのWordPressの保守やセキュリティ、バックアップと復元について。
WordPressでのホームページ制作（WordPressサイト制作）
ホームページ制作 京都 ファンフェアファンファーレでは、ホームページ制作にあたり、WordPressでのホームページ制作（WordPressサイト制作）を推進させていただいております。
企業のWebマーケティングを加速するWordPressでのホームページ制作（WordPressサイト制作）ならお任せください！新規WordPressサイト制作はもちろん、htmlサイトからのホームページリニューアル、WordPressサイトのリニューアルにも対応しています。
Related page
-
今回は、WordPressサイトの投稿ページをカスタマイズする方法として、WordPressテーマのsingle.phpを編集して投稿ページをカスタマイズする場合についてお伝えいたします。 主にカスタムフィールドの設定反映、著者名や投稿日、最終更新日の反映、カテゴリーの呼び出し、アイキャッチ画像の設置、投稿記事に属するタームを表示などについて触れていきます。
-
今回は、WordPressサイトの404ページをカスタマイズする方法として、WordPressテーマの404.phpを編集して404ページをカスタマイズする場合についてお伝えいたします。 WordPressの404ページを設定することで、「存在しないページ」や削除されたページを示す404エラーの際に、WordPressサイトのテンプレートテーマを利用して、ユ
-
WordPressテーマのheader.phpを編集してヘッダーをカスタマイズする方法をお伝えします。 WordPressサイトは、全ページの共通部分としての「サイトヘッダー」があり、この部分にはサイトタイトルやサイトロゴ、主要なページへのリンクが設置されているグローバルナビゲーションなどが組み込まれています。 サイトヘッダーは「WordPressサイト」の
-
今回は、WordPressサイトの固定ページをカスタマイズする方法として、WordPressテーマのpage.phpを編集して固定ページをカスタマイズする場合についてお伝えいたします。 WordPressには投稿と固定ページがありますが、ブログCMSとしてのWordPressとしては「投稿」が基本となるものの、投稿は「時系列的に流れていく」といった要素があり
-
今回は、WordPressサイトのコンテンツ表示をカスタマイズする方法として、WordPressテーマのcontent.phpを編集してカスタマイズする場合についてお伝えいたします。以前の「WordPressテーマのpage.phpを編集して固定ページをカスタマイズする」や「WordPressテーマのsingle.phpを編集して投稿ページをカスタマイズする
