ショートコードだけでページ内に記事一覧!Display Posts Shortcode

sb419.jpg

プラグインを使ってページ内に固定ページや投稿ページの一覧を作成する

Display Posts Shortcodeは、ショートコードで様々な記事一覧をサイドバーはもちろん、ページ内、投稿内、フッターに作る事ができる大変便利なプラグインです。

実際にこのサイトでも、固定ページの「WORDPRESS初級編INDEX」をこのプラグインでインデックスのようなページにしよう!と思った時、さくさくっと作ることができました(笑)。

WORDPRESS初級編INDEXページのように、テキストだけの記事一覧も作る事ができますし、下のようなサムネイルを使った記事一覧もショートコードとCSSの編集だけで作成できます。
display-post-shortcode example

Display Posts Shortcodeの使い方ページ

英語ではありますが、下記のページを見ていただければ、使い方はわかると思います。

WordPressのプラグインページは下記のリンクから
https://wordpress.org/plugins/display-posts-shortcode/

詳細なコードの説明は下記のページから
GitHub Display Post Shortcode
https://github.com/billerickson/display-posts-shortcode/wiki

サンプル画像の一覧のショートコード

ちなみに、サンプル画像の一覧のショートコードはこちら

【display-posts post_type="page" post_parent="123" image_size="thumbnail" include_excerpt="true" orderby="menu_order" order="ASC"】

※2015/6/15、表示順を設定する「 orderby=”menu_order” order=”ASC”」を追記しました。
これらを加筆すると、固定ページのページ属性で設定する、順序を表示にも反映させることができます。

post_parent=”123″は親固定ページのID番号を入れます。123は仮の番号です。
サービスや商品の一覧ページを作る時などに便利です。

※[] 内のショートコードが表示されませんので、[ を 【 にしてあります。ショートコードをコピペなさる場合は、[]でくくってください。

post_parent=”123″ではなく、実際に表示させたいページのIDを指定して表示させる事もできます。

例):display-posts id=”14,3″

この時、

class="display-posts160"

を効かせるためにdivでくくって、CSSで横並びになるようにします。

完成するコードは、下のようになります。
※[] 内のショートコードが表示されませんので、[ を 【 にしてあります。コピペする際はご注意下さい。

<div class="display-posts160">
【display-posts post_type="page" id="8,15,23,36,51" image_size="thumbnail" include_excerpt="true"】
</div>

CSS

スタイルシートに追記したタグは以下の通り。

/*Display Posts Shortcode横並び160px*/
.display-posts160 ul.display-posts-listing li {
width: 160px;
display: inline-block;
vertical-align: top;
font-size: 13px;
margin: 0;
padding: 6px;
}

.display-posts ul.display-posts-listing li img {
display: block;
padding: 2px;
}

/*Display Posts Shortcode横並び250px*/
.display-posts250 ul.display-posts-listing li {
width: 250px;
display: inline-block;
vertical-align: top;
font-size: 13px;
margin: 0;
padding: 6px;
}

.display-posts ul.display-posts-listing li img {
display: block;
padding: 2px;
}

CSSの簡単な説明

widthが、1つのli要素の幅です。上記CSSの

/*Display Posts Shortcode横並び160px*/

以下の部分では、li要素を160pxに、

/*Display Posts Shortcode横並び250px*/

以下の部分では、li要素を250pxになるようにしています。

また、160pxの方は、thumbnail(幅150px)を表示させる為、width: 160px;としてあります。

DisplayPostsShortcodeサイズについて

Display Posts Shortcodeでは初期設定では、表示する画像の幅(width)を、

  • thumbnail
  • medium(中サイズ)
  • large(大サイズ)

の3サイズから選択します。

このサイズはメディア設定の画像サイズが反映されているので、ダッシュボードの 設定 → メディア で変更できるのですが、
メディア設定

最終的には、CSSで設定されているli要素の幅までのサイズでしか画像は表示されません。

より細かなサイズ設定をしたい場合は、以下のページを参考にして下さい。
http://codex.wordpress.org/Function_Reference/add_image_size

この↑内容を、アイキャッチ画像のサイズを設定するための方法については、以下のページで、
「WordPressでアイキャッチ画像を好きなサイズで設定・使う方法」
で詳しくかみ砕いて説明しております(^^)

スマートフォンでの表示を考えますと、TwentyTwelveの場合は、widthは250px程までが妥当かと思いますので、mediumで表示させたい場合には、
<div class=”display-posts160″> を <div class=”display-posts250″>
とし、横並び250pxのCSSを使うか、

CSSのwidthを変更してお使い下さい。

下は250pxのCSSを使用して作成した、固定ページの一覧サンプルです。

DisplayPostsShortcode250pxCSS使用例
DisplayPostsShortcode250pxCSS使用例 PC画面
DisplayPostsShortcode250pxCSS使用例 スマホ対応確認画面
DisplayPostsShortcode250pxCSS使用例 スマホ対応確認画面

左はResolution Testでのスマホ画面表示確認画面のキャプチャです。

スマートフォンの場合、縦置きで幅が320pxですが、テーマによって余白のとり方が違いますので、TwentyTwelveでないテーマの方はwidthを調整してお使い下さい。

他にも様々な使い方が出来るプラグインですので、いろいろと試してみて下さい(^^)

最後にもう1つ注意点を・・・
Display Posts Shortcode はアイキャッチ画像をサムネイル表示させますので、アイキャッチ画像が設定されていないと、画像が表示されなくなってしまいます。

アイキャッチ画像の設定をお忘れなきよう・・・(^^ゞ

ちなみに、固定ページにアイキャッチ画像が表示されないタイプのテーマにアイキャッチ画像を表示させるようにするには以下のページで、
「functions.phpに加えると便利なワードプレス・コーデックス5選」
で解説していますので、参考になれば、と思います(^^)

ではでは、お役に立てば幸いです。

何かボタンを押していただけると、さらにハピアーでございます。
よろしくおねがいします(^^)

Published:2015/02/12

Written by

ショートコードだけでページ内に記事一覧!Display Posts Shortcode」への5件のフィードバック

  1. ちょうどDisplay Posts Shortcodeの使い方を探していたので助かります。ありがとうございます。

    すいません、ちと質問なのですが、投稿者を表示させることは出来ますでしょうか?

    1. 後藤さん、お返事おそくなりましてすみません。

      include_author=”true”

      をショートコードに加えると、投稿者を表示できます。

      タイトルby投稿者

      といった感じで表示されます。

コメントを残す