カスタムフィールドを付けているカスタム投稿タイプをトップページで呼び出したい場合

結果を言えば、サブループを使います。

サブループの使い方

<section class="example"> 
  <div class="container example_container">
    <h2 class="example_title">タイトル</h2>
    <div class="example_card-box">

      <?php
      $args = array(
        'post_type' => 'example', //画像1の赤枠の部分
        'post_status' => 'publish', //公開済みの投稿
        'posts_per_page' => 3 //表示したい件数
      );
      $the_query = new WP_Query($args);
      if ($the_query->have_posts()) :
        while ($the_query->have_posts()) :
          $the_query->the_post();
      ?>

          <div class="example_card-list"><a href="" class="example_card-link">
              <p class="example_card-item-title"><?php the_field('title'); ?></p> //カスタムフィールドのフィールドグループの名前部分(画像2)
              <figure class="example_card-item-img">
                <?php if (get_field('image')) : ?>　
                  <img src="<?php the_field('image'); ?>" alt="">
                <?php endif; ?>
              </figure>
              <div class="example_card-item-text-top">
                <p class="example_card-item-profession"><?php the_field('profession'); ?></p>
                <p class="example_card-item-name"><?php the_field('name'); ?></p>
              </div>
              <!-- example_card-item-text-top -->
              <p class="example_card-item-period"><?php the_field('period'); ?></p>
            </a>
            <!-- example_card-link -->
          </div>
          <!-- example_card-list -->

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

    </div>
    <!-- example_card-box -->
  </div>
  <!-- container -->
</section>

$the_query = new WP_Query($args);
      if ($the_query->have_posts()) :
        while ($the_query->have_posts()) :
          $the_query->the_post();

の部分は実は

<?php if (have_posts()):
 while (have_posts()):
 the_post(); 
?>

とそっくり。

見比べてみてください。

理解しやすくなるかもしれません。

誤りなどございましたらご指摘いただけると幸いです。

参考サイト

WordPress メインループとサブループの表示方法