ニュースアプリのSmartNews。
この度ファッションニュースサイト「ぐーぱん」で、SmartNewsに対応したRSSを自作してみました。
まだ申請出してる段階なので、実際に配信されるかは話は別…。
ですが、メモ代わりに記事を書きます。
今回はRSSのカスタマイズや、独自形式のRSSを配信したい人向けの記事です。
SmartNews
SmartNewsでは、媒体運営者向けに独自仕様のフォーマットを公開しています。
色々キュレーションメディアはあるものの、仕様は良くわかりません。Smart Newsは公開されてたので、今回弄ってみました。
Smart Format
Smart Newsの形式するためには、独自仕様のフォーマットに対応しないといけません。
RSS2の仕様に似ているんですが、若干要素を追加する必要があります。
例えばアイキャッチやサイトロゴ、関連記事などなど。
WordPressのフィード(RSS2.0)もそのまま流用できますが、テンプレートを直接変更するとアップデート時に上書きされ、かつ他のRSSリーダーでエラーが起こる可能性があります。
なので、Smart News専用のテンプレートを作るのが望ましいです。
そこで今回SmartNews向けのRSSを作るため、専用のテンプレートを作成(feed-rss2.phpをコピー)し、色々改造してみました。
まずはテンプレートをコピー
最初にRSSフォーマットのテンプレートをPCにコピーします。
通常Wordpressのフィードは、「wp-includes」フォルダのテンプレートを使って出力されています。
まずは「wp-includes」フォルダにある「feed-rss2.php」をPCにコピーします。
FFFTPなどでコピーしちゃいましょう。
次にファイル名を「smartnews.php」に変更。
テーマフォルダの中に移動させます。
あとは管理ページの「テーマの編集」からいじれます。
もしくはテキストエディタでいじった後再アップロード。
これで下準備は整いました。
オリジナルRSS配信の準備
今回独自仕様のRSSを作りにあたり、下記ブログの記事を参考に致しました。
WordPressの場合、通常フィードのURLは以下の様な形になっていますよね。
ttp://hogehoge.hoge/feed/
それを下記のように、Smart News専用のフィードを作成しました。
ttp://hogehoge.hoge/?feed=smartnews
なぜか”feed/smartnews”では利用できなかったので、上記のURLでスマニュー向けに作ります。
上記Quiitaさんの記事のコードをほぼそのままfunction.phpに追加します。
当方では下記のように変更しました。
add_action( 'do_feed_smartnews', 'do_feed_smartnews' );
function do_feed_smartnews() {
$feed_template = get_template_directory() . '/smartnews.php';
load_template( $feed_template );
}
こうすることで、”http://サイトURL/?feed=smartnews”で、オリジナルのテンプレートを使ってRSSの配信ができるようになりました。
do_feed_hogeにすれば、http://hogehoge.hoge/?feed=hogeのような形式になります。
テンプレートをカスタマイズ
最初に冒頭の、
/**
* RSS2 Feed Template for displaying RSS2 Posts feed.
*
* @package WordPress
*/
の@packageを少しだけ変更。
/** * RSS2 Feed Template for displaying RSS2 Posts feed. * * @package smartnews */
フォーラムで@package WordPressは使っちゃダメ、みたいな内容を見かけたので、若干変えています。
では、早速smartnews.phpを改造しましょう。
まず名前空間の問題解決のため、<rss version～で始まる箇所に以下2行を追加します。
xmlns:media="http://search.yahoo.com/mrss/" xmlns:snf="http://www.smartnews.be/snf"
これでOK。名前空間の部分はこうなりますね。
xmlns:media="http://search.yahoo.com/mrss/" xmlns:snf="http://www.smartnews.be/snf" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
Smart Formatに対応させるため、サイトのURLやロゴ画像、コピーライト等をRSSに追加します。
SmartFormatの仕様では、独自要素として下記を追加します(実際のコードは下に)。
<copyright>著作権表示</copyright>
<ttl>クロール頻度</ttl>
<image>
<url>ロゴ画像のURL</url>
<title>サイトのタイトル</title>
<link>サイトURL</link>
</image>
<ttl>～</ttl>は、Smart Newsのクローラの巡回頻度です。
1にすると1分に1回拾いに来るようなので、サーバーへの不可が若干かかるかも。
<image></image>はサイトのロゴ画像に関する内容になります。
上記「ぐーぱん」の部分ですね。
ロゴ画像は512×512ピクセル固定で、別途用意する必要があります。
用意が終わったら、smartnews.phpの76行目付近に以下を追加します。
“?></sy:updateFrequency>“の下に挿入。
?></sy:updateFrequency> <copyright>(c)ぐーぱん</copyright> <ttl>120</ttl> <image> <url>http://gu-pan.com/gu.png</url> <title>ぐーぱん</title> <link>http://gu-pan.com/</link> </image>
これで著作権表示とサイトロゴ・URLの追加が終わりました。
ttlの120は、2時間に1回クロールしてね、ということになります。
更新頻度によっては半日に1回(<ttl>720</ttl>)でも良いかも。
サムネイル画像を設定
次に記事ごとのサムネイル画像を設定します。
Smart Newsでは必須ではないものの、あったほうが見栄えも良くなりますよね。
<item>～</item>内に要素を追加してやりましょう。
“<pubDate><?php echo mysql2date～…“で始まる行を見つけます。
その下に下記のコードを追加しました。
<pubDate><?php echo mysql2date('D, d M Y H:i:s +0000', get_post_time('Y-m-d H:i:s', true), false); ?></pubDate>
<?php
$thumb_id = get_post_thumbnail_id();
$thumb_url = wp_get_attachment_image_src($thumb_id, 'full');
?>
<media:thumbnail url="<?php echo $thumb_url[0] ?>" />
Smart Fotmatでは、記事ごとに<media:thumbnail～で始まる要素を追加すると、記事別にサムネイル画像が表示されます。
Wordpressでアイキャッチを設定しているなら、そのままこれでOKです。
(※上記は全記事にアイキャッチを設定している場合を想定しています)
get_post_thumbnail_id関数でサムネイルのIDを取得し、wp_get_attachment_image_src関数でサムネイルのURLを取得します。
この場合、$thumb_urlにURLや画像のサイズが配列で格納されていて、
<?php echo $thumb_url[0] ?>
と、[0]を指定してやるとURLの情報を参照することができます。
実際のRSSでは、
<media:thumbnail url=”http://gu-pan.com/(中略)column-56141.jpg” />
このように挿入されます。
ちなみにサムネイル画像は200×200ピクセル以上推奨だそうです。
ぐーぱんは600×400が基準になっています。
広告を配信する
Smart Newsでは、記事ごとに広告を1つ配信できるようになっています。
広告サイズは300×250ピクセルまで、表示位置は指定できません。
下記の仕様に従い、要素を追加する必要があります。
<snf:advertisement>
<snf:adcontent>広告タグ</snf:adcontent>
</snf:advertisement>
<snf:advertisement>が広告の始まり、<snf:adcontent>～</snf:adcontent>に配信したい広告のタグを挿入します。
アドセンスは何やら怪しかったので、今回は忍者admaxをチョイスしてみました。
110行目付近、”<slash:comments><?php echo get_comments_number(); ?></slash:comments>“の下部に以下を追加します。
<slash:comments><?php echo get_comments_number(); ?></slash:comments> <snf:advertisement> <snf:adcontent> <![CDATA[ <script src="https://adm.shinobi.jp/***></script> ]]> </snf:adcontent> </snf:advertisement>
これでSmart Newsで広告が配信されるようになります。
こんな感じ。
関連記事について
Smart Newsでは、関連記事も表示してくれます。
ただ、RSSのテンプレートでget_the_category関数・get_category関数が上手く動作しなかったため、下記ブログのコードを流用させて頂きました。
テーマのfunction.php内に上記のコードを追加します。
次に、SmartNewsで関連記事を取得する要素を追加しましょう。
Smart Formatの仕様では、以下のようになっています。
<snf:relatedLink title=”関連記事タイトル” link=”関連記事のURL” thumbnail=”関連記事のサムネイル画像 />
このタグを<item>～</item>内に追加すると、Smart Newsが関連記事とみなし、アプリで表示してくれます。
関連記事を実装する
さて、smartnews.phpに関連記事の要素を追加してみましょう。
ちょっと長いので一気に。
広告配信に関する要素”</snf:advertisement>“の下に、下記を追加します。
</snf:advertisement> <?php $cat_data = GetCategoryID($post->ID); $cat_list = get_category($cat_data); $query = new WP_Query( array( 'cat' => $cat_list->cat_ID, 'post__not_in' => array($post->ID), 'posts_per_page' => '1', 'offset' => '1', 'post_type' => 'post', 'orderby' => 'rand' )); while($query->have_posts()):$query->the_post(); $rel_thumb_id = get_post_thumbnail_id(); $rel_thumb_url = wp_get_attachment_image_src($rel_thumb_id, 'full'); ?> <snf:relatedLink title="<?php echo the_title_attribute(); ?>" link="<?php the_permalink(); ?>" thumbnail="<?php echo $rel_thumb_url[0]; ?>" /> <?php endwhile; ?> <?php wp_reset_postdata(); ?>
まず「for WEB屋」さんで公開されているGetCategoryIDを使い、記事の投稿IDからカテゴリのIDを取得します。
次にget_category関数でカテゴリに関する内容を取得、同カテゴリ内からランダムに記事を1つ抽出するようにしました。
その後while内で関連記事のサムネイルURL($rel_thumb_id～…の部分)を取得しています。
そして、”<snf:relatedLink～”に関連記事タイトル、URL、サムネイルのURLを挿入するようになっています。
このrelated linksの部分が関連記事です。
抜粋表示に設定している場合の変更点
WordPressのRSSを抜粋表示にしている人もいるかと思います。
でも、このままではSmart News用のRSSも抜粋表示になってしまい、仕様に反してしまいます。
Smart Formatでは、全文表示が必須になってるからです。
なので、下記の部分を少しカスタマイズする必要があります。
表示設定で全文表示にしている場合は改造の必要がありません。
<?php if (get_option(‘rss_use_excerpt’)) : ?>
<description><![CDATA[<?php the_excerpt_rss(); ?>]]></description>
<?php else : ?>
<description><![CDATA[<?php the_excerpt_rss(); ?>]]></description>
<?php $content = get_the_content_feed(‘rss2’); ?>
<?php if ( strlen( $content ) > 0 ) : ?>
<content:encoded><![CDATA[<?php echo $content; ?>]]></content:encoded>
<?php else : ?>
<content:encoded><![CDATA[<?php the_excerpt_rss(); ?>]]></content:encoded>
<?php endif; ?>
<?php endif; ?>
大体100～110行目付近でしょうか？
上の箇所を以下のように少しだけ変更します。
<guid isPermaLink=”false”>で始まる行と、<wfw:commentRss>で始まる行の間ですね。
<guid isPermaLink="false"><?php the_guid(); ?></guid>
<?php if (get_option('rss_use_excerpt')) : ?>
<description><![CDATA[<?php echo the_excerpt_rss(); ?>]]></description>
<?php endif; ?>
<?php $content = get_the_content_feed('rss2'); ?>
<content:encoded><![CDATA[<?php echo $content; ?>]]></content:encoded>
<wfw:commentRss><?php echo esc_url( get_post_comments_feed_link(null, 'rss2') ); ?></wfw:commentRss>
<description>は記事の概要、<content:encoded>の行が記事本文表示処理です。
これで<description>はRSS設定の抜粋を表示するようにし、本文にあたる部分は全文表示するようになります。
たまにRSSの出力エラー出ますが、SmartFormat Validatorを使うと問題なし。
面倒なのでぐーぱんでもこのまま使ってます。
大丈夫…だと思います。
まとめ
- wp-includesからテンプレートをコピーする
- テーマフォルダにコピーする
- function.phpに書き足す
一応SmartNewsでなくとも、この3つをすればWordpressで独自形式のRSSを配信できます。
RSSを独自フォーマットで用意したい場合はいかがでしょう。
今回はSmartNews向けにしましたが、カスタマイズすれば色々使い回しできると思います。
- wp-includesからテンプレートをコピーする
- テーマフォルダにコピーする
- function.phpに書き足す
- サイト情報を登録
- サムネイルを実装
- 広告を実装
- 関連記事を実装
- 抜粋を全文に変更
SmartNewsの場合は最低限これくらいです。
作り終わったら下記で確認を。
エラーメッセージが空なら仕様に沿ったフォーマットの完成です。
RSSのカスタマイズが正直ここまで面倒だと思いませんでした。
当方PHP初心者もいい所なので間違いが有る可能性も大です。
動作に関しては保証できませんのでご了承下さい。
テンプレートの完成形の配布って出来ましたっけ。
WordpressのライセンスはGPLなので大丈夫かな。
別途RSS本文にアイキャッチを表示するカスタマイズをしても良いですね。
「Worepress rss アイキャッチ」でググると色々出てくるので是非。
コメント