サロンのホームページ制作

WordPressの新着情報をアメブロに表示する方法(PC限定)

この記事にはこんなことが書かれています
  1. 準備
  2. カスタム投稿タイプを取得する場合
  3. アメブロでjQueryを有効にする
4389文字なので、およそ8分で読み終わりそうです

アメブロの記事を、WordPressで作ったホームページに表示させることはとても簡単にできます。

WordPressの「ウィジェット」に、RSSという項目があるので、そこにアメブロのRSSフィードを入力するだけです。

 

WordPressに、アメブロを読み込ませることは、かなり簡単にできます。

 

 

では、逆に、
WordPressの新着情報を、アメブロに表示するにはどうすればいいか。

せっかくWordPressのWP REST API v.2 が出たので、やってみました。

 

 

WP REST API version.2 とは?

WordPressで作ったホームページの情報を、別のサイトでも使えるようにする機能です。

 

例えば、WordPress内でブログを書いている人が、

「せっかく記事を書いているんだから、他の場所でも使いたい」という場合などに使います。

 

実は、もっとたくさんの機能があって、WordPressを「ブログツール」から、「リレーショナルデータベース」に変えるような感じなんですが、そのあたりは今回は触れないで進めます。

 

アメブロに、WordPressを読み込むとは、例えばこんなイメージです。

http://ameblo.jp/healing-solutions/

※完全にテストブログなので、内容は気にしないでね

 

あくまでも、テストですが、このホームページの記事がアメブロにも自動で表示されているのがわかります。

 

準備

まずは、WordPressがWP REST APIを使える必要があるので、プラグインをインストールします。

http://v2.wp-api.org

 

プラグインの新規追加で、「WP REST API」を検索すると、上記のものが出てくるので、インストールします。

 

カスタム投稿タイプを取得する場合

カスタム投稿タイプは、今のところ、通常のプラグインでは取得できません。

以下の内容を、functions.phpに記入すると、取得できるようになります。

参考:http://qiita.com/hisahayashi/items/1617bd0bd494da2a9049

 

function sb_add_cpts_to_api() {
    global $wp_post_types;

    // Add CPT slugs here
    $arr = ['ここにカスタム投稿タイプ','<post-typeB>','<post-typeC>'];

    foreach( $arr as $key ) {

    // If the post type doesn't exist, skip it
    if( !$wp_post_types[$key] )
        continue;

        $wp_post_types[$key]->show_in_rest = true;
        $wp_post_types[$key]->rest_base = $key;
    }
}
add_action( 'init', 'sb_add_cpts_to_api', 30 );

 

アメブロでjQueryを有効にする

アメブロでWordPressの内容を表示する場合は、いくつか方法はありますが、今回はjQueryの $getJsonを使うことにします。

 

まずは、アメブロでjQueryを有効にします。

フリープラグインの設定に移動

 

フリープラグインに、こんな感じのものを記述

※バージョンとかは、適宜・・

google.loadのjsapiでjQueryの読み込みはダメ

<script src="http://www.google.com/jsapi"></script>
 <script>google.load('jquery','1')</script>

 


そして、WordPressから情報を読み込む記述をしていきます

 

フリープラグインに記入しても問題ないですが、WordPressが動いているということは、サーバーがあるということだと思うので

以下のように、外部スクリプトにしても便利

これを、フリープラグインに記入してみます

<script type="text/javascript" src="あなたのサーバー/read.js"></script>

 

JSONを読み込んで、
アメブロのメッセージボードに貼り付ける

最後に、WordPressの REST APIを叩いて、情報を引き出します。

WordPressの新着情報は、以下から呼び出せます。

http://あなたのWordPressのパス/wp-json/wp/v2/blog

これだけだと、記事しか呼び出せないので、アイキャッチも呼び出しましょう

https://www.healing-solutions.jp/wp-json/wp/v2/blog?_embed

 

これを、読み込んで整形する情報をjavascriptに書きます

jQuery(function(){

//HTMLを生成

$html_set = '';

$.getJSON("https://www.healing-solutions.jp/wp-json/wp/v2/blog?_embed", function(data){

$html_set = '<style>' +
  'ul.wp_api-unit{display:block;}'+
  'ul.wp_api-unit li{clear:both; margin-bottom:15px; padding-bottom: 15px;border-bottom:1px dotted #cccccc;}'+
  'ul.wp_api-unit a{width:100%;display:block;}'+
  'ul.wp_api-unit .thumbnail{display:inline-block;width:28%;margin:0;padding:0 2% 0 0; vertical-align:top;}'+
  'ul.wp_api-unit .contents {display:inline-block;width:70%;}'+
  'ul.wp_api-unit .contents h1{font-size:1.6em; margin:0; paddin-bottom: 15px; margin:0; padding:0;}'+
  'ul.wp_api-unit .contents p{text-align: right; width:100%;}' +
  '</style>';

$html_set += '<ul class="wp_api-unit">';

$(data).each(function(){

$title = this.title.rendered;
  $date = new Date(this.date_gmt);
  $month = $date.getMonth()+1;
  $date_set = $date.getFullYear() + '年' + $month + '月' + $date.getDate() + '日';
  $thumbnail_src = this._embedded["wp:featuredmedia"][0].media_details.sizes.thumbnail.source_url;

$html_set += '<li><a href="' + this.link + '" target="_blank">' +

'<div class="thumbnail">' +
  '<img style="width:100%;height:auto;" src="'+ $thumbnail_src +'" />'+
  '</div>' +

'<div class="contents">' +
  '<h1>' + $title + '</h1>' +
  '<p>' + $date_set + '</p>' +
  '</div>'+
  '</a></li>';
  })
  $html_set += '</ul>';
  $($html_set).appendTo('.skin-messageInner');
  })
  });

 

 

こんなん。

 

すると、アメブロのメッセージボードにWordPressの新着情報を表示することができます。

 

ポイント

WordPressのWP REST APIは、バージョン2になって、大幅に取得方法が変更されました。

僕が、ちょっとハマったのは、JSONのキーに「:(コロン)」が付いている部分。

ここは、以下のように取得します。

this._embedded["wp:featuredmedia"][0].media_details.sizes.thumbnail.source_url;

 

 

注意点

WordPressのjavascriptが動くのは、今のところPC 版だけなので、

WordPressの新着情報を表示できるのは、アメブロをPCで見た場合だけとなります。

 

このあたり、「じゃぁ、意味があるのか?」と、賛否分かれる部分ですが、

興味ある方は参考にしてみてください。

 

サムネイルの有無で分岐を分ける必要が出てくると思いますが、このあたりは適宜追記してください
見出し
テキスト
こんなブログも読まれています
mautic is open source marketing automation