はじめに
最近流行りのJamstack、いいですよね。
Gatsby.jsを調べているうちに、Gatsby.jsでOGPの自動出力をしたという記事を拝見しました。
GatsbyJSでOGP画像の動的生成にチャレンジしてみた | Learn Something New
で、OGP自動出力したすぎる、と。目的がGatsby.jsからOPG自動出力に変わりまして。
じゃあ、個人でやってるブログで試したろ！と思ったのですが、私のブログ、ヘッドレスCMS化？SSR？なにそれ？みたいなWordpressを使ったフツーのブログなんですよね。(しかも１年以上放置)
え、サイト作り直すのだる……PHPでどうにかできるならしよ。
というのが、今回の趣旨です。
PHPで画像作成
そもそもできるのか、というところから調べたのですが、できるらしいです。
imgタグには普通画像を指定しますが、.phpファイルを指定できるらしい。
PHPってサーバー関係！みたいなザックリした理解の仕方をしていたのでなんか画像と結びついてなかった。
そして驚きのあまりこの記事を書いているんですが、そんなの知ってるよって方はもう話すことはないです。
参考：PHPで画像を動的に生成する【GD編】 | バシャログ。
ディレクトリ構成
ファイルを置く場所は極端にいえばドキュメントルートでもテーマ内でもどこでもいいのですが、こんな感じで。
/og
├─img.php
├─og_base.png
└─xxx.ttf
.phpファイル、画像、フォントが必要です。
画像はなくても作れますが、今回はこちらを用意しました。こちらの上にテキストを重ねるだけの簡単なOGPを作ります。
PHPを書く
<?php
$fontSize = 40; // 文字サイズ
$fontFamily = 'xxx.ttf'; // 字体
$txtX = $fontSize; // 文字の横位置(文字の左が基準)
$txtY = $fontSize * 2; // 文字の縦位置(文字のベースラインが基準)
$txt = $_GET['text']; // テキスト
$img = imagecreatefrompng('ogp_base.png'); // テキストを載せる画像
// $img = imagecreatefromjpg('ogp_base.jpg'); // 元画像がjpgの場合はこうなります
$color = imagecolorallocate($img, 0, 0, 0); // テキストの色指定(RGB)
imagettftext($img, $fontSize, 0, $txtX, $txtY, $color, $fontFamily, $txt);
header('Content-Type: image/png');
imagepng($img);
imagedestroy($img);
上はいろいろ指定なので、下４行が重要です。
一つだけ注意が必要なのが縦位置。文字のベースラインが基準となっているため、縦位置に0を指定するとテキストが画像の外に行ってしまいます。
いい感じの改行などはできないので実際はもう少しいじる必要があります。
imagettftext($img, $fontSize, 0, $txtX, $txtY, $color, $fontFamily, $txt);
重ねるテキストに関する指定です。左から順番に下記を指定します。
- 重ねる画像
- 文字サイズ
- テキストの角度
- 横位置
- 縦位置
- 色
- フォント
- テキスト
header('Content-Type: image/png');
画像として情報を送信します。
imagepng($img);
PNG画像を表示。
imagedestroy($img);
メモリを解放。
og:imageを指定
<meta property="og:image" content="img.php?text=<?php the_title(); ?>">
PHPファイル内で取得するテキストデータに合わせてパラメータを付けます。
できた
たとえば、同じ内容をアップしている下記記事だと、こんな感じです。ｱｯ、ブログはメモとして使っていてもっと雑に簡略化して書いてます。よろしくお願いします。
WordPressでOGPの自動出力をする方法 | I log.
JKゴシックかわいい。
まとめ
- PHPで画像生成ができる
- imgタグやmetaタグなど、画像を指定するときに.phpファイルを指定できる