Elementor Pro Singleウィジェット『Post Info』の使い方

巷のブログの記事のタイトルの下などによく、小さい字で著者名や日付、投稿時間やカテゴリー名などが書かれているのを目にしたことがあるのではないでしょうか。
Elementor Pro・テーマビルダーのSingle PostまたはSingle Pageの9つの特有なウィジェット『SINGLE』の中の1つ、『Post Info』ウィジェットでそれらの情報をカスタムし、それぞれのページに自動で設定した情報を表示させることができます。
この記事では『Post Info』ウィジェットの使い方を詳しく説明していきます。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

Post Infoウィジェットの挿入

Post Infoウィジェットの挿入

『Post Info』ウィジェットをドラッグ&ドロップでカラムに挿入します。

Post Infoウィジェットの挿入後の表示画面

こちらは『Post Info』ウィジェット挿入後の表示画面です。

ウィジェット内には

  • Author:著者名
  • Date:日付
  • Term:投稿時間
  • Comments:コメントの数

の情報がデフォルトで入っています。

サンプル表示を見やすくするため、スタイルタブと高度な設定で一部編集後の表示画面

デフォルトのアイコンや文字の大きさが小さく見えづらいので、こちらのサンプルではあらかじめ

  • スタイルタブ:アイコンサイズ、書体サイズ
  • 高度な設定:マージンの高さ

の変更を行なっています。

コンテンツタブ・レイアウト

コンテンツタブの編集

『レイアウト』は著者名や日付などの情報を横並びに配置するか、縦に箇条書きに配置するかの選択です。

インライン

レイアウト・インライン

『インライン』は、上記画面表示のように全ての情報が一列に横並びに表示されます。
※こちらはデフォルトの設定です。

デフォルト

レイアウト・デフォルト

『デフォルト』では『Post Info』の全ての情報が上記画面のように箇条書きで表示されます。
※こちらの名称は『デフォルト』ですがなぜかデフォルトには設定されていません。

Post Infoのタイプ(デフォルト含む)

項目一覧

『Post Info』のタイプはデフォルトを含む以下の6つです。

  • Author:著者名
  • Date:日付
  • Time:投稿時間
  • Comments:コメント数
  • Terms:カテゴリーやタグ
  • Custom:カスタム

項目を新しく追加したい時はタブの一番下の『+項目を追加』をクリックします。

タイプの変更

タイプの変更の仕方

各タイプを選択・変更するには、

  1. 項目部分をクリックします。
    するとその項目の編集ボックスが開きます。
  2. タイプの右側の『▼』をクリックします。
    すると上記画面のように各タイプ一覧のボックスが表示されるのでそこからタイプを選択します。

項目を複製する

項目を複製


項目を複製するには、×ボタンの左側のアイコンをクリックします。

複製後の表示画面

すると上記画面のように複製をクリックした項目と同じものが複製され、その下に追加されます。

項目を削除する

項目の削除

項目を削除したい時は、削除したい項目の右の『×』ボタンをクリックします。

コンテンツタブ・Author

Authorの編集

『前』の説明

『前』のテキストバーに入力したものが、名前の手前に表示されます。

Avatar

『Avatar』の説明

『Avatar』は名前の手前にくるプロフィール画像のことを指します。
デフォルトではAvatarは『いいえ』に選択されており、デフォルトのアイコンの表示になっています。

Avatarを『はい』にした時の変化

『Avatar』を『はい』にするとプロフィールで設定をした画像が表示されます。
『プロフィール』とはどこの部分かは以下で説明します。

『ユーザー』の『プロフィール』画面

こちらはダッシュボードの『ユーザー』の中の『プロフィール』の表示画面です。
Post Infoの情報の多くはここで設定されたものが反映しています。

Avatarのサイズ変更

Avatarを『はい』にした時に、『サイズ』のカーソルを横にスライドすることによりAvatarを大きくしたり小さくすることが可能です。
こちらはサイズの値を『80』にした時の表示画面です。
※デフォルトの値は『40』辺りに設定されています。

リンク

リンクの説明

『リンク』はデフォルトでは『はい』になっています。
このリンクというのは、この編集画面上では何も起きませんのでプレビュー画面にて検証したいと思います。

プレビュー画面

上記はプレビュー画面です。
ここで著者名の『NEOMI』をクリックすると、

リンククリック後の画面表示

この様に、この著者のプロフィールとこの著者の記事がすべて表示されます。

アイコン

『アイコン』の説明

