WordPress で運用している複数のサイトの記事を、別のサイトに読み込んで表示する方法

何ができるか？

WordPress で運用している複数のサイトの記事を、別のサイトに読み込んで表示できる。

WordPress のテンプレートタグは使えないのか？

「複数サイト」という条件があると、使えない。

<?php require_once ('./wp/wp-load.php'); ?>

1	<?php require_once ('./wp/wp-load.php'); ?>

PHP でこれを付けると、同じドメインに限り記事を読み込めるが、「複数サイト」で読み込む方法が見つからなかった。

方法

jQuery で、WordPress のJSON を読み込む

“http://www.hogehoge.com/wp1/” にWordPress がインストールされている場合、次のURL でアクセスすると、JSON が取得できる。

http://www.hogehoge.com/wp1/wp-json/wp/v2/posts?_embed&per_page=3

1	http://www.hogehoge.com/wp1/wp-json/wp/v2/posts?_embed&per_page=3

“posts”以降の記述は、”_embed”で写真データを要求、”per_page=3” で記事を3つ取得

HTML の表示部分

<div class="p-blog__first"></div>

1	<div class="p-blog__first"></div>

JavaScript コード

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><!-- jquery を読み込み -->
    <script type="text/javascript">
        $.getJSON( "http://www.hogehoge.com/wp/wp-json/wp/v2/posts?_embed&per_page=3", 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 datetime = year + '-' + month + '-' + day;
                /* 記事アイキャッチ画像の取得、画像がない場合は、代替画像を使う*/
                var thum
                if (item._embedded["wp:featuredmedia"]) {
                    thum = item._embedded["wp:featuredmedia"][0].media_details.sizes.thumbnail.source_url
                } else {
                    thum = "/images/logo.jpg";
                }
                /* 記事の書き出し */
                $(".p-blog__first").append(
                "<div class='p-blog'>
                <a href='"+
                link + "' class='p-blog__link'>" +
                "<div class='p-blog__thumb'><img src='" +
                thum + "' alt='#'></div>" +
                "<p class='p-blog__date'><time datetime='" +
                datetime + "'>" +
                date + "</time></p>" +
                "<p class='p-blog__title'>" +
                title + "</p></a></div>");
            });
        });
        </script>

$.getJSON( "http://www.hogehoge.com/wp/wp-json/wp/v2/posts?_embed&per_page=3", 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 datetime = year + '-' + month + '-' + day;

/* 記事アイキャッチ画像の取得、画像がない場合は、代替画像を使う*/

var thum

if (item._embedded["wp:featuredmedia"]) {

thum = item._embedded["wp:featuredmedia"][0].media_details.sizes.thumbnail.source_url

} else {

thum = "/images/logo.jpg";

}

/* 記事の書き出し */

$(".p-blog__first").append(

"<div class='p-blog'>

<a href='"+

link + "' class='p-blog__link'>" +

"<div class='p-blog__thumb'><img src='" +

thum + "' alt='#'></div>" +

"<p class='p-blog__date'><time datetime='" +

datetime + "'>" +

date + "</time></p>" +

"<p class='p-blog__title'>" +

title + "</p></a></div>");

});

</script>

複数ブログを読み込む

HTML の表示部分

<div class="p-blog__first"></div>
<div class="p-blog__second"></div>

1 2	<div class="p-blog__first"></div> <div class="p-blog__second"></div>

JavaScript コード

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery( function () {
        /* 各ブログのJSONを指定。URL に"_embed"で写真データを要求、"per_page=3" で記事を3つ取得*/
        /* 1つ目のブログ最新記事を表示 */
        readBlogJson("http://www.hogehoge.com/wp1/wp-json/wp/v2/posts?_embed&per_page=3", ".p-blog__first");
        /* 2つ目のブログ最新記事を表示 */
        readBlogJson("http://www.hogehoge.com/wp2/wp-json/wp/v2/posts?_embed&per_page=3", ".p-blog__second");
    });
    /* JSON を取得して、ブログ最新記事を表示 
     * 引数は、url:WordPress JSON のURL、dom:内容を表示するHTMLのクラス名 */
    function readBlogJson(url, dom) {
    /* 各WordPress のJSON を読み込んで、記事を表示する*/
        $.getJSON( url, 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 datetime = year + '-' + month + '-' + day;
                /* 記事アイキャッチ画像の取得、画像がない場合は、代替画像を使う*/
                var thum
                if (item._embedded["wp:featuredmedia"]) {
                    thum = item._embedded["wp:featuredmedia"][0].media_details.sizes.thumbnail.source_url
                } else {
                    thum = "/images/logo.jpg";
                }
                /* 記事の書き出し */
                $(dom).append(
                "<div class='p-blog'><a href='"+
                link + "' class='p-blog__link'>" +
                "<div class='p-blog__thumb'><img src='" +
                thum + "' alt='#'></div>" +
                "<p class='p-blog__date'><time datetime='" +
                datetime + "'>" +
                date + "</time></p>" +
                "<p class='p-blog__title'>" +
                title + "</p></a></div>");
            });
        });
    }
    </script>

jQuery( function () {

/* 各ブログのJSONを指定。URL に"_embed"で写真データを要求、"per_page=3" で記事を3つ取得*/

/* 1つ目のブログ最新記事を表示 */

readBlogJson("http://www.hogehoge.com/wp1/wp-json/wp/v2/posts?_embed&per_page=3", ".p-blog__first");

/* 2つ目のブログ最新記事を表示 */

readBlogJson("http://www.hogehoge.com/wp2/wp-json/wp/v2/posts?_embed&per_page=3", ".p-blog__second");

});

/* JSON を取得して、ブログ最新記事を表示

* 引数は、url:WordPress JSON のURL、dom:内容を表示するHTMLのクラス名 */

function readBlogJson(url, dom) {

/* 各WordPress のJSON を読み込んで、記事を表示する*/

$.getJSON( url, function(results) {