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

概要

elementor/template/viewport_tagアクションは、Elementorのテンプレートがレンダリングされる際に、カスタムビューポートメタタグを追加するために使用されます。このフックを利用することで、特定の条件に基づいてHTMLの<meta>タグを変更したり、追加したりすることが可能です。

このアクションを使用することで実装できる機能は以下の通りです：

レスポンシブデザインのためのビューポート設定のカスタマイズ。
特定のページまたはテンプレートにのみ適用されるカスタムメタデータの追加。
SEOやSNSのメタ情報をテンプレートに動的に追加。
外部リソースの読み込みを制御するためのカスタムタグの挿入。
ABテストのためのカスタムメタタグ生成。
ユーザーエクスペリエンスを向上させるための特定条件下での設定変更。

構文

do_action( 'elementor/template/viewport_tag' );

パラメータ

このアクションにはパラメータはありません。

戻り値

このアクションは値を返しません。主に副作用としてHTMLが生成されます。

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

Elementor: version 3.0 以上
WordPress: version 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/template/viewport_tag', function() {
    echo '<meta name="viewport" content="width=device-width, initial-scale=1.0">';
});

このコードは、全てのElementorテンプレートページにレスポンシブデザインを実現するためのビューポートメタタグを追加します。

サンプルコード2

add_action( 'elementor/template/viewport_tag', function() {
    if ( is_page( 'custom-page' ) ) {
        echo '<meta name="viewport" content="width=device-width, initial-scale=1.2">';
    }
});

特定のページ（この場合は「custom-page」）にだけ、異なるビューポートメタタグを適用しています。

サンプルコード3

add_action( 'elementor/template/viewport_tag', function() {
    echo '<meta property="og:type" content="website" />';
});

Open Graphプロトコルを使用して、ページの種類を定義するためのメタタグを追加します。

サンプルコード4

add_action( 'elementor/template/viewport_tag', function() {
    if ( is_singular('post') ) {
        echo '<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">';
    }
});

特定の投稿タイプ（ここでは「post」）に対して、ビューポートを調整したメタタグを追加します。

サンプルコード5

add_action( 'elementor/template/viewport_tag', function() {
    echo '<meta name="theme-color" content="#ffffff">';
});

このコードは、ブラウザのテーマカラーを設定するためのメタタグを追加します。このタグはモバイルデバイスやブラウザにおける表示に影響します。

概要

構文