• 解決済 aceec

    (@aceec)


    WP REST APIを使って、静的HTMLサイトにWordPressの最新記事3件を表示させていたのですが、先週~先々週あたりから全く何も表示されなくってしまったようです。

    (WordPressのトップページ)/wp-json/wp/v2/posts?_embed

    ↑のJSON形式ファイル自体には正常にアクセスできるので、jsonデータを取得できていないという事ではないと思います。プラグインも一度すべて無効化してみましたが、改善されませんでした。

    なにぶん知識がまったくなく、調べても見つからないお手上げの状態です。どうかお知恵を拝借頂ければ幸いです。

    なお、ソースコードは下記のものを使っています。

    <!-- ここに表示するよ -->
    <li class="delete-marker">
    <div class="wp-post"></div>
    </li>
    <div class="more_btn"><a href="/info/">AND MORE</a></div>
    <!-- ここに表示するよ -->
    
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script type="text/javascript">
    var post = {
    site_url: 'https://(WordPressのトップページ)/', //WPで記事を追加しているサイトURLを記述してください
    num: 3, //表示したい記事数
    };
    //アイキャッチを取得したい場合は[&_embed]を追加する
    api = post.site_url + "/wp-json/wp/v2/posts?per_page="+post.num+"&_embed";
    
    $.getJSON( api, function(results) {
    $.each(results, function(i, item) {
    //各項目を変数へ格納
    var date_data = new Date(item.date);//日付を整形
    var year = date_data.getFullYear();//日付を整形(年)
    var month = date_data.getMonth() + 1;//日付を整形(月)
    var day = date_data.getDate();//日付を整形(日)
    var title = item.title.rendered;//記事タイトル
    var link = item.link;//記事のリンク
    var date = year + '年' + month + '月' + day + '日';//投稿日
    var thum = item._embedded["wp:featuredmedia"][0].media_details.sizes.medium.source_url;  //アイキャッチ
    
    //指定のクラスへ投稿を追加
    $('.wp-post').append("<li class='post_contest ap-column float"+post.column+"'><div><a class='post_img_wrap' href='" + link + "'><img src='" + thum + "'></a><p class='post_date'>" + date + "</p><p class='post_title '><a href='" + link + "'>" + item.title.rendered + "</a></p></div></li>");
     });
     });
    </script>
    • このトピックはaceecが9ヶ月前に変更しました。
3件の返信を表示中 - 1 - 3件目 (全3件中)
  • ishitaka

    (@ishitaka)

    こんにちは

    ざっと見た感じですが、投稿がアイキャッチ画像を持たない場合やアイキャッチ画像が中サイズ(medium)の画像を持たない場合に JavaScript エラーになりそうです。

    最新投稿3件の中にアイキャッチ画像を持たない投稿がありませんか?

    トピック投稿者 aceec

    (@aceec)

    ご返信頂きありがとうございます。

    投稿がアイキャッチ画像を持たない場合やアイキャッチ画像が中サイズ(medium)の画像を持たない場合に JavaScript エラーになりそうです。との事なので、

    JSONの中身を確認してみた所、一番新しい投稿記事の「wp:featuredmedia」から先に下記のようなエラーが出ており、アイキャッチ画像が取得できない状態になっているようでした。

    code: "rest_forbidden"
    data:status: 401
    message:"その操作を実行する権限がありません。"

    ですので当該記事を一度削除してみた所、以前のように最新記事が表示されるようになりました!

    なぜこのようなエラーが出たのかはこれから調べますが、原因がわかり、一旦解決することができ本当に助かりました。

    この度はありがとうございました。

    トピック投稿者 aceec

    (@aceec)

    その後、「wp:featuredmedia」から先にエラーが出ていた記事については、アイキャッチ画像をアップロードし直して再投稿すると、エラーが出ず、HTMLサイト側にも問題なく表示されました。

    これでこちらの件は完全解決となります。この度はご助言ありがとうございました。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「WP REST APIでの他サイトへの記事表示について」には新たに返信することはできません。