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

公開 :

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

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

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

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

ソースはこちら

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

function category_article_list($arg) {

  //カテゴリーIDの初期値を0にする。
  extract(shortcode_atts(array(
      'category' => '0'
  ), $arg));
  global $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>';

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

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

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

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

18〜23行目。
今いる記事の部分は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;
}

スポンサードリンク

おすすめの記事♪

FC2 blog customize

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

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

Medibang Paint

MediBang Paint Proの使い方。4コマ漫画を描く8つの手順。

[email protected]_is_Rです。 さて、最近は本当にMediBang Paint Proが流行っているから凄いなと思っています。 そこで、今回はMediBang

少し早いですが、夏をイメージした曲を作りました。

暑い夏は嫌いですが、寒い冬も嫌いです。春も鼻[email protected]_is_Rです。 そんなこんなで、少し早いですが、夏の一曲制作しました。 夏といえばやっぱり海! てなわけで、海をイメ

java

Javaのクラスとメソッドの違いとは?ゲーム風に解説。

この頃小説を読んでいなく、何か読みたいなと思[email protected]_is_Rです。 Javaを勉強し始めたばかりの人は、何やら難しい単語に混乱する人も多いでしょう。その中で、クラスとメソッドって一体何が

Blenderで3D美少女キャラの作り方。その6(耳を作る。)

[email protected]_is_Rです。 もちろん記事書きながら今から作っていきます。 今回は耳を作っていきます。 耳は髪の毛でどうせ隠れてしまうかもしれませんが、とりあえず。 こ

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

bootstrap3

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

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

ゲーム開発で使用する人魚のイラスト描きました。

制作中の人魚のゲームは、Unityを使ったAndroid専用[email protected]_is_Rです。 そんな訳で、いまUnityの使い方を覚えているのですが、まだまだ時間がかかりそう。

CSS Button

サイト制作に!!CSSでマウスオーバーボタンの作り方。

新年初の記事です。とりあえず、あけましておめ[email protected]_is_Rです。 お正月……おそーがつ……おそまつ……おそ松さん。新年早々くだらないこと言ってないで早く記事を書けって話ですね。

RGB

Photoshopを使う上で必要不可欠。RGBとCMYKって何?

人生は山あり谷ありといいますが、下り坂しか無[email protected]_is_Rです。 今回はPhotshopなどのソフトを使う上で必要不可欠となる、RGBやCMYKについて


コメントをどうぞ!

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




Games