CocoonをSWELLに変更するとどうなる？

スクリプティングに挑戦広告・PR

WordPressのRSSを「rss-php」ライブラリを使ってPHPで読む、JSONをJavaScriptで処理

本ページはプロモーションが含まれています

現在ではRSS（Really Simple Syndication）リーダーはそれほど使われていないようですが、WordPressにはRSSフィードを出力する機能が備わっています。

たとえば、当ブログの場合は「https://www.theme3.net/feed/」のアドレスでRSSフィードを見ることができます。

このRSSデータを利用すれば、クロスドメインのブログ情報を一箇所に集めたり、別のブログのニュース一覧を作ったりすることができるので、とても便利です。

「rss-php」ライブラリを使用すればRSSフィードを利用できます。「rss-php」にはキャッシュの処理も組み込まれています。

このページではRSSをphpで利用する方法とjsonデータで処理する方法をピックアップします。

なお、「rss-php」ライブラリについては以下のブログを参考にさせて頂きました。

www.lesson5.info
「Google Feed API」の代替として「rss-php」でRSSやAtomフィードを取得・表示する – lesson me

【PR】「Theme3」では、企業サイトのWordPressベーステーマに、100%GPLテーマ「 Arkhe 」をオススメしています。
「 Arkhe 」は高機能有料プラグイン「 Arkhe Pro Pack 」と連携することによって利便性とカスタマイズ性の両立が可能です。制作・マーケのプロの方に是非！

「Arkhe」の詳細を見る
「Arkhe Pro Pack」（サブスク版）を購入する

「Arkhe Pro Pack」には以下が含まれています。「Arkhe Blocks Pro」と「Arkhe Toolkit」には買い切り版もあります。
・Arkhe Blocks Pro
・Arkhe Toolkit
・Arkhe CSS Editor

別のWordPressテーマで運用しているブログデータの新着情報を表示する（phpで読み込む）

弊社のコーポレートサイトはWordPressテーマ「UNIQUE」で制作しています。

しかし、「UNIQUE」のブログ機能を使用していません。

ブログはWordPressテーマ「Arkhe」を使い、ディレクトリー型で運用しています。

このような場合、「UNIQUE」の「front-page.php」に「rss-php」の処理を組み込めばブログの最新情報を表示できます。

UNIQUEのfunctions.phpでFeed.phpを読み込む

「rss-php」の「Feed.php」をWordPressで利用する場合、functions.phpでrequire_onceします。

// Feed
require_once ( dirname(__FILE__) . '/lib/Feed.php' );

子テーマのlibフォルダーに「Feed.php」を配置しています。

UNIQUEのfront-page.phpをカスタマイズ

WorgPressテーマTCD「UNIQUE」でブログの最新情報を表示する箇所は「front-page.php」の先頭にあります。

修正前

<?php get_header(); $options = get_desing_plus_option(); ?>

