WordPressのfeedをphpで読みとりjQueryのajaxで静的ページに読み込ませる。
はじめに
もっぱらWP漬けの毎日です。 企業ウェブサイトの新着情報にWPのブログ記事を表示、リンクしたいという依頼があったので今回はこれです。
やりたいこと
簡単な図にしました。
コード作成
1. feed.phpを使ってWPのフィード情報を読みこむ。
WPはフィードという「更新情報」を持っており、投稿またはカテゴリ毎のフィード情報をURLのみで読み出すことができます。
WORDPRESS Codexによると以下のような定義です。
フィードは、フィードリーダーがサイトにアクセスし、新規コンテンツを自動的に探し出し、その情報を別のサイトに投稿し更新できるようにする特別なソフトウェア機能です。
WordPress フィード配信 - WordPress Codex 日本語版
全ての投稿ならhttp://example.com/feed/
特定のカテゴリならhttp://www.example.com/category/categoryname/feed
とかでOKです。便利ですね！ これを使えば他のサイトにコンテンツを表示させることができます。
読み込みに使ったfeed.phpは以下のコードを使わせていただきました。 ありがとうございました。 改変せずそのまま利用しました。
2. topic.phpを使って読みこんだフィード情報をhtmlに整形。
フィード情報はxml形式なので、必要な情報を抜き取る必要があります。 上記URLに参考があります。
echo 'Title: ', $rss->title;
echo 'Description: ', $rss->description;
echo 'Link: ', $rss->link;
foreach ($rss->item as $item) {
echo 'Title: ', $item->title;
echo 'Link: ', $item->link;
echo 'Timestamp: ', $item->timestamp;
echo 'Description ', $item->description;
echo 'HTML encoded content: ', $item->{'content:encoded'};
}
上記を参考にすればうまくいきそうです。
利用方法、改変については、以下のブログを参考にさせていただきました。 ありがとうございました。
こちらのファイルを、topic.phpとしました。
静的ページのfeed表示に必要な情報は、 [日付][カテゴリ][投稿タイトル][投稿URL]
ということで、合わせて書き換えをしております。 コードは以下です。
topic.php
<?php
// wp url
$wp_url = [ your-wordpress-url ];
// feed.phpを読み込む
require_once [ your-feed.php-path ];
$feed = new Feed ;
// topics.jsからの変数
$get_category = htmlspecialchars($_GET['feedurl'], ENT_QUOTES, 'UTF-8');
// RSSフィードURLの取得
if ( $get_category ){
$url = $wp_url."/category/".$get_category."/feed/";
}
else{
$url = $wp_url."/feed/";
}
$rss = $feed->loadRss( $url ) ;
$num = 10;//表示させたい件数
$i=0;
foreach( $rss->item as $item )
{
if($i<$num){
$title = $item->title ; // タイトル
$link = $item->link ; // リンク
$category = $item->category;
$timestamp = strtotime( $item->pubDate ) ; // 更新日時
$description = $item->description ; // 詳細
$description = strip_tags($description);
$thumbnail = trim($now_url,"/") . "blog/wp-content/themes/simplicity2/images/no-image.png";//画像がない場合の指定
if( preg_match_all('/<img([\s\S]+?)>/is', $item->description, $matches) ){
foreach( $matches[0] as $img ){
if ($img === reset($matches[0])) {//最初の画像にマッチしたもの
if( preg_match('/src=[\'"](.+?jpe?g)[\'"]/', $img, $m) ){
$thumbnail = $m[1];
}
}
}
}
// slugタグからカテゴリー取得
if( preg_match('/<slug>[\w-]+<\/slug>/i', $item->description, $m) ){
$slug = strip_tags($m[0]);
}
$list_data .= '<li><a href="'.$link.'"><div class="news_topic_body"><span class="date">'.date( "Y.m.d", $timestamp).'</span><span class="cat"><span class="icon '.$slug.'_icon">'.$category.'</span></span><br class="topic_br"><span class="topic_title">'.$title.'</span></div></a></li>';
$i++;
}
}
echo $list_data;
?>
3. フィード情報にサムネイルとカテゴリ情報を含めるようfunctions.phpに追記。
なお、WP標準では、フィードにサムネイルとカテゴリ情報がないため、WPのfunctions.phpでフックする必要があります。
functions.php追記
function rss_plus($content) {
global $post;
$category = get_the_category($post->ID);
$cat_slug = $category[0]->slug;
$content = '<slug>' .$cat_slug . '</slug>' . $content;
if(has_post_thumbnail($post->ID)) {
$content = '<div>' . get_the_post_thumbnail($post->ID) . '</div>' . $content;
}
return $content;
}
add_filter('the_excerpt_rss', 'rss_plus');
4. 読込をコントロールするjQueryを作成。
url open 以下は、最初にページを読み込んだ時の動作です。
click list 以下は、ボタン(li)をクリックした時の動作です。
topics.js
$(function(){
/////////// url open
// loading html
var loadhtml = [ your-loading-html ];
// loading html
$([ your-list-ul ]).html(loadhtml);
// default feed url
feedset = "";
// ajax
func_ajax(feedset);
/////////// click list
// click
$([ your-list-ul-li ]).click(function(){
// loading html
$([ your-list-ul ]).html(loadhtml);
// get list class
var btnclass = $(this).attr('class');
var feedset = "";
// branch feed
if(btnclass == [ your-tab-all ]){
feedset = "";
}
else if(btnclass == [ your-tab-cate1 ]){
feedset = [ your-feed-cate1 ] ;
}
else if(btnclass == [ your-tab-cate2 ]){
feedset = [ your-feed-cate2 ] ;
}
else if(btnclass == [ your-tab-cate3 ]){
feedset = [ your-feed-cate3 ] ;
}
// ajax
func_ajax(feedset);
});
//////////// function ajax
function func_ajax(x){
$.ajax({
url: [ yout-topic.php-path ],
data: {
feedurl: x
},
dataType: 'html'
})
.done(function(data){
$('.topic_list').html(data);
})
.fail(function(data){
$('.topic_list').html('<li>no data</li>');
});
}
});
さいごに
.ajaxについて詳しく知らなかったので勉強できてよかった。 こちらの記事を参考にしました。ありがとうございました。
ほれほれ、Railsはどうしたよ。とほほ。
