需求场景
子比 (zibll) 主题做的 WordPress 站,想新建一个独立页面,内容是嵌入一个外部网址(比如音乐播放器、第三方表单、在线工具)。直接在文章里写 iframe 的话,会被主题的容器宽度、padding、卡片样式压得变形,也不方便单独设个页面标题和导航位置。
解决办法:写一个自定义的 Page Template,让管理后台能选这个模板创建页面,iframe 完全自定义。
代码:zibi 风格的 page template
<?php
/**
* Template name: 音乐
* Description: music
*/
// 获取页面头部 + 主题的 header style 变量
get_header();
$header_style = zib_get_page_header_style();
?>
<!--开始-->
<iframe src="https://blog.biekanle.com/" width="100%" height="850px" frameborder="0"></iframe>
<!--结束-->
<?php
get_footer();
用法
- 把上面这段代码存成
music.php,放到主题目录:wp-content/themes/zibll/music.php(子主题更稳,后面讲)。 - WP 后台 → 页面 → 新建页面 → 标题写"音乐" → 右侧"页面属性"里的"模板"下拉里选刚才那个"音乐"(就是 PHP 文件头部
Template name:写的那个字符串)。 - 发布。访问这个页面就能看到嵌入的 iframe 了。
几个要注意的细节
1. 跨域 iframe 可能被对方拒绝。 你想嵌的 URL 如果在响应头里设了 X-Frame-Options: DENY 或 SAMEORIGIN(比如 google、baidu、绝大多数大站),你的 iframe 会显示空白或者"refused to connect"。这是对方的策略,你这边改不了。
2. height 别写死,用 vh 更友好:
<iframe src="..." width="100%" height="calc(100vh - 120px)" style="border:0;"></iframe>120px 是给主题 header + 自己留的边距。这样在不同分辨率显示器上 iframe 都能撑满可视区。
3. 想直接改主题文件,但担心升级被覆盖:用子主题。建子主题最小成本两个文件:
/* wp-content/themes/zibll-child/style.css */
/*
Theme Name: Zibll Child
Template: zibll
*/<?php
// wp-content/themes/zibll-child/functions.php
add_action('wp_enqueue_scripts', function() {
wp_enqueue_style('zibll-parent', get_template_directory_uri() . '/style.css');
});然后把 music.php 放到 zibll-child/ 下,WP 会优先用子主题的版本,母主题升级覆盖不到。
4. 想给 iframe 套个标题或者面包屑,可以在 get_header() 之后、iframe 之前用主题的 helper:
<?php
get_header();
$header_style = zib_get_page_header_style();
// zibll 提供的页面头组件 — 看你装的版本是否有
if (function_exists('zib_page_header')) zib_page_header();
?>
<div class="container">
<iframe src="https://blog.biekanle.com/" width="100%" height="calc(100vh - 200px)" frameborder="0"></iframe>
</div>
<?php get_footer();5. 不只 zibll,通用的 page template 也是一样写法:
<?php
/**
* Template Name: Plain Iframe
*/
get_header();
?>
<main style="padding:20px;">
<iframe src="<?php echo esc_url(get_post_meta(get_the_ID(), '_iframe_src', true)); ?>"
width="100%" height="80vh" frameborder="0"></iframe>
</main>
<?php get_footer();这个版本把 iframe 的 URL 存到 post meta 里,这样一个模板就能给好几个页面用,每个页面后台填自己的 URL。
替代方案:shortcode
如果不想动主题文件,WordPress shortcode 也能完成 80% 的需求:
// 把这段加到 mu-plugin 或主题 functions.php
add_shortcode('embed_iframe', function($atts) {
$a = shortcode_atts(['src' => '', 'height' => '600'], $atts);
if (!$a['src']) return '';
return sprintf(
'<iframe src="%s" width="100%%" height="%dpx" frameborder="0" loading="lazy"></iframe>',
esc_url($a['src']),
(int)$a['height']
);
});在文章里直接写 [embed_iframe src="https://blog.biekanle.com/" height="850"] 就能嵌进去。比 page template 灵活,但不能控制整个页面布局,会被主题的容器约束。
选哪个看场景:页面要"全屏"沉浸感 → page template;只是文章内偶尔嵌一下 → shortcode。
—— 别看了 · 2026