ヤフオクの出品状況を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; ?>
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <ul>
        <?php if ($maxitems == 0): echo ' <li>表示するものががありません</li> '; else : date_default_timezone_set('Asia/Tokyo'); foreach ( $rss_items as $item ) : ?>
        <li>
            <a href="%3C?php%20echo%20$item-%3Eget_permalink();%20?%3E" rel="yahooAuction"><?php $first_img = ''; // 記事中の1枚目の画像を取得する if ( preg_match( '/<img.+?src=[\'"]([^\'"]+?)[\'"].*?>/msi', $item-&gt;get_content(), $matches ) ) { $first_img = $matches[1]; } ?&gt; <?php if ( !empty( $first_img ) ) : ?> <span class="thumbnail"><img alt="" src="%3C?php%20echo%20esc_attr(%20$first_img%20);%20?%3E"></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>
</body>
</html>

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

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

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

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