『アイコン』では、以下の3つのオプションがあり、

  • なし:アイコンの表示がなくなります。
  • デフォルト:上記の画面に表示されているものがデフォルトのアイコンです。
  • カスタム:SVGをアップロード、またはアイコンライブラリーから好きなアイコンに変更できます。
アイコン変更後の表示画面

こちらはアイコンライブラリーからアイコンを選択・挿入した後の表示画面です。

コンテンツタブ・Date

『Date』の編集

Date Format

『Date Format』の説明

『Date Format』では、日付の表示形式を変更することができます。
以下の6つのオプションから選択が可能です。 
※上記画面はデフォルトの表示画面です。

  • March 6,2018 (Fj.Y)
  • 2018-03-06(Y-m-d)
  • 03/06/2018(m/d/Y)
  • 06/03/2018(d/m/Y)
  • Default(デフォルト)
  • カスタム

『前』の説明

『前』のテキストバーに入力した文字が、日付の手前に反映します。

リンク

『リンク』の説明

『リンク』はデフォルトでは『はい』に設定されています。

プレビュー画面

こちらはプレビュー画面です。
『日付』部分をクリックすると、

リンクをクリックした後の表示画面

この様に表示されている日付と同日に投稿された記事が一覧になり表示されます。

アイコン

表示されているアイコンはデフォルトのアイコンですが、『アイコン』でSVGのアイコンをアップロードまたはアイコンライブラリーから選択で変更、または非表示にすることができます。
一つ前のセクションの『Authorの編集・アイコン』で詳しく説明していますのでそちらをご覧ください。

コンテンツタブ・Time

Timeの編集

Time Format

『Time Format』の説明

『Time Format』では投稿時間の表示形式が以下の5つのオプションから選択ができます。

  • 3:31 pm (g:i a)
  • 3:31 PM (g:i a)
  • 15:31 (H:1)
  • Default
  • カスタム

『前』はテキストバーに入力した文字が、日付の手前側に表示されます。
Authorの編集・前』のセクションで詳しく説明していますので、そちらを参考にしてください。

アイコン

表示されているアイコンはデフォルトのアイコンですが、『アイコン』でSVGのアイコンをアップロードまたはアイコンライブラリーから選択で変更、または非表示にすることができます。
こちらに関しては、『Authorの編集・アイコン』で詳しく説明していますのでそちらをご覧ください。

コンテンツタブ・Comments

Commentsの説明

『前』はテキストバーに入力した文字が、日付の手前側に表示されます。
Authorの編集・前』のセクションで詳しく説明していますので、そちらを参考にしてください。

Custom Format

『Custom Format』の説明

『Custon Fromat』はデフォルトでは『いいえ』に設定されています。

『Custom Format』を『はい』にした時

『Custom Format』を『はい』にするとエディターに以下が追加されます。

  • No Comments
  • One Comment
  • コメント

No Comments

 No Commentsの説明

例えばデフォルトではコメントがまだない時は『No Comments』と表示されますが、テキストバーに入力をすれば上記サンプルの様に『コメントなし』等好きな言葉に変更することが可能です。

One Comment

『One Comment』は記事にコメントが一件ついた時の表示の設定です。

コメントが1件ついた時の実際の記事の表示画面

こちらは記事に実際にコメントが1つついた時の表示画面です。

実際にコメントが一件ついた時のPost Info編集画面の表示

記事にコ、メントが1件付くとデフォルトでは『One Comment』と表示されますが、上記画面の様に『コメントあり』などと好きな言葉にカスタムすることもできます。

コメント

『コメント』は記事に2つ以上コメントがついた時の表示設定です。

コメントが2件ついた時の実際の記事の表示画面

こちらは実際の記事にコメントが2件ついた時の表示画面です。

コメントが2件ついた時のPost Infoの表示画面(デフォルト)

『コメント』のデフォルトは『〜Comments』と表示されます。
記事にコメントが2件ついているので編集画面でもそれが反映し、『2 Comments』と表示されています。

コメントの表示をカスタムする方法

この欄を例えば『○件のコメント』とカスタムしたいとします。
その場合は、テキストバーへの入力を『 %s件のコメント』という様に、数字に当たる部分を『%s』に変換します。
するとコメントの件数に応じて数字部分が変化する様に自動設定されます。

リンク

『リンク』の説明

『リンク』はデフォルトでは『はい』に設定されています。

プレビュー画面でリンクをクリック

上記画面はプレビューの画面です。
『コメントなし』と書いてある部分をクリックすると、

リンクをクリックした後の表示画面

