【Twitter代用】WordPressにnoteのつぶやきを使ったタイムラインを作る

noteのつぶやき
2023.09.14
WordPress
CSSnoteカスタマイズ
記事内にプロモーションを含む場合があります。

当サイトのつぶやきページはnote.comのつぶやきを利用していて、RSSから内容を表示しています。
noteのつぶやきは140字だけ投稿できるX（Twitter）みたいな投稿機能ですね。
フロー型のXと違ってnoteはブログ型なので探しやすく記事の修正も無料でできます。

ぱっと思ったことをその時つぶやくのに今まではXを使っていたんですけど、求めてもいない情報が勝手に飛び込んでくるのにしんどさを感じて遠ざかってしまいました。（ニュース系や炎上トレンドとか…）
途中でいろいろと仕様が変わって、ウィジェットなどの外部ツールも動作不安定になって信頼を損なったことも大きいです。
何気ないつぶやきは壁打ちくらいがちょうどいいなと思っていたので、noteにもつぶやき機能があったことを思い出して使ってみることにしました。

つぶやきをマガジンにまとめる

noteのつぶやきはRSSがないのでマガジンにまとめることでRSS配信が可能になります。
つぶやきは投稿した後で記事一覧からマガジンに追加できます。

マガジンRSSの位置

マガジンのRSSアドレスはマガジンページからコピーします。

jQueryで表示する方法

以前noteの記事にJimdoでの導入例を書いたので、jQueryで導入する場合はこちらの記事を参考にしてください。

noteのつぶやきでタイムラインを作る｜あるあり
noteのつぶやきを利用してWEBサイトにタイムラインを作った時の備忘録です。 noteのつぶやき機能 noteのつぶやきは短文SNSに近づけたような印象ですが、どちらかというと短文ブログでしょうか。 何気ないつぶやきは壁打ち（独り言発信）くらいがちょうどいいなと思っていたのでこ...
note.com

表示サンプル

jQueryでnoteのつぶやきをタイムライン表示にする
Jimdoで使っていた時の装飾で、ボーダーで区切るだけの簡単なものにしています。
jQueryでタイムラインを作るメリットはカスタムhtmlにコードをコピペするだけなので簡単なところですね。

jQueryを使うデメリット

  • 読み込みが遅い。
  • 最低１時間ごとの更新（分単位で更新はできない）。
  • rss2jsonで変換されると投稿時間がGMTに合わせられ９時間ずれる。
  • rss2jsonのサイトがダウンしたりすると表示されなくなる。
  • 表示は１０件まで（rss2jsonにユーザー登録すれば表示数を増やせる）

クロスドメインに対応できないので仕方ない部分でもあります。
自由にカスタマイズするならPHPで表示する方法がおすすめです。

PHPで表示する方法

  • RSSを表示させるPHPを書く
  • FTPでアップロードする
  • 固定ページにショートコードでPHPを呼び出す

作業の流れはこんな感じです。
function.phpを編集するので、お使いのテーマに子テーマがあればそちらを編集します。

RSSを表示させるPHP

これは過去にも出回っているコードだと思うのでChatGPTにさくっと書いてもらいました。

ブログカード対応のコードに書き換えました。

<?php
$external_rss_url = 'noteマガジンのRSSアドレス';

// 表示するアイテムの最大件数
$max_items = 15; 
// RSSフィードを読み込む
$response = wp_remote_get($external_rss_url);

