WordPressタイムライン(Timeline)を適用する方法

Last Updated: 2023 年 07 月 17 日 2のコメント

WordPressで歴史などをタイムライン形式で追加したり、最新の記事をタイムライン形式で表示したい場合があります。 この場合は、インターネット上で無料で検索されたHTML、CSS、jQueryなどのソースを活用する方法と、プラグインを使用する方法があります。

フリーのCSSタイムラインのソースを活用する

会社の歴史などをタイムラインに追加する場合、Googleの検索されたタイラなソースを活用することができます。 次のW3Schoolsの記事でシンプルなタイムラインのソースが提供されます。

このソースを使用して、次のようなタイムライン(Timeline)を作成することができます。 (下の内容は、 Naver 演繹ページで一部を引用したものです。)

2018

  • 02月にキャンプモバイル合併
  • 04月に香港科学技術大学(HKUST)と共同AI研究所設立

2017

  • 01月に、将来の技術別途法人 NaverLabsの(株)設立
  • 05月 Naverウェプトゥン(株)は、別途法人設立

2016

  • 07月のライン株式会社、ニューヨークおよび東京証券取引所の同時上場

この記事を作成するときには、上記のタイムラインが正しく表示されたが、 テーマを変更ハニーレイアウトがずれね。 CSSでおよそ保持ましたが、少しずれた部分がありますね。 テーマの変更後の携帯では正しく表示されなくて、モバイルでは表示されないように設定しました。 ワン文のHTMLとCSSコードを適用する場合は、使用するテーマに沿ってレイアウトが正しく表示されないこともあるようです。 そのような場合、適切応用して使用するか、他のTimelineのソースを探してご利用ください。

シンプルなタイムラインを作成したい場合は、活用してみることができます。 」65 CSS Timelines「HTMLコードはエディタで直接入力し、CSSコードをチャイルドテーマフォルダ内のスタイルシートファイル(style.css)に追加するだけで、さまざまなCSSタイムラインソースを確認できます。

タイムラインのプラグイン

Timeline Express

WordPress タイムラインのプラグイン

Timeline Expressは WordPress サイトで縦型のタイムラインを作成することができる無料のプラグインです。 お知らせ(Announcement)を記入し、日付を設定すると、このプラグインで最新のお知らせ順に文を記載します。

Timeline Expressは現在、2万以上のサイトに設置されており、ユーザーの評価も比較的良い方です。 お知らせなどをタイムライン形式で表示する場合に適していると思われる。

Cool Timeline Pro

WordPress タイムラインのプラグイン

Cool Timeline Proは、個人のキャリア事項や会社の沿革などを水平または垂直型(反応型)で表示することができるプラグインです。 ブログの投稿をタイムライン形式で表示することも可能です。

画像、ビデオ、スライドショーやカスタムデザインや色でストーリーを表現することができます。 簡単なショートコードでタイムラインを好きなところに追加することができます。

このプラグインを使用して、タイムラインを作成することができます:

  • 素敵な縦と横のタイムライン
  • 会社のタイムライン
  • ブログ投稿のタイムライン
  • ステップ(Step by Step)のチュートリアルタイムライン
  • プログラム履歴
  • 会社ストーリーライン
  • イベントのタイムライン
  • ライフストーリー/タイムライン
  • キャリアの
  • 個人センエサ
  • 略歴タイムライン
  • 製品の更新プログラムのタイムライン
  • 会社の歴史のタイムライン
  • コンテンツのタイムライン
  • スタートアップストーリーライン

このプラグインは、40以上のタイムラインのデザインを提供しています。 詳細情報とデモは、 Cool Timeline Proサイトを参照してください。

WP Timeline

WordPress 反応型のタイムラインプラグイン

ストーリー、タイムライン、歴史、ロードマップなどを作成したい場合にWP Timelineプラグインを使用することができます。 タイムラインを簡単に作成できるようにデザインされたWP Timelineは企業がタイムライン/ストーリー/沿革を表示することができる非常に簡単な方法を提供しています。 このプラグインを使用して、タイムラインを作成して表示するすべてのプロセスを管理することができ、すべてのポストタイプ、タグ、カテゴリー、分類(Taxonomy)を表示することも可能です。 ショートコードでほしいところのタイムラインを追加することができます。

このプラグインは、45以上のレイアウトを提供し、40以上のアニメーションをサポートします。 詳細とデモは WP Timelineプラグインサイトを参照してください。

Everest Timeline

WordPress 反応型のタイムラインプラグイン

Everest Timelineは反応型 WordPress タイムラインのプラグインで、50枚以上の写真のデザインされたテンプレートが提供されます。 このプラグインで縦のタイムラインのレイアウト、横タイムラインのレイアウト、ワンサイドレイアウト、 Facebook レイアウト、 Twitter レイアウトなどの形式でタイムラインを表示することができます。 各レイアウトには、様々なスタイルのオプションが提供され、カスタマイズが可能です。

このプラグインは、画像、スライダー、YouTubeのビデオ、非メオ動画、HTML、ビデオ、soundcloudなどのメディアをサポートします。 フィルタオプション、ソーシャルメディアと共有ボタン、 Facebook/Twitter フィード、ライトボックス機能も統合することができます。

ショートコードとウィジェットで使用し、クリエイティブなストーリー/イベントのタイムラインをすぐ設計することができます。 詳細情報とデモは、 Everest Timelineサイトを参照してください。

テーマに含まれている機能の使用

Avadaをはじめとするいくつかのテーマでは、ブログの記事をタイムラインに表示する機能を提供しています。 そして Avada テーマのFusion Builderに含まれているContent Boxes要素ではTimeline Verticalレイアウトを提供しています。 限定だが、タイムラインの機能を実装することができます。

最後に、

以上で WordPressタイムラインを適用する方法について簡単に説明しました。 コーディングが可能な場合は、直接ハードコーディング方式でタイムラインを実装することができますが、コーディングに慣れていない場合は、プラグインを使用して、タイムラインを追加することができます。


2のコメント

コメント

    • プラグインを使用すると、より便利にタイムラインを適用することができますが、会社の歴史のように、特定のページのみに必要な場合には、Googleで検索することができるタイムラインコードを活用してみるのもいいようです。

      応答