Php/css：短码不能正确显示，并且只显示在头部(内容之前)

尝试创建要在弹出窗口中实现的短代码。我试图在页面中心以2x2的网格显示四幅图像。问题是这个短代码现在将所有内容都浮动，图像垂直显示在彼此的顶部，而不是在页面中心显示2x2。

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

I\'ve tried:

ob_start();
return ob_get_clean();

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

我做错了什么？

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

Shortcode Function:

<?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 for the 2x2 frid layout:

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

与控件有关的WordPress CSS问题

我应该在哪里以及如何开始修复糟糕的设计问题？我不能改变主题，我必须学会如何修复当前主题，我想是通过CSS？如何正确对齐所有文本框，如何更改框（顶部为灰色）颜色和按钮颜色？这些都是通过短代码在简单页面中实现的。谢谢

相关推荐

与控件有关的WordPress CSS问题