ElementorのDynamic Tags（動的タグ）の使い方｜設定手順と自作タグの登録

Elementor の Dynamic Tags（動的タグ） は、ウィジェットの入力欄に固定の文字や画像の代わりに「表示中の投稿のタイトル」「アイキャッチ画像」「カスタムフィールドの値」などを差し込む機能です。投稿のテンプレートを1つ作れば、どの投稿を開いてもその投稿の内容が表示されるため、テーマビルダーで投稿ページやアーカイブページのテンプレートを作るときに使います。

この記事では、Dynamic Tags の入れ方と設定、主なタグの種類、使うときの注意、PHP で自分のタグを追加する方法を説明します（2026年10月時点の Elementor の公式ヘルプと開発者向けドキュメントに基づきます）。

使うには Elementor Pro が必要

Elementor の公式ヘルプでは、Dynamic Tags は Elementor Pro の機能とされています。無料版の Elementor だけでは、入力欄に Dynamic Tags を設定できません。開発者向けドキュメントでも、無料版は動的タグを使える状態にしていないと説明されています。

この記事の手順は、Elementor と Elementor Pro の両方が有効になっている前提です。

Dynamic Tags を入れる手順

ここでは、投稿用のテンプレートで「見出し」ウィジェットに投稿のタイトルを出す例で説明します。

1. Elementor の編集画面を開き、「見出し」（Heading）ウィジェットを配置します。
2. 左のパネルで、タイトルの入力欄にマウスを重ねます。入力欄の右上に Dynamic Tags のアイコンが表示されるので、クリックします。
3. 一覧から「Post Title」を選びます。入力欄が、選んだタグの名前の表示に変わります。
4. 入力欄に表示されたタグ名をクリックすると、そのタグの設定が開きます。

一覧に出てくるのは、その入力欄で使えるタグだけです。たとえば画像の入力欄では画像を返すタグ、リンクの入力欄では URL を返すタグが表示されます。

Before・After・Fallback の設定

多くのタグには、設定の「Advanced」に次の3つの項目があります。

Before と After は、タグの値が空でないときだけ付きます。値が空のときは、Before と After は付かず、Fallback に入れた文字が表示されます。カスタムフィールドが入力されていない投稿でも見た目が崩れないよう、Fallback を設定しておくと便利です。

主なタグの種類

Elementor Pro のタグは、グループごとにまとめて表示されます。公式ヘルプに載っている主なものは次のとおりです。

WooCommerce を使っている場合は商品の価格や在庫などのタグ、ACF などのカスタムフィールド用プラグインを使っている場合はその値を出すタグも、一覧に追加されます。

使うときの注意

• テンプレートのプレビュー: テーマビルダーのテンプレートを編集しているときは、どの投稿の値で表示を確かめるかによって見え方が変わります。テンプレートの設定で、プレビューに使う投稿を指定してから確認します。
• ページキャッシュ: 公式ヘルプでも、Post Time などの値はキャッシュの影響を受けることがあると書かれています。Current Date Time のような時刻、Request Parameter のような URL ごとの値、User Info のような閲覧者ごとの値は、ページキャッシュを使っていると古い値や別の人向けの値が表示されることがあります。閲覧者ごとに変わる値は、キャッシュの対象外にしたページで使います。
• Elementor のバージョン: 新しいエディター（Editor V4）では、Dynamic Tags の画面が従来と異なることがあります。使っている画面に合わせて、公式ヘルプの該当ページも確認してください。

自分の Dynamic Tag を PHP で登録する

既存のタグにない値を出したい場合は、プラグインとして独自のタグを登録できます。ここでは、サイトのオプション mysite_business_hours に保存した営業時間を出すタグを作ります。

フォルダー wp-content/plugins/mysite-dynamic-tags/ を作り、次の2つのファイルを置きます。まずプラグインの本体です。

<?php
/**
 * Plugin Name: My Site Dynamic Tags
 * Description: 営業時間を表示する Elementor の Dynamic Tag を追加する。
 * Requires Plugins: elementor
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

add_action( 'elementor/dynamic_tags/register', 'mysite_register_dynamic_tags' );

function mysite_register_dynamic_tags( $dynamic_tags_manager ) {
	// 独自のグループを作る（一覧での見出しになる）
	$dynamic_tags_manager->register_group(
		'mysite',
		array(
			'title' => esc_html__( 'My Site', 'mysite' ),
		)
	);

	require_once __DIR__ . '/class-mysite-business-hours-tag.php';
	$dynamic_tags_manager->register( new \Mysite_Business_Hours_Tag() );
}

次に、タグのクラスを class-mysite-business-hours-tag.php として置きます。

<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

class Mysite_Business_Hours_Tag extends \Elementor\Core\DynamicTags\Tag {

	// タグの内部名（他と重ならない名前にする）
	public function get_name() {
		return 'mysite-business-hours';
	}

	// 一覧に表示する名前
	public function get_title() {
		return esc_html__( '営業時間', 'mysite' );
	}

	// 表示するグループ
	public function get_group() {
		return array( 'mysite' );
	}

	// どの種類の入力欄で使えるか（ここでは文字の入力欄）
	public function get_categories() {
		return array( \Elementor\Modules\DynamicTags\Module::TEXT_CATEGORY );
	}

	// 実際に出力する値
	public function render() {
		echo esc_html( get_option( 'mysite_business_hours', '' ) );
	}
}

• get_group() は一覧のどこに表示するか、get_categories() はどの入力欄で選べるかを決めます。カテゴリーには、文字用の TEXT_CATEGORY のほか、URL_CATEGORY、IMAGE_CATEGORY、NUMBER_CATEGORY などがあります。
• Elementor Pro が用意しているグループ（post、site など）にタグを入れることもできますが、その場合は Elementor Pro が有効かどうかを先に確かめるよう、開発者向けドキュメントで案内されています。ここでは独自のグループを作って避けています。
• 出力する値は esc_html() などでエスケープします。

プラグインを有効にしたら、営業時間の値を保存します。WP-CLI が使える場合は次のように設定できます。

wp option update mysite_business_hours "平日 10:00〜18:00"

Elementor の編集画面で文字の入力欄の Dynamic Tags を開くと、「My Site」グループに「営業時間」が表示されます。

まとめ

• Dynamic Tags は Elementor Pro の機能で、入力欄の右上のアイコンから投稿・サイト・画像などの値を差し込む
• タグの設定の Before・After は値があるときだけ付き、値が空なら Fallback が表示される
• 時刻や閲覧者ごとの値は、ページキャッシュで古い値や他人の値が出ることがある
• 独自のタグは elementor/dynamic_tags/register で登録し、\Elementor\Core\DynamicTags\Tag を継承したクラスで render() を書く

関連記事:

• Elementorのエラーを直す方法
• ElementorのJavaScript APIの使い方
• Elementorのレイアウト設定