如何通过jQuery在指定div后插入WordPress短代码？

开发者阿泽

2026-5-28

在指定Div后添加WordPress短代码的问题解决

问题背景

我尝试在页面某个指定div后插入包含WordPress短代码的内容，写了如下代码：

if ($('.w2dc-field-output-block-categories .w2dc-label-primary a:contains("Analytics")').length > 0) { 
  $( '<div class="relatedConsultants"><?php echo do_shortcode('[webdirectory-listings category="105" directory="1" perpage="3" listings_view_grid_columns="3" listings_view_type="grid"]'); ?></div>').insertAfter( ".w2dc-field-output-block-categories" ); 
}

逻辑是当页面底部分类区域存在“Analytics”分类时，插入对应的短代码内容，但现在控制台报Invalid or unexpected token错误，移除PHP部分后jQuery能正常运行，想知道怎么让短代码生效？

问题根源

你遇到的核心问题是服务器端PHP代码和客户端JavaScript的执行顺序及语法冲突：

PHP是服务器端先执行的，而JavaScript是页面加载后在浏览器端执行的，你现在把PHP代码直接写在JS字符串里，浏览器会把它当成JS的一部分解析，自然会出现语法错误。
另外，JS字符串里的单引号和短代码里的单引号也产生了嵌套冲突，这也是报错的直接原因。

解决方法

方法1：提前用PHP渲染短代码内容（最简单直接）

先在服务器端把短代码解析成HTML，再把这个HTML内容传给JavaScript使用：

<?php
// 服务器端先解析短代码，得到最终的HTML内容
$related_consultants = do_shortcode('[webdirectory-listings category="105" directory="1" perpage="3" listings_view_grid_columns="3" listings_view_type="grid"]');
?>

<script>
// 用json_encode确保HTML里的特殊字符不会破坏JS字符串结构
const consultantsContent = <?php echo json_encode($related_consultants); ?>;

// 原来的判断逻辑不变，直接插入预渲染好的内容
if ($('.w2dc-field-output-block-categories .w2dc-label-primary a:contains("Analytics")').length > 0) { 
  $( `<div class="relatedConsultants">${consultantsContent}</div>` ).insertAfter( ".w2dc-field-output-block-categories" ); 
}
</script>

注意：这段代码必须放在PHP文件中（比如主题的footer.php、自定义模板文件），不能放在单独的.js文件里，否则PHP代码不会被解析。

方法2：AJAX动态加载（适合动态场景）

如果需要更灵活的加载逻辑（比如短代码内容需要根据前端动态参数生成），可以用WordPress的AJAX机制：

在主题的functions.php中添加AJAX处理函数：

// 登录用户和未登录用户都能调用的AJAX接口
add_action('wp_ajax_get_related_consultants', 'render_related_consultants');
add_action('wp_ajax_nopriv_get_related_consultants', 'render_related_consultants');

function render_related_consultants() {
  // 解析短代码并返回
  $html_content = do_shortcode('[webdirectory-listings category="105" directory="1" perpage="3" listings_view_grid_columns="3" listings_view_type="grid"]');
  wp_send_json_success($html_content);
}

前端JavaScript发起AJAX请求：

if ($('.w2dc-field-output-block-categories .w2dc-label-primary a:contains("Analytics")').length > 0) { 
  $.ajax({
    url: '<?php echo admin_url('admin-ajax.php'); ?>',
    method: 'POST',
    data: {
      action: 'get_related_consultants' // 和PHP里的action名称对应
    },
    success: function(res) {
      if (res.success) {
        $( `<div class="relatedConsultants">${res.data}</div>` ).insertAfter( ".w2dc-field-output-block-categories" );
      }
    }
  });
}

这种方法的好处是可以在需要的时候才加载内容，减轻页面初始加载压力，也支持传递动态参数给PHP端调整短代码的输出。

额外提示

如果你的JS代码是放在单独的.js文件中，不能直接写PHP代码，这时候可以用wp_localize_script把PHP变量传给JS：

wp_enqueue_script('your-custom-script', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true);
wp_localize_script('your-custom-script', 'wpData', array(
  'consultantsHtml' => do_shortcode('[webdirectory-listings ...]'),
  'ajaxUrl' => admin_url('admin-ajax.php')
));

然后在JS里通过wpData.consultantsHtml调用即可。

:contains()选择器区分大小写，如果你的分类名称大小写不一致，可能会检测不到，可以自定义一个不区分大小写的过滤函数，或者确保匹配文本完全一致。

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