WordPressテーマでタイムライン表現を使うためのショートコード実装方法

タイムライン

先日、自作テーマのフォーラムに「タイムライン機能があったらいいな」というリクエストをいただきました。

で、ショートコードを用いて実装してみたら、思っていたよりは簡単に実装できました。

加えて、コピペでどんなテーマにも実装できそうだったので、カスタマイズ方法の紹介です。

こんな感じのタイムラインを作成できます。

テストタイムライン
  • 手順1
    プラグインをインストールする
    事前準備としてまずプラグインをインストールする必要があります。
  • 手順2
    プラグインでバックアップ
    バックアッププラグインをインストールしたら、ボタン押してバックアップをしましょう。
スポンサーリンク
レクタングル(大)広告

主な手順

カスタマイズに必要となる主な手順はこちら。

  1. ショートコード用のコードをfunctions.phpにコピペ
  2. タイムライン用のCSSをstyle.cssにコピペ

特に書かれている内容を気にしないのであれば、コピペ2回程度でカスタマイズできるようになっています。

ショートコード用のコードをfunctions.phpにコピペ

まずは、テーマ(子テーマ)のfunctions.phpにショートコードを動作させるためのコードをコピペします。

サンプルなので、ショートコードオプション用のサニタイズ処理などは行っていません。

タイムライン用のCSSをstyle.cssにコピペ

次は、タイムラインショートコードが出力するHTMLの装飾です。

以下のCSSをテーマ(子テーマ)のstyle.cssにコピペしてください。

テーマのスタイルによっては、装飾がずれる可能性があるので、テーマごとに調整してください。上記コードは、WordPress公式テーマTwenty
Seventeenで動作確認しています。

全てのテーマで動作する保証はできません。

動作確認

タイムラインショートコードを動作確認するとこんな感じで表示されます。

これまでの経歴(※フィクションです)
  • 2016年3月
    不祥事により会社を退職
    取引先の社長の頭をひっぱたいてしまい会社をクビに。
  • 2016年4月
    就職活動
    就職活動を行うも、前の会社での行いが知れ渡っており、同業者は全て門前払い。
  • 2016年8月
    就職を諦め無職へ
    完全にやる気が無くなり無職へジョブチェンジ。毎日オンラインゲームざんまいの濃密な日々を過ごす。
  • 2017年8月
    サイト運営を開始
    貯金を使い果たしそうになり「何とかせねば!」と〇〇というサイトを開始。
  • 2018年8月
    サイト運営1年経過
    毎日記事を書き続けた結果、月収〇〇円に。節約すれば何とか生活できる収入に到達。

モバイルではこんな感じで表示されます。

タイムラインのモバイル表示

ショートコード例はこちら。

参考

このタイムラインのデザインはWebクリエイターボックスを運営されているManaさんが作成されたCodePenのものを参考に、モバイル用のスタイルを加えさせていただきました。

Responsive timeline Create a Vertical Timeline Using CSS | Web Creator Box 日本語

まとめ

今回のタイムラインショートコードは、「順番を扱う内容」、「時系列を扱う内容」のコンテンツを作成する際に、内容分かりやすく装飾してくれるかと思います。

そんなわけで、「手順や時系列を出来る限りわかりやすく表現したい」なんて場合に良い表現方法になるかと思います。