【コピペOK】Simplicityでカテゴリー別記事一覧の作り方を解説

2017/11/19 ブログ運営

シェアする

こんにちは、ユアン(@MedGamerY)です。

WordPressで初めてブログを開設してから３週間くらいの初心者ですが、Simplicityのテーマを生かしつつ、カテゴリー別の最新記事一覧のトップページを作ることができました！

 

今回作れるカテゴリー別の最新記事一覧のイメージは、最初に載せた画像通りです！
Simplicityデフォルトのエントリーカードがカテゴリー別に並びます。
※カテゴリーを指定しなければ、全カテゴリーでの新着記事を取得できます。

 

 

 

カテゴリー別の最新記事一覧についての説明

準備

基本的にはWordPress初心者でも可能な設定ですが、FTPクライアントソフトが使えることが前提になります。

これを利用することで、サーバーに直接ファイルをアップロードしたりダウンロードしたりできます。

 

もし使ったことのない方は、WindowsユーザーならばFFFTP、MacであればCyberduckが一般的でしょう。
どちらも無料ですので、ダウンロードして少し調べつつ設定してみてください！

FTPでサーバーとファイルのやりとりができるようになったら準備完了です！

 

 

おおまかな流れ

簡単に流れを書くと、このようになります。

  1. Simplicityのエントリーカード用PHPファイルを少し改変したものをアップロード
  2. 固定ページ用テンプレートを作ってアップロード
  3. 固定ページを作成して、２のテンプレートを有効にする

 

少し難しそうに見えるかもしれませんが、丁寧に手順を書いていくので、初心者でも簡単にできると思います！
今回はfunctions.phpへの操作を加えないので、リスクはかなり少ないと思います。

 

 

 

手順１. Simplicityのエントリーカード用PHPファイルを少し改変したものをアップロード

３つのphpファイルをダウンロード

entry-card-content.php、entry-card-large.php、entry-card.phpの３つのファイルをFTPクライアントソフトを利用して、サーバーからダウンロードしてください。

 

場所はSimplicity2の親テーマの中にあります。
私のサイトの場合では以下のパスの場所に３つともあるので、ダウンロードしてみてください。
/medgamer.jp/public_html/wp-content/themes/simplicity2/

 

 

３つのファイルのファイル名を変更

entry-card-content.php、entry-card-large.php、entry-card.phpをダウンロードしたと思いますが、それぞれのファイル名の末尾に”2″を付け足してください。

具体的には、entry-card-content2.php、entry-card-large2.php、entry-card2.phpというファイル名に変更してください。

 

 

３つのファイルをSimplicity子テーマにアップロード

ファイル名を変更した３つのファイルを、Simplicityの子テーマ内にアップロードしてください。

場所は私のサイトでは、/medgamer.jp/public_html/wp-content/themes/simplicity2-child/です。

ここにドラッグ&ドロップでアップロードできます。

 

 

３つのファイルをWordPress管理画面で改変

ここでWordPressの管理画面を開いてください。

外観 > テーマの編集 から、「Simplicity2 Child」を選択すると、下に先ほどアップロードした３つのファイルがあるはずです。

 

ここでファイル名をクリックすることで、それぞれの中身を改変できます。

 

改変の内容は以下の通りです。

entry-card-content2.php<h2>を<h3>に改変、</h2>を</h3>に改変する。(１箇所ずつ)

entry-card-large2.php下から２行目「get_template_part(‘entry-card-content’) ?>」の括弧内「entry-card-content」を、「entry-card-content2」に変更

entry-card2.php下から２行目「get_template_part(‘entry-card-content’) “>」の括弧内「entry-card-content」を、「entry-card-content2」に変更

 



 

固定ページ用テンプレートを作ってアップロード

テンプレートを作成

Microsoft Wordやテキストエディタ、テキストエディットなど、テキストを打てるソフトならなんでもいいので起動してください。

 

新規作成して以下のソースをコピー&ペーストしてください。
基本的には、Simplicityのデフォルトのphpファイルからコピーしてきて私が多少改変したものです。

 

<?php /*Template Name: トップページ用*/ ?>
<?php get_header(); ?>


<div id="list">
<!-- 記事一覧 -->

<h1>トップページ</h1>

<h2>カテゴリーのタイトル</h2>

<?php
////////////////////////////
//一覧の繰り返し処理
////////////////////////////

