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』で十分です。サイト表示にもほとんど負担をかけません。

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

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

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

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

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

Custom Post Type UI

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

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

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

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

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

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

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

[display-posts post_type="notes" include_title="true" include_content="true" content_class="dps-listing-content" wrapper="div" wrapper_class="my-grid-layout" date_query_before="2018-01-08" date_query_after="2017-12-31"]

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風 短文投稿

各スタイルは次の通り。

.my-grid-layout ul li {
list-style-type:none!important;
}
.listing-item .title {font-size:2.6rem; font-weight:bold;}
.listing-item {margin:30px 0;}
.dps-listing-content .title{font-size:30px;}
.dps-listing-content {
background-color:#ffcccc;
margin-top:20px;
margin-bottom:35px;
border-bottom:1px solid #555;}

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

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

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

<?php
 
/**
* Remove Link from Title on Display Posts Shortcode
* @author Bill Erickson
* @link http://www.billerickson.net/code/remove-link-from-title-on-display-posts-shortcode
*
* @param $output string, the original markup for an individual post
* @param $atts array, all the attributes passed to the shortcode
* @param $image string, the image part of the output
* @param $title string, the title part of the output
* @param $date string, the date part of the output
* @param $excerpt string, the excerpt part of the output
* @param $inner_wrapper string, what html element to wrap each post in (default is li)
* @return $output string, the modified markup for an individual post
*/
function be_display_posts_unlink_title( $output, $original_atts, $image, $title, $date, $excerpt, $inner_wrapper, $content, $class ) {
 
// Create a new title
$title = '<span class="title">' . get_the_title() . '</span> ';
 
// Now let's rebuild the output
$output = '<' . $inner_wrapper . ' class="' . implode( ' ', $class ) . '">' . $image . $title . $date . $author . $excerpt . $content . '</' . $inner_wrapper . '>';
 
// Finally we'll return the modified output
return $output;
}
add_filter( 'display_posts_shortcode_output', 'be_display_posts_unlink_title', 10, 9 );

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

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

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

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

<?php the_content(); ?>
<?php echo get_the_term_list($post->ID, 'topics', 'トピックス:', ' , '); ?></p>

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

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

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

// 新着記事に含める
function chample_latest_posts( $wp_query ) {
if ( is_home() && ! isset( $wp_query->query_vars['suppress_filters'] ) ) {
$wp_query->query_vars['post_type'] = array( 'post', 'notes', 'movie' );
}
}
add_action( 'parse_query', 'chample_latest_posts' );
 
//RSSに含める
function mysite_feed_request($vars) {
if ( isset( $vars['feed'] ) && !isset( $vars['post_type'] ) ) {
$vars['post_type'] = array(
'post',
'notes',
'movie'
);
}
return $vars;
}
<?php
function chample_latest_posts( $wp_query ) {
if ( is_home() && ! isset( $wp_query->query_vars['suppress_filters'] ) ) {
$wp_query->query_vars['post_type'] = array( 'post', 'foo', 'bar' );
}
}
add_action( 'parse_query', 'chample_latest_posts' );
?>

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

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

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

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

//特定のタームを除外
add_action( 'pre_get_posts', 'my_exclude_terms_from_query' );
function my_exclude_terms_from_query( $query ) {
if ( is_home() && ! isset( $wp_query->query_vars['suppress_filters'] ) ) {
$tax_query = array (
array(
'taxonomy' => 'genre',
'terms' => array( 'junk' ),
'field' => 'slug',
'operator' => 'NOT IN',
)
);
$query->set( 'tax_query', $tax_query );
}
}

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

Twitter風 短文投稿

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

Twitter風 短文投稿

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

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

//RSS Feedから指定タームを除外
 
function myFilter($query) {
if ($query->is_feed) {
$tax_query = array (
array(
'taxonomy' => 'genre',
'terms' => array( 'junk' ),
'field' => 'slug',
'operator' => 'NOT IN',
)
);
$query->set( 'tax_query', $tax_query );
}
}
add_filter('pre_get_posts','myFilter');

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

no index の設定

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

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

User-Agent: *
Disallow: /notes/

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

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

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

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

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

Top