1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. WordPress
  6. »
  7. WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

今まで、何度かに分けて書いた記事でも、その一覧がなかったので見にくいなーと思っていた@It_is_Rです。
昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみました。

せっかくですので、今回は特定のカテゴリーに属する記事を、記事内で一覧表示させるショートコードを作成する方法を記事にしてみました。

本当は、その記事の属するカテゴリーに属する記事の一覧を表示させたかったのですが、それには大きな問題があります!!
複数のカテゴリーに属する場合はどうなってしまうのかということです。

そこで、あえて自分でカテゴリーIDを指定することで、自分が一覧表示させたい記事の一覧を表示させる方法にしました。

目次
  1. ソースはこちら
  2. ショートコードを使う。
  3. おまけ。CSSをお見せします

ソースはこちら

とりあえず、ソースの例です。functions.phpに記入します。

function category_article_list($arg) {

  //カテゴリーIDの初期値を0にする。
  extract(shortcode_atts(array(
      'category' => '0'
  ), $arg));
  global $post;
  $temp_post = $post;


  //h2タグで見出しを作る。
  $cat_list_part = '<h2>この企画の一覧はこちら</h2><ul class="category-list-part">';

  //$postsにそのカテゴリーIDの記事一覧を入れる。
  $posts = get_posts('order=ASC&numberposts=0&category='.$category);

  //$postsに代入された記事の数だけ繰り返す。
  foreach($posts as $post):
    setup_postdata($post);
    if (is_single(get_the_ID())) {
      $cat_list_part.='<li class="category-list-part__item">'.the_title("","",false).'</li>';
    }
    else {
      $cat_list_part.='<li class="category-list-part__item"><a href="'.get_permalink().'">'.the_title("","",false).'</a></li>';
    }
  endforeach;

  //最後に閉じタグを付け加える。
  $cat_list_part.='</ul>';

  $post = $temp_post;

  //$cat_list_partを返す。
  return $cat_list_part;
}
add_shortcode('list', 'category_article_list');

4〜6行目。
カテゴリーIDの初期値を0にします。呼び出し側でカテゴリーIDを指定することで、特定カテゴリーの記事一覧を表示することができるようになります。

12行目。
記事内に表示させることを想定しているので、h2タグで見出しを作っておきます。
また、リストで使いたいのでulタグも付けておきました。

15行目。
get_posts()で記事を取得します。
order=ASCは並ぶ順序の指定、numberposts=0は表示する記事の数(0にすることで全て表示)、categoryには取得したいカテゴリーIDを指定します。
引数を渡すことで、呼び出し側から表示させたいカテゴリーIDを指定することができる様になります。

20〜25行目。
今いる記事の部分はaタグをつけたくないので、条件分岐で今いる記事じゃない部分にだけリンクをつけるようにしています。

ショートコードを使う。

では、記事内でショートコードを使ってみましょう。

数値の部分は記事の一覧表示をしたいカテゴリーIDにしてください。

[list category=162]

これをCSSで整えるとこのようになります。
ショートコード

おまけ。CSSをお見せします

おまけとして、CSSもお見せしてしまいましょう。

.category-list-part {
  list-style: none;
}

.category-list-part__item {
  counter-increment: count;
  padding: 10px 0;
  border-bottom: 1px solid #00bcc6;
}
.category-list-part__item:before {
  content: "第" counter(count) "回目 ";
  padding: 0 5px;
}

スポンサードリンク

関連コンテンツ

オススメ記事

Pug

PugでPHPが使える! gulpfile.jsをちょっと工夫するだけだよ

HTMLを書くときPugを使うととても便利なのですが、PHPを書きたいと思ったときは少し工夫が必要になります。 PugでPHPを書くためのプラグインを使う方法もありますが、使うプラグインが増えれば増

Scratchで じゃんけんゲームを作ろう!

Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門

こんにちは! 今日(きょう)もプログラミングのお勉強(べんきょう)をはじめていきますよ! 前回の「Scratchの使い方と、ゲーム作りの基礎知識を学ぼう!」では、Scratch(スクラッチ)っ

Scratchでピアノを 作ってみよう!

Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門

小学生から始めるScratch入門です。 前回はじゃんけんゲームを作りました。 今回はピアノの鍵盤を作って、音を鳴らしてみましょう。 プロローグ [serif icon="aru-s.jpg"

【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】

馬鹿は風邪を引かないといいますが、どうやら引いたようです。@It_is_Rです。 ちなみに、「馬鹿は風邪を引かない」ということわざは、「馬鹿は風邪を引いても気がつかない」という例えだって知ってました

FC2でブログを始めよう!誰でも簡単にできるブログの作り方

FC2ブログは、FC2が運営する無料でブログを開設できるサービスです。(有料版もあります) また、FC2のサービスには、動画、ライブ配信、アフィリエイト、小説など、様々なものがあります。 今回

Docker Composeで自分のWordPressサイトをローカル開発環境に反映!

ローカルにWordPress開発環境を整えてテーマを作成することがあるのですが、単にローカルに環境を作っただけでは記事がなく、テーマのイメージが分かりません。@It_is_Rです。 かといって、te

HTML CSS

CSSでの円の作り方と、その上下左右中央に文字を表示する方法

サイトを作る時、円形のパーツを作りたい時ってよくありますよね。 円はCSSで簡単に作ることができます。 さらに今回はCSSで作成した円の中央に文字を置く方法も紹介します。 CSSでの

bootstrap3

Bootstrap3でサイトのレイアウト。グリッドシステムの使い方と裏技。

開発中のゲームはサイト制作に入っております。@It_is_Rです。 前回に引き続き、Bootstrap3の記事です。 サイトを作るとき、CSSなどを使ってサイトのレイアウトを調節したりしますが

【Android Studio】じゃんけんゲームの作り方(アプリ開発の基本)

限りなくじゃんけんが弱い@It_is_Rです。 Androidアプリ開発、11回目となりました。 そろそろ何かアプリを作ってみたいですよね。基本は大事ですが、一番つまらないですね。 そこ

オブジェクトを使ってみよう!

【JavaScript】オブジェクトを使ってみよう! 小学生からのプログラミング入門

小学生からのJavaScript入門講座(にゅうもんこうざ)、第6弾です。 前回の講座(こうざ)では、HTMLやCSS、JavaScriptを分けて管理(かんり)する方法を紹介しました。 今回はオブ

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です