PHP/CSS: 短代码无法正确显示，并显示在每个页面的头部（内容之前）

Question

正在尝试创建要在弹出窗口中实现的简码。我试图在页面中央的 2x2 网格中显示四张图像。

问题在于此短代码现在会浮动所有内容，并且图像会垂直显示在彼此之上，而不是在页面中心显示为 2x2。

此外，当我在弹出窗口中实现短代码时，显示在每个页面顶部（页面内容之前）的内容，它不会显示在弹出窗口中。

我试过了：

ob_start();
return ob_get_clean();

这会阻止它显示在每个页面的头部，但它也不会输出任何其他内容。

我做错了什么？

在此处添加我的简码函数和下方 2x2 网格布局的 CSS。

简码函数：

<?php
function my_function() {

$args = array (
'post_type'              => 'my_cpt',
'nopaging'               => false,
'posts_per_page'         => '4',
'order'                  => 'ASC',
'orderby'                => 'rand',
);

$query = new WP_Query( $args );

if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
    $query->the_post();

$image = get_field('my_image_field');
$size = 'medium';?>

<div class="grid2x2">
    <div class="thegridbox">
    <div>'  
            ?><a href="<?php the_field('my_image_link'); ?> ">
                <img src="<?php wp_get_attachment_image( $image, $size ); ? 
>" />
            </a>                
    </div>  
</div>
</div>

<?php

}

} else {

echo 'Oops! Nothing found.';

}

wp_reset_postdata();    

}
add_shortcode( 'my_shortcode', 'my_function' );
?>

CSS 对于 2x2 网格布局：

.grid2x2 {
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.grid2x2 > div {
  display: flex; 
  flex-basis: calc(50% - 40px);  
  justify-content: center;
  flex-direction: column;
}
.grid2x2 > div > div {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.thegridbox { margin: 20px; }

Answer 1

你好看起来是grid2X2的关闭和打开位的问题class div。

你能试试下面的代码，看看它是否有效。当我复制粘贴你的代码时，我的编辑器也显示语法错误（额外的 space 靠近 img 标签）。只是想让你知道我没有测试代码所以不能保证它会工作。

<?php
function my_function() {

$args = array (
'post_type'              => 'my_cpt',
'nopaging'               => false,
'posts_per_page'         => '4',
'order'                  => 'ASC',
'orderby'                => 'rand',
);

$query = new WP_Query( $args );
$i=0;
ob_start();
if ( $query->have_posts() ) {

while ( $query->have_posts() ) {
    $query->the_post();

$image = get_field('my_image_field');
$size = 'medium';
?>
  <?php if($i==0 || $i ==2): ?>
<div class="grid2x2">
<?php endif;?>
    <div class="thegridbox">
    <div>  
        <a href="<?php the_field('my_image_link'); ?> ">
                <img src="<?php wp_get_attachment_image( $image, $size ); ?>" />
            </a>                
    </div>  
</div>
<?php if($i==1 || $i ==3): ?>
</div>
<?php endif; ?>

<?php
$i++;
}

} else {

echo 'Oops! Nothing found.';

}

wp_reset_postdata();    
return ob_get_clean();
}
add_shortcode( 'my_shortcode', 'my_function' );
?>

Answer 2

这是因为你用错了add_shortcode()函数。请检查 this。

"Note that the function called by the shortcode should never produce output of any kind. Shortcode functions should return the text that is to be used to replace the shortcode. Producing the output directly will lead to unexpected results. This is similar to the way filter functions should behave, in that they should not produce expected side effects from the call, since you cannot control when and where they are called from."

function my_function() {
    $retVal = '<div>Lorem ipsum dolor sit amet</div>';
    return $retVal;
}
add_shortcode( 'my_shortcode', 'my_function' );

ob_start()/ob_get_clean() 还有一个技巧（php 输出缓冲函数）。在这种情况下，您必须使用 ob_start();在你的 my_function() 开始写作之前调用 return ob_get_clean();在函数的末尾。

<?php
function my_function() {
    ob_start(); ?>

    <div>Lorem ipsum dolor sit amet</div>
    <?php echo '<div>Another Lorem ipsum dolor sit amet</div>';?>

<?php
    return ob_get_clean();
}
add_shortcode( 'my_shortcode', 'my_function' );

PHP/CSS: 短代码无法正确显示，并显示在每个页面的头部（内容之前）

PHP/CSS: Shortcode won't display correctly, and displays in the head (before content) on every page

css

php

wordpress

function

shortcode