2018/06/05 改訂版 「親を捨てよ 家を出よう」「大学には行った方がいいの?」「好きなことをして生きるは正解か」を追記

Display Posts Shortcode でTwitter風の短文投稿を1ページにまとめて表示

Display Posts Shortcode でTwitter風の短文投稿を1ページにまとめて表示

Twitter風の短文投稿を1ページにまとめて連続表示する方法 WordPress編の続編です。

元記事では、WP Show Postsを使った方法を紹介していますが、Display Posts Shortcode で、さらに簡単、高速にやる方法が見つかりましたので、改めて。

Twitter風の短文投稿って、ナニ?

『Twitter風の短文投稿』というのは、その名の通り、数行の非常に短い記事です。写真だけ、説明文だけ、みたいな場合もあります。

Twitter風 短文投稿

しかしながら、こういう投稿を100も200も量産すれば、当然のこと、スパムサイト扱いされ、サイトの評価も著しく低下します。
また、ビジターにとって、ほとんど意味のない、つぶやきのような記事が大量に表示されても、嫌われるだけですね。

そこで、Twitterのウィジェットを連続して投稿内に埋め込み、「今週のつぶやき まとめ」みたいに表示されている方も少なくないと思いますが、それはそれでウィジェットが重く、アイコンやらなんやら表示されて、あまり見栄えのいいものではありません。

そこでお薦めしたいのが、数行の短文投稿を、『フロントページやアーカイブに表示することなく(operator = NOT IN)』『検索エンジンにインデックスさせず(meta=noindex)』『一つのページ内に連続表示する』方法です。

これなら、複数の記事を、あたかも連続した一つの記事のように見せることができ、なおかつ、タームやカテゴリーの条件分岐を使って、表示/非表示を自動的に切り替えることができます。

Twitterは苦手、でも、日々のつぶやきや、気になるニュースのピックアップなどをブログに掲載したい場合、非常に便利なので、ぜひチャレンジして下さい。

作成の手順

1)Display Posts Shortcodeを有効化
2)短文投稿用のカスタムポストを作成
3)連続表示する為の記事(カスタムポスト、もしくはカテゴリー)を作成
4)ショートコードの記述
5)特定のタームに属する記事を除外(functions.php もしくは プラグイン)
6)短文投稿を新着記事やRSSに含める
7)no index の設定 (functions.php もしくはプラグイン)

Display Posts Shortcode

記事リストを作成するプラグインは非常にたくさん存在しますが、単純に、タイトル、本文、タグ(カテゴリー)、アイキャッチ画像 を、連続表示したい場合は、『Display Posts Shortcode』で十分です。サイト表示にもほとんど負担をかけません。

こちらからインストールして、有効化するだけ。設定などは必要ありません。

//wordpress.org/plugins/display-posts-shortcode/

短文投稿用のカスタムポストを作成

次に短文投稿用のカスタムポストを作成します。通常投稿+カテゴリーの方が整理しやすければ、それでも構いません。

カスタムポスト作成もいろんな手順がありますが、こちらのプラグインが一番使いやすくて、動作が安定しています。

Custom Post Type UI

ここでは notes というカスタムポストを作成します。
Twitter風 短文投稿

次に、分類用のタクソノミ―を作成します。

タクソノミ―を使って、フロントページやアーカイブへの 表示 / 非表示 を切り替えます。通常のカテゴリーやタグで調整する場合は、特に必要ありませんが、メインの投稿とごっちゃにすると、量が増えてきた時に難儀するので、あった方が便利です。
Twitter風 短文投稿

こんな風に「駄文=junk」というタグを作り、表示/非表示の分類に利用します。
Twitter風 短文投稿

Display Posts Shortcodeのショートコードを記入する

こちらのパラメータを参考にして、連続表示する為のショートコードを作成します。
//github.com/billerickson/display-posts-shortcode

作成日時の期間を指定して、タイトル、本文だけ連続表示する場合。リスト表示用の記事を別個に作って、投稿内にショートコードを記載します。

