如何为指定HTML表单创建WordPress短代码？求技术协助

Got it, let's break this down into simple, actionable steps—you'll have that form reusable across your WordPress site in no time!

Step 1: Add the Shortcode Function to Your Theme (or Child Theme) #

First, you need to define the shortcode in your WordPress site. The best place to do this is your child theme's functions.php file (using a child theme ensures your code won't get overwritten when your parent theme updates). If you don't have a child theme, you can use the parent theme's functions.php temporarily, but child themes are the safer long-term option.

Paste this code into your functions.php:

function custom_search_form_shortcode($atts) {
    // Start output buffering to capture the form HTML
    ob_start();
    ?>
    <form action="<?php echo get_page_link(2599) ?>" method="POST" >
        <input type='hidden' name='page_id' value='2599'>
        <div class="row">
            <div class="form-group col-sm-3 col-md-2" id="bgform_text2">
                <h4>SEARCH</h4>
                <p>For Your Favourite Place</p>
            </div>
            <div class="form-group col-sm-5 col-md-2">
                <label>Where to ? </label>
                <input type="text" name="names" class="input-text full-width" placeholder="start typing here....">
            </div>
            <div class="form-group col-sm-5 col-md-4">
                <div class="row">
                    <div class="col-xs-6">
                        <label>Arrive </label>
                        <div class="controls">
                            <input type="text" name="arive_time" id="departing">
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <label>Departs </label>
                        <div class="controls">
                            <input type="text" name="depart_time" id="returning">
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group col-sm-9 col-md-2">
                <label>Sleeps </label>
                <div class="controls">
                    <i class="fa fa-sort"></i>
                    <select name="sleeps">
                        <option value="" disabled="" selected=""></option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </div>
            </div>
            <div class="form-group col-sm-3 col-md-2">
                <input type="submit" value="submit" name="submit_btn" class="button">
            </div>
        </div>
    </form>
    <?php
    // Return the captured HTML
    return ob_get_clean();
}
// Register the shortcode
add_shortcode('custom_search_form', 'custom_search_form_shortcode');

Step 2: Use the Shortcode Anywhere #

Now you can insert your form on any page, post, or even widget by adding this shortcode:

[custom_search_form]

Step 3: Optional (But Recommended): Make the Target Page Dynamic #

Right now, the form is hardcoded to submit to page ID 2599. If you ever need to change this target page, you can make the shortcode accept a parameter instead of editing the code every time. Here's how to modify the function:

Update the shortcode function to use attributes:

function custom_search_form_shortcode($atts) {
    // Set default value for target page ID
    $atts = shortcode_atts( array(
        'target_page_id' => 2599, // Default to your original page ID
    ), $atts );

    ob_start();
    ?>
    <form action="<?php echo get_page_link($atts['target_page_id']) ?>" method="POST" >
        <input type='hidden' name='page_id' value='<?php echo esc_attr($atts['target_page_id']) ?>'>
        <!-- Rest of the form code stays identical to Step 1 -->
        <div class="row">
            <div class="form-group col-sm-3 col-md-2" id="bgform_text2">
                <h4>SEARCH</h4>
                <p>For Your Favourite Place</p>
            </div>
            <div class="form-group col-sm-5 col-md-2">
                <label>Where to ? </label>
                <input type="text" name="names" class="input-text full-width" placeholder="start typing here....">
            </div>
            <div class="form-group col-sm-5 col-md-4">
                <div class="row">
                    <div class="col-xs-6">
                        <label>Arrive </label>
                        <div class="controls">
                            <input type="text" name="arive_time" id="departing">
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <label>Departs </label>
                        <div class="controls">
                            <input type="text" name="depart_time" id="returning">
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group col-sm-9 col-md-2">
                <label>Sleeps </label>
                <div class="controls">
                    <i class="fa fa-sort"></i>
                    <select name="sleeps">
                        <option value="" disabled="" selected=""></option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </div>
            </div>
            <div class="form-group col-sm-3 col-md-2">
                <input type="submit" value="submit" name="submit_btn" class="button">
            </div>
        </div>
    </form>
    <?php
    return ob_get_clean();
}
add_shortcode('custom_search_form', 'custom_search_form_shortcode');

Now you can specify a different target page when using the shortcode:

[custom_search_form target_page_id="123"]

Quick Notes: #

• Security: I added esc_attr() to the hidden input value to sanitize the page ID—always sanitize dynamic values in WordPress to avoid vulnerabilities.
• Date Fields: Your form has date inputs (departing and returning)—you might want to add a datepicker script (like jQuery UI Datepicker) to make these user-friendly, but that's separate from the shortcode setup.
• Styling: Make sure your theme's CSS includes styles for the form-group, row, and other classes used in the form so it looks consistent with your site.

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