WordPressテーマを作成してみよう〜アーカイブと個別記事編〜

Yuki Motomiya: Director

ループとは
アーカイブ
個別記事
テーマファイルに保存

前回は簡単にテーマを作成する上で準備すべきものを紹介しました。
今回はテーマ作成の中でも基本になるWordPressのアーカイブ・個別記事を表示させるループについて書きたいと思います。

ループとは

ループは投稿を表示させるためのコードで、ループを使用すればアーカイブや個別記事を表示させたり、条件にあった内容の投稿を表示させることができます。

以下は基本的なループとなります。

<?php if ( have_posts() ):　//投稿ある場合 ?>
<?php while ( have_posts() ) : the_post();　//投稿内容を繰り返す ?>
<!-- 投稿内容を表示 -->
<?php endwhile;　//繰り返し終了 ?>
<!-- ページナビなど -->
<?php else:　//投稿ない無い ?>
<!-- 投稿が存在しない時の処理 -->
<?php endif; ?>

これだけ見ても最初はさっぱりわからないと思いますが、簡単に説明すると該当する投稿があれば「while ~ endwhile」の間に投稿が表示されます。こちらに表示させたい情報が出るようにしていきましょう。
投稿がなければ「else: 〜 endif;」の間に投稿がない時（Not Found）の処理が表示されます。

次はアーカイブのファイルを作成をしてみましょう。

アーカイブ

まずHTMLはこんな感じ

記事のリストがズラッと並び、最後ページ送りがあるようなブログの一覧っぽいのをベースに作りたいので以下のソースを仮で用意しました。

「<article class="article__item">から</article>」を一覧表示させて、「<nav class="pagenav">から</nav>」を次・前への一覧リンクを設置するといった感じです。

<!--ループ-->
<article class="article__item">
    <a href="">
        <h1 class="ttl">タイトル</h1>
        <time class="date">2017.10.27</time>
    </a>
</article>
<!--//ループ-->
<!--ページ送り-->
<nav class="pagenav">
    <span class="page-numbers current">1</span>
    <a class="page-numbers" href="http://wp-hoge.com/?paged=2">2</a>
    <a class="page-numbers" href="http://wp-hoge.com/?paged=3">3</a>
    <a class="page-numbers" href="http://wp-hoge.com/?paged=4/">4</a>
    <a class="next page-numbers" href="http://wp-hoge.com/?paged=2">次へ »</a></div>
</nav>
<!--//ページ送り-->

「<article class="article__item">から</article>」をループさせて一覧を表示させたいので「while ~ endwhile」の中に入れます。
ページ送りはどこでも大丈夫ですが今回はendwhile〜elseの中に入れます。

ループと絡めた状態

<?php if ( have_posts() ): ?>
<?php while ( have_posts() ) : the_post(); ?>
    <!--ループ-->
    <article class="article__item">
        <a href="">
            <h1 class="ttl">タイトル</h1>
            <time class="date">2017.10.27</time>
        </a>
    </article>
    <!--//ループ-->
<?php endwhile; ?>
    <!--ページ送り-->
    <nav class="pagenav">
        <span class="page-numbers current">1</span>
        <a class="page-numbers" href="http://wp-hoge.com/?paged=2">2</a>
        <a class="page-numbers" href="http://wp-hoge.com/?paged=3">3</a>
        <a class="page-numbers" href="http://wp-hoge.com/?paged=4/">4</a>
        <a class="next page-numbers" href="http://wp-hoge.com/?paged=2">次へ »</a></div>
    </nav>
    <!--//ページ送り-->
<?php else: ?>
    <!--投稿が見つからない-->
    <p>Not Found.</p>
    <!--//投稿が見つからない-->
<?php endif; ?>

ただこのままだとタイトル、日付、本文、ページナビのリンクも表示させることができません。
そこでテンプレートタグを仕込んであげましょう。
テンプレートタグとはWordPressがあらかじめ用意してくれているPHPのパーツのようなものです。

テンプレートタグ追加

<?php if ( have_posts() ): ?>
<?php while ( have_posts() ) : the_post(); ?>
    <!--ループ-->
    <article class="article__item">
        <a href="<?php the_permalink(); ?>">
            <h1 class="ttl"><?php the_title(); ?></h1>
            <time class="date"><?php the_time(); ?></time>
        </a>
    </article>
    <!--//ループ-->
<?php endwhile; ?>
    <!--ページ送り-->
    <nav class="pagenav">
    <?php
        global $wp_query;
        $big = 999999999; // need an unlikely integer
        echo paginate_links( array(
            'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
            'format' => '?paged=%#%',
            'current' => max( 1, get_query_var('paged') ),
            'total' => $wp_query->max_num_pages
        ) );
    ?>
    </nav>
    <!--//ページ送り-->
