• メニュー
  • メニュー
Wordpressタイムライン風表示

【簡単おすすめ】ワードプレスでタイムライン風に記事を表示するプラグインはこれ!

ワードプレスのGutenbergでタイムライン風の投稿表示やコンテンツ表示の方法を解説します。

ワードプレスでの記事表示のした方っていろいろありますが、タイムライン風で表示すると時系列で分かりやすかったり、ただの一覧よりも記事を探す楽しみもでき、クリック増へ繋がります。

ワードプレス初心者でも、簡単にタイムライン形式で記事表示ができるプラグインをご紹介したいと思います。

ワードプレスでタイムライン風に
記事を表示する方法

オシャレなサイトって目を引くよねん♪

今回、ワードプレスでめちゃくちゃ簡単にタイムライン風に記事や好きなコンテンツを表示させてみます。
こんな感じが簡単に実現できます。

Ultimate Addons for Gutenbergをインストール

まず、メニュー>プラグイン>新規追加でUltimate Addons for Gutenbergをインストールします。

Gutenbergの拡張プラグインは何個か出てきていて、タイムライン風を表示出るプラグインは他にもありますが、とりあえずこのプラグインで実装していきたいと思います。

「Gutenbergの究極のアドオン(追加分)」というすごい自信満々のプラグイン名です。

究極のプラグインをインストールしたら有効化します。

するとメニューに【UAG】という項目が作成されます。プラグイン名の頭文字を取ったものですね。UAGをクリックすると下のような画面が表示されます。

ワードプレスタイムライン風プラグイン

少し下に行くと、【Ultimate Addons for Gutenberg】で拡張される機能一覧が表示されて、利用有無を選択できます。

ワードプレスタイムライン風プラグイン
  • Activate ⇒ 使う
  • Deactivate ⇒ 使わない

リストの下から7番目に「Post Timeline」という項目がありますので、これを使います。(最初からActiveになっていますので何も触らないでOK)


UAGのPost Timelineを使ってタイムライン風表示

投稿画面にいきます。投稿でも固定ページでも大丈夫です。

+を押してブロックを追加して、Ultimate Addons Blocks(UG)を選びます。

ワードプレスタイムライン風プラグイン

アイコンでいろいろな表示項目が出てきますので、この中からPost Timelineを選びます。

ワードプレスタイムライン風プラグイン

同じようにContent Timelineというものもありますが、投稿をタイムライン風に表示する場合は、Post Timelineを選びましょう。

下は実際に表示してみたサンプルです。表示した時は投稿数が6つになっていますが、省略するために3つに変更しています。PCの場合は左右に内容が表示されますが、スマホの場合は幅の関係で真ん中のタイムラインは左右どちらかに寄ります。

表示するものをカテゴリやタグから選べるようになっています。サンプルはすべてのカテゴリで日付順になっています。

ワードプレスタイムライン風プラグイン

関連記事の表示にも使うことができるし、時系列に読んでほしいとかにも有効利用できそうです。


Content Timelineもある!
LPや会社沿革も簡単に作れちゃう

上では自分の投稿した記事をタイムライン風に表示しましたが、何かモノを売る時や情報商材のLPでもこの見栄えは使えそうですよね。

別に時系列に使うだけではなく、見栄えとして使うのもお洒落です。

Postではなく、Content Timelineを使うと、会社の創業からこれまでの歴史を書いて、会社沿革ページとしても使えます。

適当に作りましたがこんな感じですね。適当過ぎ? (笑)
それぞれの項目には色も設定できるし、かなりオシャレに仕上げることができます。

画像ではなく実際の表示はこんな感じになります。

天保6年(1836年)

坂本龍馬誕生

 11月15日 龍馬が誕生

天保6年(1836年)
嘉永6年(1853年)

江戸へ剣術修行

「北辰一刀流剣術」の桶町千葉道場に入門

嘉永6年(1853年)
文久2年(1862年)

勝海舟と出会う

勝海舟を訪ねて、弟子入りを志願

文久2年(1862年)
慶応3年(1867年)

龍馬の死

近江屋で中岡慎太郎と襲撃を受けて龍馬は即死

慶応3年(1867年)

もう一個Stackableもインストールすると幅が効く

Stackable】というプラグインもおすすめです。機能や質はほぼUAGとほぼ一緒で、どちらを使うか悩むほどです。ただタイムライン機能はStackableには入っていません。他の機能はUAGと比べて使ってみてください。

両方入れちゃっても同時に使えるので、入れてみてから不必要な機能はOFFにすれることをおすすめします。

ワープレスタイムライン風まとめ

  • Ultimate Addon for Gutenbergのプラグインを使うと簡単
  • 投稿の関連表示にも使えるし、固定ページでコンテンツにも使える
  • つまりGutenberg最強

正直、Gutenbergいいねって思ったでしょ!?でしょ!?

食わず嫌いはダメです!

Gutenbergを使わず旧エディタを使ってる人は、他のページでも言っていますが、スマホが出てきた時にガラケーが打ちやすくていい、って言っていた人と同じです!

iphoneというとてもなく革命的なものが出てきたのに、ガラケーが打ちやすい!って言ってたあの頃と同じですよ!(笑)

ということで、Gutenbergの拡張機能を使ったタイムライン風表示でした。

今日も読んでくださりありがとうございました。

おすすめ記事はこちら

toshiki@ひざのうえ起業家

3児&2犬(大型)のウェブ大好きパパです。

サイト作り・デザイン大好きで、どんどん新しいサイトを作ろうとしてしまう性格の持ち主。けど、深く深く極めるのも好きなハイブリットです。Wordpress歴は18年くらいです。

子どもが大きくなってしまう前に、子どもとの時間を作りたくて脱サラ計画中。ひざのうえにノートパソコンを置いてでも稼げる仕事で起業を目指しています。

10年ちょい前に世界一周チケットで主要都市だけ回る旅行も経験、これからもいっぱい旅行したい一心で切磋琢磨しています。旅行大好きだから。

好きな物:ウェブサイト/旅行(国内・海外)/動画編集/音楽(クラシック/JAZZ/ポップス)/山崎豊子/久石譲/ショパン/ピアノ/ラブラドールレトリバー/コーヒー/ワイン/スポーツ全般/スキーモーグル/高校野球/スキューバ

夢:キャンピングカーで子どもと犬と日本一周、もう一度乗りたい豪華客船クルーズ、映画音楽の作曲、プール付きか温泉付きの別荘で暖炉の前でリクライニングチェアで老眼鏡付けて分厚い洋書を手に犬を足元に居眠り。

ストーリーを見る

コメント・質問する

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です