WordPressテーマ作成~index.phpの記述方法

index.phpは、WordPressテーマの基本的なテンプレートファイルです。WordPressが正常に動作するために最低限必要なファイルです。役割としては、サイトのトップページやカテゴリページ、タグページ、検索結果ページなど、特定のテンプレートファイルが存在しない場合に使用されます。言い換えれば、index.phpはテーマの「フォールバック」テンプレートであり、他のテンプレートファイルが見つからないときにWordPressが最終的に使用するファイルです。つまりこのファイルが無いと何も表示することが出来ないという事になります。

目次

index.phpの主な役割

トップページの表示

サイトのホームページとしての役割を果たします。

フォールバックテンプレート

他のテンプレートファイル(例えばsingle.phpやarchive.phpなど)が存在しない場合に使用されます。

基本的なレイアウトの提供

サイト全体の基本的なレイアウトとデザインを提供します。

index.phpの記述例

<?php
// WordPressテーマのindex.php

// ヘッダーの呼び出し
get_header(); ?>

<div id="content" class="site-content">
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

            <?php
            // WordPressループ開始
            if ( have_posts() ) :

                // 記事のループ
                while ( have_posts() ) : the_post(); ?>

                    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                        <header class="entry-header">
                            <h1 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
                        </header><!-- .entry-header -->

                        <div class="entry-content">
                            <?php the_excerpt(); ?>
                        </div><!-- .entry-content -->

                        <footer class="entry-footer">
                            <a href="<?php the_permalink(); ?>" class="read-more">続きを読む</a>
                        </footer><!-- .entry-footer -->
                    </article><!-- #post-## -->

                <?php endwhile;

                // ページネーションの表示
                the_posts_navigation();

            else :

                // 投稿が見つからない場合の表示
                get_template_part( 'template-parts/content', 'none' );

            endif;
            ?>

        </main><!-- #main -->
    </div><!-- #primary -->
</div><!-- #content -->

<?php
// フッターの呼び出し
get_footer();

上記はシンプルなWordPressテーマのindex.phpの記述例です。この例では、基本的なHTML構造とWordPressのループを使用して、記事のリストを表示します。

  • get_header()テーマのheader.phpファイルを読み込みます。これにより、ヘッダーのHTMLとナビゲーションメニューが表示されます。
  • get_footer()テーマのfooter.phpファイルを読み込みます。これにより、フッターのHTMLが表示されます。
  • WordPressループhave_posts()the_post()を使用して、公開されている投稿をループ処理し、各投稿を表示します。
  • <article>各投稿を囲むHTML要素で、投稿のIDとクラスが設定されます。
  • <header class="entry-header">投稿のタイトルを表示する部分です。the_title()the_permalink()を使用して、投稿のタイトルとリンクを生成します。
  • <div class="entry-content">投稿の抜粋を表示する部分です。the_excerpt()を使用して、投稿の概要を表示します。
  • <footer class="entry-footer">各投稿のフッター部分で、”続きを読む”リンクを表示します。
  • the_posts_navigation()投稿のページネーション(次へ・前へ)のリンクを表示します。
  • get_template_part()特定のテンプレートパーツファイルを読み込みます。この例では、投稿が見つからない場合にcontent-none.phpを読み込みます。
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

初めてホームページを作成したのは1996年。
2000年よりフリーランスで主に中小企業、学校、各種公的団体、個人事業主のWordPressを活用したホームページ制作を行っています。WordPressテーマはそれぞれのクライアントに合わせて作成しています。
WordPressを活用したサイト運営のための情報発信をしていきます。

目次