GDを使って投稿内容から自動でアイキャッチを生成する

WordPressによるテキスト投稿サイトを運営しているのですが(Web制作者の(苦笑)タイケツというサイトです)、SNSでシェアされた時にもうちょっとインパクトを出したいと思い、投稿内容を反映したOGP・TwitterCards用のイメージを自動で生成させるようにしました。

AD

実際の実装例

Web制作者の(苦笑)botでご覧いただけます。

キャッシュの関係で過去記事は反映されていませんが、新しいツイートには自動生成された画像が使われています。

源真ゴシック(源ノ角ゴシック)のおかげで非常に美しい仕上がりです!
結構長い文字を入れましたが、問題なく読めますね。これでフォロワーやアクセスが増えれば…。

流れ

1.GDによってあらかじめ用意した背景画像に記事のタイトルを合成します。
2.生成した画像を保存し、記事のアイキャッチとして設定します。
3.metaタグを出力します。

という流れでやってみます。

functions.phpに書きます

全部functions.phpに書きます。

画像の生成

途中で使っている「mb_wordwrap」について

記事タイトルが長くなることも考慮し、指定文字数で分割する関数を定義しています。

マルチバイト対応のwordwrapが無いから作った

今回は配列で返してくれればよいので、implodeの部分は省いています。

metaタグの出力

wp_head()へのアクションフックでmetaタグを出力します。
※og:titleなど足りないタグは別途補完してください。

既に投稿済みの記事についてはどうするか

上記は新規の投稿についてはアイキャッチ生成処理が動きますが、過去の記事には動きません。

過去記事にアイキャッチ生成処理を行いたい場合は、functions.phpに

と書き、
http://example.jp/?gen=1
のアドレスを叩くと記事全てに対してアイキャッチ生成処理が実行されます。

記事数が多いとタイムアウトになりますので、get_postsで全記事取得している部分を50件ずつにするとかsleep()をはさむなど、小分けして処理が走るようにしないといけないかもしれません。

参考になりました

素晴らしいフォントをありがとうございます。
源真ゴシック (げんしんゴシック)

wp_insert_attachmentの処理が参考になりました。
WordPressの「wp_insert_attachment」を使って、特定の投稿に対して添付ファイルをメディアライブラリにアップロードする

GDでの文字揃えの処理で参考になりました。
GDライブラリで文字を右寄せ出力する

ちなみに

多分Imagick使う方が楽です。

参考にしました(が、私のサーバーでは駄目っぽかった…)
PHPでImageMagickを使うImagickのコマンドサンプル

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

コメントはまだありません。