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

目次

数行の短文投稿を1ページに表示したい

Twitter風の短文投稿(数行の雑感や覚え書き)を1ページにまとめて、連続表示する方法を紹介しています。

短文投稿に関しては、TwitterやFacebookのウィジェットを埋め込むことができますが、一つのページ内に、いくつもウィジェットを埋め込むと、かえって読みにくいし、量が多ければ、サイト表示にも負荷がかかります。

そこで、お勧めしたいのが、下記の方法です。

  1. 短文用のカスタム投稿を作成して、コンテンツ(single.php の the_contensに相当する部分)だけを抽出する
  2. 記事リスト系のプラグインを使って、コンテンツとタイトルだけをページ内に連続表示する(カスタマイズすればターム名や日付も表示可能)

たとえば、下記のページは、9件のカスタム投稿(短文)のコンテンツとタイトルを一ページ内に連続表示しています。

心が動けば、行動が生じる。行動すれば、流れも変わる 【仕事に効く言葉】

カスタム投稿で作成した短文。一ページに数行しかありません。

「俺が、俺が」と自分の主張を振りかざしても、周りは付いてこない

短文用のカスタム投稿は、robots.txt で下記のように記述すれば、検索エンジンのBOTを回避することができます。

加えて、SEO系のプラグインを使って、個々の短文投稿、もしくは、カスタム投稿のアーカイブ全体に、 noindex を付ければ、『重複コンテンツ』を回避することができます。

User-Agent:* 
Disallow: /(カスタム投稿のスラッグ)/

Twitter風の短文投稿+連続表示の手順

カスタム投稿を作成する

通常の投稿でも構いませんが、noindexを用いたり、短文に合わせたデザインが必要なら、カスタム投稿の方が管理はしやすいです。

カスタム投稿の作成は、下記のようなプラグインを使うと便利です。

・ Custom Post Type UI
・ Custom Post Type Maker

funcions.php を使う方法もあります。『カスタム投稿 functions.php 記述』あたりで検索してみて下さい。

robots.txtで検索ボットを回避する

上記の通り、robots.txt にカスタム投稿のスラッグを記述して、クロールを回避すれば、検索結果にも表示されず、サーチコンソールでエラーが生じることもありません。

SEOプラグインで noindex を設定

短文投稿をインデックスさせないよう、SEO系プラグインなどを使って、noindex を指定します。

noindexを指定するのは、各投稿、カスタム投稿(もしくは該当のカテゴリー・アーカイブ)、短文投稿に用いているタクソノミーです。

下記は、『SEO Press』の設定方法です。
参考記事 → Yoastがしんどい 個人サイトにおすすめ最適化プラグイン『SEOPress』

投稿タイプごと noindex を指定。

noindexで検索ボットを回避

各投稿にも noindex を指定。

短い投稿はnoindex しておく

XMLサイトマップを出力している場合は、サイトマップに含めないよう、設定します。

カスタム投稿をXMLマップから除外

カスタム投稿のタクソノミーをXMLマップから除外

SEOやXMLサイトマップの対策が整ったら、短文投稿の作成を開始します。

この順序を間違うと、短文投稿のURLが先にインデックスされてしまうので、ご注意下さい。(サイトによっては、公開日に捕捉されます)

サイトの仕様や規模によっては、noindex などの対策を講じても、Google Bot が勝手にURLを拾って、インデックスに登録してしまうことがあります。
登録される量があまりにも多い場合は、SEOプラグインやXMLサイトマップの設定を見直して下さい。
一つか二つ、登録された場合は、Google Botの仕様と思って、様子を見て下さい。

短文投稿を一覧表示する

プラグインを使う

短文投稿の一覧表示は、プラグインが便利です。

当サイトで推奨しているのは次の二点です。

・ WP Show Posts

複雑なショートコードのパラメントを組み合わせなくても、管理画面で、タグやカテゴリー、カスタムフィールドの値など、条件を指定して、プラグイン独自のテンプレートタグ(もしくはショートコード)を生成すれば、表示したい場所に埋め込むだけで、簡単に一覧表示できます。
並列のカラム、アイキャッチ画像の有無、タイトルの属性(見出しかPタグか)など、表示方法もウィザードに従って、簡単にカスタマイズできます。
デザインもプラグイン独自のCSSを読み込むので、あちこち、いじらなくても、綺麗に一覧表示されます。初心者向け。

・ Display Posts Shortcode

自身でWP_Queryに基づくパラメントを組み合わせ、条件に応じたタイトル&コンテンツを一覧表示する、老舗プラグインです。
利用者も多く、軽量で、単純にタイトル・リストを作りたい場合も重宝します。(日本語のカスタマイズ情報も多い)
デザインは、テーマ・テンプレートのスタイルを引き継ぐ為、思うように表示できないこともあります。
また、WP Show Postsのように、デフォルトでカラム表示する機能は備わっていません。
クエリに関する知識があり、自分でCSSをカスタマイズできるユーザー向けです。

『WP Show Posts』の使い方

WordPress.org 日本語
WP Show Posts
WP Show PostsAdd posts to your website from any post type using a simple shortcode.

有効化すれば、WP Show Posts 専用のメニューが作成されます。

ウィザードに従って、条件を設定します。

下図の場合、投稿タイプ『custom』、分類(タクソノミー)『custom_tag』についてリスト作成。

該当の分類項目の短文投稿だけをリストに含めます。

一覧表示したい投稿の種類を選択

