お疲れさまです。
あっという間に1月が終わります。
今年も残り11ヶ月です。。。。こわー
早速ですが表題の件、
以前書いた「簡単なAPIを使ってwordpressのデータを取得。APIって便利だね。」って記事の応用編です。
前回は受け取り側もPHPが使える前提で書いたので
今回はPHPが使えないけいどjavascriptのファイルなら設置できるよ。というときに使える手段です。
例えば、楽天goldやヤフーのトリプルを契約してるお店でもできます。
では、具体的にやることを。
html
<div id=”newsInclude”></div>
こちらのdiv内にhtmlソースを追加するための記述とします。
１：ワードプレスを使ってるサイトで記事情報をjson形式で吐き出し。
get_post.php
<?php
require_once( '../wp-load.php' );//ワードプレス設置フォルダと本ファイルの設置関係でパスを記述
$source = array();
$category_id = array();
$category_id = (isset($_GET["category_id"])) ? $_GET["category_id"] : array();
$args = array( 'posts_per_page' => 6,//取得する記事件数
'post_type' => 'post',//投稿に限定
'post_status' => 'publish',//公開済み
'orderby' => 'date',//日付けでソート
'order' => 'DESC',//最新順
'category__in' => array($category_id),//カテゴリー指定
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) : $the_query->the_post();
$post_id = get_the_ID();
$post_date = get_the_time('Y/m/d');
$post_url = get_the_permalink();
$post_ctg = get_the_category();
$post_title = get_the_title();
$post_desc =get_the_excerpt();
if ( has_post_thumbnail()) {
$image_id = get_post_thumbnail_id( $post_id);
list($thumb, $w, $h) = wp_get_attachment_image_src($image_id);
} else {
$thumb = "";//サムネイルがないとき画像どうするか記述
}
$source[] = array(
'post_id' => $post_id,
'post_date' => $post_date,
'post_url' => $post_url,
'post_ctg_slug' => $post_ctg[0]->slug,
'post_ctg_name' => $post_ctg[0]->name,
'post_title' => $post_title,
'post_desc' => $post_desc,
'post_thumb' => $thumb,
);
endwhile;
}
header("Access-Control-Allow-Origin: 許可するドメイン名");
header('Content-type: application/json');
echo json_encode($source);
まずは投稿記事をjson形式で吐き出すためのファイルを作成し、
同じサーバー内にファイルを設置します。
ここで重要なのは
header(“Access-Control-Allow-Origin: 許可するドメイン名”);
ここです。
こちらの記述がないと受け取り側に設置するjsファイルを使った記事取得ができません。
異なるドメイン間でのリソース共有に関するアクセス制限のエラーですね。
No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
こちらを回避する為に、上記の記述が必要なります。
許可するドメイン名
の箇所は、* という全てのドメインを許可するということもできますが、
「自社サイトの情報を自分たちだけが使う」ということが必要だと思うのでドメイン指定はちゃんとしておきましょう。
２：受け取り側のjs
jQuery(function($){
var include_url_base = "ドメイン名/get_post.php?category_id=";
//----------------------------
// news include
//----------------------------
if ( $('#newsInclude').length > 0 ) {
var news_include_url = include_url_base + カテゴリーID;
var news_add_html = "";
$.ajax({
type: 'GET',
url: news_include_url,
datatype: 'json',
success: function(data1){
$.each(data1, function(i){
news_add_html +='<div class="news">';
news_add_html += '<a href="'+ data1[i].post_url +'" target="_blank">';
news_add_html += '<p class="news-date">'+ data1[i].post_date +'</p>';
news_add_html += '<p class="news-content">'+ data1[i].post_title +'</p>';
news_add_html += '</a>';
news_add_html += '</div>';
});
$('#newsInclude').append(news_add_html);
}, error: function(){
console.log('news:error');
}
});
}
});
news_include_url というベースURLを作っておくと、
同じページ内で複数のカテゴリー取得するとき便利です。（どちらでもいいですが・・・
今回は、リンク先と投稿日、記事タイトルを表示するように書いてますが
取得データはこのようになっているので使用したいものは追加なりするとかでご使用ください。
news_'post_id' => 記事ID
'post_date' => 投稿日
'post_url' => 記事URL
'post_ctg_slug' => 記事カテゴリーのスラッグ
'post_ctg_name' => 記事カテゴリー名
'post_title' => 記事タイトル
'post_desc' => 記事抜粋文
'post_thumb' => サムネイル
世間的には厳しい状況が続きますが
家で過ごすことも多くなり、インターネット通販は利用頻度が多くなり、需要も増えています。
出来る限りのことは準備してユーザーによりよい情報を提供できるようにしていきましょう！
では。
