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

2024年2月27日
2021年2月5日
Elementorの使い方
Elementor Pro, 動的タグ

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

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

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

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

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

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

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

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

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

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

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

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

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

動的タグの使用例

例１：動的タグで見出しを呼び出す（Post Title)

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

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

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

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

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

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

更新前
後
フォールバック

という項目があります。

更新前

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

後

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

フォールバック

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