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

FacebookさえずりredditPinterestのLinkedInのmail

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

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

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

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

2018

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

  • 01月に将来の技術別途法人ネイバー・ラボラトリーズ(株)設立
  • 05月ネイバーウェプトゥン(株)は、別途法人設立
2016

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

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

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

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

Timeline Express

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

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

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

Cool Timeline Pro

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

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

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

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

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

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

WP Timeline

ワードプレスの反応型のタイムラインプラグイン

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

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

Everest Timeline

ワードプレスの反応型のタイムラインプラグイン

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

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

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

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

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

おわりに

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



2のコメント

  1. 面白い機能ですね。 テンプレートが提供されると、慣れていない人も、より簡単にアクセスすることができますね。

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

      応答