新着投稿一覧など、外部のWordPressサイトの投稿を画像付きで読み込みたい。
そんなときに必要な事はザックリこんな感じです。
- 外部のWordPressサイトの投稿の情報源があること
- その情報を読み込んで書き出すこと
ただし今回のやり方の場合、読み込みたい外部WordPressサイトのサーバーにファイルをアップできる状態である必要があります。
(画像読み込みの必要なければ大丈夫です)
(画像読み込みの必要なければ大丈夫です)
目次
1.投稿の情報源
WordPressサイトはRSSフィードが書き出されるようになっています。
エムトラッドブログもこの通り。
https://mtrad-blog.com/feed/
カテゴリごとにもRSSがあるので、カテゴリ毎新着記事の表示に使えますね!
https://mtrad-blog.com/category/coding/feed/
ただし、デフォルトではサムネイルの画像情報は書き出されていません。
そこで書き出される内容を編集したいと思います。
- RSSフィードのテンプレートファイル『/wp-includes/feed-rss2.php』をコピー
- コピーした『feed-rss2.php』の内に下記のコードを追記する
- 編集した『feed-rss2.php』をテーマディレクトリ内にアップする
<?php if ( has_post_thumbnail() ) :
$image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium_large');
$thumb_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'thumbnail');
?>
<image><url><?php echo $image_url[0] ; ?></url></image>
<thumb><url><?php echo $thumb_url[0] ; ?></url></thumb>
<?php endif; ?>
『feed-rss2.php』が準備できたら『functions.php』で読み込んで画像付きのRSSを有効化します。
下記のコードを『functions.php』に追記
remove_filter('do_feed_rss2', 'do_feed_rss2', 10);
function custom_feed_rss2(){
$template_file = '/feed-rss2.php';
load_template(get_template_directory() . $template_file);
}
add_action('do_feed_rss2', 'custom_feed_rss2', 10);
ちなみに子テーマの場合の記述はこうです
get_template_directory→get_stylesheet_directory
get_
remove_filter('do_feed_rss2', 'do_feed_rss2', 10);
function custom_feed_rss2(){
$template_file = '/feed-rss2.php';
load_template(get_stylesheet_directory() . $template_file);
}
add_action('do_feed_rss2', 'custom_feed_rss2', 10);
これで読み込みたい記事の情報源の準備はOKです!
2.情報を読み込んで書き出す
2-1.情報を読み込む
RSSを読み込むためのライブラリを使用します。
- rss-phpをダウンロードします。
https://github.com/dg/rss-php - 『Feed.php』を読み込む側のテーマディレクトリ内にアップします
2-2.読み込んだ情報を書き出す
読み込みたいページのphpに下記を記述します。
※適宜編集してください
<?php
require_once TEMPLATEPATH. '/inc/Feed.php'; // 解凍したファイル『rss/Feed.php』をテーマディレクトリ内に格納する。
$feed = new Feed;
$url = 'https://www.example.com/feed'; // RSSのURL
$rss = $feed->loadRss($url);
$num = 4; //表示させたい件数
$i = 0;
$desW = 40; //概要(本文)の文字数
if ( $desW != 0 ){
$desW = ($desW*2)+2;
}
foreach ( $rss->item as $item ){
if($i>=$num){
} else {
$site_name = $rss->title; // サイト名
$site_link = $rss->link; // サイトリンク
$site_description = $rss->description; // サイトディスクリプション
$title = $item->title; // 記事タイトル
$link = $item->link; // 記事リンク
$timestamp = strtotime( $item->pubDate ); // 更新日時
$image = $item->image->url; // アイキャッチ
$description = $item->description; // 概要(本文)
$description = strip_tags($description);
if ( $desW != 0 ){
$description = mb_strimwidth($description, 0, $desW, "…",'utf-8'); // 概要(本文)の文字数が超えたら『…』が付く
}
$eyecatch = '/img/no-image.png'; // アイキャッチ画像がない場合の代替画像
if ( $image ){
$eyecatch = $image;
}
$days = 7; // 『New』を表示する日数
$today = date('U'); // 今日って
$sa = date('U',($today - $timestamp)) / 86400; // timestamp()の引数に86400を指定
?>
<div class="other_list">
<div class="imgBox"><a href="<?php echo $link; ?>" target="_blank"><img src="<?php echo $eyecatch; ?>" alt="<?php echo $title; ?>"></a></div>
<div class="textBox">
<ul>
<li class="date"><?php echo date( "Y.m.d", $timestamp ); if ( $days > $sa ) { echo '<span class="new">New</span>'; } ?></li>
<li class="title"><a href="<?php echo $link; ?>" target="_blank"><?php echo $title; ?></a></li>
<li class="description"><?php echo $site_description; ?></li>
<li class="site_name"><a href="<?php echo $site_link; ?>" target="_blank"><?php echo $site_name; ?></a></li>
</ul>
</div>
</div>
<?php
$i++;
}
}
?>
以上で表示されるはず!です。