固定ページや投稿内に最近の投稿の一覧を表示する際どうしてますか？？もちろん知識があれば挿入するテンプレートを作ったりしてショートコードで挿入・・なんてこともできるでしょうけど、初心者の方には難しいですよね？
しかもWordPressをインストールしてびっくり！！「なんじゃこりゃ！！」と思わず叫びたくなる不思議な投稿編集画面（Gutenbergとかブロックエディタとか言います）。ただでさえ慣れるのが大変なのに加えてページの中に投稿の一覧を表示するなんて・・・と途方に暮れてしまうかもしれません（暮れない？）。
今回紹介する「Flex Posts – Widget and Gutenberg Block」は、恐らく私が知る同類プラグインの中で、最も簡単に投稿や固定ページへきれいな投稿一覧を表示できるおすすめプラグインです。プラグインのタイトルにもある通り、ブロックエディタ、またはウィジェットでのみ機能するプラグインですから、旧エディタでは利用できませんのでご注意を！
【Flex Posts – Widget and Gutenberg Block】プラグインの用途や機能
前述した通り、独自のウィジェット、またはGutenberg(ブロックエディタ)の独自ブロックで条件を設定して挿入・表示させます。主な機能としては
- 「投稿」で公開している投稿の一覧を表示
- 「固定ページ」で公開している固定ページの一覧を表示
- 「カスタム投稿タイプ」で公開している投稿の一覧を表示
- すべての投稿タイプ（投稿・固定ページ含む）で公開している投稿の一覧を表示
- 「カテゴリー」「タグ」での絞り込みができる
- 公開日・抜粋・アイキャッチ画像の各表示選択ができる
- 「もっと見る」ボタンの設置ができる
- あらかじめいくつかのレイアウトを選択してきれいに表示できる
- 公開日順・コメント数順・更新日順などで並び替えて表示できる
といったところ。後に詳しく紹介しますが、本当に簡単に一覧作成ができて、個人的にはびっくりしました（笑）。また、その他の余分な機能が一切ないのも、「これがやりたい」派の方には魅力だと思います。
個人的にはこんな機能があったらいいなぁ・・と思うのは
- 複数の投稿タイプから任意に選択してリスト化
- カスタムタクソノミーへの対応
なのですが、カスタムタクソノミーについては今後対応されていくようですし、恐らく投稿タイプの任意選択もできてくるのではないかと思います（これについてはヘビーユースの場合であり、初心者の方には必要ない部分だと思いますので気にする必要はないかと思います）。
一覧の表示例
何よりどんな表示ができるのかを実際に見ていただいた方がいいと思いますので、公式ページに掲載されているスクリーンショットをいくつか載せておきます。
有料テーマの機能にありそうな一覧表示が無料で、しかも簡単に表現できます
この紹介記事を最後に編集したときの環境・バージョンなど
プラグインは製作者によって日々更新されていくため、この紹介記事が最新バージョンのものであるとは限りません。参考までにこの記事の最終更新日時点におけるテスト環境、プラグインバージョン、プラグイン導入時の留意点などを記載しておきます。
プラグインを使用（試用）したテスト環境
- テストサーバー：カラフルボックス
- WordPressのバージョン：5.4.1
- PHPのバージョン：7.3.11
- テーマ：HABONE(オリジナルテーマ)
- プラグインのバージョン：本記事で紹介しているバージョン 1.6.0／最新バージョン 1.11.0
- 公式サイト（wordpress.org上）：https://wordpress.org/plugins/flex-posts/
- 公式サイト（作者サイト）：
本記事を参考にWordPressサイトへプラグインの導入を検討される方へ
WordPressは古くから無料で配布されているサイト作成ツール（CMS）で、随時改良が加えられており、さまざまなバージョンが存在します。
さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。
そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。
本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。
- テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。 - プラグインに無料版と有料版（Pro版）がある場合、特に記載がなければ無料版の情報のみを紹介しています
- このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
- プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください（ここでは質問にお答えすることはできません）
【Flex Posts – Widget and Gutenberg Block】プラグインの設定画面や表示の日本語化と翻訳
【Flex Posts – Widget and Gutenberg Block】プラグインは日本語化が可能な言語ファイルが同梱されていますので、翻訳を行えば日本語での使用が可能ですが、設定項目が少ないので特に困ることはないと思います
【Flex Posts – Widget and Gutenberg Block】プラグインのインストールと設定
インストール方法
インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください（プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください）。
WordPressを使い始めて間もない方（初心者の方）は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール＆追加方法とエラー対処の方法も併せてご覧ください。
基本的な設定方法や使い方
プラグインを有効化後、投稿や固定ページの編集画面で「ブロックの追加」→「ウィジェット」を開くと、「Flex Posts」というブロックが出てきますのでクリックします。
すると右サイドバーに以下の項目が出てきますので、項目を設定すれば投稿一覧の作成は完了です（Gutenbergはデザインが即時反映されるので実際にいろいろ触ればお分かりになると思います）。
Generalタブ：一覧の上部に表示されるタイトルと、タイトルをクリックした時のリンク先が指定できます
Filterタブ：投稿タイプ、カテゴリー、タグでの絞り込み、並び順、表示数などが指定できます
Displayタブ：アイキャッチ画像、作者、日付、コメント数、抜粋の表示などが指定できます
並び替えの基準に更新日を使用したいときは
日記などあまり公開後にあまり更新を行わないサイトではなく、解説サイトのように頻繁に更新を行うタイプのサイトでは、更新日の新しい順で投稿の一覧を表示させたいことがあると思います。が、「Flex Posts」（バージョン1.6.0）では、並び替えの選択肢が「公開日の降（昇）順」「コメント数の多い順」「タイトル（A-Z）順」「ランダム」となっていて、「更新日の新しい（古い）順」での並び替えはできないようになっています。一応公式ページのサポートへ今後の要望としてメッセージを残させていただいていますので今後のバージョンで追加されるかもしれませんが、それほど大変なカスタマイズでもありませんので、現行バージョンで実現させたい方向けにカスタマイズ方法を紹介しておきます。
※私の提案を受け入れてくださったようで、この機能は次のバージョン以降で実装予定になりました。プラグイン作者に感謝します。
※この機能はバージョン1.7で追加されました
プラグインエディタから「Flex Posts」を選択し、「includes」→「functions.php」を開きます。
編集箇所は大きく以下の２か所です。
まずは50行目あたりにある
case 'random':
$args['orderby'] = 'rand';
break;の下に以下のコードを挿入します。
case 'mod_oldest':
$args['orderby'] = 'modified';
$args['order'] = 'asc';
break;
case 'mod_newest':
$args['orderby'] = 'modified';
$args['order'] = 'desc';
break;次に376行目付近にある
'random' => esc_html__( 'Random', 'flex-posts' ),の下に以下のコードを挿入します
'mod_oldest' => esc_html__( 'Mod-oldest', 'flex-posts' ),
'mod_newest' => esc_html__( 'Mod-Newest', 'flex-posts' ),上で挿入したコードが実際に投稿の抽出に使われる条件。下で挿入したコードが選択肢をブロックエディタやウィジェットで目で見て選択できるようにするためのコードになります。
問題なくファイルの更新ができたら、投稿などでFlex Postsブロックを追加した際、「Filter」項目の並び替えの選択肢に「Mod-oldest(更新日の古い順)」と「Mod-newest(更新日の新しい順)」が追加され、これを選択した場合には、本文内のコンテンツが指示した順に入れ替わっているのが確認できればカスタマイズ完了です（ウィジェットの場合も同様に並び替え選択肢が追加されます）
このカスタマイズで何かしらの不具合が出ても責任が持てませんので自己判断で行ってください
プラグインで正式にこの選択肢が追加されない場合、次回以降のプラグイン更新でこの部分は毎回消えてしまいますので、更新の都度このカスタマイズが必要になります
すべてのカスタム投稿タイプを含めた一覧を出力するには
複数のカスタム投稿タイプでサイトを構築していて、トップページなどにすべての投稿タイプの新着一覧を表示したいときに使えるカスタマイズです。
※この機能はバージョン1.7で追加されました
こちらも前述したファイルと同じものに追記することで実現できます。
プラグインエディタから「Flex Posts」を選択し、「includes」→「functions.php」を開きます。
335行目付近にある
$post_types['page'] = __( 'Page', 'flex-posts' );の下に以下のコードを追記します
$post_types['any'] = __( 'Any', 'flex-posts' );この「any」という投稿タイプの設定は
- アーカイブ（過去の一覧）が出力されるようになっている
- サイト内検索結果に含めるようになっている
ものをすべて含めるというものになります（詳しくは公式コーデックスをご覧ください）。
このカスタマイズを行うと、投稿タイプの選択肢のところに「Any」というのが追加され、選択すれば上記条件を満たすすべての投稿タイプから投稿が抽出されます。
このカスタマイズで何かしらの不具合が出ても責任が持てませんので自己判断で行ってください
プラグインで正式にこの選択肢が追加されない場合、次回以降のプラグイン更新でこの部分は毎回消えてしまいますので、更新の都度このカスタマイズが必要になります
ここまでくるともはやこのプラグイン使う意味あるの？となってしまいそうですが、そもそもある条件の投稿を引っ張り出して表示するという機能をより簡単にできるのが「Flex Posts」というプラグインなのですから、同じ仕組みのプログラムが組める人なら自身で一から作成すればいいということでしょう。
ポチップ
ポチップ
