如何在WordPress.com文章中嵌入PDF？iframe等标签为何失效消失

问题根本原因 #

WordPress出于安全考虑，默认会对用户提交的文章内容进行HTML标签过滤，iframe、embed、object这类存在潜在安全风险的标签不在默认允许的白名单内。你预览时内容还未经过后端入库校验，所以可以正常显示；一旦点击发布/更新，后端过滤逻辑会直接移除这些标签，就会出现发布后不显示、重新编辑时代码消失的问题。

可行解决方法 #

• 方案1：给对应HTML标签添加白名单
  如果你有站点后台管理权限，可以在主题的functions.php文件中添加以下代码，将需要用到的标签加入允许列表：

  add_filter('wp_kses_allowed_html', function($allowed_tags, $context) {
    if ($context === 'post') {
      // 允许iframe标签及对应属性
      $allowed_tags['iframe'] = [
        'src' => true,
        'height' => true,
        'width' => true,
        'frameborder' => true,
        'allowfullscreen' => true
      ];
      // 允许embed标签
      $allowed_tags['embed'] = [
        'src' => true,
        'height' => true,
        'width' => true,
        'type' => true
      ];
      // 允许object标签
      $allowed_tags['object'] = [
        'data' => true,
        'height' => true,
        'width' => true,
        'type' => true
      ];
    }
    return $allowed_tags;
  }, 10, 2);
  

  添加后再编辑文章插入对应标签就不会被过滤。

• 方案2：使用WordPress原生PDF嵌入功能
  不需要自定义代码，直接把PDF文件上传到WordPress媒体库，在文章编辑页直接选择插入该PDF文件，选择「嵌入完整文档」的展示形式，按需调整高度宽度即可，原生插入的内容不会被过滤规则清理。

• 方案3：通过短代码实现嵌入
  同样在主题functions.php中添加短代码注册逻辑：

  add_shortcode('custom_pdf_embed', function($atts) {
    $atts = shortcode_atts([
      'url' => '',
      'height' => '900',
      'width' => '1200'
    ], $atts);
    if (empty($atts['url'])) return '';
    return '<iframe src="'.esc_url($atts['url']).'" height="'.esc_attr($atts['height']).'" width="'.esc_attr($atts['width']).'"></iframe>';
  });
  

  编辑文章时直接插入短代码 [custom_pdf_embed url="https://path.to/my.pdf" height="900" width="1200"] 即可，短代码不会被HTML过滤逻辑处理，发布后可以正常渲染。

注意事项 #

如果是WordPress多站点模式，默认只有超级管理员有权限使用未过滤的HTML标签，普通站点管理员即使添加白名单也可能被全局规则拦截，需要调整多站点的权限配置。

内容的提问来源于stack exchange，提问作者the.real.gruycho