その記事のコメント欄がある部分までジャンプします。
尚、その記事とはPreview Settingsで編集中のプレビューとして表示される投稿ページのことです。
『Previwe Settings』については『Elementor Pro テーマビルダーで投稿ページのレイアウトの作り方』の記事の『編集で使用する記事を変更する方法』のセクションにて詳しく説明をしていますのでそちらを参考にしてください。

アイコン

表示されているアイコンはデフォルトのアイコンですが、『アイコン』でSVGのアイコンをアップロードまたはアイコンライブラリーから選択で変更、または非表示にすることができます。
こちらに関しては、『Authorの編集・アイコン』で詳しく説明していますのでそちらをご覧ください。

コンテンツタブ・Terms

Termsの編集

Taxonomy

『Taxconomy』の選択

『Choose』の右側の▼をクリックすると

  • カテゴリー
  • タグ
  • フォーマット

という一覧が表示されます。

カテゴリー

Taxonomyを『カテゴリー』にした時の表示画面

Taxonomyを『カテゴリー』を選択すると、Preview Settingsで設定されている記事のカテゴリー名『ねこ』が編集画面に反映されました。

タグ

Taxonomyを『タグ』にした時の表示画面

Taxonomyを『タグ』に設定すると、Preview Settingsで設定されている記事のタグ名『チキトシ』が編集画面に反映されました。

フォーマット

Taxonomyを『フォーマット』にした時

『Taxonomy』を『フォーマット』で設定するとどの様になるかというと、ここはWordPressエディターの『投稿フォーマット』の設定次第で変わります。

WordPressエディターの『投稿』にある『投稿フォーマット』

こちらはWordPressの編集画面です。
画面右側の『投稿』の欄の『投稿フォーマット』が『標準』に設定されていると、Taxonomyをフォーマットに変えても何も反映されません。
投稿フォーマットが『標準』以外のものに設定されている場合、テーマビルダー『Post Info』のエデイターに『フォーマット』が反映されます。

投稿フォーマットを『リンク』に設定した時のTaxonomy『フォーマット』の表示画面

こちらは投稿フォーマットを『リンク』に設定した時のPost Infoの表示画面です。
編集画面に『リンク』が反映されました。

『前』はテキストバーに入力した文字が、日付の手前側に表示されます。
Authorの編集・前』のセクションで詳しく説明していますので、そちらを参考にしてください。

リンク

『リンク』の説明

『リンク』はデフォルトでは『はい』に設定されています。

プレビュー画面でリンクをクリック

こちらは『プレビュー』の画面です。
『Terms』が『チキトシ』と表示されているのはTaxonomyの設定を『タグ』にしているからです。
『チキトシ』をクリックすると、

リンクをクリックした後の表示画面

この様に『チキトシ』のタグがついた全ての記事一覧が表示されます。

アイコン

表示されているアイコンはデフォルトのアイコンですが、『アイコン』でSVGのアイコンをアップロードまたはアイコンライブラリーから選択で変更、または非表示にすることができます。
こちらに関しては、『Authorの編集・アイコン』で詳しく説明していますのでそちらをご覧ください。

カテゴリーもタグも両方表示させたい時

Termsを2つ設置し、それぞれのTaxonomyをカテゴリーとタグ別々に設定

Post Infoにカテゴリーもタグも両方表示させたい時は、『Terms』の項目を2つ設置し、それぞれの『Taxonomy』の設定を『カテゴリー』と『タグ』で設定すれば、画面上に両方載せることができます。

コンテンツタブ・Custom

Customの編集

『カスタム』は文字通り自分で項目をカスタムすることができます。

カスタム

『カスタム』での動的タグ使用例

例えば『動的タグ』を使用してみましょう。

動的タグの『Author Info』を挿入

動的タグの『Author Info』を選択すると、

Author Info挿入後の表示画面

上記画面の様に『ユーザー』の『プロフィール』に記載されている『プロフィール情報』がPost Infoのエディターに反映されました。

『動的タグ』について詳しく知りたい方は
Elementor Pro『動的タグ』の使い方】または
Elementor Pro『リンクの動的タグ』の使い方】の記事をご覧ください。


『カスタム』を手動入力

『カスタム』の下のテキストバーに例えば『NEOMIのWebサイト』と入力すると、Post Infoにその名称が反映されます。
ですがこの状態では文字が表示されているだけで、プレビューなどでクリックをしても何も起きません。
その場合は『カスタムURL』にてリンクを貼り付ける必要があります。

カスタムURL

『カスタムURL』の設定

例えば上記画面の様に『カスタムURL』で特定のURLを入力すると、『NEOMIのWebサイト』をクリックした時にその設定をしたリンクに飛ぶ様になります。

