短代码正在 the_content 移动到 WordPress 的文章容器之外

Question

我制作了一个短代码函数，returns 一些高级自定义字段取决于选择的转发器字段。它以正确的顺序正确显示，但是在短代码下键入的任何内容都会移到其 <article> 容器元素之外。

代码如下：

function boxes_shortcode($atts, $content = null) {

ob_start(); ?>

<div id="boxes">
    <div class="box-gutter"></div>
    <div class="box-sizer"></div>
<?php while( have_rows('box_repeater') ): the_row();
$image_id = get_sub_field('link_image');
$image_size = 'box-thumbnail';
$image_array = wp_get_attachment_image_src($image_id, $image_size);
$linkImage = $image_array[0]; ?>

    <?php if(get_sub_field('box_type') == "box-link"): ?>
        <div class="box">
        <div class="link-box">
            <img src="<?php echo $linkImage; ?>" alt="<?php echo $linkImage['alt']; ?>" />
            <a class="caption-wrapper" href="http://www.google.com">
            <span id="link-box-content" style="background:<?php the_sub_field('link_background_colour'); ?>">
                <h6 style="color:<?php the_sub_field('link_title_colour'); ?>"><?php the_sub_field('link_title'); ?></h6>
                <h4 style="color:<?php the_sub_field('link_text_colour'); ?>"><?php the_sub_field('link_text'); ?></h4>
                <p style="color:<?php the_sub_field('link_text_colour'); ?>" href="<?php the_sub_field('link_url'); ?>"><?php the_sub_field('link_url_text'); ?> ></p>
            </span>
            </a>
        </div>
        </div>
    <?php endif;

    if(get_sub_field('box_type') == "box-quote"): ?>
        <div class="box">
        <div class="quote-box">
                <div class="quotation-mark"></div>
                <h4><?php the_sub_field('quote'); ?></h2>
                <p><?php the_sub_field('quote_source'); ?></p>
                <a href="<?php the_sub_field('quote_link_url'); ?>"><?php the_sub_field('quote_link_text'); ?> ></a>
        </div>
        </div>
    <?php endif;

    if(get_sub_field('box_type') == "box-twitter"): ?>
        <div class="box">
        <div class="twitter">
            <a class="twitter-timeline" href="<?php the_sub_field('twitter_url'); ?>" data-widget-id="<?php the_sub_field('twitter_widget_id'); ?>" data-chrome="noheader noscrollbar nofooter noborders transparent" data-tweet-limit="<?php the_sub_field('number_of_tweets'); ?>"></a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
            <a class="twitter-badge" href="<?php the_sub_field('twitter_url'); ?>"></a>
            <div class="twitter-bottom"><a href="<?php the_sub_field('twitter_url'); ?>">See more ></a></div>
        </div>
        </div>
    <?php endif;
endwhile;?>
    </div>
    </div>
</div>
<?php 
/* Get the buffered content into a var */
$sc = ob_get_contents();

ob_end_clean();

return $sc;

}
add_shortcode('boxes', 'boxes_shortcode');

谁能帮忙解开这个谜团？非常感谢。

Answer 1

您的代码中有两个额外的结束 <div>。

试试这个：

function boxes_shortcode($atts, $content = null) {
ob_start(); ?>
<div id="boxes">
    <div class="box-gutter"></div>
    <div class="box-sizer"></div>
<?php while( have_rows('box_repeater') ): the_row();
$image_id = get_sub_field('link_image');
$image_size = 'box-thumbnail';
$image_array = wp_get_attachment_image_src($image_id, $image_size);
$linkImage = $image_array[0]; ?>

    <?php if(get_sub_field('box_type') == "box-link"): ?>
        <div class="box">
            <div class="link-box">
                <img src="<?php echo $linkImage; ?>" alt="<?php echo $linkImage['alt']; ?>" />
                <a class="caption-wrapper" href="http://www.google.com">
                <span id="link-box-content" style="background:<?php the_sub_field('link_background_colour'); ?>">
                    <h6 style="color:<?php the_sub_field('link_title_colour'); ?>"><?php the_sub_field('link_title'); ?></h6>
                    <h4 style="color:<?php the_sub_field('link_text_colour'); ?>"><?php the_sub_field('link_text'); ?></h4>
                    <p style="color:<?php the_sub_field('link_text_colour'); ?>" href="<?php the_sub_field('link_url'); ?>"><?php the_sub_field('link_url_text'); ?> ></p>
                </span>
                </a>
            </div>
        </div>
    <?php endif;

    if(get_sub_field('box_type') == "box-quote"): ?>
        <div class="box">
        <div class="quote-box">
                <div class="quotation-mark"></div>
                <h4><?php the_sub_field('quote'); ?></h2>
                <p><?php the_sub_field('quote_source'); ?></p>
                <a href="<?php the_sub_field('quote_link_url'); ?>"><?php the_sub_field('quote_link_text'); ?> ></a>
        </div>
        </div>
    <?php endif;

    if(get_sub_field('box_type') == "box-twitter"): ?>
        <div class="box">
        <div class="twitter">
            <a class="twitter-timeline" href="<?php the_sub_field('twitter_url'); ?>" data-widget-id="<?php the_sub_field('twitter_widget_id'); ?>" data-chrome="noheader noscrollbar nofooter noborders transparent" data-tweet-limit="<?php the_sub_field('number_of_tweets'); ?>"></a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
            <a class="twitter-badge" href="<?php the_sub_field('twitter_url'); ?>"></a>
            <div class="twitter-bottom"><a href="<?php the_sub_field('twitter_url'); ?>">See more ></a></div>
        </div>
        </div>
    <?php endif;
endwhile;?>
    </div>
    <!--/div>
</div-->
<?php 
/* Get the buffered content into a var */
$sc = ob_get_contents();

ob_end_clean();

return $sc;

}
add_shortcode('boxes', 'boxes_shortcode');

短代码正在 the_content 移动到 WordPress 的文章容器之外

Shortcode is moving the_content outside of the article container in WordPress

php

wordpress

shortcode

advanced-custom-fields