WordPress数据库连接插件页面下移问题及底部显示需求求助
Hey there! Let's tackle your WordPress plugin issues step by step—fixing that page shift, moving your database results to the bottom, and patching a critical security gap at the same time.
Why the Page Shifts
Your current code directly echoes content as soon as the plugin loads, which means it's inserting HTML into whatever part of the page WordPress loads your plugin (usually early in the template flow). This unexpected content throws off the page's layout, causing that annoying shift.
How to Move Results to the Page Bottom
WordPress has a built-in action hook called wp_footer that fires right before the closing </body> tag—perfect for adding content you want at the bottom of the page. We'll wrap your database logic in a function and hook it to this action.
Critical Fix: Stop SQL Injection!
Your original code uses $_GET["code"] directly in your SQL query, which is a huge security risk—attackers could exploit this to steal or delete your database data. We'll use prepared statements to sanitize the input safely.
Modified Plugin Code
<?php /** * Plugin Name: Database Connection Plugin * Description: Connects to external database and displays coupon results at page bottom * Version: 1.0 */ // Wrap all logic in a function to hook to wp_footer function display_coupon_results() { // Database credentials (consider moving these to wp-config.php or a settings page!) $servername = "xxxx"; $username = "xxxx"; $password = "xxxx"; $dbname = "xxxx"; // Connect to database $conn = mysqli_connect($servername, $username, $password, $dbname); if (!$conn) { error_log("Connection failed: " . mysqli_connect_error()); // Log error instead of dying return; } // Sanitize input $code = isset($_GET["code"]) ? $_GET["code"] : ''; // Use prepared statement to prevent SQL injection $sql = "SELECT * FROM `cadeaubon` WHERE Kortingscode LIKE ?"; $stmt = mysqli_prepare($conn, $sql); // Add wildcard for LIKE query (match any part of the code) $search_code = "%{$code}%"; mysqli_stmt_bind_param($stmt, "s", $search_code); mysqli_stmt_execute($stmt); $result = mysqli_stmt_get_result($stmt); // Only output content if there are results if (mysqli_num_rows($result) > 0) { echo '<div class="coupon-results">'; echo '<h3>Coupon Results</h3>'; echo '<table>'; echo '<tr><th>ID</th><th>Kortingscode</th><th>Aantal personen</th><th>Naam</th><th>Achternaam</th><th>Leeftijd</th><th>Datum</th></tr>'; while($row = mysqli_fetch_assoc($result)) { echo '<tr>'; echo '<td>' . esc_html($row["ID"]) . '</td>'; echo '<td>' . esc_html($row["Kortingscode"]) . '</td>'; echo '<td>' . esc_html($row["AantPersonen"]) . '</td>'; echo '<td>' . esc_html($row["Naam"]) . '</td>'; echo '<td>' . esc_html($row["Achternaam"]) . '</td>'; echo '<td>' . esc_html($row["Leeftijd"]) . '</td>'; echo '<td>' . esc_html($row["Datum"]) . '</td>'; echo '</tr>'; } echo '</table>'; echo '</div>'; } // Clean up mysqli_stmt_close($stmt); mysqli_close($conn); } // Hook our function to wp_footer action add_action('wp_footer', 'display_coupon_results'); ?>
Key Improvements Explained
- Hooked to
wp_footer: Ensures your content only loads at the very bottom of the page, no more layout shifts. - Prepared Statements: Eliminates SQL injection risks by safely binding user input to the query.
- Escaped Output: Uses
esc_html()to sanitize database results before displaying them, preventing XSS attacks. - Proper HTML Structure: Replaced messy line breaks with a proper table structure for better readability and styling.
- Error Logging: Instead of crashing the page on connection failure, we log the error to WordPress's debug log (check
wp-content/debug.logif enabled).
Bonus Tips
- Don't Hardcode Credentials: Store your database credentials in
wp-config.phpusing constants likedefine('EXTERNAL_DB_HOST', 'xxxx');and reference them in your plugin—this is more secure and easier to manage. - Add CSS Styling: Add some custom CSS to your theme or plugin to style the
.coupon-resultsdiv and table, making it fit seamlessly with your site's design. - Enable Debug Mode: If you run into issues, enable WordPress debug mode by adding
define('WP_DEBUG', true);towp-config.phpto see detailed error messages.
内容的提问来源于stack exchange,提问作者xmaster

