如何为每个WordPress自定义文章类型添加独立点击弹出表单

嘿，我来帮你搞定这个问题！你现在遇到的核心问题是所有PDF链接都用了同一个固定的弹窗ID（popmake-6981），所以不管点哪个都会打开同一个弹窗。要实现每个文章对应独立弹窗，我们可以从两个实用方向入手，下面是具体的实现方案：

方案一：为每篇文章创建独立弹窗并动态绑定触发类 #

这个方案适合你需要给不同文章设置不同弹窗布局/内容的场景：

• 首先，为每篇inde_case类型的文章创建一个独立的Popup Maker弹窗。在弹窗的「触发器」设置里，把触发类设置为popmake-case-文章ID（比如文章ID是123，就设为popmake-case-123）。
• 修改你的PDF链接代码，动态输出对应文章ID的唯一触发类：

<a class="popmake-case-<?php the_ID(); ?> case_study_pdf" href="<?php the_field('linkicon'); ?>" >PDF</a>

这样每个链接的触发类都是独一无二的，点击时就会唤起对应文章的专属弹窗。

方案二：用单个弹窗加载动态内容（更高效，无需创建多个弹窗） #

如果所有弹窗的布局都是统一的，只是内容需要对应不同文章，这个方案会更省心：

1. 创建通用弹窗：先做一个Popup Maker弹窗，在弹窗内容里添加一个自定义容器用来承载动态内容：

<div id="dynamic-pdf-container"></div>

2. 修改PDF链接代码：保留Popup Maker的触发类，同时添加自定义属性存储当前文章的PDF链接（还可以加其他自定义字段信息），再给链接加个自定义类方便绑定JS事件：

<a class="popmake-6981 case_study_pdf pdf-trigger" href="#" 
   data-pdf-url="<?php the_field('linkicon'); ?>"
   data-post-title="<?php the_title(); ?>"
>PDF</a>

3. 添加JS动态渲染内容：在主题的functions.php或者自定义JS文件里加这段代码，实现弹窗打开时加载对应文章的内容：

jQuery(document).ready(function($) {
  // 监听PDF链接点击事件
  $('.pdf-trigger').on('click', function(e) {
    e.preventDefault();
    // 获取当前文章的PDF链接和标题
    const pdfUrl = $(this).data('pdf-url');
    const postTitle = $(this).data('post-title');
    
    // 把内容渲染到弹窗容器里
    const dynamicContent = `
      <h3>${postTitle}</h3>
      <iframe src="${pdfUrl}" width="100%" height="600px" frameborder="0"></iframe>
    `;
    $('#dynamic-pdf-container').html(dynamicContent);
  });
});

这样不管点哪个链接，都会打开同一个弹窗，但弹窗里的内容会自动切换为当前点击文章的PDF和标题。

你可以根据自己的需求选择方案：如果需要每个弹窗有独立的设置，选方案一；如果只是需要动态替换内容，方案二更高效。

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