静的ページにwordpressの新着情報をのせたい

前提・実現したいこと

現在WEBページを作成しております。

内容としては、
トップページをHTMLの静的ページ。
ブログページをwordpressを使って作成しております。

実現したいこととしては、wordpressで投稿した記事を
トップページの新着情報としてのせたいです。

発生している問題・エラーメッセージ

PHPの知識があまりないため、
ajaxを利用して、wordpressの新着情報を取得して、
HTMLに表示させようと思ったのですが、うまくいきません。
参照：https://designsupply-web.com/media/knowledgeside/2086/

「HTML静的ページ↓」(省略されてる)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
                       <script>
                            $(function(){
                                var displayAmount = 5;    // 表示させる数量 
                              $.ajax({
                                url: 'http://simpull.com/blog/',    // 表示させたいコンテンツがあるページURL
                                cache: false,
                                datatype: 'html',
                                success: function(html) {
                                    var h = $(html).find('.article');    // 表示させたいコンテンツの要素を指定
                                    for (var i = 0; i < displayAmount; i++) {
                                        $('.roop').append(h[i]);    // append関数で指定先の要素へ出力
                                    }
                                }
                              });
                            });
                          </script>

<div class="container wrapper">
          <div class="row">
              <div class="col-lg-6 roop">
                  ここに取得したデータをのせたい
              </div>
          </div>
      </div>

「wordpressのindex.php↓」（省略されてる）

<?php if ( have_posts() ) : //条件分岐：投稿があるなら ?>
    
    <div class="blog clearfix">
    <h1 class="blog-h1">ブログ</h1>
    <div class="page index-page">
    <?php while ( have_posts() ) : the_post();//繰り返し処理開始 ?>
                <div class="article">　　　←この要素のデータを取得したい
                    <h2><a href="<?php the_permalink(); //投稿（固定ページ）のリンクを取得 ?>"><?php the_title(); //投稿（固定ページ）のタイトルを表示 ?></a></h2>
                    <p class="day"><?php the_time('Y.m.d');//投稿日時を表示 パラメータで書式を指定 ?></p>
                    <p><?php the_excerpt(); //投稿（固定ページ）の要約を表示 ?>
                    </p>
                    <a href="<?php the_permalink(); ?>" class="btn">詳細はこちら</a>
                </div>
    <?php endwhile; // 繰り返し終了 ?>
    </div>

ちなみに階層は

という感じです。

エラーメッセージ

トップページのindex.htmlに新着情報が表示されない

tabuu

2020/09/02 02:05

エラーが出ていないか確認してください。 GoogleChromeであれば開発者ツールのconsoleタブで確認できます。

sakazume

2020/09/02 09:11

jquery.min.js:4 Mixed Content: The page at 'https://simpull.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://simpull.com/blog?_=1599037794282'. This request has been blocked; the content must be served over HTTPS. というエラーが出ました。

sakazume

2020/09/02 09:58

記述をhttpsに変更したら直りました。ありがとうございます。