リンク

こちらに関しては、Customで何を設定するかによってプレビューも異なるため、説明は割愛いたします。

アイコン

表示されているアイコンはデフォルトのアイコンですが、『アイコン』でSVGのアイコンをアップロードまたはアイコンライブラリーから選択で変更、または非表示にすることができます。
こちらに関しては、『Authorの編集・アイコン』で詳しく説明していますのでそちらをご覧ください。

スタイルタブ・一覧

スタイルタブ・一覧

スペースの間隔

スペースの間隔の説明

『スペースの間隔』では、項目と項目の間のスペースをカーソルのスライドにより広げたり狭めたりすることができます。

スペースの間隔を最大値にした時の表示画面

配置

配置を中央寄りにした時の表示画面

こちらは『配置』を『中央』にした時の表示画面です。
※デフォルトは『左』に設定されています。

配置を右寄りにした時の表示画面

こちらは『配置』を『右』に設定した時の表示画面です。

区切り線

区切り線の説明

『区切り線』はデフォルトでは『いいえ』になっています。

区切り線を『オン』にした時

『区切り線』を『はい』にすると、上記画面の様に区切り線のエディターがタブ内に出てきます。
『区切り線』を『はい』にすると区切り線はすでに画面に表示されているのですが色と太さの兼ね合いでほとんど見えませんので、次のセクションでまず色の変更から説明します。

区切り線・色の変更

『色』ではカラーピッカーより自由に区切り線の色の変更ができます。

太さ

区切り線・太さの変更

『太さ』ではカーソルを右にスライドすることにより区切り線の太さを変更できます。
※デフォルトの値は『1』に設定されています。

高さ

区切り線・高さの変更

『高さ』では、区切り線の高さをカーソルの左スライドにより低く設定することができます。
※デフォルトの高さの値は『100』に設定されています。

スタイル

区切り線・スタイルの説明

『スタイル』のオプションは全部で4つあります。

  • 直線(デフォルト)
  • 二重線
  • 点線
  • 破線
区切り線・二重線

こちらは『二重線』にした時の表示画面です。

区切り線・点線

こちらは『点線』にした時の表示画面です。

区切り線・破線

こちらは『破線』にした時の表示画面です。

スタイルタブ・アイコン

スタイルタブ・アイコン

アイコン・色の変更

『色』ではアイコンの色をカラーピッカーより自由に変更ができます。
※ここでアイコンそれぞれの色をバラバラに設定することはできません。

サイズ

アイコン・サイズの変更

『サイズ』では、アイコンのサイズをカーソルを左右にスライドすることにより大きくしたり小さくすることができます。

スタイルタブ・テキスト

スタイルタブ・テキスト

Indent

テキスト・Indentの説明


『Indent』では、カーソルを左右にスライドすることによりアイコンと文字の間のスペースを広げたり狭めたりすることができます。

Indentの値を変更した時の表示画面

こちらはIndentの値を『40』にした時の表示画面です。

文字色

『文字色』ではカラーピッカーから自由に文字色の変更ができます。

書体

書体・タイポグラフィ

『書体』では書体の右側のペンマークをクリックすると上記画面の様に『タイポグラフィ』が表示されますので、自由にフォントや文字の大きさなどの変更ができます。
詳しい説明についてはここでは割愛いたします。


『Post Info』を設定しておけば、誰が、いつ、どのカテゴリー等に属する記事なのか、コメントの有無など、一目で分かるため閲覧者にも、サイト管理者にとってもとても便利なツールですね。
また『Author』の編集次第でアイコンではなく『プロフィール写真』に変更できたり、『カスタム』の『動的タグ』でAuthor Infoなどを呼び寄せれば、『Author Box』ウィジェットを設置しなくても、この『Post Info』ウィジェットで情報が賄えてしまいます。
また『動的タグ』はWordPressで設定をした情報をElementorの編集画面に呼び寄せることができるElementor Pro特有のとても便利な機能です。
『動的タグ』について詳しく知りたい方は、【Elementor Pro『動的タグ』の使い方】、【Elementor Pro『リンクの動的タグ』の使い方】の記事をご覧ください!
ぜひ、サイトの運営に『Post Info』ウィジェットを活用してみてはいかがでしょうか?

コード書かないウェブ制作を学べるサロン『TOFUラボ』

目次

コメントを残す

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

そのElementorの質問
実際に使ってる人に聞いてみませんか?

TOFUラボはElementorを使う人が集まるサロンです。
メンバーは170人を超えます。