post_type="notes" ポストタイプ
include_title="true" タイトル表示
include_content="true" 本文表示
content_class="dps-listing-content" コンテンツ(本文)のスタイル指定
wrapper="div" 各アイテムを div で定義する
wrapper_class="my-grid-layout" div class
date_query_before="2018-01-08" 指定日より前
date_query_after="2017-12-31" 指定日より後

次のような短文投稿が存在した場合。

Twitter風 短文投稿

上記のショートコードで次のように表示されます。

分かりやすいよう、ブラウザを縮小表示しています。こんな感じで短文投稿が連続表示されます。
Twitter風 短文投稿

一つ一つの記事はこんな感じ。
Twitter風 短文投稿

各スタイルは次の通り。

通常、Display Posts Shortcode でタイトル表示すると、自動的にリンクが表示されるのですが、これを解除したい場合、こちらのCODEが参考になります。

functions.php を使った拡張機能の一覧
//www.billerickson.net/code-tag/display-posts-shortcode/

タイトルからリンクを削除する
Remove Link from Title on Display Posts Shortcode

他にも、オリジナルのパラメータを参考にして、アイキャッチ画像や日付を表示したり、タームやカテゴリーで表示するアイテムを絞り込んだり、いろんな応用ができます。

残念ながら、カテゴリー名やターム名を表示する機能はないので、各投稿で調整する必要があります。

上記の場合、Simple Tagsというプラグインを使って、タグを投稿内に自動表示するよう設定しています。

カスタムポストを使うなら、カスタムポスト用のsingle-○○.phpを作って、本文の下にタームが自動表示されるよう、アレンジしてもいいですね。
get_the_term_list を使えば、topics というタームがある場合、ターム名をリスト表示します。

短文投稿をRSSや新着記事に含める

作成した短文投稿をRSSや新着記事に含める場合。

カスタムポストのスラッグが notes と movie であれば

特定のタームに属する記事を除外

上記のように、functions.phpでカスタムポストを登録すれば、フィードやフロントページの新着記事に表示されますが、中には表示したくない記事もあると思います。

こちらは、特定のタームに属する短文投稿をフロントページやアーカイブから除外する方法です。
functions.phpに記入します。
参考サイト →アーカイブから特定のタームを除外(Taiyo Blog)

たとえば、タクソノミ― genre 、ターム junk に属する記事だけフロントページの新着記事から除外する場合。

デフォルトの状態では、料理レシピが表示されますが……

Twitter風 短文投稿

ターム junk に定義づけると、料理レシピだけ記事一覧が消えます。

Twitter風 短文投稿

この方法で、読ませたい記事、一覧表示に埋もれていい記事を分類すると、短文投稿を連発してもビジターの負担になりません。

同じようにRSSフィードからも除外する場合は次のコードで消えます。

これで、おすすめの短文投稿のみをフロントページの新着記事やRSSに含め、そうでない投稿は除外することができます。

no index の設定

最後にSEO対策も講じておきましょう。
ジャンクな短文投稿は no index を設定して、検索エンジンに読み込まれないようにします。
All in one SEO や YOAST のような総合対策プラグインを使ってもいいし、インデックス機能だけ搭載したプラグインを使ってもOK。
こちらは軽くて簡単。古いプラグインですが、最新版のWordPressでも問題なく動作します。
Noindex Pages
noindex プラグイン

一括して検索エンジンを拒否するなら、robots.txt を使って、ディレクトリごと、Disallowします。

終わりに・短文投稿の一覧を上手に利用

WordPressの難点は、短文投稿には向かない点です。

Facebookのように、長文も、ちょっとしたリンク記事も、手軽に投稿できたら便利ですが、それはそれで問題がありますし、まあ、難しいですね。

かといって、Twitterは苦手・・という方もあるでしょうし、長文も、短文も、WordPress一つで収めたい方向けにカスタマイズしてみました。

ちょっと一手間かかりますが、Display Posts Shortcode なら、ショートコードで実装できますし、条件分岐を使えば、RSSや新着記事の表示/非表示もある程度はコントロールできますので、いろいろ調べて、自分仕様にカスタマイズして下さい。

Top