plugins - HTML output from WordPress shortcode is wrapped in unexpected <p> tags

admin管理员组

文章数量:1122846

I'm developing a custom shortcode in WordPress to display a calendar, but I'm encountering an issue where the HTML output is being unexpectedly wrapped in

tags. Here's the code I'm using for the shortcode:

function wp_reservations_shortcode($atts) {
    ob_start();
    ?>
    <section>
        <section class="calendar-header">
            <button id="prev-month">Prev</button>
            <div class="current-date">July 2024</div>
            <button id="next-month">Next</button>
        </section>
        <section class="calendar-body">
            <div class="calendar-weekdays"></div>
            <div class="calendar-days"></div>
        </section>
    </section>
    <?php
    $html = ob_get_clean();
    return $html;
}
add_shortcode('wp_reservations', 'wp_reservations_shortcode');

When I use this shortcode, the HTML output includes unwanted p and br tags like this:

<section>
    <section class="calendar-header">
        <button id="prev-month">Prev</button><p></p>
        <div class="current-date">July 2024</div>
        <p><button id="next-month">Next</button><br></p>
    </section>
    <section class="calendar-body">
        <div class="calendar-weekdays"></div>
        <div class="calendar-days"></div>
    </section>
</section>

I've tried removing the wpautop filter with remove_filter('the_content', 'wpautop'); before returning the HTML, but it didn’t resolve the issue. I attempted to directly echo the HTML output instead of returning it from the shortcode, which also didn't help. Lastly I tried storing the HTML in a variable and then returning it also failed to remove the p tags.

How can I prevent WordPress from inserting these tags in the output of my shortcode?

Thank you for your help!

Edit: After further investigation, I've discovered that the issue with unwanted p tags occurs only when the shortcode is used within the site template. When the shortcode is used outside of the template, it functions as expected. Interestingly, other similar plugins do not exhibit this behavior when used in the same context.

I'm developing a custom shortcode in WordPress to display a calendar, but I'm encountering an issue where the HTML output is being unexpectedly wrapped in

tags. Here's the code I'm using for the shortcode:

function wp_reservations_shortcode($atts) {
    ob_start();
    ?>
    <section>
        <section class="calendar-header">
            <button id="prev-month">Prev</button>
            <div class="current-date">July 2024</div>
            <button id="next-month">Next</button>
        </section>
        <section class="calendar-body">
            <div class="calendar-weekdays"></div>
            <div class="calendar-days"></div>
        </section>
    </section>
    <?php
    $html = ob_get_clean();
    return $html;
}
add_shortcode('wp_reservations', 'wp_reservations_shortcode');

When I use this shortcode, the HTML output includes unwanted p and br tags like this:

<section>
    <section class="calendar-header">
        <button id="prev-month">Prev</button><p></p>
        <div class="current-date">July 2024</div>
        <p><button id="next-month">Next</button><br></p>
    </section>
    <section class="calendar-body">
        <div class="calendar-weekdays"></div>
        <div class="calendar-days"></div>
    </section>
</section>

I've tried removing the wpautop filter with remove_filter('the_content', 'wpautop'); before returning the HTML, but it didn’t resolve the issue. I attempted to directly echo the HTML output instead of returning it from the shortcode, which also didn't help. Lastly I tried storing the HTML in a variable and then returning it also failed to remove the p tags.

How can I prevent WordPress from inserting these tags in the output of my shortcode?

Thank you for your help!

Edit: After further investigation, I've discovered that the issue with unwanted p tags occurs only when the shortcode is used within the site template. When the shortcode is used outside of the template, it functions as expected. Interestingly, other similar plugins do not exhibit this behavior when used in the same context.

• plugins

Share Improve this question edited Apr 20, 2024 at 8:59 Alex asked Apr 19, 2024 at 19:49 AlexAlex 1122 bronze badges 1

• Wonder if your template has some malformed HTML. I know it'll be ugly, but can you try putting your html on a single line? ie. <section class="calendar-header"><button id="prev-month">Prev</button><p></p><div class="current-date">July 2024</div><p><button id="next-month">Next</button><br></p></section>. Also, FWIW, embedding <sections> in <sections> isn't semantically correct. – Tony Djukic Commented Apr 22, 2024 at 21:56

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Please try as below:

 function wp_reservations_shortcode($atts) {
    // remove auto paragraphs for shortcode content
    remove_filter('the_content', 'wpautop');
    remove_filter('the_excerpt', 'wpautop');

    ob_start();
    ?>
    <section>
        <section class="calendar-header">
            <button id="prev-month">Prev</button>
            <div class="current-date">July 2024</div>
            <button id="next-month">Next</button>
        </section>
        <section class="calendar-body">
            <div class="calendar-weekdays"></div>
            <div class="calendar-days"></div>
        </section>
    </section>
    <?php
    $html = ob_get_clean();

    // Re-enable automatic paragraphs
    add_filter('the_content', 'wpautop');
    add_filter('the_excerpt', 'wpautop');

    return $html;
}
add_shortcode('wp_reservations', 'wp_reservations_shortcode');

本文标签： pluginsHTML output from WordPress shortcode is wrapped in unexpected ltpgt tags