上传自定义WordPress页面遇404错误求助

我尝试上传一个自定义签到网页，但访问对应URL时始终出现404页面未找到错误。目前我把文件放在网站主路径下的checkin文件夹中，也试过将网页添加到WordPress主题并在functions.php中配置，但都没解决问题。

1. 确认文件路径与命名 #

• 确保签到文件命名为checkin.php，且确实存放在网站根目录的checkin文件夹下（完整路径应为/checkin/checkin.php）。
• 访问URL需对应路径：如果是根域名安装WordPress，访问https://你的域名/checkin/checkin.php；如果是子目录安装，需调整为https://你的域名/子目录名/checkin/checkin.php。

2. 修复WordPress重写规则冲突 #

WordPress的固定链接设置可能拦截非主题/插件的PHP文件请求：

• 登录WordPress后台，进入「设置」→「固定链接」，点击「保存更改」刷新重写规则。
• 若仍无效，在checkin文件夹下新建.htaccess文件，添加以下内容禁止重写：

RewriteEngine Off

3. 检查文件权限 #

• 设置checkin文件夹权限为755，checkin.php文件权限为644，避免服务器因权限不足拒绝访问。

4. 修正代码中的路径与DOM匹配问题 #

你的代码存在几处细节错误，虽不直接导致404，但会引发功能异常，需同步修复：

• JS输入框ID不匹配：HTML中输入框ID是cardNumberCheckIn，JS里误写为cardNumber，需统一。
• DOM元素ID不匹配：HTML中用户信息展示的ID是userName/userEmail等，JS里用的是displayName/displayEmail，需修正一致。
• 请求路径改为绝对路径：前端fetch请求需写成/checkin/checkin.php，避免页面路由变化导致请求错误。
• 注释数据库连接成功提示：避免该文本干扰JSON输出，导致前端解析失败。

5. 主题集成的正确方式（若需整合进WordPress） #

如果想通过WordPress页面路由访问，不要直接放置文件，应按以下步骤操作：

• 在主题目录下新建page-checkin.php文件，将修正后的代码放入（保留WordPress的get_header/get_footer结构）。
• 登录WordPress后台，新建页面，标题设为「签到」，模板选择「Check-In」（对应新建的模板文件），发布后直接访问该页面的URL即可。

<!DOCTYPE html>
<?php
session_start();
if( class_exists( 'ReduxFrameworkPlugin' ) ) { 
    get_header('pages');
}
else {
    get_header();
}

$url="*****";

$filePath = $_SERVER["DOCUMENT_ROOT"]."/checkin/";

$err="";
?>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Check-In</title>
<link rel="stylesheet" href="/checkin/styles.css"> <!-- 改为绝对路径确保样式加载 -->
</head>
<body>
<div class="container">
  <h1>Check-In</h1>
  <form id="checkInForm">
    <label for="cardNumberCheckIn">Card Number:</label>
    <input type="text" id="cardNumberCheckIn" name="cardNumberCheckIn" required>
    
    <button type="submit">Check-In</button>
  </form>
  
  <div id="userInfo" style="display: none;">
    <p>Name: <span id="userName"></span></p>
    <p>Email: <span id="userEmail"></span></p>
    <p>Expiration Date: <span id="userExpiration"></span></p>
    <p>Check-In Count: <span id="userCheckInCount"></span></p>
  </div>
</div>
 <?php
// Database configuration
$host = 'localhost';
$username = '*****';
$password = '*****';
$database = '******';

// Create connection
$connection = new mysqli($host, $username, $password, $database);

// Check connection
if ($connection->connect_error) {
    die("Connection failed: " . $connection->connect_error);
}
// 注释连接成功提示，避免干扰页面输出
// echo "Successfully connected to the database.";

// Check if the request is a POST request
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Get the JSON POST body and decode it
    $json = file_get_contents('php://input');
    $data = json_decode($json);

    if (isset($data->cardNumber)) {
        $cardNumber = $connection->real_escape_string($data->cardNumber);
        
        // Update check in count
        $updateQuery = "UPDATE users_table SET check_in_count = check_in_count + 1 WHERE card_number = ?";
        $stmt = $connection->prepare($updateQuery);
        $stmt->bind_param("s", $cardNumber);
        $stmt->execute();

        // Fetch user details
        $selectQuery = "SELECT card_number, name, address, email, expiration_date, check_in_count FROM users_table WHERE card_number = ?";
        $stmt = $connection->prepare($selectQuery);
        $stmt->bind_param("s", $cardNumber);
        $stmt->execute();
        $result = $stmt->get_result();
        
        if ($result->num_rows === 0) {
            http_response_code(404);
            echo json_encode(array("message" => "User not found."));
        } else {
            // Send user details
            $userData = $result->fetch_assoc();
            echo json_encode($userData);
        }
    } else {
        http_response_code(400);
        echo json_encode(array("message" => "Card number is required."));
    }
    
    $stmt->close();
    $connection->close();
    exit; // 处理POST请求后终止输出，避免加载WordPress footer
}

$connection->close();
?>
   
    
<script>
    document.getElementById('checkInForm').onsubmit = function(event) {
    event.preventDefault(); // 阻止传统表单提交

    var cardNumber = document.getElementById('cardNumberCheckIn').value; // 修正输入框ID

    // 发送POST请求到服务器
    fetch('/checkin/checkin.php', { // 使用绝对路径
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ cardNumber: cardNumber })
    })
    .then(response => response.json())
    .then(data => {
        // 展示用户信息
        document.getElementById('userInfo').style.display = 'block';
        document.getElementById('userName').textContent = data.name || 'N/A'; // 修正DOM ID
        document.getElementById('userEmail').textContent = data.email || 'N/A'; // 修正DOM ID
        document.getElementById('userExpiration').textContent = data.expiration_date || 'N/A'; // 修正DOM ID
        document.getElementById('userCheckInCount').textContent = data.check_in_count || 'N/A'; // 修正DOM ID
    })
    .catch(error => console.error('Error:', error));
};
</script>
</body>
</html>
<?php if( class_exists( 'ReduxFrameworkPlugin' ) ) { 
    get_footer('v1');
}
else {
    get_footer();
} ?>

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