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

スポンサードリンク

おすすめの記事♪

WordPress

無料で広告なしのWordPressサイトを立ち上げる方法。

猫を飼っています。でも犬派です。何か文句ありますか? …まぁ、最終的に動物全般が好きなんです。爬虫類から哺乳類、鳥類まで好きです。動物を飼って[email protected]_is_Rに送り付けて下さい。

HTML CSS

CSSで文字を、円の上下左右中央ド真ん中に表示する方法。

[email protected]_is_Rです。身長は171あります。 骨っていうなー! サイトを作る時、円形のパーツを作りたい時ってよくありますよね。画像を丸くして。。。なんてやっている人

Android アプリ開発入門! Android Studio のインストール手順。

人の笑顔が大嫌い。 @It_is_R です。 Android アプリ開発では、 Eclipse や Android Studio を使ってアプリを開発するのが一般的です。 一般的に言語は Ja

【アンデッド】新曲、ボカロラップ公開しました。

私はIt is R! ラップ書いたのであーる! おやつはカール! YO! @It_is_Rです。 しばらくブログの更新ができませんでしたが、ようやく更新することができました。 やっと曲作りが

クローバPAGE

【クローバPAGE】知識ゼロでも超簡単にサイトを作れるサービス!!

[email protected]_is_Rです。 しかし、HTMLとか、CSSとかなにそれ?……という感じのひともいるでしょう。 そこで、今回は知識が全くなくても超簡単にWebサイトが作れ

blender

Blenderで3D美少女キャラの作り方。その5(後頭部を作る。)

最近は雨が多いので、シャワーが必要ありませんよね。え?[email protected]_is_Rです。 さて、今回はBlenderで美少女キャラの後頭部を作っていこうと思います。 後頭部はパーツがなく、簡

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

[email protected]_is_Rです。 今回は JavaScript について、初心者の人にも分かりやすく、丁寧に解説していきます。 JavaScript と EcmaSc

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較になら[email protected]_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。文字の大きさを設定する。

[email protected]_is_Rです。 今回もFC2ブログの"最強"カスタマイズを始めていこうと思います。 今回は文字の大きさや色など、ブログ内の文字の設定をしていきます

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

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


コメントを残す

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


Category

Games