Elementor Proの動的タグの使い方

Elementor Pro『動的タグ』の使い方

Elementor Proのウィジェットの編集タブに、ときどきホットケーキの様なアイコンを見かけたことはありませんか?

こちらは『動的タグ』と言い、英語では『Dynamic Contents』(ダイナミックコンテンツ)と言います。

動的タグを簡単に説明すると、WordPressの設定や投稿などで追加した様々な情報を、Elementor上で呼び出せる機能です。

こちらの記事ではElementor Proにだけ搭載されている『動的タグ』の基本的な使い方について詳しく説明していきます。

動的タグのアイコン

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

『動的タグの使い方』を動画でご覧になりたい方はこちらからどうぞ!

動的タグを説明するためのサンプル投稿

動的タグを説明するためのサンプル投稿の編集画面
動的タグを説明するためのサンプル投稿の編集画面つづき

まずは『動的タグ』をみなさんにわかりやすく説明するためにWordPressの投稿の編集画面にて以下の内容で記事を書きました。

  • 見出し     :テスト投稿
  • カテゴリー   :ねこ
  • タグ      :くろねこ、キャット
  • アイキャッチ画像:くろねこの写真
  • 抜粋      :黒猫の記事です。
  • テンプレート  :Elementorキャンパス(※全幅でも構いません)

とし、この状態で下書きを保存しました。

『Elementorで編集』をクリック

そして、画面上部の『Elementorで編集』をクリックします。

Elementorの編集画面

するとこの様に、Elementorの編集画面になります。

※上記のWordPressのテスト投稿の内容は、以下のセクションで動的タグの操作を説明する上で使用します。

動的タグの使用例

動的タグの擬人化イラスト

例1:動的タグで見出しを呼び出す(Post Title)

見出しウィジェットを挿入

参考に、先ほどWordPressで編集した見出しを、動的タグを使ってElementorに表示させてみたいと思います。

カラムに『見出し』ウィジェットを挿入し、編集タブの『タイトル』の横の『動的タグ』をクリックします。

タイトルの動的タグ一覧・『Post Title』をクリック

するとこの様に、ボックスの中に動的タグの一覧が表示されます。
『Post Title』をクリックします。

『Post title』をクリックした後の画面表示

するとこの様にWordPressで設定した『テスト投稿』の見出しがカラムの中に表示されました。

動的タグの高度な設定(Post Title)

動的タグの高度な設定(Post Title)

『Post Title』の左側のレンチマークをクリックすると『高度な設定』というタブが表示され、その下に

  • 更新前
  • フォールバック

という項目があります。

更新前

高度な設定の更新前の説明

例えば『更新前』のセクションに『ほにゃらら』と入力すると、元の見出しの『テスト投稿』の手前に『ほにゃらら』が入り、見出しが『ほにゃららテスト投稿』となります。

『後』のセクションに『ですよ!』と入力すると、元の見出しの『テスト投稿』の後ろに『ですよ!』が表示され、見出しが『テスト投稿ですよ!』となります。

フォールバック

高度な設定のフォールバックの説明

『フォールバック』は実際に使うことはほとんど無いと思いますが、例えばWordPressの元の記事に見出しが無い状態の時に、『フォールバック』のセクションに入力をしたものが見出しとして反映されます。
※すでにWordPressの元の記事に見出しがあるものでは、こちらのフォールバックに何を入力しても何も反映されません。

例2:動的タグで日付を呼び出す(Post Date)

日付の出し方

例えば、動的タグの一覧から『Post Date』を選択すると、

動的タグの『Post Date』を選択

この様に、見出しの部分が編集している日の日付に変わります。

設定(Post Date)

『Post Date』には『設定』と『高度な設定』の両方があります。
※こちらは各オプションにより、どの様な設定内容が組み込まれているのかは異なります。

タイプ

『Post Date』の設定・タイプの説明

『Post Date』の左側のレンチマークをクリックすると、上記画面表示になります。
こちらは『設定』というタブが表示され、

  • タイプ
  • Format

の設定が可能になります。

『タイプ』では、

  • Post Published:公開された日
  • Post Modified :修正された日

の日付の設定ができます。

Format

