PHP/CSS:Shortcode赢了'；t正确显示，并在每页的标题（内容之前）中显示

试图创建一个要在弹出窗口中实现的短代码。我试图在页面中心以2x2的网格显示四幅图像

问题是这个短代码现在将所有内容都浮动，图像垂直显示在彼此的顶部，而不是页面中心的2x2

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

我试过了：

ob_start();
return ob_get_clean();

<?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' );
?>

.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; }

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

我做错了什么

在这里添加我的短代码函数，并在下面添加2x2网格布局的CSS

短码功能：

ob_start();
return ob_get_clean();

<?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' );
?>

.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; }

---

您好，这里看起来是grid2X2类div的关闭和打开位的问题

你可以试试下面的代码，看看它是否有效。另外，我的编辑器在复制粘贴代码时显示语法错误（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' );
?>

---

这是因为您错误地使用了add\u shortcode（）函数。请查收

请注意，由短代码调用的函数不应产生任何类型的输出。短代码函数应返回用于替换短代码的文本。直接生成输出将导致意外的结果。这与筛选器函数的行为方式类似，因为它们不应在调用中产生预期的副作用，因为您无法控制从何时何地调用它们。”

函数我的函数（）{
$retVal='Lorem ipsum dolor sit amet'；
返回$retVal；
}
添加_短代码（“我的_短代码”、“我的_函数”）；

还有另一个技巧（php输出缓冲函数）。 在这种情况下，必须在开始写入my_函数（）之前使用ob_start（），并在函数末尾调用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' );

Lorem ipsum dolor sit amet
这非常有效！谢谢。我还试图添加一个段落，我想显示在网格顶部的中心。比如标题“4篇最受欢迎的文章”之类的东西。但是我的段落输出在每篇文章的顶部，而不是在网格顶部单独输出一次。你会怎么做？@Santosh Sapkota