前回の記事 では、X(旧Twitter)の API が有料化したことで、たくさんの WordPress サイトのタイムライン埋め込みが壊れてしまった、というお話をしました。
東京労音さんのサイトもまさにその一つで、私はその解決策として「X の API を使わずに、サイト内で『X 風お知らせ』を管理する」という発想で WordPress プラグインを自作しました。
今日はその第2回として、「じゃあ実際にどうやって作ったのか?」という、開発の中身を少しだけお話してみたいと思います。
技術寄りの話になりますが、なるべく WordPress を使っているサイト運営者さんにも伝わるように書いてみますね。
まず、設計の発想転換から
「X のタイムラインを表示する」と聞くと、普通は次のような手順を想像します。
- X からデータを取ってきて
- WordPress に表示する
でも、これが今や API 有料化で簡単にはできなくなった、というのが前回のお話でした。
そこで私はこう発想を変えました。
「X からデータを取らずに、サイト側にも同じ内容を最初から持っておけばいいのでは?」
つまり、X とサイトの両方に「同じ内容を別々に投稿する」ということです。これだけ聞くと「面倒では?」と思われるかもしれませんが、ここに開発のちょっとした工夫が入ってきます。
工夫①:WordPress に「Xお知らせ専用の入力欄」を作る
WordPress には「カスタム投稿タイプ」という仕組みがあります。普通の「投稿」とは別に、自分専用の投稿エリアを管理画面に追加できる機能です。
たとえば、商品サイトなら「商品」というカスタム投稿タイプ、求人サイトなら「求人」というカスタム投稿タイプを追加したり、というよくある使い方ですね。
私はこれを使って「Xお知らせ」という専用の投稿エリアを作りました。
管理画面の左メニューに「Xお知らせ」が現れ、そこから新規追加・編集・一覧表示ができるようになります。普通のブログ投稿とはまったく別のエリアなので、ブログ記事と混ざる心配もありません。
工夫②:「Xに投稿する」ボタンで二度手間を防ぐ
「サイトに書いた内容を、もう一度Xにコピペするのは面倒」
これは当然出てくる悩みです。そこで私は、編集画面に「Xに投稿する」というボタンを設置しました。
このボタンを押すと、X の投稿画面が新しいタブで開いて、本文とサイト記事の URL が自動で入力された状態になります。あとは画像を X 側にアップして「ポスト」を押すだけ。
実は、これは X が公式に提供している「ツイート画面に最初から文字を埋め込んで開く仕組み」(intent URL と言います)を使っているだけで、X の API ではありません。なので、無料で、しかも公式に許可された方法で実現できます。
https://x.com/intent/tweet?text=【本文】%0A【URL】このような URL を開けば、X の投稿画面に文章が自動で入った状態で開く、というシンプルな仕掛けです。「API を使う」のではなく、「ブラウザの動きをうまく使う」のがポイントでした。
工夫③:URL を短くする工夫
最初に作った時、ちょっとした問題がありました。
サイトに「クリスマスコンサート」というタイトルでお知らせを投稿すると、その記事の URL がこんなふうになっていたんです。
https://example.com/x-oshirase/クリスマスコンサート/これを X の投稿に貼り付けると、日本語の部分が長い文字列に変換されて、URL がやたら長くなってしまうんですね。
https://example.com/x-oshirase/%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%9E%E3%82%B9.../X は文字数制限がある(280文字)ので、これは結構な問題です。
そこで私は、お知らせを公開した瞬間に自動で URL を「投稿の管理番号」に置き換える仕組みを入れました。
https://example.com/x-oshirase/123/こうすることで、X に貼り付ける URL がすっきり短くなり、本文をたくさん書く余裕が生まれます。
地味な工夫ですが、こういう「実際に使った時にだけ気づく不便」を1つずつ潰していくのが、自作プラグインの楽しいところでもあります。
工夫④:ブロックエディタとの相性問題
WordPress の新しい編集画面(ブロックエディタ)を使っていると、こんな現象に遭遇しました。
「公開ボタンを押した直後、『Xに投稿する』ボタンが灰色のまま反応しない。ページを再読込すると押せるようになる」
これは、ブロックエディタの内部仕組みで「ボタンが置かれているエリアが、公開後に自動で更新されない」ことが原因でした。
普通の開発者なら「再読込してください」と説明書に書いてしまうかもしれません。でも、東京労音さんの社員さんが使うことを考えると、それは絶対に避けたい体験です。
そこで小さな JavaScript を組み込んで、「公開した瞬間にボタンを動的に有効化する」処理を追加しました。これで再読込なしで、公開と同時に X 投稿に進めるようになりました。
「ユーザーが当たり前と感じる動き」を実現するために、裏では結構な工夫が必要になる、というのは開発あるあるです。
ギター文化館さんでも導入してみました
音楽団体Aさんでの運用がうまく回り始めた頃、私が管理している別のサイト、 音楽ホールBさんでも同じ問題を抱えていたことに気づきました。
音楽ホールBさんは、サイトでは定期的にコンサート情報やイベントの様子を発信されています。こちらも X のタイムライン埋め込みがうまく表示されなくなっていたので、同じプラグインを導入してみました。
すると、音楽ホールBさんでも問題なく稼働。サイドバーにスクロール可能なお知らせがきれいに並んで、訪問者がコンサート情報を遡って読めるようになりました。
「1つのサイトだけで動く」のと「複数のサイトで動く」のでは、確認できる範囲が全然違います。
音楽ホールBさんで導入してみたことで「あ、こういうテーマだとこう見えるんだ」「この配置だとこんな印象になるんだ」という新たな発見があり、プラグインそのものを改善するきっかけにもなりました。
まとめ:「無いなら作る」の楽しさ
「X API が高いから諦める」のではなく、
- カスタム投稿タイプで専用の入力エリアを作る
- intent URL で X への投稿を半自動化する
- URL の短縮
- ブロックエディタの癖への対応
こういった、ひとつひとつは小さな工夫を積み重ねていくことで、お金をかけずに、安定して、デザインも自由な「X 風お知らせ」を実現できました。
WordPress は「カスタム投稿タイプ」「ショートコード」「フィルターフック」など、自分仕様に拡張できる仕組みが本当に豊富です。「これがあったらいいのに」と思うものは、自分で作れることが多いんですね。
そして実際に作ってみると、自分が困っていたことは、たいてい他の人も同じように困っている、ということに気づきます。それが「他の人にも使ってもらえる形にしよう」というモチベーションにつながっていきます。
次回のお知らせ
次回(第3回)では、このプラグインを「自分専用」から「他の人にも使える形」にするために、
- GitHub でコードを管理し始めた話
- 「ライト/ダークモード切り替え」など機能を育てている話
- 将来的に WordPress プラグインを販売するために何が必要か
といった、プラグインを「商品」として育てていく過程を書こうと思います。
WordPress プラグインを自作してみたい方、自分の作ったものを少し誰かに使ってもらいたい方には、参考になる内容になればと思っています。
最後まで読んでくださって、ありがとうございました 🙌
この記事は、WordPress プラグイン「SINQWELL X Notice」シリーズの第2回です。
SINQWELL では、WordPress プラグインの開発・カスタマイズ・導入代行も承っています。同じ困りごとを抱えていらっしゃるサイト運営者の方、お気軽にご相談ください。