query_posts( 'posts_per_page=3&cat=2’); //posts_per_pageで表示する投稿の数、catでカテゴリー指定
if (have_posts()) : // WordPress ループ
  $count = 0;
  while (have_posts()) : the_post(); // 繰り返し処理開始
    $count += 1;
    global $g_list_index;
    $g_list_index = $count-1;//インデックスなので-1

    //一覧リストのスタイル
     if ( is_list_style_bodies() ) {//一覧表示スタイルが本文表示
      get_template_part('entry-body');//一覧表示スタイルが本文表示の場合
    } else if ( is_list_style_large_cards() ){//大きなエントリーカードの場合
      get_template_part_card('entry-card-large2');
    } else if ( is_list_style_large_card_just_for_first() ){//最初だけ大きなエントリーカードの場合
      //最初だけ大きなものであとは普通のエントリーカード
      if ( is_home() && !is_paged() && $count == 1 ) {
        get_template_part_card('entry-card-large2');
      } else {
        get_template_part_card('entry-card2');
      }
    } else if ( is_list_style_body_just_for_first() ){//最初だけ本文表示の場合
      //最初だけ本文表示であとは普通のエントリーカード
      if ( is_home() && !is_paged() && $count == 1 ) {
        get_template_part('entry-body');
      } else {
        get_template_part_card('entry-card2');
      }
    } else {//エントリーカードか、大きなサムネイルカードの場合
      //一覧表示スタイルがカードor大きなサムネイルカード表示の場合
      get_template_part_card('entry-card2');
    }

    //3つ目のアイテムの下にインデックスリストミドルウィジェットを表示するか
    if ( $count == 3 && //3番目
      is_list_style_entry_type() && //表示タイプがエントリーカードタイプの時のみ
      is_active_sidebar( 'widget-index-middle' ) && //インデックスミドルに値が入っているとき
      !is_pagination_last_page() && //インデックスリストの最後のページでないとき
      is_posts_per_page_6_and_over() //1ページに表示する最大投稿数が6以上の時
    ) {
      echo '

<div id="widget-index-middle" class="widgets">';
      dynamic_sidebar( 'widget-index-middle' );
      echo '</div>

';

    }

  endwhile; // 繰り返し処理終了 ?>
  
<div class="clear"></div>

<?php else : // ここから記事が見つからなかった場合の処理 ?>

<div class="post">

<h2>NOT FOUND</h2>

<?php echo get_theme_text_not_found_message();//見つからない時のメッセージ ?>
    </div>
<?php endif; ?>


<?php get_footer(); ?>

 

コピペできたら名前を付けて保存してください。

このときに拡張子を「.php」で保存するように気をつけてください。

私は「for-toppage.php」というタイトルで保存しました。

 

 

これでテンプレートが完成です！

ヤマは越えました。あと少しです！！

 

 

Simplicity子テーマにアップロード

このテンプレートを、Simplicityの子テーマ内にアップロードしてください。

場所は私のサイトでは、/medgamer.jp/public_html/wp-content/themes/simplicity2-child/です。

 

 

テンプレートファイルの編集

もう一度、WordPressの管理画面を開いてください。

 

外観 > テーマの編集 から、「Simplicity2 Child」を選択すると、そこに「トップページ用 固定ページテンプレート for-toppage.php」があると思います。

それを開くことで編集できます。

 

まず「カテゴリーのタイトル」をタイトルに書き換えます。

次に、

query_posts( 'posts_per_page=3&cat=2’); //posts_per_pageで表示する投稿の数、catでカテゴリー指定

の行を書き換えてください。

 

catの部分はカテゴリーIDの数字でカテゴリーを指定してください。

 

カテゴリーIDは、管理画面の、投稿 > カテゴリー を開き、カテゴリーにカーソルを乗せると、左下にURLが出てくると思います。
このURLをよくみてください！

私の場合、「ブログ運営」カテゴリーのカテゴリーIDは12ですね。

 

なので、cat=12とすることで、「ブログ運営」カテゴリーの最新記事が取得されるようになります。

 

このままだと１つの記事一覧しか表示されませんが、先ほどのソースのうち、最初と最後を除いた大部分の

<h2>カテゴリーのタイトル</h2>

から

<?php endif; ?>

までをコピーして、下にもう１つ貼り付けることで、複数の新着記事リストを作ることができます。

 

 

 

固定ページを作成して、２のテンプレートを有効にする

固定ページを作ってテンプレートを設定

WordPressの固定ページを新規作成して、「トップページ」などのタイトルをつけてください。

本文は何も記入せずに、右のメニュー「固定ページの属性」の「テンプレート」で、先ほど作った「トップページ用」を選択したら完成です！

 

プレビューするか、公開してURLを開いてみてください^^

 

 

完成！！！！！

こんな感じになっていたら大成功です！

まとめ

いかがだったでしょうか？
雑記ブログなどでは特に、トップページでカテゴリごとに記事一覧を出したい方も多いと思うので、役に立てば嬉しいです。

私自身WordPressを始めて１ヶ月足らず、PHPも初心者でしたが、これにたどり着くことができました。
なので、きっと初心者の方もこれを見ながら、記事一覧を作れるかなと思います！

それではここまでお読みいただき、ありがとうございました。
ユアン

スポンサーリンク
スポンサーリンク

シェアする

フォローはこちら

ユアン