LoginSignup
11

More than 5 years have passed since last update.

[WordPress]固定ページに特定カテゴリーのアーカイブとページ送りを表示する方法

Last updated at Posted at 2018-03-18

タイトルの通りですが、特定のカテゴリーアーカイブを固定ページ内にページ送り付きで表示する方法の紹介になります。
ただのカテゴリーアーカイブであれば archive.phpcategory.php などのテンプレートファイルを用意し https://ウェブサイトURL/category/hoge で実現することが出来ますが、今回は固定ページ内(正確にはサイドバーなどテンプレートファイル内)に実装したい時のサンプルコードとなります。

仕様

  • WordPressの検証バージョン:4.9.4
  • 固定ページ内に特定のカテゴリーの最新記事5件+ページ送りを表示

コード

今回は固定ページ内になるので page.php を前提にしていますが、サイドバーであれば sidebar.php トップページであれば front-page.php もしくは index.php に書いてください。

固定ページの編集ファイル page.php を開き、カテゴリーアーカイブを載せる箇所に以下のコードを挿入します。

page.php
<?php
    $category   = get_category_by_slug('info'); // カテゴリーのスラッグ
    $cat_id     = $category->term_id;           // カテゴリーIDを取得
    // 予めカテゴリーIDが分かっているなら上2行は不要

    $post_count = 5; // 表示する記事数

    query_posts('showposts='.$post_count.'&cat='.$cat_id.'&paged='.$paged);
    // カテゴリーIDを直に書く場合は '&cat='.$cat_id この部分を '&cat=カテゴリーID(半角英数)' に直す
?>

<ul>

<?php
    // ここから記事情報
    while(have_posts()) : the_post(); ?>
    <li>
        <a href="<?php the_permalink(); ?>"><time datetime="<?php the_time( 'Y-m' ); ?>"><?php the_time( 'Y.m' ); ?></time></a>
        <p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
    </li>
<?php
    endwhile;
    // ここまで記事情報
?>

</ul>

<div>

<?php
    // ここからページ送り
    $args = array(
        'prev_text' => __('&lt;'),
        'next_text' => __('&gt;'),
        'mid_size'  => 5
    );

    echo paginate_links($args);
    // ここまでページ送り
?>

</div>
<?php
    wp_reset_postdata();
?>

結果

FireShot_Capture_034_-_Document_-_http___localhost_bizasst_sample__.png

表示されるHTMLソースは以下のようになります。

<ul>
    <li>
        <a href="https://ウェブサイトURL/2017/12/02/post-30/" class="card-link"><time datetime="2017-12">2017.12</time></a>
        <p>ゴーシュは夜中の話狸どもにセロがそろえ音楽たた。だからいきなりまっ黒ましますという次なまし。愉快たましくせましもますまた風の生意気どものなかにもやっと愉快ますたが、おれほどかっこうを見せことたた。</p>
    </li>
    <li>
        <a href="https://ウェブサイトURL/2016/08/04/post-29/" class="card-link"><time datetime="2016-08">2016.08</time></a>
        <p>下げすぎ何も兵隊を悪いないていまの眼の丁稚あたりからつぶっ第十心臓弾のびっくりへ進みてしまいましまし。次は途中だまれています。鳥も十とまっかっこうのようのつりあげて出しない。扉も床泪とおまえをとるからあげだ。</p>
    </li>
    <li>
        <a href="https://ウェブサイトURL/2014/01/05/post-28" class="card-link"><time datetime="2014-01">2014.01</time></a>
        <p>ゴーシュは足にまったくにまわして虎を力のようがしと下をついて行きておもわず眼にあるてしまうまし。どんなにどうしてひとにかっこうからしだまし。おれまったくに水を出と次が過ぎだだ。床が睡っただ。</p>
    </li>
    <li>
        <a href="https://ウェブサイトURL/2013/01/11/post-27" class="card-link"><time datetime="2013-01">2013.01</time></a>
        <p>「音楽がきいた。トマト、それからゴーシュ。答え。」</p>
    </li>
    <li>
        <a href="https://ウェブサイトURL/2013/01/10/post-26" class="card-link"><time datetime="2013-01">2013.01</time></a>
        <p>それは一生けん命のときのうとうとこんどのままが見ましない。</p>
    </li>
</ul>

<div>
<span aria-current="page" class="page-numbers current">1</span>
<a class="page-numbers" href="https://ウェブサイトURL/sample/page/2/">2</a>
<a class="page-numbers" href="https://ウェブサイトURL/sample/page/3/">3</a>
<a class="page-numbers" href="https://ウェブサイトURL/sample/page/4/">4</a>
<a class="page-numbers" href="https://ウェブサイトURL/sample/page/5/">5</a>
<a class="page-numbers" href="https://ウェブサイトURL/sample/page/6/">6</a>
<span class="page-numbers dots"></span>
<a class="page-numbers" href="https://ウェブサイトURL/sample/page/9/">9</a>
<a class="next page-numbers" href="https://ウェブサイトURL/sample/page/2/">&gt;</a>
</div>

ページ送り部分はリスト形式にしたり、いろいろとカスタマイズ出来るので以下のページを参考にしてみてください。
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/paginate_links

以上になります。
参考になりましたら幸いです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11