WordPressでRSSを取得して文字一覧で表示する方法

お絵描きサイト作成中

今回は WordPressで RSS を取得して、

  • RSSアイコン付き

  • ピンク文字

  • ホバー時にアンダーライン

  • 交互に背景色変更

のような、まとめサイト風デザインで表示する方法を紹介します。

外部RSSを扱うため、表示時には esc_html() や esc_url() を使って安全に表示しています。

✅ サンプルコード

<?php
/*
Template Name: RSS用コード
Template Post Type: page
*/

if (!defined('ABSPATH')) {
    exit;
}

get_header();

global $wpdb;

// WordPressのRSS取得機能を読み込む
require_once ABSPATH . WPINC . '/feed.php';

// サンプル用テーブル名
$table_name = $wpdb->prefix . 'rss_sample';

// RSS URL
$rss_url = 'https://example.com/feed/';

// RSS取得
$rss = fetch_feed($rss_url);

if (!is_wp_error($rss)) {

    // 最新5件を取得
    $maxitems = $rss->get_item_quantity(5);
    $rss_items = $rss->get_items(0, $maxitems);

    foreach ($rss_items as $item) {

        // DB保存用に安全化
        $title = sanitize_text_field($item->get_title());
        $link  = esc_url_raw($item->get_permalink());

        if (empty($title) || empty($link)) {
            continue;
        }

        // 重複チェック
        $exists = $wpdb->get_var(
            $wpdb->prepare(
                "SELECT id FROM {$table_name} WHERE link = %s LIMIT 1",
                $link
            )
        );

        // まだ保存されていない記事だけDB保存
        if (!$exists) {
            $wpdb->insert(
                $table_name,
                [
                    'title'      => $title,
                    'link'       => $link,
                    'created_at' => current_time('mysql'),
                ],
                [
                    '%s',
                    '%s',
                    '%s',
                ]
            );
        }
    }
}

// DB保存済みRSSを取得
$rss_items = $wpdb->get_results(
    "SELECT title, link FROM {$table_name} ORDER BY id DESC LIMIT 5"
);
?>

<style>
    .sample-rss-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .sample-rss-item {
        background: #fffacd;
        margin-bottom: 5px;
        padding: 5px 10px;
        font-size: 20px;
        font-weight: bold;
    }

    .sample-rss-item:nth-child(even) {
        background: #ffffff;
    }

    .sample-rss-item a {
        color: #e52d77;
        text-decoration: none;
    }

    .sample-rss-item a:hover {
        text-decoration: underline;
    }

    .sample-rss-icon {
        display: inline-block;
        background: #f39c12;
        color: #fff;
        font-size: 11px;
        font-weight: bold;
        padding: 2px 4px;
        margin-right: 6px;
        border-radius: 2px;
    }
</style>

<main>
    <h1>RSS一覧サンプル</h1>

    <?php if (!empty($rss_items)) : ?>
        <ul class="sample-rss-list">
            <?php foreach ($rss_items as $item) : ?>
                <li class="sample-rss-item">
                    <a href="<?php echo esc_url($item->link); ?>" target="_blank" rel="noopener noreferrer">
                        <span class="sample-rss-icon">RSS</span>
                        <?php echo esc_html($item->title); ?>
                    </a>
                </li>
            <?php endforeach; ?>
        </ul>
    <?php else : ?>
        <p>RSS記事はまだありません。</p>
    <?php endif; ?>
</main>

<?php get_footer(); ?>

✅ コード解説

global $wpdb;

WordPressのデータベース操作を行うための変数です。

global $wpdb;

これを使うことで、WordPressのDBへアクセス出来ます。

RSS取得SQL

$rss_items = $wpdb->get_results(
    "SELECT title, link FROM {$table_name} ORDER BY id DESC LIMIT 5"
);

RSSテーブルから、

  • タイトル

  • URL

を取得しています。

LIMIT 5 にすることで最新5件だけ表示しています。

esc_html()

$title = esc_html($item->title);

RSSタイトルを安全に表示するための処理です。

外部RSSは信用せず、HTMLタグや不正コードを無害化して表示します。

esc_url()

$link = esc_url($item->link);

URLを安全に表示するための処理です。

悪意あるURLが混ざるのを防ぎます。

rel="noopener noreferrer"

rel="noopener noreferrer"

外部サイトを新規タブで開く際のセキュリティ対策です。

nth-child(even)

.sample-rss-item:nth-child(even)

偶数番目だけ背景色を変えています。

これにより、一覧が見やすくなります。

ホバー時のアンダーライン

.sample-rss-item a:hover

マウスを乗せた時にアンダーラインを表示しています。

リンクっぽさが強くなるため、クリックしたくなる感じを出しやすいです。

✅ 拡張機能

① 複数RSSから取得したい場合

// RSS URLを複数登録
$rss_url = [
    'https://example.com/feed/',
    'https://example.net/rss/',
    'https://example.org/index.rdf',
];

foreach ($rss_url as $rss_url) {

    // RSS取得
    $rss = fetch_feed($rss_url);

    if (is_wp_error($rss)) {
        continue;
    }

    // 最新5件を取得
    $maxitems = $rss->get_item_quantity(5);
    $rss_items = $rss->get_items(0, $maxitems);

    foreach ($rss_items as $item) {

        $title = sanitize_text_field($item->get_title());
        $link  = esc_url_raw($item->get_permalink());

        if (empty($title) || empty($link)) {
            continue;
        }

        // 重複チェック
        $exists = $wpdb->get_var(
            $wpdb->prepare(
                "SELECT id FROM {$table_name} WHERE link = %s LIMIT 1",
                $link
            )
        );

        if (!$exists) {
            $wpdb->insert(
                $table_name,
                [
                    'title'      => $title,
                    'link'       => $link,
                    'created_at' => current_time('mysql'),
                ],
                [
                    '%s',
                    '%s',
                    '%s',
                ]
            );
        }
    }
}

今はこの1行で 1サイトだけ 取得しています。

$rss_url = 'https://example.com/feed/';

複数サイトにする場合は、ここを 配列 に変えて foreach で回します。

② ランダム表示へ変更したい場合

$rss_items = $wpdb->get_results(
    "SELECT title, link FROM {$table_name} ORDER BY RAND() LIMIT 5"
);

※ 現在は ORDER BY id DESC なので、新しい順です。

ORDER BY RAND()

を使うことで、DB保存済みRSSをランダム順に並び替えています。そのためページを開くたびに表示順が変化します。

✔ サンプルページ

NoteやライブドアブログなどのRSSを取得して表示してみたい方の参考になると幸いです。

いいなと思ったら応援しよう！