<?php else: ?>
    <!--投稿が見つからない-->
    <p>Not Found.</p>
    <!--//投稿が見つからない-->
<?php endif; ?>

使用したテンプレートタグはこちら

the_permalink() – 投稿のパーマリンクのURLを表示
the_title() – 投稿のタイトル表示
the_time() – 投稿時間を表示

ちなみにページ送りは何ページ目かわかりやすくしたかったのでpaginate_linksを使用してページ番号付きのリンクを表示するようにしました。

番号表示の必要が無い場合は「previous_posts_link()」や「next_posts_link()」でもページ送りの実装が可能です。

とりあえずこれで記事の一覧が並ぶアーカイブが表示されるようになりました。

個別記事

個別記事での投稿の表示法方はアーカイブで行った方法と変わらないので少し方法を変えて紹介します。

HTMLはこんな感じ

<article class="article__item">
    <header class="article__head">
        <h1 class="ttl">タイトル</h1>
        <time class="date">2017.10.27</time>
    </header>
    <div class="article__body">
        <p>本文</p>
    </div>
    <footer class="article__foot">
        <span class="prev"><a href="">Prev</a></span>
        <span class="next"><a href="">Next</a></span>
    </footer>
</article>

こちらを以下のようにループと合わせます。

ループと絡めた状態

<?php if ( have_posts() ) : ?>
    <article class="article__item">
        <?php while ( have_posts() ) : the_post(); ?>
        <!--ループ-->
        <header class="article__head">
            <h1 class="ttl"><?php the_title(); ?></h1>
            <time class="date"><?php the_time(); ?></time>
        </header>
        <div class="article__body">
            <?php the_content(); ?>
        </div>
        <!--//ループ-->
        <?php endwhile; ?>
        <!--ページ送り-->
        <footer class="article__foot">
            <span class="prev"><a href="<?php previous_post_link(); ?>">Prev</a></span>
            <span class="next"><a href="<?php next_post_link(); ?>">Next</a></span>
        </footer>
        <!--//ページ送り-->
    </article>
<?php else: ?>
    <!--投稿が見つからない-->
    <p>Not Found.</p>
    <!--//投稿が見つからない-->
<?php endif; ?>

このようになりました。

アーカイブとの違いは投稿があれば「<article class="article__item">から</article>」を表示、投稿がない場合は「Not Found」にして、ループはアーカイブのように記事のグループを丸っと並べることがないので「while 〜 endwhile」でループさせるのは「<header class="article__head"></header> 〜 <div class="article__body"></div>」まで。

使用したテンプレートタグはこちら

the_content() – 投稿の本文を表示
next_post_link() – 現在の投稿から前の投稿のURLを表示
previous_post_link() – 現在の投稿から次の投稿のURLを表示

ものすごくざっくりで大変申し訳ないのですがこのような感じでループを使用します。以上のループをコピペして動くか試してみてください。

＿人人人人人人人人人人人人人＿
＞　（自己責任で）動けばOK　＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣

テーマファイルに保存

上記のループができればあとはindex.php（archive.php）またはsingle.phpで保存すればほぼ完成です。
このままでも良いっちゃ良いのですが、ヘッダーとフッターとか無いのでそういうのを追加していきましょう。

例：index.php（archive.php）（アーカイブ）

<?php get_header(); //ヘッダーを読み込む　?>

<?php if ( have_posts() ): ?>
<?php while ( have_posts() ) : the_post(); ?>
    <!--ループ-->
    <article class="article__item">
        <header class="article__head">
            <h1 class="ttl"><?php the_title(); ?></h1>
            <time class="date"><?php the_time(); ?></time>
        </header>
        <div class="article__body">
            <?php the_content(); ?>
        </div>
    </article>
    <!--//ループ-->
<?php endwhile; ?>
    <!--ページ送り-->
    <nav class="pagenav">
        <span class="prev"><a href="<?php previous_posts_link(); ?>">Prev</a></span>
        <span class="next"><a href="<?php next_posts_link(); ?>">Next</a></span>
    </nav>
    <!--//ページ送り-->
<?php else: ?>
    <!--投稿が見つからない-->
    <p>Not Found.</p>
    <!--//投稿が見つからない-->
<?php endif; ?>

<?php get_sidebar();　//サイドバーを読み込む　?>

<?php get_footer();　//フッターを読み込む　?>

先ほどのループの紹介と何にも変わらないように見えますが、以下のように3つほどテンプレートタグを追加してます。