『Post Date』の設定・Formatの説明

『フォーマット』では、

  • デフォルト
  • February 2,2021
  • 2021-02-02 (YYYY-MM-DD)
  • 02/02/2021 (MM-DD-YYYY)
  • 02/02/2021 (DD-MM-YYYY)
  • Human Readable
  • カスタム

から日付の様式を選択することができます。

高度な設定(Post Date)

『Post Date』の高度な設定について

こちらのPost Dateの『高度な設定』も、先ほどPost Titleのセクションで紹介した高度な設定と全く同じです。

基本的に動的タグの高度な設定の内容はどれも同じです。

例3:動的タグで画像を呼び出す

動的タグで画像の呼び出し方

動的タグで元のWordPressの投稿から画像を呼び出してみたいと思います。
『画像の選択』の右側に動的タグのマークがあるのでそちらをクリックします。

画像の動的タグ一覧

すると、この様に

  • アイキャッチ画像   
  • Site Logo(サイトのロゴマーク)
  • Author Profile Picture(作者のプロフィール写真)
  • User Profile Picture(使用者のプロフィール写真)

以上のオプションから選択できます。

動的タグからアイキャッチ画像を呼び出し

こちらは、上記の動的タグの選択オプションから『アイキャッチ画像』を選択した後の表示画面です。
この様に、WordPressで設定したアイキャッチ画像が動的タグの操作によりElementorに呼び出されました。

例4:動的タグで抜粋を呼び出す(Post Excerpt)

もちろん、テキストエディターにも動的タグがあります。

『Post Except』を選択した後の表示画面

こちらは動的タグの一覧から『Post Excerpt』を選択した後の表示画面です。
テキストエディターの文章が、先ほどWordPressの投稿で編集した抜粋の『黒猫の記事です。』という表示になりました。

例5:動的タグでタグ・カテゴリーを呼び出す(Post Terms)

動的タグでタグを呼び出す方法

動的タグの『Post Terms』を選択すると、先ほどWordPressで設定したタグの『キャット』と『くろねこ』が表示されました。

カテゴリーを呼び出す

動的タグでカテゴリーを呼び出す方法

何も設定していないデフォルトの状態では『タグ』が表示されましたが、カテゴリーを表示するには、こちらの『Post Terms』の編集タブの『Taxonomy』のセクションで『カテゴリー』を選択します。

カテゴリーを表示させたサンプル画面

すると、この様にカテゴリーが表示されました。

リンクを設定する

カテゴリーにリンクを貼る方法

『リンク』を『はい』にすると、カテゴリーの『ねこ』をクリックした時にそのカテゴリーページのリンクに飛ぶ様になります。
※こちらはタグの時も同様です。

動的タグ一覧の投稿に関係のないものは反映しない

動的タグ一覧の投稿に関係のないものは反映しない(例)アーカイブ

動的タグの一覧にたくさんのオプションがある中に、投稿と元のWordPress記事で設定がされていないもの、例えばArchive(アーカイブ)の何かをクリックしても、何も変化は起きません。

動的タグを使用する際はインポートするものと関係のあるオプションを選びましょう。

TOFUラボ・動的タグに関わるメンバー質問

TOFUラボ内のメンバーからの質問に

という質問がありました。

※上記のリンクにアクセスすると、その解決方法がご覧いただけます。

また、この他にもTOFUラボのメンバーによるQ&Aをまとめた『質問と回答』のページがありますので、サイト制作に迷った時の答えや、新しいヒントがもしかしたら見つかるかもしれません!

TOFUラボに入会するとサイト制作で何かしら困った時、自分で調べても限界がある時などラボ内で質問することができます。

たくさんの有識メンバーがその答えを共有してくれ、早期解決、より良いWeb制作に貢献できます!


動的タグはこの記事で紹介したもの以外にも編集タブに様々な箇所に動的タグが存在しますので、色々と試してみてください。
またこの記事では動的タグの基本的の使い方を紹介していきましたが、次の記事で動的タグの更に詳しい部分、【Elementor Pro『リンクの動的タグ』の使い方】を紹介していきます。

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

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

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

Elementorの無料ウェブサイトテンプレート
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通