wordpressでのサイト内検索結果がうまく表示されない

wordpressの自作テーマにサイト内検索を組み込んだのですが、検索結果画面が下記添付画像の様にテーマが表示されず文字だけになってしまいます。

完成イメージとしては下記添付画像の様にテーマのループ部分に検索結果を表示させたいです。

search.phpのコードは下記サイトから拝借しました。
https://hirashimatakumi.com/blog/3109.html
search.phpにindex.phpを全てコピーして検索結果を表示すればいいのはなんとなく分かるのですが、どういった記述をすればいいのかが分かりません。
どういった記述をすれば自作テーマのループ部分に検索結果が表示できるのか教えて頂きたいです。
よろしくお願いします。

PHP
1//index.php
2
3<?php get_header(); ?>
4
5
6
7<!--ページ上部にスクロールするボタン
8 <p id="pageTop"><a href="#"><i class="fa fa-chevron-up"></i></a></p>
9-->
10
11
12<div class="sp-newarticle">
13  <p>新着記事</p>
14</div>
15
16
17<div class="main">
18
19  <div class="articles">
20    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
21    <article class="article">
22            <img class="article-img" src="<?php echo catch_that_image(); ?>">
23            <div class="article-right">
24          <header>
25            <h2 class="article-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
26          <section>
27            <div class="section-header">
28
29
30            <ul class="article-genre">
31              <li><time><i class="far fa-clock"></i><?php the_time('Y/m/d'); ?></time></li>
32              &ensp;
33              <li><a href="#"><i class="fas fa-tag"></i><?php the_category(' '); ?></a></li>
34              <li class="article-tag"><a href="#"><?php the_tags( '', ' , ' ); ?></a></li>
35            </ul>
36        </div>
37      </section>
38
39          </header>
40
41<section class="article-text">
42    <p> <?php the_excerpt(); ?>
43</p>
44</section>
45<footer>  <a class="read-more" href="<?php the_permalink(); ?>">続きを読む</a> </footer>
46        </div>
47
48    </article>
49    <?php
50  endwhile;
51      endif;
52      ?>
53  </div>
54
55<?php get_sidebar(); ?>
56</div>
57
58
59
60  <?php
61  //Pagenation
62  if (function_exists("pagination")) {
63  	pagination($additional_loop->max_num_pages);
64  }
65  ?>
66
67<div class="mobile-search">
68  <p class="mobile-search-title">サイト内検索</p>
69    <?php  get_search_form(); ?>
70</div>
71
72<aside id="mobile-rank"><?php dynamic_sidebar( 'side-widget2' ); ?></aside>
73  </div>
74
75<?php get_footer(); ?>
76

PHP
1//search.php
2
3<?php if (have_posts()): ?>
4<?php
5  if (isset($_GET['s']) && empty($_GET['s'])) {
6    echo '検索キーワード未入力'; // 検索キーワードが未入力の場合のテキストを指定
7  } else {
8    echo '“'.$_GET['s'] .'”の検索結果：'.$wp_query->found_posts .'件'; // 検索キーワードと該当件数を表示
9  }
10?>
11<ul>
12<?php while(have_posts()): the_post(); ?>
13<li>
14<a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a>
15</li>
16<?php endwhile; ?>
17</ul>
18<?php else: ?>
19検索されたキーワードにマッチする記事はありませんでした
20<?php endif; ?>