PHP实现CSS/HTML实时演示短代码函数

标签TAGS: 
2026年1月15日

由于需要在css教程文章中插入一些简单的html结构和css，并需要查看渲染效果，特意写了这么一段PHP代码，直接写到functions.php中就行 使用方法：在古腾堡或者其他页面构建器以及代码中插入 特别提醒：这里的两个参数，就是用原始html css经过base64转换的，网上有相关的在线工具把它转换成base64,运行结果如下：

效果预览:

由于需要在css教程文章中插入一些简单的html结构和css，并需要查看渲染效果，特意写了这么一段PHP代码，直接写到functions.php中就行

function live_demo_shortcode($atts) {
    $atts = shortcode_atts([
        'html_b64' => '',
        'css_b64'  => ''
    ], $atts, 'live_demo');

    $html = !empty($atts['html_b64']) ? base64_decode($atts['html_b64']) : '';
    $css  = !empty($atts['css_b64'])  ? base64_decode($atts['css_b64'])  : '';

    // 清理可能的残留实体（虽然 Base64 解码后通常干净）
    $html_clean = html_entity_decode($html, ENT_QUOTES | ENT_HTML5, 'UTF-8');
    $css_clean  = html_entity_decode($css, ENT_QUOTES | ENT_HTML5, 'UTF-8');

    // 安全转义用于 textarea 显示
    $html_escaped = htmlspecialchars($html_clean, ENT_QUOTES, 'UTF-8');
    $css_escaped  = htmlspecialchars($css_clean, ENT_QUOTES, 'UTF-8');

    static $counter = 0;
    $uid = 'live_demo_' . (++$counter);

    ob_start();
    ?>
    <div class="wp-live-demo-container">
        <div class="wp-live-demo-panel wp-live-demo-code">
            <div class="wp-live-demo-field">
                <label for="<?php echo esc_attr($uid); ?>_html">HTML:</label>
                <textarea id="<?php echo esc_attr($uid); ?>_html" class="wp-live-demo-textarea"><?php echo $html_escaped; ?></textarea>
            </div>
            <div class="wp-live-demo-field">
                <label for="<?php echo esc_attr($uid); ?>_css">CSS:</label>
                <textarea id="<?php echo esc_attr($uid); ?>_css" class="wp-live-demo-textarea"><?php echo $css_escaped; ?></textarea>
            </div>
        </div>
        <div class="wp-live-demo-panel wp-live-demo-preview">
            <label>Preview:</label>
            <iframe id="<?php echo esc_attr($uid); ?>_preview" class="wp-live-demo-iframe" sandbox="allow-same-origin"></iframe>
        </div>
    </div>

    <script>
    (function() {
        const htmlEl = document.getElementById('<?php echo esc_js($uid); ?>_html');
        const cssEl  = document.getElementById('<?php echo esc_js($uid); ?>_css');
        const iframe = document.getElementById('<?php echo esc_js($uid); ?>_preview');

        function render() {
            const fullHtml = '<!DOCTYPE html>\n' +
                '<html>\n' +
                '<head><meta charset="utf-8"><style>body{margin:8px;font-family:sans-serif;}' +
                (cssEl.value || '') +
                '<\/style></head>\n' +
                '<body>' +
                (htmlEl.value || '') +
                '<\/body>\n' +
                '<\/html>';
            const doc = iframe.contentDocument || iframe.contentWindow.document;
            doc.open();
            doc.write(fullHtml);
            doc.close();
        }

        let t;
        const d = () => {
            clearTimeout(t);
            t = setTimeout(render, 250);
        };
        if (htmlEl && cssEl && iframe) {
            htmlEl.addEventListener('input', d);
            cssEl.addEventListener('input', d);
            render();
        }
    })();
    </script>
    <style>
    .wp-live-demo-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin: 24px 0;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background: #fafafa;
        font-size: 14px;
        box-sizing: border-box;
    }

    .wp-live-demo-panel {
        flex: 1;
        min-width: 280px;
        display: flex;
        flex-direction: column;
    }

    .wp-live-demo-field {
        display: flex;
        flex-direction: column;
        margin-bottom: 16px;
    }

    .wp-live-demo-field label,
    .wp-live-demo-preview > label {
        font-weight: bold;
        color: #333;
        margin-bottom: 6px;
    }

    .wp-live-demo-textarea {
        width: 100%;
        height: 120px;
        font-family: monospace;
        font-size: 13px;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
        resize: vertical;
        box-sizing: border-box;
    }

    .wp-live-demo-iframe {
        width: 100%;
        height: 300px;
        border: 1px solid #ccc;
        background: white;
        flex: 1;
        min-height: 200px;
        box-sizing: border-box;
    }

    @media (min-width: 769px) {
        .wp-live-demo-container {
            flex-direction: row;
        }
        .wp-live-demo-code,
        .wp-live-demo-preview {
            max-width: calc(50% - 10px);
        }
    }

    @media (max-width: 768px) {
        .wp-live-demo-container {
            flex-direction: column;
        }
        .wp-live-demo-code,
        .wp-live-demo-preview {
            max-width: 100%;
        }
    }
    </style>
    <?php
    return ob_get_clean();
}
add_shortcode('live_demo', 'live_demo_shortcode');

使用方法：在古腾堡或者其他页面构建器以及代码中插入

[live_demo html_b64="PGRpdiBjbGFzcz0idGVzdCI+SGVsbG8hPC9kaXY+" css_b64="LnRlc3QgeyBjb2xvcjogZ3JlZW47IGZvbnQtc2l6ZTogMjBweDsgfQ=="]

特别提醒：这里的两个参数，就是用原始html css经过base64转换的，网上有相关的在线工具把它转换成base64,运行结果如下：

我要下单