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;
}

スポンサードリンク

関連コンテンツ

オススメ記事

webpack-dev-serverの基本的な使い方と設定方法の詳しい解説

あとで見ようとブラウザのタブを開きすぎて、どれがどれだか分からなくなる@It_is_Rです。 webpack-dev-serverを使えば、とても簡単にwebpackでの開発サーバーを立ち上げる

wordpress

WordPress管理画面のテーマカスタマイザーに独自の項目を追加。

WordPressみたいに私自身の人生もカスタムできたらいいのに。@It_is_Rです。 WordPressのカスタマイズは、公開しているサイトだけではありません。 管理画面をカスタマイズする

文字を一文字ずつ表示してみよう!

【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門

小学生からのJavaScript講座です。このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。 前回、画面に文字を表示するためのクラスを作ったのですが、それをも

HTML CSS

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

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

【 gulp 】 超便利! Sass で Normalize.css などをインポートする方法。

ふと立ち上がった瞬間に、ホットマットを猫に奪われる@It_is_Rです。 全然どいてくれない。 今回は gulp を使って、 Sass ファイルから Normalize.css などをインポー

【Xcode7】Storyboardを使ってMacアプリ開発に挑戦。

何だか今日はトイレが近い。@It_is_Rでございます。 現在開発中の人魚のゲームは今ストーリーを練っている所です。まだまだ時間がかかりそうです。 さて、Rは今、Macアプリ開発を勉強中なので

パスの書き方を覚えるべ!

パスの書き方を覚えよう。絶対パス、相対パス、ルート相対パスの違い

みなさん、こんにちは。今日もプログラミングの勉強《べんきょう》をはじめていきましょう。 今回は、パスの書き方について学びます。パスというのは、ファイルの場所《ばしょ》を、パソコンに教《おし》え

WordPressカスタムヘッダーを完璧に使いこなしたい人へ告ぐ!

森の中に昔から住んでる@It_is_Rです。 WordPressのカスタマイズをする上で、カスタムヘッダーを使うと、色やヘッダー画像をWordPressの管理画面から操作できるようになり便利です

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

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

プログラミングのクラスってなぁに?

【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、第12弾です。 前回はマップ上をキャラクターが自由に動くことができるようにしました。 今回はES6から使われるようになった「クラス」という機能を

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

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