<?php // Content Builder -------------------------------------- ?>
<div class="box_list clearfix" id="index_contents">
 <div class="box-sizer"></div>
 <?php
			if (!empty($options['contents_builder'])) :
				foreach($options['contents_builder'] as $content) :

					// Recent Post --------------------------------------
					if ($content['cb_content_select'] == 'recent_post') {

						$headline = $content['cb_recent_post_headline'];
						$button = $content['cb_recent_post_button'];
						$color = $content['cb_recent_post_color'];
						$font_color = $content['cb_recent_post_font_color'];
						$show_date = $content['cb_recent_post_show_date'];
						$date_color = $content['cb_recent_post_date_color'];
						$post_num = $content['cb_recent_post_num'];
 ?>
 <div class="box index_recent_post">
  <div class="box_inner" style="background:#<?php echo esc_html($color); ?>;">
   <?php if(!empty($headline)) { ?>
   <h3 class="headline" style="color:#<?php echo esc_attr( $font_color ); ?>"><?php echo esc_html($headline); ?></h3>
   <?php }; ?>
   <div class="content">
    <?php
         $args = array('post_type' => 'post', 'posts_per_page' => $post_num, 'ignore_sticky_posts' => 1);
         $recent_post = new WP_Query($args);
    ?>
    <ol>
     <?php if ($recent_post->have_posts()) { while ($recent_post->have_posts()) : $recent_post->the_post(); ?>
     <li>
      <?php if($show_date == 1) { ?><p class="date" style="color:#<?php echo esc_html($date_color); ?>;"><?php the_time('Y.m.j'); ?></p><?php }; ?>
      <a class="title" href="<?php the_permalink() ?>" style="color:#<?php echo esc_attr( $font_color ); ?>"><?php trim_title(35); ?></a>
     </li>
     <?php endwhile; wp_reset_query(); } else { ?>
     <li><?php _e('There is no registered post.', 'tcd-w');  ?></li>
     <?php }; ?>
    </ol>
    <div class="link_button"><a href="<?php echo esc_url(get_permalink( get_option('page_for_posts') )); ?>" style="color:#<?php echo esc_attr( $font_color ); ?>"><?php echo esc_html($button); ?></a></div>
   </div><!-- END .content -->
  </div><!-- END .box_inner -->
 </div><!-- END .box -->

修正後

この部分にArkheブログのRSSを読み込み、新着情報を成形する処理を加えます。

<?php get_header(); $options = get_desing_plus_option(); ?>

<?php // Content Builder -------------------------------------- ?>
<div class="box_list clearfix" id="index_contents">
 <div class="box-sizer"></div>
 <?php
			if (!empty($options['contents_builder'])) :
				foreach($options['contents_builder'] as $content) :

					// Recent Post --------------------------------------
					if ($content['cb_content_select'] == 'recent_post') {

						$headline = $content['cb_recent_post_headline'];
						$button = $content['cb_recent_post_button'];
						$color = $content['cb_recent_post_color'];
						$font_color = $content['cb_recent_post_font_color'];
						$show_date = $content['cb_recent_post_show_date'];
						$date_color = $content['cb_recent_post_date_color'];
						$post_num = $content['cb_recent_post_num'];
 ?>
 <div class="box index_recent_post">
  <div class="box_inner" style="background:#<?php echo esc_html($color); ?>;">
   <?php if(!empty($headline)) { ?>
   <h3 class="headline" style="color:#<?php echo esc_attr( $font_color ); ?>"><?php echo esc_html($headline); ?></h3>
   <?php }; ?>
   <div class="content">
    <?php
         //$args = array('post_type' => 'post', 'posts_per_page' => $post_num, 'ignore_sticky_posts' => 1);
         //$recent_post = new WP_Query($args);
         
		 // 取得するフィードのURLを指定
		 $url = "https://www.slashd.com/blog/feed" ;
		 // インスタンスの作成
		 $feed = new Feed ;
		 // RSSを読み込む
		 $rss = $feed->loadRss( $url ) ;
		 $roop = 0;
    ?>
    <ol>
     <?php 
	     foreach( $rss->item as $item ) {
		 $title = $item->title ;  
		 $link = $item->link ;  
		 $roop = $roop +1; 
		 
		 // 表示数
		 if( $roop > $post_num )
		 {
		 	break ;
		 }
	     
	     // 日付の取得(UNIX TIMESTAMP)
		 foreach( array( "pubDate" , "date_timestamp" , "dc:date" , "published" , "issued" ) as $time )
		 {
		 	if( isset( $item->{ $time } ) && !empty( $item->{ $time } ) )
		 	{
		 		$timestamp = ( is_int( $item->{ $time } ) ) ? $item->{ $time } : strtotime( $item->{ $time } ) ;
		 		break ;
      		}
		 }
 
		 // 仮に日付が取得できなかったら現在時刻
		 if( !isset( $timestamp ) )
		 {
		 	$timestamp = time() ;
		 }
	     
	     ?>
     <li>
      <?php if($show_date == 1) { ?><p class="date" style="color:#<?php echo esc_html($date_color); ?>;"><?php echo date( "Y.m.d" , $timestamp ); ?></p><?php }; ?>
      <a class="title" href="<?php echo esc_url($link) ?>" style="color:#<?php echo esc_attr( $font_color ); ?>"><?php echo $title; ?></a>
     </li>
     
     <?php } ?>
     <?php if ($roop = 0){ ?><li><?php _e('There is no registered post.', 'tcd-w');  ?></li><?php } ?>
    </ol>
    <div class="link_button"><a href="<?php echo esc_url(get_permalink( get_option('page_for_posts') )); ?>" style="color:#<?php echo esc_attr( $font_color ); ?>"><?php echo esc_html($button); ?></a></div>
   </div><!-- END .content -->
  </div><!-- END .box_inner -->
 </div><!-- END .box -->

日付の処理は様々なRSSに対応するよう汎用的に処理しています。

これで別テーマとなったブログの新着情報も表示出来るようになりました。

コーポレートサイトのブログ情報一覧
コーポレートサイトのブログ情報一覧
ブログ
ブログ

次にjsonデータを読み込んでJavaScriptで処理する方法を紹介します。

【PR】「Theme3」では、ブログ用のWordPressテーマに、人気と高機能を誇る「 SWELL 」をオススメしています。

「SWELL」の特徴を見る
「SWELL」の購入はこちら

・ブロックエディター完全対応
・高速化機能を標準搭載
・100%GPL
・企業サイトの制作も可能 他、機能多数。

WordPressのRSSをjsonデータで取得して非CMSサイトに組み込む（JavaScriptで処理する）

ホームページにニュースフィードを表示させるためにWordPressで作られたニュースブログのRSSを読み込みます。

ニュースのみがWordPressで、メインサイトにCMSが搭載されていない場合に便利です。

PHPコード

RSSをjsonデータで出力するphp（getjson.php）は以下。

index.htmlと同階層に配置します。

<?php
 
  // ライブラリの読み込み
  require_once ('src/Feed.php');
   
  // キャッシュの設定
  Feed::$cacheDir = 'temp';
  Feed::$cacheExpire = '1 hours';
  // rss複数の場合：各feedの取得データ数、1つの場合：表示数
  $out_lim = 6;
   
  // HTML表示用
  //$html = '' ;
 
  // 取得するフィードのURLを指定（複数のRSSを指定可能）
  $urls = array(
    "http://www.slashd.co.jp/news/feed/",
    //"http://www.slashd.co.jp/news/feed/",
    //"http://www.lesson5.info/?feed=rss2",
    //"http://www.lesson5.info/?feed=rss2",
    //"http://www.lesson5.info/?feed=rss2",
    //"http://www.lesson5.info/?feed=rss2"
  );
   
  // 各rssをまとめた配列
  $entrylist = array();
  
  // jSonの配列番号
  $cnt = 0;
  
  // RSSごとに表示エントリ数ずつ抽出
  for ($i = 0; $i < count($urls); $i++) {

      $url = $urls[$i];
       
      // インスタンスの作成
      $feed = new Feed ;
       
      // RSSを読み込む
      $rss = Feed::loadRss($url);
      
      // 各RSSから取得するデータ数
      // RSSのitem数が表示数より少ない場合はブレーク
      $num_rss = $out_lim;
      if ( count($rss->item) < $out_lim ) { $num_rss = count($rss->item); }
     
      for ($entry = 0; $entry < $out_lim; $entry++) {
	    if ($entry >= $num_rss) { break; }
        $item = $rss->item[$entry];
        // 各エントリーの処理
        $title = $item->title ;
        $link = $item->link ;
        $timestamp = strtotime( $item->pubDate ) ;
        // 配列に
        $entrylist[$cnt]['title'] = htmlSpecialChars($title);
        $entrylist[$cnt]['link'] = htmlSpecialChars($link);
        $entrylist[$cnt]['timestamp'] = $timestamp;
	
		$cnt++;
      }
  }
   
  // 日付でソート
  foreach ((array)$entrylist as $key => $value) {
    $sort[$key] = $value['timestamp'];
  }
  array_multisort($sort, SORT_DESC, $entrylist);
   
  // JSONを返す
  echo json_encode($entrylist);
  exit;
   
?>

JavaScriptコード

htmlのjson処理はajaxで処理します。
この部分はホームページの仕様で異なりますので、json処理のサンプルとしてご参照ください。

<script type="text/JavaScript">

//RSS取得
$(function() {
  $.ajax({
    type: 'GET',
    url: 'getjson.php',
    dataType: 'json', 
    success: function(json) {
	  $("#info_more p").hide();
	  $('#info_more .more').css({"margin-top":"-8px"});
	  $('#newsTopics').append('<dl>');
      
      var len = json.length;
      
      //データが表示数より多い場合は先頭から表示数分処理する
      //90日前
      var kyo = new Date();
	  var ttime = kyo.getTime() - 90 * 24 * 60 * 60 * 1000;

      for(var i=0; i < len; i++){
	  	//日付変換
	  	var ts = json[i].timestamp;
	  	
	  	var d = new Date( ts * 1000 );
	  	var year  = d.getFullYear();
	  	var month = d.getMonth() + 1;
	  	var day  = d.getDate();
	  	
	  	if (month < 10) {
			month = '0' + month;
		}
		if (day < 10) {
			day = '0' + day;
		}
		var date = year + '/' + month + '/' + day;
		
		//hotアイコン表示
		var image = ""
		
		if ( ~json[i].title.indexOf('!')) {
			image = ' <img src="images/hot.png" alt="HOT" />';
		} else if ( ~json[i].title.indexOf('！')) {
			image = ' <img src="images/hot.png" alt="HOT" />';
			
		}
		//new アイコン表示
		else if ( ttime < (json[i].timestamp * 1000) ) {
			image = ' <img src="images/new.png" alt="NEW" />';
		}
		
		//dt dd 成形
		$('#newsTopics').append('<dt>'+ date + '</dt><dd><a href="' + json[i].link + '" target="_blank">' + json[i].title + '</a>' + image + '</dd>');
		
      }
      
      $('#newsTopics').append('</dl>');

    },
	error: function() {
		$('#info_more').append('※Newsブログをご覧下さい。');
		$("#info_more p").hide();
	}
  });
});

</script>

以上、WordPressのRSSを処理する2種類の方法を事例を元に紹介いたしました。

【PR】「Theme3」では、ブログ用のWordPressテーマに、人気と高機能を誇る「 SWELL 」をオススメしています。

「SWELL」の特徴を見る
「SWELL」の購入はこちら

・ブロックエディター完全対応
・高速化機能を標準搭載
・100%GPL
・企業サイトの制作も可能 他、機能多数。

プロモーション

戦略的WEBサイト構築方法

戦略的WEBサイト構築方法
WEB担当者にオススメ

WEBサイトをビジネス戦略のPDCAサイクルに組み込むための考え方と、サイトを内製化する方法を分かりやすく解説します。
詳しくはこちら

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

コメントは日本語で入力してください。(スパム対策)

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）

ABOUT US
lin記事を書いている人
はじめまして。「lin」です。クリエイティブディレクター兼グラフィックデザイナーとして活動しています。おかげさまで、キャリア25年以上になりました。「Theme3」は、私が企画デザイン事務所スラッシュディーの仕事で得たノウハウを公開します。
プロフィールはこちら
お問い合わせはこちら
※以下は私が活動している企業情報にリンクしています。