トップページや記事の中に特定のカテゴリー一覧を表示させる方法【コピペで即使えるプラグイン】

記事_並べる_プラグイン

プラグインで特定のページだけに
カテゴリー一覧を表示させる!

システムエンジニア(SE)かっきーです。

記事一覧を表示させる際、特定のカテゴリーだけを表示させたくてできなくて困ったことはありませんか。

そんな時おすすめなのが「Display Posts Shortcode」のプラグインです。

プラグイン「Display Posts Shortcode」の表示

このプラグインを使うと下記のような「システム講座」のみの記事を一覧にして表示させることができます。

システム講座

「Display Posts Shortcode」で、使用できるパラメータ

「Display Posts Shortcode」にて、使用できるパラメータは以下です。

【display-posts category="news" posts_per_page="5" include_date="true" date_format="Y年n月j日" order="ASC" orderby="date" include_excerpt="true"】
category="news"・・・スラッグを指定
posts_per_page="5"・・・表示件数
include_date="true"・・・日付の出力
date_format="Y年n月j日"・・・日付のフォーマット
order="ASC"・・・降順・昇順の指定
orderby="date"・・・何で並びかえるか
include_excerpt="true"・・・抜粋の有無に関わらず、本文+続きを読む

表示件数の指定や日付、さらには記事の順序も選択することができますよ。

cssで2カラムにしてみよう

ただ単に「Display Posts Shortcode」を使用し記事一覧表示しても見た目が悪くおしゃれなサイトには、
ほど遠い感じです。w

そのため今回は、2カラム表示のcssを紹介したいと思います。

.2cols ul.display-posts-listing li{
  width: 363px;
  display: inline-block;
  vertical-align: top;
  font-size: 90%;
  margin: 0;
  padding: 6px;
}

.2cols ul.display-posts-listing li a.image{
  display: block;
  width:  363px;
  height: 100px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.2cols ul.display-posts-listing li img{
  float: left;
  position: absolute;
}

上記のcssをstyle.cssにでも記載してください。

次にhtml内でクラスを指定してやります。
ここではクラス名:2colsを当てていますが競合しないような値を設定してください。

<div class="2cols">
</div>

これで完成です。

皆さんの素敵なサイトにぜひ取り入れてください。

ご不明点がある場合は、お気軽にお問い合わせフォームよりご連絡くださいませ。

( icon-star 前回の記事も見る

記事の文章作成や、Wordpressサイトのカスタマイズで
お困りではありませんか?
ライティングレシピでは、文章コンサルとWordpressサイトのカスタマイズを承っております!

文章コンサル
●文章力をあげてスキルアップしたい
●SEOを意識した文章を書きたい
●ライター目線で文章が書けるようになりたい

Wordpressサイトのカスタマイズ
●憧れのサイトのようにしてみたい
●不具合を修正したい
●デザインを理想通りに変更したい

少しでも当てはまる項目があるなら、いつでもお気軽にご相談くださいませ。 ココナラ満足度100%で、提案力には自信があります!

コメントを残す

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