如何在Elementor按钮链接中追加WordPress页面标题作为UTM参数？

当然可行，以下是几种实用的实现方式：

方法1：Elementor Pro动态标签（最简单） #

如果你使用Elementor Pro版，直接用动态标签就能快速实现：

• 打开Elementor编辑器，选中目标按钮
• 在「链接」输入框中先输入基础地址：https://test.com/apply?utm_source=
• 点击输入框右侧的动态标签图标（小闪电），选择「页面」→「页面标题」
• 保存并更新页面，前端加载时会自动将当前页面标题填充到utm_source参数中

方法2：WordPress钩子函数（免费版适用） #

如果用的是Elementor免费版，可通过主题的functions.php添加钩子来修改按钮链接：

add_filter( 'elementor/frontend/button/link', function( $url, $button ) {
    // 仅匹配目标链接的按钮，避免影响其他按钮
    if ( strpos( $url, 'https://test.com/apply' ) !== false ) {
        // 将页面标题转换为URL友好格式（空格转连字符、小写）
        $page_slug = sanitize_title( get_the_title() );
        // 安全拼接UTM参数
        $url = add_query_arg( 'utm_source', $page_slug, $url );
    }
    return $url;
}, 10, 2 );

代码说明：

• elementor/frontend/button/link钩子专门用于修改Elementor按钮的前端输出链接
• sanitize_title处理后的标题更适合作为UTM参数（比如「首页」会变成shou-ye，「FAQ页面」变成faq-ye-mian）
• add_query_arg会自动处理链接已有参数的情况（比如原链接带其他参数时，会用&拼接新参数）

方法3：自定义HTML模块（高度灵活） #

如果需要完全自定义按钮结构，可替换原按钮为Elementor的「自定义HTML」模块：

<a href="https://test.com/apply?utm_source=<?php echo sanitize_title( get_the_title() ); ?>" rel="nofollow noreferrer" class="elementor-button elementor-size-sm">
    <span class="elementor-button-content-wrapper">
        <span class="elementor-button-text">你的按钮文字</span>
    </span>
</a>

注意事项：

• 需要确保你的WordPress环境允许在Elementor中执行PHP，可通过插件（如「Insert PHP Code Snippet」）开启该功能
• 复制原Elementor按钮的CSS类（比如elementor-button elementor-size-sm），让自定义按钮和原按钮样式保持一致

内容的提问来源于stack exchange，提问作者jamesoz10