Искажение кода wordpress, не работают the_fields

Хочу перенести верстку на wordrpress когда вставляю код главной страницы она сильно искажается получается что все страница лежит в другом div хотя если запускать сайт с файла то все нормально

Плюс не работают the_field хотя я прописал весь текст и контент туда, код:

<div class="block1">
 
      
  
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="0">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="<?php the_field('slider1'); ?>" class="d-block" alt="...">
    </div>
    <div class="carousel-item">
      <img src="<?php the_field('slider2'); ?>" class="d-block" alt="...">
    </div>
    <div class="carousel-item">
      <img src="<?php the_field('slider3'); ?>" class="d-block" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>


<div class="block2">
  <h2 class="block2_title">

    <?php the_field('Name'); ?>

  </h2>

  <div class="container">
    <div class="row">
      <div class="col-md-6 block2_col1">
        <img src=" <?php the_field('block1_img'); ?>" alt="" class="block2_img">
      </div>

      <div class="col-md-6">
        <h4 class="block2_text1">
        <?php the_field('block1_text1'); ?>
        </h4>
        <ul>
          <li class="block2_li"><?php the_field('block1_li1'); ?></li>
           <li class="block2_li"><?php the_field('block1_li2'); ?></li>
            <li class="block2_li"><?php the_field('block1_li3'); ?></li>
        </ul>
          

   
        <h4 class="block2_text3">
           
<?php the_field('block1_text2'); ?>
        </h4>
      </div>
    </div>
  </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="<?php bloginfo('template_directory') ?>/vue-carousel-3d.min.js"></script>
<div class="block3">
  <h1 class="block3_title">
<?php the_field('photogalery'); ?>
  </h1>
  <div class="container block3_cont">
    <div class="row block3_row">
      <div class="col-xl-12">
        <div id="example">
    
  <carousel-3d :perspective="0" :display="3" :space="500">
    <slide v-for="(slide, i) in slides" :index="i">
      <figure>
          <img v-bind:src="slide.src" />
          <figcaption>
            <h2>{{slide.title}}</h2>
            <p>{{slide.desc}}</p>
          </figcaption>
      </figure>
    </slide>
  </carousel-3d>

</div>
<script>
new Vue({
  el: '#example',
  data: {
    slides: [{
      src: '<?php the_field('slider2_1'); ?>',

    }, {
      src: '<?php the_field('slider2_2'); ?>',

    }, {

      src: '<?php the_field('slider2_3'); ?>',
 
    }, {

      src: '<<?php the_field('slider2_1'); ?>',

    }, {

      src: '<?php the_field('slider2_2'); ?>',

    }]
  },
  components: {
    'carousel-3d': Carousel3d.Carousel3d,
    'slide': Carousel3d.Slide
  }
})
</script>

      </div> 
    </div>
  </div>
</div>


<div class="block4">
  <h2 class="block4_title"><?php the_field('block3_text'); ?></h2>
  <div class="container">
    <div class="row">
      <div class="col-xl-12">
     <iframe class="block4_vid" src="<?php the_field('videolink'); ?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <img src="<?php the_field('block3_img'); ?>" alt="" class="block4_img">
        <h4 class="block4_text"><?php the_field('block3_desc1'); ?></h4>
           <h4 class="block4_text"> 
  <?php the_field('block3_desc2'); ?>
           </h4>
      </div>
    </div>
  </div>
</div>


<div class="block5">
  <div class="container">
    <div class="row">
      <div class="col-xl-12">
        <h2 class="block5_title">
<?php the_field('characters'); ?>
        </h2>
        <ul>
          <li class="block5_li"><h4 class="block5_text"><?php the_field('character1'); ?></h4></li>
          <li class="block5_li"><h4 class="block5_text"><?php the_field('character2'); ?></h4></li>
          <li class="block5_li"><h4 class="block5_text"><?php the_field('character3'); ?></h4></li>
          <li class="block5_li"><h4 class="block5_text"><?php the_field('character4'); ?></h4></li>
        </ul>
      </div>
    </div>
  </div>
</div>


<?php get_footer() ?>