如何使用WPML标签在Overlay中显示PHP页面？

问题描述 #

我为学习开发了一个WordPress插件，原本可以正常在页面Overlay中通过AJAX加载另一个PHP页面，但添加WPML翻译标签后，Overlay里显示的PHP代码在<?php处被截断，只输出了部分源码而非执行后的结果。

显示异常的表单代码片段 #

<form class="tracker-rms-form-container" action="" method="post" enctype="multipart/form-data">
    <div class="tracker-rms-top-part">
        <?php echo '<h2>' . esc_html__( 'Apply Now', 'trackerform' ) . '</h2>'; ?>
        <label class="tracker-rms-label required-field"><i><?php esc_html_e( 'required field', 'trackerform' ) ?></i></br></label>

原AJAX加载JS代码 #

function loadOverlayContent() {
    var overlayContainer = $("<div id='overlayContainer'></div>");
    var closeButton = $("<a href='' id='closeOverlayButton'></a>");

    $("body").append(overlayContainer);
    var backgroundOverlay = $("<div id='backgroundOverlay'></div>");
    $("body").append(backgroundOverlay);

    backgroundOverlay.css({
        position: 'fixed',
        top: '0',
        left: '0',
        width: '100%',
        height: '100%',
        background: 'rgba(0, 0, 0, 0.65)',
        zIndex: '9998',
    });

    $.ajax({
        url: "<?php echo esc_url(plugins_url('tracker-rms-form.php', __FILE__)); ?>",
        success: function (data) {
            overlayContainer.html(data);
            overlayContainer.css({
                position: 'fixed',
                top: '50%',
                left: '50%',
                transform: 'translate(-50%, -50%)',
                zIndex: '9999',
                backgroundwidth: '100%',
                minWidth: '60%',
                maxHeight: '90%',
                overflow: 'auto',
                scrollbarWidth: 'none',
            });

            overlayContainer.append(closeButton);
            closeButton.on("click", function () {
                overlayContainer.remove();
                backgroundOverlay.remove();
            });

            backgroundOverlay.on("click", function (event) {
                if (!$(event.target).closest("#overlayContainer").length) {
                    overlayContainer.remove();
                    backgroundOverlay.remove();
                }
            });
        },
        error: function () {
            overlayContainer.html("<p>加载内容时出错。</p>");
        }
    });
}

修复方案 #

1. 确保加载的PHP文件接入WordPress环境 #

直接通过plugins_url加载的独立PHP文件未初始化WordPress核心，导致WPML翻译函数未定义，触发致命错误中断输出。在tracker-rms-form.php开头添加以下代码：

<?php
if (!defined('ABSPATH')) {
    exit; // 禁止直接访问
}
require_once(ABSPATH . 'wp-load.php'); // 加载WordPress核心
?>

2. 改用WordPress官方AJAX API（推荐） #

直接加载PHP文件不符合WordPress规范，改用AJAX API能避免环境依赖问题：

步骤1：在插件主文件注册AJAX回调

// 登录用户和游客都能访问的AJAX回调
add_action('wp_ajax_load_tracker_form', 'load_tracker_form_callback');
add_action('wp_ajax_nopriv_load_tracker_form', 'load_tracker_form_callback');

function load_tracker_form_callback() {
    ob_start();
    ?>
    <form class="tracker-rms-form-container" action="" method="post" enctype="multipart/form-data">
        <div class="tracker-rms-top-part">
            <h2><?php echo esc_html__('Apply Now', 'trackerform'); ?></h2>
            <label class="tracker-rms-label required-field"><i><?php esc_html_e('required field', 'trackerform'); ?></i></br></label>
            <!-- 补充剩余表单内容 -->
        </div>
    </form>
    <?php
    $content = ob_get_clean();
    wp_send_json_success($content);
    wp_die();
}

步骤2：修改前端AJAX请求代码

function loadOverlayContent() {
    var overlayContainer = $("<div id='overlayContainer'></div>");
    var closeButton = $("<a href='' id='closeOverlayButton'></a>");

    $("body").append(overlayContainer);
    var backgroundOverlay = $("<div id='backgroundOverlay'></div>");
    $("body").append(backgroundOverlay);

    backgroundOverlay.css({
        position: 'fixed',
        top: '0',
        left: '0',
        width: '100%',
        height: '100%',
        background: 'rgba(0, 0, 0, 0.65)',
        zIndex: '9998',
    });

    $.ajax({
        url: "<?php echo admin_url('admin-ajax.php'); ?>",
        type: 'POST',
        data: {
            action: 'load_tracker_form' // 对应注册的回调action名称
        },
        success: function (response) {
            if (response.success) {
                overlayContainer.html(response.data);
                overlayContainer.css({
                    position: 'fixed',
                    top: '50%',
                    left: '50%',
                    transform: 'translate(-50%, -50%)',
                    zIndex: '9999',
                    minWidth: '60%',
                    maxHeight: '90%',
                    overflow: 'auto',
                    scrollbarWidth: 'none',
                });

                overlayContainer.append(closeButton);
                closeButton.on("click", function (e) {
                    e.preventDefault();
                    overlayContainer.remove();
                    backgroundOverlay.remove();
                });

                backgroundOverlay.on("click", function (event) {
                    if (!$(event.target).closest("#overlayContainer").length) {
                        overlayContainer.remove();
                        backgroundOverlay.remove();
                    }
                });
            } else {
                overlayContainer.html("<p>加载内容时出错。</p>");
            }
        },
        error: function () {
            overlayContainer.html("<p>加载内容时出错。</p>");
        }
    });
}

3. 确认翻译文本域已注册 #

在插件主文件中添加文本域注册代码，确保WPML能识别翻译字符串：

add_action('plugins_loaded', 'trackerform_load_textdomain');
function trackerform_load_textdomain() {
    load_plugin_textdomain('trackerform', false, dirname(plugin_basename(__FILE__)) . '/languages/');
}

4. 开启调试排查错误 #

在wp-config.php中开启调试，查看具体错误信息：

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

错误日志会保存在wp-content/debug.log中，帮助定位具体问题。

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