if (is_wp_error($response)) {
    // エラーが発生した場合の処理
    echo 'RSSフィードを取得できませんでした。';
} else {
    // RSSフィードのXMLデータを取得
    $rss_content = wp_remote_retrieve_body($response);
    // SimpleXMLを使用してRSSフィードを解析
    $tubuyaki = simplexml_load_string($rss_content);
    // 表示したアイテムのカウント
    $item_count = 0;

    // RSSアイテムをループして表示
    if ($tubuyaki) {
        echo '<article id="tubuyaki" class="noteContents">';
        foreach ($tubuyaki->channel->item as $item) {
            // 表示アイテムのカウントが最大件数に達したら終了
            if ($item_count >= $max_items) {
                break;
            }
            $post_date = date('Y.m.d H:i', strtotime($item->pubDate) + 9 * 3600);
            // descriptionから画像タグを抽出
            $description = $item->description;
            preg_match('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $description, $matches);
            // HTMLタグを削除して本文を取得
            $post_content = strip_tags($item->description); 
            // 「続きをみる」リンクを削除する
            $post_content = preg_replace('/(続きをみる|Read more)/i', '', $post_content);

	            echo '<div class="noteWrap">';
	            echo '<div class="noteDate"><a href="' . esc_url($item->link) . '"><time>' . esc_html($post_date) . '</time></a></div>';
	            echo '<div class="descWrap">';
	            if (!empty($matches[1])) {
                      // 画像が存在する場合は表示
                      echo '<div class="noteImg"><img src="' . esc_url($matches[1]) . '" alt="RSS Image"></div>';
            	    }
	            echo '<div class="noteTxt">' . esc_html($post_content) . '</div>';
	            echo '</div>';
	            echo '</div>';
	            // 表示アイテムのカウントをインクリメント
	            $item_count++;
        }
        echo '</article>';
    } else {
        echo 'RSSフィードを解析できませんでした。';
    }
}
?>

投稿時間がGMTになっているので９時間加算して日本時間に合わせます。
noteのRSSはdescription内に続きをみるリンクが自動挿入されるのでそれを削除。
RSSのtitleは使用せず、つぶやきの全文が表示されるdescriptionの方を表示させます。

つぶやき本文にURLがあればCocoonのブログカード機能でリンクが有効になります。
ブログカード機能のないテーマを使っている場合はURLがただの文字列として表示されると思います。他のテーマを使ったことがないので断言できませんが……。
※つぶやきに掲載するURLは、最後の文末を改行してから載せないとブログカードにならないので注意。

PHPファイルをサーバーにアップロード

投稿記事や固定ページでPHPコードを書いても実行されないので、サーバーにファイルをアップロードする必要があります。
子テーマのfunctions.phpがあるディレクトリに、先ほど書いたPHPファイルをアップロードします。

ショートコードでPHPファイルを読み込む

子テーマのfunctions.phpのバックアップを取ってから、以下の記述を加えます。（親テーマのfunctions.phpは触らない）

//ショートコードでphpファイルを読み込む
function my_temp_Include($atts) {
 extract(shortcode_atts(array('file' => 'default'), $atts));
 ob_start();
 include(STYLESHEETPATH . "/$file.php");
 return ob_get_clean();
}
add_shortcode('include', 'my_temp_Include');

最後の行の‘include’がショートコードで使用する記述になるので、自分がわかりやすいテキストに変更します。

[include file='ファイル名']

file=’ファイル名‘ の太字部分に先ほどアップロードしたPHPのファイル名を書きます（拡張子不要）。
このショートコードを固定ページに、カスタムhtmlなどで追加します。
プレビューできちんと表示されているか確認。
画面が真っ白になったりPHPコードがそのまま出ていたりしたらコードの記述がどこか間違っているので、変更した箇所やコードが閉じられているかなどを確認します。

PHPを読み込むコードは下記のサイトを参考にしました。

WordPressで自作PHPファイルを読み込ませる（include） | ラクーン合同会社（raQoon LLC.）
複数ページでよく使うソースコードや、カスタムHTMLで編集がわかりづらいな～という時に、自作PHPファイルを使うと非常に便利なので僕は重宝しています。
raqoon.jp

CSSで表示調整

.noteContents .noteWrap {
	margin: 0 0 1.5em;
	padding: 20px;
	background: rgba(255,255,255,0.7);
	border-radius: 10px;
}
.noteContents a {
	text-decoration: none;
}
.noteContents .noteDate {
	padding-bottom: 10px;
}
.noteContents .noteDate time {
	letter-spacing: 0.08em;
}
.noteContents .noteTxt {
	font-size: 1.5rem;
	word-break: break-all;
}
.noteContents .noteImg img {
	max-width: 100%;
	max-height: 400px;
	border-radius: 5px;
 }

@media screen and (min-width: 576px) {
  .noteContents .descWrap {
    display: table;
  }
 .noteContents .noteImg {
	 display: table-cell;
	 vertical-align: top;
	 width: 45%;
	 padding-right: 10px;
	 line-height: 0;
 }
 .noteContents .noteTxt {
	 display: table-cell;
	 vertical-align: top;
 }
}

画像がある場合は右に文字が回り込みます。

プレビュー

PCとモバイルでそれぞれこのように表示されます。
これはURLがブログカードで表示されている例。

日々のつぶやき
note.comのつぶやき機能を使った疑似タイムラインです。
aru-uraniwa.com

noteのRSSは便利

noteの記事やマガジンがRSS配信されているのはありがたいですね。
つぶやきなら全文表示できるのでデザインもサイトに合わせることができますし。
でもnoteユーザーは一つの記事を丁寧に時間をかけて書いて毎日投稿されている方もいるので、Ｘの感覚でつぶやきを連続投稿していると嫌われやすいみたいです。
私はつぶやきにハッシュタグをつけてないのでそんなに見られることもないけど、連投はしないように気をつけています。

タイトルとURLをコピーしました