WordPress Sketchfab Viewer插件如何设置iframe宽度为百分比而非像素？

刚好我之前折腾过这个插件的自适应设置，给你几个可行的方案，从修改插件代码到纯CSS覆盖都有，按需选择：

方案1：修改插件核心代码（注意插件更新会重置） #

如果你能接受插件更新后重新调整的话，可以直接修改插件的设置和渲染逻辑：

1. 找到插件设置页面的代码片段（对应你提到的那段），确保输入框允许输入带%的数值：

   <tr valign="top"> 
     <th scope="row">Width</th> 
     <td><input type="text" name="sketchfab-width" value="<?php echo esc_attr(get_option('sketchfab-width', '100%')); ?>" placeholder="例如：100% 或 800px"></td>
   </tr>
   

2. 找到插件渲染iframe的代码（一般在短码处理文件里，比如shortcode.php），把原来强制添加px后缀的逻辑去掉，直接输出设置的宽度值：

   // 替换原来的宽度获取代码
   $width = get_option('sketchfab-width', '100%');
   // 渲染iframe时直接使用$width
   $iframe_html = '<iframe width="' . esc_attr($width) . '" height="' . esc_attr($height) . '" src="' . esc_url($model_url) . '" frameborder="0" allowfullscreen></iframe>';
   echo $iframe_html;
   

方案2：纯CSS覆盖（推荐，无需修改插件） #

不想动插件代码的话，直接用CSS强制让iframe自适应父容器宽度，这是最稳妥的方式：

1. 给Sketchfab的iframe添加全局样式，强制占满宽度：

   .sketchfab-viewer iframe {
     width: 100% !important;
     max-width: 100vw; /* 防止超出视口 */
     box-sizing: border-box;
   }
   

2. 要是想保持固定宽高比例（比如避免模型拉伸变形），可以用容器包裹iframe，用padding-top实现比例锁定：

   .sketchfab-responsive-container {
     position: relative;
     width: 100%;
     padding-top: 56.25%; /* 16:9比例，根据你的模型调整数值 */
   }
   .sketchfab-responsive-container iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
   }
   

   使用的时候，把插件生成的iframe手动包裹在这个容器里就行，或者在主题的模板文件里修改输出逻辑。

方案3：自定义短码（进阶） #

如果上面的方法都不满意，你可以自己写一个简单的自定义短码，完全控制iframe的渲染：

function custom_sketchfab_shortcode($atts) {
  $atts = shortcode_atts(array(
    'model_id' => '',
    'width' => '100%',
    'height' => '600px'
  ), $atts);
  
  if(empty($atts['model_id'])) return '';
  
  $src = "https://sketchfab.com/models/{$atts['model_id']}/embed";
  return '<div class="sketchfab-responsive-container"><iframe width="' . esc_attr($atts['width']) . '" height="' . esc_attr($atts['height']) . '" src="' . esc_url($src) . '" frameborder="0" allowfullscreen></iframe></div>';
}
add_shortcode('custom_sketchfab', 'custom_sketchfab_shortcode');

把这段代码加到主题的functions.php里，然后用[custom_sketchfab model_id="你的模型ID" width="100%" height="600px"]来调用，完全自定义宽度。

测试的时候记得清空缓存，在手机、平板和桌面端都验证下效果，确保自适应正常。

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