「Google Feed API」廃止の問題？ワードプレス記事の一覧をトップページに表示したい

Question

ワードプレスのサイトをサーバー移行しました。
移行に使用したのは、ワードプレスのプラグイン「All-in-One WP Migration」です。

旧サーバーから新サーバーに移行後、トップページを確認すると、記事の一覧が表示されていたところが、空っぽになっていました。

コードを調べると、「id="feed"」と記載があったので、調べると、どうも「Google Feed API」というのを使用していたようです。（feed.jsなどもフォルダに入っていました。）

「Google Feed API」が廃止になったための対応方法が記載されている、下記のサイトがあったので、試してみましたが、表示は変わらず、一覧が表示されませんでした。

参考にしたサイト

ここで質問です。

①記事を見ると、
「Google Feed API」が廃止になったあとは、急に表示されなくなった・・・というニュアンスでした。
が、旧サーバーでは、今も一覧が表示されています。
・・・ということは、この廃止が直接の原因ではないと見たほうがよいのでしょうか？

②新サーバーで、一覧を表示させるために、参考サイトに記載している内容をコピペしてやってみましたが、表示されませんでした。

<!-- ニュースRSSフィード取得 -->
<script type="text/javascript">
$(function() {
    var setURL = 'フィードのURL'; //feedのURL
    var setNUM = 8; //表示件数
    var setID = 'feed'; //表示させる箇所のID
    xmlLoad(setURL,setID,setNUM);
});
function xmlLoad(_xmlUrl,_id,_num){
    DD = new Date();HH = DD.getHours();MM = DD.getMinutes();SS = DD.getSeconds();
    var xmlUrl = _xmlUrl+"?"+HH+MM+SS;  //キャッシュ対策のクエリを付与
    var main = this;
    $.ajax({
    url: xmlUrl,
    type: 'GET',
    dataType: 'xml',
    timeout: 10000,
    error: function(){
        _msg = 'error';
        xmlOpen(_msg,_id,_num);
    },
    success: function(_xml){
        main.xml = _xml;
        _msg = 'load';
        xmlOpen(_msg,_id,_num);
    }
    });
    return;
}
var xmlOpen = function(_msg,_id,_num){
    var main = this;
    var html = '';
    var ID = _id;
    var Num = _num;
    var userAgent = window.navigator.userAgent.toLowerCase();
    if(_msg == 'load'){
        xml = main.xml;
        var channelData = $(xml).find('channel')[0];
        $(channelData).find('item').each(function(i){
            if(i < Num){
            postTitle = $(this).find('title').text();//記事タイトル取得
            postLink = $(this).find('link').text();  //記事リンク取得
            //日付の取得
            publishedDate = $(this).find('pubDate').text();
            var pdate = new Date(publishedDate); //Dateクラス
            var pyear = pdate.getFullYear();   //年
            var pmonth = pdate.getMonth() + 1; //月
            var pday = pdate.getDate();        //日
            //日付を2桁表示に変更
            if (pyear < 2000) pyear += 1900;
            if (pmonth < 10) {pmonth = "0" + pmonth;}
            if (pday < 10) {pday = "0" + pday;}
            var postDate = pyear + "." + pmonth + "." + pday + " ";
            //サムネイル画像の取得
            var description = $(this).find('description')[0].firstChild.nodeValue;
            var thumbnails = description.match(/<img[^>]+>/gi);
            thumbnail = thumbnails[0];
            //html生成
html += '<li class="rss-thumbnail">';
html += '<p><a href="' + postLink + '">' + thumbnail + '</a></p>';
html += '<div class="meta">';
html += '<span class="date">' + postDate + '</span>';
html += '<div class="tit"><a href="' + postLink + '">';
html += '<span>' + postTitle + '</span>';
html += '</a></div>';
html += '</div>';
html += '</li>';
            }
        });     
    }else{
        //エラー時の表示
        html += '<li>通信エラー</li>';
    }
    $("#"+ID).html(html);
}
</script>
<style>.rss-thumbnail .date{display:none;}</style>

ファイルの階層は下記のように、newsフォルダの中にワードプレスが入っている状態で、一つ上の階層にindex.htmlのトップぺ－ジがあります。

この場合、コードの上から4行目の「var setURL = 'フィードのURL'; //feedのURL」には、
○○○○○○○○/news としましたが、一覧は反映されませんでした。

どのようにしたら、トップページにワードプレスの記事一覧が表示されますか？

よろしくお願いします。

◆トップページに表示させたいのは、ワードプレスの投稿記事の一覧です。
◆○○○○○○○○/news　は、CSSがきいていないようで崩れて表示されています。
（トップページは正常）
◆ワードプレスのバージョン ：　5.2.4–ja です。

Answer 1

新サーバーで、一覧を表示させるために、参考サイトに記載している内容をコピペしてやってみましたが、表示されませんでした。

ファイルの階層は下記のように、newsフォルダの中にワードプレスが入っている状態で、一つ上の階層にindex.htmlのトップぺ－ジがあります。

この場合、コードの上から4行目の「var setURL = 'フィードのURL'; //feedのURL」には、

○○○○○○○○/news としましたが、一覧は反映されませんでした。

質問に記載のディレクトリ構成の場合、○○○○○○○○/news は、feed (RSS) の URL ではなく WordPress サイト TOP の URL と思います。

WordPress の RSS(frrd) の URL は、標準状態では、URL の最後に feed/ が付きます。
質問に記載された構成では、おそらく ○○○○○○○○/news/feed/ が、RSS の URL になっているのではないかと思います。

なお、質問に記載された JavaScript は、 URL から取得できるデータが、XML 形式フォーマットと固定で作成されているので、XML以外形式(例えばHTML)が入力された場合は、正常に各項目の値が取得できません。　値が取得できていないので、1件も表示されないのだと思います。

---

○○○○○○○○/news　は、CSSがきいていないようで崩れて表示されています。

については、Web ブラウザのデベロッパーツール等で、CSS 読み込みのエラーが出ていないか確認してください。

移行の際にファイルのパスが変わったり、変更を忘れている部分があったりしないでしょうか？

Comments

[konoha0708]

丁寧に回答いただき、ありがとうございます。
最後にfeed/ が来るのですね。知らなかったです。
CSSが効いていない件につきましても、デベロッパーツールを確認してみます。
諸事情により、本日操作できないため、明日いただいたお答えの確認を含め、検証したいと思います。
とりいそぎお礼のみ失礼します。

[konoha0708]

たびたびすみません。
↓引用
JavaScript は、 URL から取得できるデータが、XML 形式フォーマットと固定で作成されているので、XML以外形式(例えばHTML)が入力された場合は、正常に各項目の値が取得できません。

・・とのことですが、htmlにも対応するようにするには、どう記載すればよいのでしょうか。
知識が乏しくすみません。

[konoha0708]

xmlをhtmlに変更すればよいのでしょうか？

[CHERRY]

WordPress 側のFeed URL を参照するようにしてください。
HTML に対応するのは、JavaScript の大幅な修正が必要です。

[konoha0708]

回答ありがとうございます。
私の知識・理解力が足りなく、攻略できなかったため、今回は、ワードプレスのテンプレートタグを直接書いて、データを取得する方法に変更しました。
お騒がせしてすみません。
今後、Feedの対応も勉強していきたいと思います。
ありがとうございました。