NoteのつぶやきをWordPressブログに表示する方法【フロントページでのカスタマイズ付き】

ブログに「つぶやき」機能を取り入れると、日々の小さな出来事や短い更新を簡単に共有することができて便利です。

私も「つぶやき」機能をブログに導入したいと考え、参考にしたのがある裏庭というサイトです。

このサイトで紹介されているNoteのつぶやき表示機能を見て、面白いと思い、私も実装してみました。

Noteの「つぶやき」機能は、短い投稿を手軽に発信でき、さらに後から編集できる点が便利です。

ブログにリアルタイムで反映させることで、より活気あるコンテンツを提供できるようになります。

Noteのつぶやき機能について

Noteはもともと文章を書くためのプラットフォームとして有名ですが、最近では「つぶやき」機能も追加されました。

この機能を使えば、SNSのように短いメッセージや画像を投稿することができ、気軽に情報を発信できます。

また、公開後も投稿を編集できるという点は、後から修正を加えたいときに非常に便利です。

Noteのホーム画面は、他のSNSと比べてあまり殺伐としていないところも魅力の一つです。

SNSよりも穏やかな雰囲気で、じっくり文章や写真を楽しむことができます。

当サイトで実際にフロントページにて設置したつぶやきの一例

当サイトではこのように表示させています。

Javascriptを使ってフェードするように最新のつぶやき3件を表示するように作っているのでとってもコンパクトです。

つぶやき一覧の固定ページの作り方は参考サイト通りで作れるので、今回はフロントページでこのようなスタイルでつぶやきを表示させる方法をお伝えしようと思います。

最終的には参考サイトと同様、ショートコードでお好きなところに配置できるのでサイドバーなんかにもいいと思います。

コードに関しては初心者レベルなので、無駄なのが多いと思います。あくまでご参考程度にどうぞ。

では実際にどのようにして設置しているのか次のステップで流れと各コードを説明します。

ステップ1: NoteのRSSフィードを取得する

まず、Noteのつぶやきをブログに表示させるために、RSSフィードを取得します。

NoteのマガジンにはRSSフィードが用意されているため、それを利用します。

これでNoteのRSSフィードを取得できました。

ステップ2: WordPressにNoteのつぶやきを表示させるためのPHPコード

次に、取得したRSSフィードをWordPressで表示させるために、以下のPHPコードをお好きな「ファイル名.php」で作成し、それを子テーマがあるのであればfunctions.phpと同じディレクトリに入れます。

<?php
// RSSフィードのURLを配列として定義
$external_rss_urls = array(
    'https://note.com/ユーザー名/m/マガジンID/rss',
);

// 表示するアイテムの最大件数
$max_items_front = 3; // フェードで切り替える3件まで表示
$all_items = array(); // 全てのアイテムを格納する配列

// RSSフィードをループしてアイテムを取得
foreach ($external_rss_urls as $external_rss_url) {
    $response = wp_remote_get($external_rss_url);
    if (!is_wp_error($response)) {
        $rss_content = wp_remote_retrieve_body($response);
        $tubuyaki = simplexml_load_string($rss_content);
        if ($tubuyaki) {
            foreach ($tubuyaki->channel->item as $item) {
                // 「続きをみる」リンクを削除
                $item->description = preg_replace('/(続きをみる|Read more)/i', '', $item->description);
                $all_items[] = $item; // 全てのアイテムを配列に追加
            }
        }
    }
}

// アイテムを日付順にソート
usort($all_items, function($a, $b) {
    $date_a = strtotime($a->pubDate);
    $date_b = strtotime($b->pubDate);
    return $date_b - $date_a;
});

// アイテムをループして表示
$item_count = 0;
if (!empty($all_items)) {
    echo '<div id="compactTweetSlider" class="compactTweetSlider">';
    foreach ($all_items as $item) {
        if ($item_count >= $max_items_front) break; // 3件まで表示
        $post_content = strip_tags($item->description);
        $creatorImage = '';
        $creatorName = '';
        $link = (string)$item->link;
        $namespaces = $item->getNameSpaces(true);
        if (isset($namespaces['note'])) {
            $note = $item->children($namespaces['note']);
            $creatorName = (string) $note->creatorName;
            $creatorImage = (string) $note->creatorImage;
        }

        echo '<div class="compactTweetSlide">';
        echo '<div class="compactTweetContent">';
        echo '<div class="compactTweetIcon">';

        // プロフィール画像にリンク（RSS先のユーザーのNoteページ）を付与
        echo '<a href="' . esc_url($link) . '" target="_blank">';
        echo '<img class="compactTweetProfileImage" src="' . esc_url($creatorImage) . '" alt="' . esc_attr($creatorName) . 'のプロフィール画像">';
        echo '</a>';

        echo '</div>';
        echo '<div class="compactTweetBubble">';

        // 投稿内容を表示（140文字を超えると省略する）
        if (mb_strlen($post_content) > 140) {
            $short_content = mb_substr($post_content, 0, 140) . '...';
            echo esc_html($short_content);
        } else {
            echo esc_html($post_content);
        }

        echo '</div>'; // compactTweetBubble
        echo '</div>'; // compactTweetContent
        echo '</div>'; // compactTweetSlide
        $item_count++;
    }

    // 「もっとみる」ボタンを常時表示（つぶやき一覧の固定ページへのリンク）
    echo '<a class="moreButton" href="つぶやき一覧の固定ページへのリンク">もっとみる >></a>';
    echo '</div>'; // compactTweetSlider
}
?>

