【_s(underscores)】index.phpの内容を理解する

2021年2月15日

皆さんこんにちはニノです。

今日は次回のトップページコンテンツ部分の改修に向けindex.phpを解説していきたいと思います。

では早速見ていきましょう。

_s(underscores) index.php



<?php get_header(); ?>

    <main id="primary" class="site-main">

        <?php
        if ( have_posts() ) :

            if ( is_home() && ! is_front_page() ) :
                ?>
                <header>
                    <h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
                </header>
                <?php
            endif;

            while ( have_posts() ) :
                the_post();

                get_template_part( 'template-parts/content', get_post_type() );

            endwhile;

            the_posts_navigation();

        else :

            get_template_part( 'template-parts/content', 'none' );

        endif;
        ?>

    </main><!-- #main -->

<?php
get_sidebar();
get_footer();

上のコードで全文です。

とてもすっきりしていてカスタマイズしやすそうですね。

コード解説

１行目



<?php get_header(); ?>

テーマディレクトリの header.php テンプレートファイルを読み込むための関数です。

get_header(name);とすることで
header-{name}.phpを読み込むこともできます。

ページごとでヘッダーのレイアウトや機能などを変えたい時に使用します。

６行目



if ( have_posts() ) :

これはif文です。

もし（条件）：

カッコの中はhave_post()つまり

「もし、投稿があれば」という意味です。

投稿があれば、２９行目「endif;」までの内容が実行されます。

８行目



if ( is_home() && ! is_front_page() ) :

６行目で投稿があったならば実行されるif文です。
if(条件)：

今回の条件はis_home() && ! is_front_page()
is_home()　→　メインブログページが表示されている場合。

！　is_front_page()　→　サイトのフロントページが表示されていない場合。

if文内の！（ビックリマーク）の意味はfalsu(否定)であればという意味です。

＆＆は〇〇かつ〇〇の様に複数の条件がを指定する場合に使用します。

メインブログページが表示されている場合かつサイトのフロントページが表示されていない場合に１４行目までの内容を実行します。

１０行目〜１２行目



<header>
   <h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
</header>

投稿部分のヘッダーが作成されます。

１１行目



<?php single_post_title(); ?>

個別記事ページでループ外に記事のタイトルを出力する関数です。
ヘッダーの中身はh1タグで出力される記事のタイトルということです。

１６行目



while ( have_posts() ) : the_post();

ループ文です。
カッコの中は条件
が満たされていたら一件ずつ取得
今回ですと投稿があれば繰り返し取得するという意味になります。

２１行目の「endwhile;」までを繰り返します。（このテーマでは１９行目の内容を繰り返します）

１９行目



get_template_part( 'template-parts/content', get_post_type() );

ヘッダー、サイドバー、フッターを除くテンプレートパーツを読み込むための関数です。
カッコ内のファイルを読み込みます。

ここではカッコの中の「’template-parts/content’, get_post_type()」を読み込みます。
template-partsディレクトリのcontent.phpを読み込んでいます。

、（カンマ）の後に続くget_post_type()は指定した投稿または現在の投稿の、投稿タイプを取得します。

content.phpの内容解説は下の記事をご覧ください。

【_s(underscores)】content.phpの内容を解説

２３行目



the_posts_navigation();

これはアーカイブページ向けのナビゲーションを取得する関数です。

上の図の様な記事のページャーの役割をしてくれます。
（過去の記事、新しい記事の部分です。）

２５行目



else :

これはif文の条件がfalseだった場合の処理をする場合のものです。

今回であれば６行目「if(have_post();)」で記事がない場合ということです。

２７行目



get_template_part( 'template-parts/content', 'none' );

記事がなかった場合はtemplate-partsディレクトリのcontent-none.phpを読み込んでくださいという内容です。

３６行目



get_sideber();

この関数はsideber.phpを呼び出しています。

sideber.phpの内容は以下の記事を見てください。

【_s(underscores)】sideber.phpの内容を解説

３７行目



get_footer();

この関数はfooter.phpを呼び出しています。

footer.phpの内容は以下の記事をご覧ください。

【_s(underscores)】footer.phpの内容を解説

まとめ

index.phpの内容をザックリとまとめると

ヘッダーを出力（header.phpの内容を出力）
↓
メインブログページが表示されている場合かつサイトのフロントページが表示されていない場合にコンテンツ部分のヘッダーを作り出しその中に記事のタイトルをh1で出力
↓
投稿があれば記事の内容を一件ずつ取り出しそれをcontent.phpで出力
なければ、content-none.phpで記事がなかったときの表示を
↓
記事の最後に「過去の記事」「新しい記事」のページネーションを出力
↓
サイドバーを出力（sideber.phpの内容を出力）
↓
フッターを出力（footer.phpの内容を出力）