プラカンブログSTAFF BLOG

2017.10.03

WordPressのプラグイン「Display Posts Shortcode」を使ってみた

最近、右の腕が上がりにくくなっていて「まさかコレが四十肩…いやまさか」と現実から目を逸しぎみのNAGATOMIです。

ここ数年、簡単に更新ができるということでCMSでコーポレートサイトを作ることが多くなっていますが、コーポレートサイトを作る際に「ニュース」や「お知らせ」などの『新着情報』を表示したいというのが一番多い要望だと思います。

「おしらせ」カテゴリーのニュースを一覧で表示させたい!
サムネイル付きの「ニュース」を5件表示させたい!

そこでWordPressでもっと簡単にPHPを書かずに新着情報一覧ページを作ることができないのか?と思いいろいろ調べてみたところプラグインでページを作ることができましたので、今回はその便利なプラグインを使って一覧を表示させてみたのでいつものようにメモをしておこうと思います!!

その便利なプラグインの名は「Display Posts Shortcode」

「Display Posts Shortcode」更新プラグインサイト

ショートコードを用いて、PHPを知らなくてもユーザーが簡単に投稿のリストを表示できるプラグインです。

投稿ページ、固定ページにショートコードを追加し「タグ」、「カテゴリ」、「投稿タイプ」など他、またinclude_date、include_excerpt、image_sizeなどパラメータを指定して出力をカスタマイズすることができます。
(公式サイトより Google翻訳+NAGATOMI意訳)

プラグインをインストール

ダッシュボードの左メニュー「プラグイン」>「新規追加」(ピンクの枠の部分)

 

プラグインを検索して【有効化】します。

「Display Posts Shortcode」使ってみる

今回は固定ページで「新着情報一覧インデックス」を作成し、最新投稿20件を表示させてみます。

まず、固定ページで新規ページを作成し、ページのタイトルをつけます(今回は「新着情報一覧インデックス」としています)

 

作ったページの投稿エディタで新規投稿20件を表示させるためのショートコード記述します([display-posts posts_per_page=”20″])

 

ページをプレビュー(もしくは公開)で確認します。

リスト形式で最新投稿20件が表示されました!!!(∩´∀`)∩ワーイ

もし、アイキャッチ付きの投稿を5件(アイキャッチの無い投稿は除外)表示させたいって思ったら……
[display-posts image_size=”thumbnail” posts_per_page=”10″ meta_key=”_thumbnail_id”]というショートコードを同様にエディタに追加して……プレビューで確認。

アイキャッチのついた投稿が5件、リスト表示されました!
あとはCSSで装飾してあげれば新着情報ページが完成ですー!!
めっちゃ簡単やったー!!!

パラメータ

ショートコードの基本的な形式は[display-posts]
この中に利用可能なパラメータを設定します。

よく使いそうなパラメータを幾つか紹介しておきます。

  • posts_per_page
    表示させる件数を指定( ex. posts_per_page=”5″:5件表示 )
    ※ 最大値:100件
  • post_type
    投稿タイプ( ex. post_type=”event”:投稿タイプ「event」)
  • include_date
    日時表示( ex. include_date=”true” date_format=”F j, Y” )
  • image_size
    画像を表示させる( ex. image_size=”thumbnail” )
  • category
    カテゴリー( ex. category=”news” )
  • meta_key 
    カテゴリーフィールドの指定( ex.meta_key=”color”:カスタムフィールド「color」)
  • meta_value 
    カスタムフィールドの値( ex.meta_value=”blue”:値「blue」)

その他にも沢山のパラメータがあります。
ほかのパラメータについてはこちらをごらんください。
View on GitHub (英語ページ)

この記事は、NAGATOMI が書きました。