そしてこの「ファイル名.php」を読み込むショートコードを同ディレクトリ内のfunctions.php（事前バックアップ推奨）に作っておきます。

ステップ3: フロントページに表示させる方法

当サイトで実際に使用しているCSSは大体こんな感じです。

/* フロントページのコンパクトなつぶやき表示 */
#compactTweetSlider {
    position: relative;
    width: 100%;
    max-width: 600px; /* 吹き出しの最大幅を600pxに設定 */
    margin: 0 auto;
}

.compactTweetContent {
    display: flex;
    align-items: center; /* アイコンとテキストを縦中央に揃える */
}

.compactTweetIcon img {
    width: 50px; /* アイコンの幅 */
    height: 50px; /* アイコンの高さ */
    border-radius: 50%; /* アイコンを丸く */
}

/* スライドの各項目 */
.compactTweetSlide {
    display: none; /* 最初は全て非表示 */
    padding: 0; /* 余計なスペースを削除 */
    background-color: transparent; /* 背景を透明にして、二重枠を防ぐ */
    border-radius: 10px; /* 角の丸みは維持 */
    position: relative; /* ボタンを半分はみ出すために必要 */
    box-shadow: none; /* 二重影を防ぐために影を削除 */
}

/* 吹き出し風のデザイン */
.compactTweetContent {
    display: flex;
    align-items: center;
    position: relative;
}

/* アイコンの表示 */
.compactTweetIcon {
    flex-shrink: 0;
    margin-right: 15px; /* アイコンと吹き出しの間のスペース */
}

.compactTweetProfileImage {
    width: 50px;
    height: 50px;
    border-radius: 50%; /* アイコンを丸く表示 */
    object-fit: cover;
    background-color: #333333; /* アイコンの背景色 */
}

/* 吹き出しのテキスト部分 */
.compactTweetBubble {
    background-color: #ffffff; /* 吹き出しの背景色: 白 */
    border-radius: 10px; /* 吹き出しの角を丸くする */
    padding: 20px;
    width: 100%; /* 吹き出しをアイコンの右側いっぱいに広げる */
    max-width: 500px; /* 吹き出しの最大幅 */
    color: #333333; /* テキストの色: 濃いグレー */
    font-size: 14px;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 吹き出し全体に少し影を追加 */
}

/* 吹き出しの矢印 */
.compactTweetBubble::before {
    content: "";
    position: absolute;
    top: 50%; /* 矢印の位置をアイコンに合わせる */
    left: -20px; /* 吹き出しの外に矢印を出す */
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent #fff transparent transparent; /* 矢印の色: 吹き出しと同じ白 */
    transform: translateY(-50%); /* 矢印の位置を上下中央に */
}

/* 「もっとみる」ボタン */
.moreButton {
    display: inline-block;
    padding: 2px 15px; /* ボタンを小さくするためのパディング */
	background-color: #1da1f2; /* ボタンの背景色: ライトブルー */
    color: #ffffff; /* ボタンのテキスト色: 白 */
    border-radius: 25px; /* 楕円の形状 */
    text-decoration: none;
    position: absolute;
    bottom: -10px; /* 吹き出しから少しだけ下にはみ出す */
    right: -10px; /* ボタンが右側に少しはみ出す */
    font-size: 10px; /* ボタンのテキストサイズを小さく */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* ボタンの影 */
    transition: all 0.2s ease; /* アニメーション */
}

/* ボタンをホバーしたとき */
.moreButton:hover {
    background-color: #79c4f2; /* ホバー時の背景色: 薄いライトブルー*/
	background-color: #1da1f2; /* ボタンの背景色: ライトブルー */
    transform: translateY(2px); /* 押し込まれたような効果 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 影の強さを調整 */
}

このコードを利用して、つぶやきの表示を整え、さらに「もっとみる」ボタンでつぶやきの一覧ページへ誘導します。カラーコードやデザインは、お好みに合わせて調整可能です。

Cocoonの場合、固定ページをフロントページに設置しているのであれば、該当するエディタ先の下のCSSにペーストしても可能です。

そして先ほど作ったショートコードをフロントページのお好きなところに配置して完成です。

まとめ

今回紹介した方法を使えば、Noteのつぶやきを自動的にWordPressブログに反映させることができます。

特にフロントページでコンパクトに表示することで、読者に最新の情報を手軽に届けることができ、ブログの活気がさらに増すでしょう。