php - Wordpressはphpとhtmlテンプレートをショートコードに変換します

Question

最近のブログ投稿を css グリッドで表示するこの php コードからショートコードを作成したいと考えています。各ブログの画像やその他のメタデータを表示しています。

<div class="wrapper">
    <?php $q = new WP_Query( 'posts_per_page=3' ); ?>

    <div class="recent-blogs">
      <?php while ( $q->have_posts() ) : $q->the_post(); ?>

        <div class="blog-item">
          <h3 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

          <?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' ); ?>    
          <img class="image" src="<?php echo $url ?>" />

          <div class="avatar"><?php echo get_avatar( get_the_author_meta('ID'), 40); ?></div>
          <div class="author"><?php the_author_posts_link(); ?></div>
          <div class="time"><?php the_time('m.d.y'); ?></div>
          <div class="category"><?php the_category(); ?></div>
          <div class="comments"><?php comments_number(); ?></div>
          <?php the_excerpt(); ?>
        </div>

      <?php endwhile; ?>
      <?php wp_reset_postdata(); ?>

    </div>    
</div>

基本的に、すべてのコンテンツの後にテンプレートが page.php に表示されるようになりました。ページビルダーをより細かく制御して、必要な場所に配置できるようにしたいと考えています。私のphpスキルは悪く、htmlを単一の文字列に連結しようとしましたが、ループとこれらすべてのphp変数のためにいつも失敗します。また、ob_start()、ob_get_clean()、および ob_get_contents() を使用してみましたが、何らかの理由で無限ループになってしまいます。

function recent_blogs_grid() {}
add_shortcode('recent_blogs_grid', 'recent_blogs_grid');