WordPress中向3D翻页书短代码传递PHP变量的问题排查

架构老林

2026-7-20

环境

Wordpress 6.2.2
PHP 8.0.26
Wampserver 3.3.0

代码来源

Javapoint 示例1

我的代码

<! Doctype html>  
<html lang="en">  
<head>  
 <meta charset="utf-8">  
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  
<title> PHP Select Dropdown Example </title>  
<style>  
 .container {  
  max-width: 400px;  
  margin: 60px auto;  
  text-align: center;
}
input[type="submit"] {  
  margin-bottom: 25px;
}
.select-block {  
  width: 350px;  
  margin: 100px auto 40px;  
  position: relative;
}
select {  
  width: 100%;  
  height: 50px;  
  font-size: 100%;  
  font-weight: bold;  
  cursor: pointer;  
  border-radius: 0;  
  background-color: #1A33FF;  
  border: none;  
  border: 2px solid #1A33FF;  
  border-radius: 4px;  
  color: white;  
  appearance: none;  
  padding: 8px 38px 10px 18px;  
  -webkit-appearance: none;  
  -moz-appearance: none;  
  transition: color 0.3s ease, background-color 0.3s ease, border-bottom-color 0.3s ease;
}
  select::-ms-expand {  
  display: none;
}
.selectIcon {  
  top: 7px;  
  right: 15px;  
  width: 30px;  
  height: 36px;  
  padding-left: 5px;  
  pointer-events: none;  
  position: absolute;  
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.selectIcon svg.icon {  
  transition: fill 0.3s ease;  
  fill: white;
}
select:hover {  
  color: #000000;  
  background-color: white;
}
select:focus {  
  color: #000000;  
  background-color: white;
}
select:hover~.selectIcon 
 {  
  background-color: white;
}
select:focus~.selectIcon {  
  background-color: white;
}
select:hover~.selectIcon svg.icon 
{  
  fill: #1A33FF;
}
select:focus~.selectIcon svg.icon {  
  fill: #1A33FF;
}
h2 {  
 font-style: italic;  
 font-family: "Playfair Display","Bookman",serif;  
 color: #999;   
 letter-spacing: -0.005em;   
 word-spacing:1px;  
 font-size: 1.75em;  
 font-weight: bold;
}
h1 {  
 font-style: italic;  
 font-family: "Playfair Display","Bookman",serif;  
 color: #999;   
 letter-spacing: -0.005em;   
 word-spacing: 1px;  
 font-size: 2.75em;  
 font-weight: bold;
}
input[type=submit] {  
 border: 3px solid;  
 border-radius: 2px;  
 color: ;  
 display: block;  
 font-size: 1em;  
 font-weight: bold;  
 margin: 1em auto;  
 padding: 1em 4em;  
 position: relative;  
 text-transform: uppercase;
}
 input[type=submit]::before,
 input[type=submit]::after {  
 background: #fff;  
 content: '';  
 position: absolute;  
 z-index: -1;
}
input[type=submit]:hover {  
color: #1A33FF;
}
</style>  
</head>  
 <body>  
  <div class="container mt-5">  
   <h1> Select a Book</h1>  
    <form action="" method="post">  
    <select name="bookselect">  
    <option value = "" selected> Select option </option>  
    <option value = "10" > book-July </option>  
    <option value = "16" > book-August </option>  
    <option value = "17" > book-September </option>  
    <option value = "18" > book-October </option>  
    <option value = "19" > book-November </option>
    <option value = "20" > book-December </option>      
  </select>  
  <div class="selectIcon">  
    <svg focusable="false" viewBox="0 0 104 128" width="25" height="35" class="icon">  
      <path  
        d="m2e1 95a9 9 0 0 1 -9 9 9 9 0 0 1 -9 -9 9 9 0 0 1 9 -9 9 9 0 0 1 9 9zm0-3e1a9 9 0 0 1 -9 9 9 9 0 0 1 -9 -9 9 9 0 0 1 9 -9 9 9 0 0 1 9 9zm0-3e1a9 9 0 0 1 -9 9 9 9 0 0 1 -9 -9 9 9 0 0 1 9 -9 9 9 0 0 1 9 9zm14 55h68v1e1h-68zm0-3e1h68v1e1h-68zm0-3e1h68v1e1h-68z">  
      </path>  
    </svg>  
  </div>  
  <br> <br> <input type = "submit" name = "submit" value = "Select Book">  
</form>  
<?php  
    if(isset($_POST['submit'])){  
    if(!empty($_POST['bookselect'])) {  
        $selected = $_POST['bookselect'];  
        echo 'You have chosen: ' . $selected;
        $flipbook_popup = '[3d-flip-book id=&quot;'.$selected.'&quot; ][/3d-flip-book]';
        echo do_shortcode($flipbook_popup);
    } else {  
        echo 'Please select the book.';  
    }  
    }  
  ?>
  </div>  
 </body>  
 </html>

问题详情

最初把完整代码放到WordPress页面的HTML块中，预览时下拉选项显示正常，但点击提交按钮后页面仅刷新，没有任何echo内容输出，选中的内容也不显示。
之后把PHP部分移到bookselect.php文件，修改表单action指向该文件，此时echo语句正常输出，但do_shortcode函数不生效，仅显示短代码文本[3d-flip-book id="20" ][/3d-flip-book]，3D翻页书无法渲染。

解决方案

针对问题1：WordPress页面HTML块无法执行PHP

WordPress默认禁止在页面的HTML块中直接运行PHP代码，推荐两种解决方式：

方式1：自定义短代码

打开主题的functions.php文件，添加以下代码封装表单和逻辑：

function book_select_form_shortcode() {
    ob_start();
    ?>
    <div class="container mt-5">
        <h1> Select a Book</h1>
        <form action="" method="post">
            <select name="bookselect">
                <option value = "" selected> Select option </option>
                <option value = "10" > book-July </option>
                <option value = "16" > book-August </option>
                <option value = "17" > book-September </option>
                <option value = "18" > book-October </option>
                <option value = "19" > book-November </option>
                <option value = "20" > book-December </option>
            </select>
            <div class="selectIcon">
                <svg focusable="false" viewBox="0 0 104 128" width="25" height="35" class="icon">
                    <path d="m2e1 95a9 9 0 0 1 -9 9 9 9 0 0 1 -9 -9 9 9 0 0 1 9 -9 9 9 0 0 1 9 9zm0-3e1a9 9 0 0 1 -9 9 9 9 0 0 1 -9 -9 9 9 0 0 1 9 -9 9 9 0 0 1 9 9zm0-3e1a9 9 0 0 1 -9 9 9 9 0 0 1 -9 -9 9 9 0 0 1 9 -9 9 9 0 0 1 9 9zm14 55h68v1e1h-68zm0-3e1h68v1e1h-68zm0-3e1h68v1e1h-68z"></path>
                </svg>
            </div>
            <br> <br> <input type = "submit" name = "submit" value = "Select Book">
        </form>
        <?php
            if(isset($_POST['submit'])){
                if(!empty($_POST['bookselect'])) {
                    $selected = $_POST['bookselect'];
                    echo 'You have chosen: ' . $selected;
                    $flipbook_popup = '[3d-flip-book id="'.$selected.'" ][/3d-flip-book]';
                    echo do_shortcode($flipbook_popup);
                } else {
                    echo 'Please select the book.';
                }
            }
        ?>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('book_select_form', 'book_select_form_shortcode');

把原代码中的CSS样式复制到外观>自定义>额外CSS中保存。
在WordPress页面编辑器中插入短代码[book_select_form]，发布后即可正常使用。

方式2：自定义页面模板

在主题文件夹中新建page-book-select.php文件，开头添加模板声明：

<?php
/*
Template Name: 书籍选择页面
*/
get_header();
?>

把原代码中<body>内的所有内容（去掉<body>标签）粘贴到该文件中，CSS样式同样添加到主题自定义CSS。
在WordPress后台新建页面，右侧“页面属性”中选择“书籍选择页面”模板，发布后访问即可。

针对问题2：单独PHP文件无法执行`do_shortcode`

单独的PHP文件未加载WordPress核心环境，无法调用WordPress内置函数，需在bookselect.php开头添加代码加载环境：

<?php
// 根据你的WordPress安装路径调整wp-load.php的位置
require_once($_SERVER['DOCUMENT_ROOT'] . '/wp-load.php');

// 原有逻辑
if(isset($_POST['submit'])){
    if(!empty($_POST['bookselect'])) {
        $selected = $_POST['bookselect'];
        echo 'You have chosen: ' . $selected;
        $flipbook_popup = '[3d-flip-book id="'.$selected.'" ][/3d-flip-book]';
        echo do_shortcode($flipbook_popup);
    } else {
        echo 'Please select the book.';
    }
}
?>

注意：这种方式输出的内容没有主题样式，若需要保持页面风格，建议优先使用短代码或页面模板方案。

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

WordPress中向3D翻页书短代码传递PHP变量的问题排查

环境 #

代码来源 #

我的代码 #

问题详情 #

解决方案 #