Elementor问题：点击文章网格模板打开含动态内容弹窗异常

问题本质 #

弹窗显示当前页面内容是因为没把点击的文章ID传给弹窗动态模块，Elementor默认读取了当前页数据；页面刷新是因为网格项的默认链接触发了浏览器跳转。

具体修复步骤 #

1. 阻止页面刷新 #

• 编辑动态文章网格的单个项，把链接类型改成自定义URL，填入#（空锚点）。
• 或者用JS阻止跳转：给网格项的链接加自定义类popup-trigger，然后在页面底部（Elementor自定义HTML模块/主题JS文件）加这段代码：

document.querySelectorAll('.popup-trigger').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    const postId = this.getAttribute('data-post-id');
    elementorProFrontend.modules.popup.showPopup({ id: 你的弹窗ID }, { postId: postId });
  });
});

注：把你的弹窗ID换成弹窗编辑页URL里的数字ID，比如URL里post=123的123就是ID

2. 给网格项标记文章ID #

编辑网格项的链接，在自定义属性里加data-post-id，值选Elementor动态标签里的文章ID。

3. 配置弹窗动态内容 #

• 编辑弹窗，把里面的动态模块（文本、ACF字段）的文章数据源改成自定义上下文，接收JS传递的postId。
• 要是ACF字段无法直接读取，给主题functions.php加这段代码：

function get_acf_by_post_id($atts) {
  extract(shortcode_atts([
    'field' => '',
    'id' => ''
  ], $atts));
  return get_field($field, $id);
}
add_shortcode('acf_post', 'get_acf_by_post_id');

然后在弹窗里用短代码[acf_post field="你的ACF字段名" id="{{postId}}"]调用对应字段。

4. 测试验证 #

保存所有设置后预览，点击网格项应该不会刷新页面，弹窗里能显示对应文章的内容和ACF字段。

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