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

スポンサードリンク

関連コンテンツ

オススメ記事

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

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

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

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

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ヘッダーをカスタマイズ。

寒くなってきましたね。皆さま前かがみになって、まるで亀の様です。@It_is_Rです。 皆様がブログを見て、一番最初に目に入ってくるのはどこでしょうか? 殆どの場合、ヘッダー部分ですよね。つま

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

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

おみくじゲームを作るべ!

小学生からのプログラミング入門。JavaScriptでおみくじを作ろう!

小学生から始めるプログラミングシリーズです。 この講座ではScratch(スクラッチ)から少しレベルアップして、JavaScriptを使ってプログラミングを行なっていきます。 Scratc

VCCW

VCCW で、超簡単に WordPress のローカル開発環境を整える方法。

考えすぎて間違った方向へ進む、@It_is_Rです。 WordPress のローカル開発環境を作りたい時、 VCCW を使うと便利です。 今回は、 その方法を紹介します。 VCC

【Android Studio】新規プロジェクトを作成する方法。

インスタント焼きそばを作ろうとすると、なぜか焼うどんになります。 @It_is_R です。 しかも、ラーメン作ろうと思うと焼きそばができあがります。 前回、 Android Studio のイ

Bootstrap 4によるボタンの作り方。色やサイズなどの指定方法!

Bootstrap4の使い方、第5回目となりました。 Bootstrapの機能のひとつとして、クラスを組み合わせて指定するだけで、色々なボタンが作れます。 今回はBootstrap4を使ったボ

【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方

Bootstrap4の使い方、第7回目です。 トップページなどを見ると、記事の一部が抜粋された記事一覧が表示されているサイトをよく見かけます。 今回はそんな記事一覧ページを作るのに便利な「カー

キー入力で文字を切り替えるべ

JavaScript|ノベルゲーム風にキー入力で文字を切り替える方法!

小学生からのJavaScript講座です。 前回、文字を一文字づつ表示させる方法と改行の方法を紹介しました。 今回はこのプログラムに、キー入力によって文字を切り替えられる機能をつけてみましょう

コメントをどうぞ!

メールアドレスが公開されることはありません。