Cocoonテーマで固定ページに複数カテゴリーの新着一覧表示方法

cocoon
2020.11.24

固定ページなどに複数のカテゴリーの新着記事をいくつかまとめて一覧表示させたいとき、ショートコードを利用する方法があります。

しかし、ショートコードを利用すると記事の大きさなどサイト表示が、Cocoonの新着順の表示と違う表示になります。なので、現在ショートコードではCocoonのデフォルトの新着記事の表示と同じような表示ができないようです。

そこで、Cocoonのデフォルトの新着表示のデザインと同じように表示するには、自分でテンプレートを作成します。

このサイトを例にすると、WordPressのカテゴリーが複数あります。

この複数カテゴリーを1つにまとめて表示したのが下の画像です。この表示の仕方をこのあと説明していきます。

因みにテンプレート用のコード例は、WP_Queryとquery_postsの2つ書いています。

固定ページに複数カテゴリーの記事をまとめて表示するやり方

カテゴリーがそれぞれ違う記事の中から、表示したいカテゴリーの記事だけで新着記事を作るには、2大きく分けて2つの作業をします。

  1. 新規テンプレートを作成して配置する
  2. 固定ページを作成してテンプレートを設定する

作業は、難しいことはとくになく時間も10分ぐらいあればできると思います。

新規テンプレートを作成する（複数カテゴリー記事の処理用）

「新規テンプレート」ファイルの作成方法は、自分のエディタで作成してもいいですし、レンタルサーバーにファイル作成機能があるなら、それを使用する方法とあります。

ここでは、エックスサーバー（レンタルサーバー）でファイル作成する方法で話を進めていきます。

エックスサーバーにログインして、「ファイル管理」から「ファイルマネージャー画面」を開き、Cocoonの子テーマ（cocoon-child-master）フォルダにある「tmp-user」フォルダに移動します。

「tmp-user」フォルダに移動後、ここで「新規ファイル」を作成します。ファイル名は、「list-index.php」とします。※ファイル名は他の名前でもいいです。

※作成するlist-index.phpファイルは、Cocoonテーマのtmp/list-index.phpをもとに作成しています。

WP_Queryを使用して作成する方法

ここでは、Cocoonの親テーマのlist-index.phpファイルのループをWP-Queryに変更して作成しています。

ファイルを作成後、list-index.phpファイルを「編集」をクリックして、下のコードをそのままlist-index.phpにコピー＆ペーストします。

<?php //インデックス
/**
 * Template Name: list-index
 * Cocoon WordPress Theme
 * @author: yhira
 * @link: https://wp-cocoon.com/
 * @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 */
if ( !defined( 'ABSPATH' ) ) exit;
?>
<?php get_header(); ?><!-- 追加1 header-->

<h1 id="archive-title" class="archive-title"><!-- 追加2 ページタイトル表示 -->
<span class="fa fa-folder-open" aria-hidden="true"></span><!-- 追加3 フォルダ画像-->
<?php echo the_title() ?></h1>

<div id="list" class="<?php echo get_index_list_classes(); ?>">
<?php //追加・変更4
$paged = get_query_var('paged') ? get_query_var('paged') : 1 ;
$args = array(
  'post_type' => 'post', 
  'posts_per_page' => 7, // 記事の表示数設定
  'category__in' => array(3,5,13), //表示したいカテゴリーID設定
  'paged' => $paged, 
 );
 
$wp_query = new WP_Query($args);
if ($wp_query->have_posts()) :
  while ($wp_query->have_posts()) : $wp_query->the_post();
    get_template_part('tmp/entry-card');

    //インデックスミドルに広告を表示してよいかの判別
    if (is_ad_pos_index_middle_visible() && is_index_middle_ad_visible($count) && is_all_adsenses_visible()) {
      get_template_part_with_ad_format(get_ad_pos_index_middle_format(), 'ad-index-middle', is_ad_pos_index_middle_label_visible());
    }

    ////////////////////////////
    //インデックスリストミドルウィジェット
    ////////////////////////////
    if ( is_active_sidebar( 'index-middle' ) && is_index_middle_widget_visible($count) ){
      dynamic_sidebar( 'index-middle' );
    };
  endwhile;
else : 
  get_template_part('tmp/list-not-found-posts');
endif;
wp_reset_postdata();
?>
</div><!-- .list -->


<?php //追加5 ページネーション
if (is_front_page_type_index() || !is_front_index_page()) {
  get_template_part('tmp/pagination');
}
?>

<?php //追加6 パンくずリスト cat=id1番目表示（不要なら外す）
if (is_category() && is_single_breadcrumbs_position_main_bottom()){
  get_template_part('tmp/breadcrumbs');
}
?>

<?php get_footer(); ?><!-- 追加7 footer-->

表示したい記事数とカテゴリーを設定するには、追加・変更4にある「//記事数の表示数設定」と「//表示したいカテゴリーID設定」の箇所を変更します。

