ヤフオクの出品状況をWordPressサイトに貼り付ける方法

WORDPRESS, コラム, ホームページ制作

古物商を営んでいるクライアントが、ご自身がヤフオクに出品された商品をホームページにも表示させたいといった話がありまして、その方法が割と簡単でしたのでご紹介します。

phpが間違っていたので修正しました。(2017年11月)

RSSを使って読み込ませる

RSSとは、ニュースやブログなど各種のウェブサイトの更新情報を配信するための文書フォーマットの総称(Wikipediaより)のことで、自分自身のヤフオクの出品中商品一覧ページのRSSをホームページに読み込ませることで表示させることができます。

ヤフオクRSSツール

ヤフオクが提供しているRSSツールが公式であります。これはjavascriptで書かれています。下にあるRSSを取得してペーストするだけで取得できます。

RSS変換ツール

ブログパーツ

そのほかブログに貼り付ける用のパーツが色々出ていますが、これのデメリットは自由度がない・製作者のロゴなどが入るといったものです。もしできるのであれば以下のコードを使ってもらった方が融通がききますよ笑

ヤフオクのRSSとは?

さて、ヤフオクのRSSはこれです。

https://auctions.yahoo.co.jp/rss?sid=your-yahoo-ID

your-yahoo-IDのところにあなたのIDを入れてください。

WordPressサイトに貼り付けるRSS読み込みコード

実際に表示させるWordpressのサイトに以下のコードをコピペしてもOKです。

ここでは、出品している商品の最初の画像を読み込ませるようにしています。

<?php
include_once(ABSPATH . WPINC . '/feed.php');
$rss = fetch_feed('YOUR-RSS'); // 上のRSSを貼り付け
if (!is_wp_error( $rss ) ) :
	$maxitems = $rss->get_item_quantity(10); // 表示する記事の最大件数を設定できます。ここは10件表示。
	$rss_items = $rss->get_items(0, $maxitems); 
endif;
?>
<ul>
<?php
if ($maxitems == 0): echo '
	<li>表示するものががありません</li>
';
else :
date_default_timezone_set('Asia/Tokyo');
foreach ( $rss_items as $item ) : ?>
	<li>
          <a href="<?php echo $item->get_permalink(); ?>" rel="yahooAuction">
           <?php
            $first_img = '';
            // 記事中の1枚目の画像を取得する
            if ( preg_match( '/<img.+?src=[\'"]([^\'"]+?)[\'"].*?>/msi', $item->get_content(), $matches ) ) {
                $first_img = $matches[1];
            }
            ?>
            <?php if ( !empty( $first_img ) ) : ?>
               <span class="thumbnail">
                <img src="<?php echo esc_attr( $first_img ); ?>" alt="" />
               </span>
          <?php endif; ?>
<br>
<span><?php echo $item->get_date('Y年n月j日'); ?></span>
<span><?php echo $item->get_title(); ?></span>
<span><?php echo $item->get_description(); ?></span>
</a>
</li>
<?php endforeach; ?>
<?php endif; ?>
</ul>

ここには画像・日付・タイトル・説明文が表示されるのですが、この説明文(description)には画像サムネイル(100x100px)が含まれており、二重に画像が表示されてしまいます。

それが嫌な人は、スタイルシートなどでdisplay:noneなどと書いていただければ解消します。

また、好きなclassやIDなどをつけてスタイルシートで装飾して、あなたのサイトに合うように調整してください。

最後までお読み頂きありがとうございます。

よければここをポチッとやっちゃってください!