WordPress网站嵌入其他网页并保留页头页尾的方法

嵌入网页效果截图

初期想法：

WordPress能否在网站前台包裹另一个网页，比如一个其他网站的搜索页面把它放在自己的WordPress网站里，并在这个页面显示自己WordPress网站的页头页尾。

实现方法1：

使用iframe标签：你可以在WordPress页面或文章编辑器中插入HTML代码，使用 <iframe>标签来嵌入外部网页。

这样，用户可以在你的WordPress页面上看到被嵌入的网页内容，而外部网页会像一个小窗口一样出现在你的页面中。代码：

<iframe src="https://example.com/search" width="100%" height="500px"></iframe>

实现方法2：

可以创建一个自定义的页面模板。在这个模板中，你可以使用PHP函数获取页头和页脚，然后在适当的位置插入 <iframe>或其他方式嵌入外部内容。

在你的主题文件夹中创建一个新的模板文件，例如 page-custom.php，并在该文件中加入以下代码框架：

<?php
/*
Template Name: 嵌入网页
*/
get_header(); // 获取页头
?>
<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <iframe src="https://example.com/search" width="100%" height="500px"></iframe>
    </main><!-- #main -->
</div><!-- #primary -->
<?php
get_footer(); // 获取页脚

在后台使用新模板，当你在WordPress后台新建或编辑页面时，可以选择模板中的 “嵌入网页”作为页面模板，记得把代码里的 https://example.com/search网址替换成你要嵌入的页面网址，代码里的 width和 height是设置嵌入页面的显示宽度和高度的，自行修改。

实现方法3：

你可以创建一个自定义页面模板，让用户在WordPress后台新建页面时选择这个模板，并在页面编辑器中输入外部网址。

在你的主题文件夹中创建一个新的PHP文件，例如命名为page-external-content.php。在这个文件中添加以下代码：

<?php
/*
Template Name: 嵌入网页模板
*/

get_header(); // 获取页头

while (have_posts()) : the_post();
    $external_url = get_post_meta($post->ID, '_external_content_url', true);
?>
<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <?php if (!empty($external_url)) : ?>
            <iframe src="<?php echo esc_url($external_url); ?>" width="100%" height="500px"></iframe>
        <?php else : ?>
            <p>Please enter a valid URL in the page editor.</p>
        <?php endif; ?>
    </main><!-- #main -->
</div><!-- #primary -->
<?php
endwhile;

get_footer(); // 获取页脚

添加自定义字段到页面编辑器：

为了在页面编辑器中添加一个自定义字段来输入外部网址，你可以使用一些插件如Advanced Custom Fields (ACF) 或者直接使用WordPress的内置自定义字段功能。

如果你选择使用ACF插件，安装并激活后，你可以创建一个新的字段组，其中包含一个文本类型的字段（例如 external_content_url），并将该字段组应用到你的页面模板上。

如果你不想使用插件，可以在上面的模板文件中添加如下代码来自动生成一个自定义字段：

function add_external_content_custom_field() {
    add_meta_box(
        'external_content_meta_box',
        'External Content URL',
        'display_external_content_custom_field',
        'page',
        'normal',
        'high'
    );
}
add_action('add_meta_boxes', 'add_external_content_custom_field');

function display_external_content_custom_field($post) {
    $value = get_post_meta($post->ID, '_external_content_url', true);
    echo '<label for="external_content_url">URL:</label>';
    echo '<input type="url" id="external_content_url" name="external_content_url" value="' . esc_attr($value) . '" size="30" />';
}

function save_external_content_custom_field($post_id) {
    if (isset($_POST['external_content_url'])) {
        update_post_meta($post_id, '_external_content_url', sanitize_text_field($_POST['external_content_url']));
    }
}
add_action('save_post', 'save_external_content_custom_field');

将这段代码添加到你的主题的 functions.php 文件里或者之前分享的 制作简单WordPress插件 里。页面编辑界面的底部就会出现一个输入网址的文本框。

在后台使用新模板：

现在，当你在WordPress后台新建或编辑页面时，可以选择模板里的 “嵌入网页模板”作为页面模板。

然后，在页面编辑器下方的自定义字段区域，你会看到一个用来输入外部网址的地方。输入正确的网址后保存页面，访问该页面时就会显示嵌入的内容了。

注：以上代码来自阿里通义千问调整优化，3个方法选择其一即可实现文章顶部图片的镶嵌其他网页进自己网站的效果。