PHP / CSS: шорткод не отображается правильно и отображается в заголовке (перед содержимым) на каждой странице

Привет. Похоже, это проблема с закрытием и открытием блока div класса grid2X2.

Можете ли вы попробовать следующий код и посмотреть, работает ли он. Также мой редактор показывает синтаксическую ошибку, когда я копирую вставленный ваш код (дополнительное пространство рядом с тегом 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_shortcode (). Пожалуйста, проверьте это.

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