返回

在 WordPress 主题页面中允许用户嵌入 iframe：循序渐进的指南

php

在 WordPress 主题页面中允许用户嵌入 iframe

引言

如果您希望允许用户在 WordPress 主题页面中动态添加内容，使用自定义 HTML 字段可能是有效的方法。然而，当涉及到插入 iframe 时，事情会变得复杂一些。本文将指导您完成为您的主题页面添加 iframe 所需的步骤，并解决用户界面中的常见问题。

步骤 1：创建自定义 HTML 字段

要创建允许用户插入 HTML 代码的字段，我们需要使用 WP_Customize_Manager 类。

class Customize_HTML_Control extends WP_Customize_Control {
    public $type = 'html';

    public function render_content() {
        ?>
        <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
        <div class="customize-control-content"><?php echo $this->description; ?></div>
        <textarea rows="10" style="width: 100%;" <?php $this->link(); ?>><?php echo esc_textarea( $this->value() ); ?></textarea>
        <?php
    }
}

步骤 2：注册设置和控件

注册您的设置并使用 Customize_HTML_Control 类创建控件。

$wp_customize->add_setting( 'custom_html_code', array(
    'default'           => '',
    'sanitize_callback' => 'wp_kses_post',
) );

$wp_customize->add_control( new Customize_HTML_Control( $wp_customize, 'custom_html_code_control', array(
    'label'    => __( 'HTML Code', 'murphy-charity' ),
    'section'  => 'donate-section',
    'settings' => 'custom_html_code',
    'description' => __( 'Enter your HTML code here.', 'murphy-charity' ),
) ) );

步骤 3：允许用户插入 iframe

要允许用户插入 iframe，您需要在自定义 HTML 字段中使用 wp_kses_post 过滤函数。

<?php echo wp_kses_post( get_theme_mod( 'custom_html_code', '' ) ); ?>

常见问题

  • 为什么我的 iframe 没有显示？

    • 确保您的 HTML 代码有效且符合语法。使用浏览器检查器来调试任何问题。

  • iframe 无法正确显示

    • 检查您的 iframe 代码，确保它包含必要的属性，如 src、width 和 height。

  • 我可以插入来自任何域的 iframe 吗？

    • 为了安全起见，您应该使用 wp_kses_post 过滤函数来限制 iframe 的来源。

  • iframe 如何与我的主题交互？

    • 嵌入的 iframe 将与您的主题的其他元素独立显示，但您可能需要调整样式以实现一致的外观。

  • 我可以添加额外的功能来增强 iframe 体验吗？

    • 考虑使用插件或自定义代码来添加诸如响应式调整大小或跨域通信之类的功能。

结论

允许用户在 WordPress 主题页面中嵌入 iframe 可以提供强大的灵活性。通过使用自定义 HTML 字段和适当的过滤，您可以为用户提供一种动态添加内容和增强用户体验的方式。