記事をタイル状に表示したりすることのできるショートコード「display-posts」

体裁等の最終更新日:2016-05-10

!

ショートコード「display-posts」で生成したサムネイル画像付き記事リストをタイル状に並べたり、丸くしたりするためには WordPress.com を「プレミアム」プラン等にアップグレードする必要があります。

2016-05-10 at 10.00.png

ちなみにこのサイトは「プレミアム」プランにアップグレードしてあります。(2016-05-10追記) 

  • ショートコード「display-posts」の総括

    ここ最近、ショートコード「display-posts」についての記事を精力的に書いてきたわけですが、一区切りついたような気がするので、簡単に総括したいと思います。

    ショートコード「display-posts」でできる主なこと

    サムネイル画像付きの記事をタイル状に並べることができる。

    adfadfasdf-1

    固定ページや投稿記事にアイキャッチ画像を設定することにより、サムネイル画像付きの記事をタイル状に並べることができます。

    カテゴリーやタグを使って、特定の記事だけ表示することができます。


    サムネイル画像付きの記事のリストを作成することができる。

    adfadfa

    抜粋文や日時を追加するなどして、サムネイル画像付きの記事のリストを作成することができます。

    サイドバーやフッターにサムネイル画像付きの最新情報を載せたり、お気に入り記事一覧を表示させたりすることができます。


    別の記事の内容の一部を挿入することができる。*1

    dfadfasd

    投稿記事の一部を抜き出し、固定ページの記事の一部に挿入することができます。

    例えば、同じ内容をいろんな記事に掲載しており、その内容を頻繁に更新する必要があるときにこの機能を使うと、修正ミスや更新忘れを防ぐことができます。


    以上のように体裁を整えるためには、いずれも CSS スタイルシートエディターで CSS を追加する必要があります。私自身が使っている CSS については、以下の記事でややアレンジしたものを公開しています。


    参考

    ショートコード「display-posts」使用のポイント

    • カテゴリーやタグ毎のリストを作成することが可能。
    • 日付の追加が可能。
    • 抜粋文の追加が可能。
    • 記事本文の追加が可能。
    • 固定ページ、投稿記事、どちらでもリストの作成が可能。
    • ID 番号を使って、特定の記事だけ表示することが可能。
    • 画像はアイキャッチ画像から抽出される。
    • タグを使って、リストから一部の記事を削除することが可能。
    • 最大表示数は 100。ただし、「offset」を使って連ねることにより、それ以上の表示も可能。
    • 二重引用の禁止
    • ウィジェットでも使用可能(「include_content」を除く)

    レンタルサーバ等にインストールするタイプの WordPress との互換性

    プラグイン「Display Posts ShortCode」 *2 をインストールすれば、レンタルサーバ等にインストールして使うタイプの WordPress でもショートコード「display-posts」を使えるようです。また、記事「WordPress のウィジェットの中でショートコードを使えるようにするプラグイン | ウェブル」のとおりにすれば、ウィジェットでの使用も可能のようです。

    注記

    *1: WordPress.com のマニュアルには載っていない、非公式の機能です。
    *2: 2015-10-27現在、プラグインの名称自体は「Lightbox」に変更されております。このプラグインの制作者は Bill Erickson 氏ですので、そこの部分で識別できると思います。

ショートコード「display-posts」のパラメータ

ショートコード「display-posts」に関する記事一覧

固定ページの表示

サムネイル画像

タイル状に表示

日付

概要文

記事の内容の引用

※ WordPress.comのマニュアルには記載されていない内容ですので、場合によってはなくなる可能性のある機能です。その点、ご留意ください。

カテゴリー毎・タグ毎

タグを使った一部記事の表示・非表示

レンタルサーバ等の WordPress でショートコード「display-posts」を使う

CSS カスタマイズなし

その他

関連情報・トピックのマップ (iPad やワイド画面での閲覧に最適化されています。)

2016-05-10 at 9.42.png