スタイリングが面倒な本文のカラム設定も、プルダウンメニューで簡単に指定できます。

お使いのテーマ・テンプレートに合わせて、カラム設定して下さい。

カラムの設定も簡単

コンテンツをどのように表示するか、抜粋の長さやタイトルタグの種類などを設定できます。

短文投稿を一つにまとめたい場合は、『コンテンツの種類』を『全文』にすればOK。

コンテンツの表示の仕方

条件指定が面倒な投稿の表示順の並べ替え、除外する投稿ID、カスタムフィールドのメタ値を使った表示/非表示など、ワンクリックで設定できます。

細かな条件設定が可能

あとは、自動出力されたショートコード、もしくは、関数を、表示したい場所に記述するだけです。

ショートコードを記入

実例。

ショートコードを入力

この調子で、どんどん作っていけばOK。

低評価や重複コンテンツにもならず、短文投稿を活用することができます。

「日記」「好きな音楽」「猫の写真」など、独自のタクソノミーを使えば、投稿の分類も簡単ですよ。

ちなみに、一つのカテゴリー、もしくはタクソノミーに、数十の短文投稿が存在して、10個ずつ、小分けに表示したい場合は、カスタムフィールドを使います。

たとえば「キー」に「date」を指定して、最初の10個に数値を入力します。

カスタムフィールドのキーを設定

表示『詳細設定』で、下記のようにキーとメタ値を指定すれば、「01」を記入した投稿10本がリスト表示されます。

詳細設定で記事を絞り込む

『Display Posts Shortcode』の使い方

WordPress.org 日本語
Display Posts – Easy lists, grids, navigation, and more
Display Posts – Easy lists, grids, navigation, and moreAdd a listing of content on your website using a simple shortcode. Filter the results by category, author, and more.

下記ページに紹介されているパラメータに従って、条件を設定します。

Display Posts Parameters

当サイトの場合、次のようなショートコードを使って、短文投稿のタイトル+コンテンツを一覧表示しています。

該当ページ 失おうと、挫けようと 【心に効く言葉】

コードは次の通り。

「本記事の内容」で、短文投稿のタイトルだけ抽出して、目次を作成。

二つ目のショートコードで、本文のみを呼び出しています。

post_type="notes" (短文投稿のカスタムポスト名)
orderby="date" (日付順)
order="ASC" (昇順)
date_query_before="2020-05-31" (5月31日より以前の投稿)
date_query_after="2020-03-01" (3月1日より以降の投稿)
meta_key="topics" (メタキーの名前)
meta_value="morgen-life" (メタの値)
include_content="true" (本文を含む)
include_link="false" (タイトルリンクを無効化する)
wrapper="ul" (リストを ul として表示する)
wrapper_class="layout" (クラス名 layout)

<div class="swell-block-capbox cap_box"><div class="cap_box_ttl">本記事の内容</div>
<div class="cap_box_content">
[display-posts posts_per_page="10" include_link="false" post_type="notes" orderby="date" order="ASC" date_query_before="2020-05-31" date_query_after="2020-03-01" meta_key="topics" meta_value="morgen-life"]
</div></div>

[display-posts include_content="true" posts_per_page="10" include_link="true" orderby="date" order="ASC" content_class="post_content" post_type="notes" meta_key="topics" meta_value="morgen-life" date_query_before="2020-05-31" date_query_after="2020-01-01" wrapper="ul" wrapper_class="layout"]

テーマテンプレートのカスタムCSSにスタイルを追記します。


.listing-item .title {font-weight:bold;}
.layout li{padding:30px 0;}
.layout .title {
 font-weight:bold;
 font-size:1.6em;
  padding: 0.5em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background-color: #fffbfb;/*背景色*/
  border-left: solid 5px #9b1304;/*左線(実線 太さ 色)*/
 }

投稿画面の実際。

当サイトは、テーマ・テンプレートの『SWELL』を使っているので、該当の投稿にだけCSSを反映させています。

Display Posts Shortcodeを使った短文投稿の連続表示

いわば、『Display Posts Shortcode』 は、『WP Show Posts』のパラメータだけを用いた方法です。

アクセスのない低品質の投稿を一つにまとめる

ほとんどアクセスのない短文投稿も、『見出し+目次』を使って、一つにまとめれば、アクセスが得られるかもしれません。

長文は不利という話もありますが、『見出し+目次』を工夫して、ユーザーの欲しい情報にダイレクトにジャンプさせる方法もあります。

ひつじさん(JINの作者)の Rich Table of Contens が綺麗です。

Rich Table of Contents
RTOC - 誰でもリッチな目次が作れるWordPressプラグイン「Rich Table of Contents」
RTOC - 誰でもリッチな目次が作れるWordPressプラグイン「Rich Table of Contents」シンプルな操作でリッチな目次が作れるWordPress専用プラグイン

ちなみに、当サイトのテーマ・テンプレートは、スマホの下部に「目次」のメニューが追加できるので、『SWELL』を使っています。

この記事を書いた人

石田 朋子のアバター 石田 朋子 サイト管理人

作家・文芸愛好家。1998年よりホームページを運営。PCと車が大好きな80年代のサブカルファン。WordPressとは10年以上の付き合い。普段はぼーっとしたお母さんです。小説より漫画とアニメに詳しいヲタで、昭和の名作漫画は大半の台詞を空で言うことができます。東欧在住。本を買ってくれたら喜びます。

目次
閉じる