例えば記事の表示数を10記事に変更するには、、’posts_per_page’ => 7のところを’posts_per_page’ => 10にします。

また、表示したいカテゴリーを設定するには、’category__in’ => array(3,5,13)のところにある数字を変更します。

WQ_queryを利用したコードでlist-index.phpファイルを作成したら、次の項目query_postsは飛ばして、その次にある「固定ページを作成する（新着記事の表示用）」に移動します。

query_postsで作成する方法

こちらのコードは、利用するlist-index.phpファイルで使用しているループ処理を変更せずに、コードを追加するだけでできるquery_postsでコードを作成したものです。

ファイルを作成後、list-index.phpファイルを「編集」をクリックして、下のコードをそのままlist-index.phpにコピー＆ペーストします。

<?php //インデックス
/**
 *Template Name: list-index
 * Cocoon WordPress Theme
 * @author: yhira
 * @link: https://wp-cocoon.com/
 * @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 */
if ( !defined( 'ABSPATH' ) ) exit;
?>
<?php get_header(); ?><!-- 追加1 header-->

<h1 id="archive-title" class="archive-title"><!-- 追加2 ページタイトル表示 -->
<span class="fa fa-folder-open" aria-hidden="true"></span><!-- 追加3 フォルダ画像-->
<?php echo the_title() ?></h1>

<div id="list" class="<?php echo get_index_list_classes(); ?>">
<?php
////////////////////////////
//一覧の繰り返し処理
////////////////////////////

//追加4 カテゴリー設定 表示数設定
query_posts('posts_per_page=5&cat=3,13,5&paged='.$paged); 

//$count = 0;
if (have_posts()) : // WordPress ループ
  while (have_posts()) : the_post(); // 繰り返し処理開始
    //$count++;
    //set_query_var( 'count', $count );
    get_template_part('tmp/entry-card');

    //インデックスミドルに広告を表示してよいかの判別
    if (is_ad_pos_index_middle_visible() && is_index_middle_ad_visible($count) && is_all_adsenses_visible()) {
      get_template_part_with_ad_format(get_ad_pos_index_middle_format(), 'ad-index-middle', is_ad_pos_index_middle_label_visible());
    }

    ////////////////////////////
    //インデックスリストミドルウィジェット
    ////////////////////////////
    if ( is_active_sidebar( 'index-middle' ) && is_index_middle_widget_visible($count) ){
      dynamic_sidebar( 'index-middle' );
    };

  endwhile; // 繰り返し処理終了 ?>
<?php else : // ここから記事が見つからなかった場合の処理
  get_template_part('tmp/list-not-found-posts');
endif;
?>
<?php //追加5 クエリ処理終了するとき使用する
  //wp_reset_query();
?>
</div><!-- .list -->

<?php //追加6 ページネーション
if (is_front_page_type_index() || !is_front_index_page()) {
  get_template_part('tmp/pagination');
}
?>

<?php //追加7 パンくずリスト cat=id1番目表示（不要なら外す）
if (is_category() && is_single_breadcrumbs_position_main_bottom()){
  get_template_part('tmp/breadcrumbs');
}
?>

<?php get_footer(); ?><!-- 追加8 footer-->

それぞれのカテゴリーにある記事をまとめて一覧表示するコードは、下の追加4の部分です。

ここで、表示したいカテゴリーを設定します。コードにある「cat=3.13.5」とある部分に表示したいカテゴリーIDを設定します。

また、記事の表示数は、「posts_per_page=5」の数字を表示したい記事数の値に変更します。

query_posts('posts_per_page=5&cat=3,13,5&paged='.$paged);

設定を終えたらファイルを保存します。これでファイルの設定は終わりです。

コード補足説明

作成したlist-index.phpファイルは、Cocoonテーマのtmp/list-index.phpをもとに9か所コードを追加しています。ただ、サイトの表示上追加したコード全部必要ではないです。

最低限以下のテンプレート名の設定と３のコードがあれば、それなりに表示されます。

Template Name: list-index

<?php get_header(); ?>

query_posts(‘posts_per_page=5&cat=3,13,5&paged=’.$paged);

<?php get_footer(); ?>

このほかのコードは、好みに合わせて削除してもいいです。

特にパンくずリストは、変数catに最初に設定したカテゴリーが使われるので、複数カテゴリーの記事を扱うのでパンくずリストとして不完全なので。

固定ページを作成する（新着記事の表示用）

作成したテンプレートを使い記事を表示するための固定ページを開きます。または新規追加で作成します。

固定ページを開いたら、左サイドにある「文書」タブを開き、「テンプレート」項目に「list-index.php」テンプレートファイルを設定して固定ページを保存します。

これで、Cocoonテーマのデフォルトの表示と同じように複数カテゴリーの記事を固定ページで表示することができます。

あとは作成した固定ページをメニューに追加、またはホームに設定することで表示されます。

スポンサーリンク

コメント

タイトルとURLをコピーしました