プラグインElementorのelementor/document/urls/previewアクションの使用方法・解説

概要

elementor/document/urls/preview アクションは、Elementorプラグインにおいて、プレビュー用のURLを生成する際に利用されます。このアクションは、特に次のような機能を実装する際に役立ちます。

カスタムプレビューURLの生成
変更されたコンテンツの即時プレビュー
A/Bテスト用のURLの設定
プレビューページに独自のスタイルやスクリプトを追加
セクション毎のプレビュー表示のカスタマイズ
テンプレートのプレビューを特定の条件下で制御

構文

do_action( 'elementor/document/urls/preview', $document );

パラメータ

$document: プレビューされるElementorドキュメントのインスタンス。

戻り値

このアクション自体は戻り値を持ちませんが、フックされた関数から新しいURLが生成され、プレビューに利用されます。

使用可能なプラグイン/バージョン

Elementorのバージョン: 3.0以降
WordPressのバージョン: 5.0以降

この関数のアクションでの使用可能性

アクション	使用例
mu_plugin_loaded
registered_post_type
plugins_loaded
wp_roles_init
setup_theme
after_setup_theme
set_current_user
init
register_sidebar
wp_loaded
send_headers
parse_query
pre_get_posts
wp
template_redirect
get_header
wp_head

サンプルコード

サンプル1

add_action( 'elementor/document/urls/preview', function( $document ) {
    $preview_url = 'https://example.com/preview?doc=' . $document->get_id();
    // 特定の条件でカスタムURLを使用
    if ( some_condition() ) {
        $preview_url .= '&custom_param=value';
    }
    return $preview_url;
});

このサンプルコードは、特定の条件に基づいてプレビューURLをカスタマイズする方法を示しています。プレビュー用のURLにカスタムパラメータを追加しています。

サンプル2

add_action( 'elementor/document/urls/preview', function( $document ) {
    $preview_url = 'https://example.com/preview/' . $document->get_slug();
    // プレビューページに追加のスタイルを含める
    wp_enqueue_style( 'custom-preview-style', 'https://example.com/styles/preview.css' );
    return $preview_url;
});

このコードは、ドキュメントのスラッグを用いてプレビューURLを生成し、プレビューページにカスタムスタイルを追加しています。

サンプル3

add_action( 'elementor/document/urls/preview', function( $document ) {
    if ( $document->is_template() ) {
        return 'https://example.com/template-preview/' . $document->get_id();
    }
});

このサンプルでは、ドキュメントがテンプレートである場合に特定のURLを返す条件を設けています。

サンプル4

add_action( 'elementor/document/urls/preview', function( $document ) {
    $user_id = get_current_user_id();
    $preview_url = 'https://example.com/preview?doc=' . $document->get_id() . '&user=' . $user_id;
    return $preview_url;
});

このコードは、現在のユーザーIDをプレビューURLに追加する例です。これによって、ユーザーごとに異なるプレビュー体験を作成できます。

サンプル5

add_action( 'elementor/document/urls/preview', function( $document ) {
    $preview_url = 'https://example.com/preview/' . $document->get_id();
    // デバッグ用にログを記録
    error_log( 'Preview URL: ' . $preview_url );
    return $preview_url;
});

このサンプルは、生成されたプレビューURLをデバッグ目的でログに記録します。開発時に役立つ情報を提供します。

概要

構文