– CardPressが止まってしまっていたので、WordPress.orgのプロフィールカードをブロックプラグインにしました – 画像ではなくHTMLでWordPress.orgプロフィールカードのブロックプラグインを公開しました
WordPress.org のプロフィールページには、アバターや登録日、それに Contributor や Translation Contributor といったバッジが並んでいます。せっかくコミュニティで活動しているなら、自分のサイトやプロフィールページにも載せておきたいところです。
これを画像として生成してくれるサービスに CardPress（donini/wp-profiles-card）がありました。GitHub の README に貼っている方も多かったと思いますが、このサービスのサイトが止まってしまいました。
そこで、同じようにカードを WordPress のブロックとして表示するプラグインを作りました。
GitHub: web-soudan/ws-wp-profile-display-block
表示サンプル
Matt Mullenweg
@matt
登録日:
- Core Contributor
- Core Team
- Plugin Developer
- Theme Developer
- Marketing Contributor
- Photo Contributor
- Photos Team
- bbPress Contributor
- WordCamp Organizer
- WordCamp Speaker
画像ではなく、HTML と CSS で描く
CardPress は、プロフィール情報を SVG 画像として出力する仕組みでした。GitHub の README のように「画像しか貼れない場所」に埋め込むには、これが正解です。ただ、WordPress サイトの中に置くのであれば、画像である必要はありません。というより、画像だと少し困ることがあります。
- テーマの配色やフォントに馴染まない
- ライトモード／ダークモードの切り替えに追従しない
- 拡大するとぼやける、あるいはレスポンシブで扱いにくい
- 中の文字がテキストとして読めない（コピーも検索もできない）
WS WP Profile Display Block は、同じ種類のカードを WordPress の中で ネイティブな HTML と CSS としてレンダリングします。テーマのスタイルに従い、ダークモードにも追従し、文字はちゃんとテキストです。
主な特徴
サーバーサイドレンダリングの動的ブロック
投稿内容に HTML を焼き込まず、表示のたびに WordPress.org のデータから組み立てる動的ブロックです。
バッジが増えても、投稿を編集し直す必要はありません。
キャッシュとフォールバック
プロフィールデータは既定で 6 時間キャッシュします。加えて、WordPress.org が一時的に応答しないときは最後に取得できた内容を表示します。外部データに依存するブロックで一番怖いのは「ある日突然カードが消える」ことなので、そこは落ちないように設計しています。
バッジ 63 色＋カスタムアイコン 10 種
バッジの配色とアイコンは CardPress 側の実装から移植しました。profiles.wordpress.org で見えているものと同じ見た目になります。
標準のブロックサポートに乗せる
色・タイポグラフィ・余白・枠線＆シャドウ・配置は、すべてブロックの標準「スタイル」パネルから編集できます。独自のカラーピッカーは付けていません。プラグイン独自の UI を増やすより、Gutenberg の作法に合わせたほうが、使う側も迷わないと考えました。もちろん既定値へのリセットも効きます。
3 つのスタイルバリエーション
| バリエーション | 見た目 |
|---|---|
| Default | アバター左・情報右、カード背景とシャドウあり |
| Stacked | アバターを上に置いた中央揃え |
| Minimal | カード背景・シャドウなし |
サイドバーに置くのか、記事末尾の著者欄に置くのか、固定ページで大きく見せるのか。用途に合わせて選べます。
アクセシビリティと安全性
alt 属性の付与、装飾アイコンへの aria-hidden、出力のエスケープ、アバター URL の Gravatar 限定許可リストなどを既定で入れています。外部から取得したデータをそのまま出す作りにはしていません。
使い方
動作要件は WordPress 6.5 以上／PHP 7.4 以上です。
- プラグインを
wp-content/plugins/に配置する - プラグイン管理画面で「WS WP Profile Display Block」を有効化する
- ブロックエディターで「WordPress.org プロフィールカード」ブロックを挿入する（「WordPress.org」で検索できます）
- WordPress.org のユーザー名を入力する（
https://profiles.wordpress.org/<ユーザー名>/の部分）
ブロック側の設定項目はこちらです。
| 設定 | 内容 | 既定 |
|---|---|---|
| WordPress.org ユーザー名 | 表示するプロフィール | （空） |
| ヘッダーを表示 | アバター・名前・ユーザー名・登録日 | ON |
| アバターを表示 | ON | |
| 登録日を表示 | ON | |
| バッジを表示 | ON | |
| バッジの表示形式 | アイコン＋ラベル／アイコンのみ | アイコン＋ラベル |
| プロフィールへリンク | カード全体を WordPress.org のプロフィールへのリンクにする | ON |
| 新しいタブで開く | OFF |
角丸・シャドウ・色・タイポグラフィ・余白・配置は、前述のとおり標準のスタイルパネル側です。
開発について
ライセンスは GPL-2.0-or-later、現在のバージョンは 0.1.1 です。
リポジトリには wp-env による開発環境、PHPUnit（ユニット／インテグレーション）、Playwright による E2E テスト、WordPress Coding Standards の設定を入れてあります。スクレイピングのセレクタやキャッシュ戦略、バッジ配色の全一覧は docs/spec.md にまとめています。
なお、このプラグインは WordPress.org や Automattic の公式なものではありません。
おわりに
「使っていたサービスが止まった」というのは、Web の仕事をしていると避けられない出来事です。外部サービスに依存している部分は、いつか必ず面倒を見る日が来ます。
今回はデータの出どころ（WordPress.org）自体は生きていたので、表示する側を自分たちで作り直せば済みました。むしろ、画像で受け取っていたものを自前でレンダリングするようにしたことで、テーマ追従やアクセシビリティといった、元のサービスでは手の届かなかった部分まで踏み込めています。
コードは GitHub で公開しています。ご意見・不具合の報告など、Issue や Pull Request でお寄せいただけると嬉しいです。