WordPressのアイキャッチ画像をPHPで自動生成する方法 —記事公開と同時にSNS用画像を自動で作る仕組みと実装コード

WordPressのアイキャッチを毎回手作業で作るのは続かない。

記事を公開するたびに自動でアイキャッチ画像が生成される仕組みをPHPで作った。タイトルが変わっても再生成される。カテゴリごとに色が変わる。手作業はゼロ。

この記事では仕組みの概要と詰まった箇所を正直に書く。実装コードはnoteで全文公開している。

アイキャッチを自動化するとXのクリック率が変わる——なぜか

XでURLをシェアするとき、記事のタイトルと画像がカード形式で表示される。このカードに表示される画像が、WordPressのアイキャッチ画像と連動している。

つまりアイキャッチを設定していない・全記事で同じ画像を使っている場合、Xのタイムラインでも毎回同じ画像が表示され続ける。スクロールを止める力がない。

記事の内容がどれだけ良くても、画像で止まってもらえなければクリックされない。記事ごとに違う画像が自動で出れば、タイムラインで目を引いてクリック率が変わる。

ただし毎回手作業でアイキャッチを作るのは続かない。デザインツールを開いて・画像を作って・アップロードして・記事に設定する——この作業を記事ごとにやっていたら絶対に忘れる。だから自動化した。

仕組みの全体像——何がどう動くか

難しいことはしていない。WordPressに標準で備わっている「記事が公開されたら何かする」という仕組みにPHPの処理をつなげているだけだ。

追加するファイルは2つだけだ。WordPressの管理画面の設定を変える必要はない。プログラミングの知識がなくてもコードをAIに作ってもらえば動く。

自動生成される画像に含まれる要素

生成される画像には3つの要素が含まれる。

① 記事タイトル
画像の中央に大きく配置される。タイトルが長い場合は自動で折り返し、フォントサイズも自動で調整される。短いタイトルは大きく・長いタイトルは小さく表示されるので、どんなタイトルでもはみ出さない。

② カテゴリ色
カテゴリごとに背景色が変わる設計にした。Xのタイムラインで「どのカテゴリの記事か」が一目でわかる。色のパターンは自分のサイトのカテゴリ構成に合わせて自由に設定できる。

③ ブランド文言
画像の下部にサイト名とキャッチコピーが入る。記事ごとに違う画像でも、ブランドとしての統一感を保つ役割を果たしている。

詰まりやすい3つのポイント——正直に書く

実装してみて詰まった箇所を正直に書く。同じ場所で詰まる人は多いはずだ。

① 日本語が□□□になった
画像生成にはフォントの指定が必要だ。フォントを設定しないと日本語が□□□という謎の記号になる。英数字は表示されるのに日本語だけ□になる状態で、最初は何が原因かまったくわからなかった。日本語対応フォント（Noto Sans JP）をテーマに同梱することで解決した。

② 画像を生成できているのにXに反映されなかった
ファイルは生成されていた。でもXで確認すると古い画像が表示され続けていた。原因はSEOプラグインだった。使っていたSEOプラグインが独自のOGP画像タグを出力していて、自分が生成した画像より優先されていた。「後から出力して上書きする」方法を試したが機能しなかった。プラグインの公式フィルターを使って「差し替える」のが正解だった。「上書き」ではなく「差し替え」という発想の違いがポイントだ。

③ コードを修正してもXに変化がなかった
XはSNSカード画像をキャッシュ（一時保存）する。ファイルを更新しても古い画像が表示され続けることがある。Xが提供するX Card Validatorというツールでキャッシュを更新して解決した。

⚠️ エラーが出ても焦らなくていい。エラーの内容をそのままAIに貼り付けて「どうすればいいですか？」と聞けばほとんどのエラーは解決できる。

実装コードはnoteで全文公開中

この記事では仕組みの概要をお伝えした。実際に手を動かして実装したい方は、noteで実装コードを全文公開している。コピペして3箇所書き換えるだけで動く形にした。

→ WordPressのアイキャッチ自動生成【実装コード全公開】

この記事のまとめ

ズルいくらい、うまくいく。