WordPressでOGPの自動出力をする方法
この記事の趣旨
最近、GatsbyJSでOGP画像の動的生成にチャレンジしてみた | Learn Something Newという記事を読みました。
さっそく真似しようと思ったのですが、既に運用してるのに追加でnode.js入れるの嫌だな(ていうかわからん)、と思い、PHPでやることにしました。
使うもの
- 既存のWP
- PHP
- 画像(あれば楽に整うというだけ。なくてもいい)
- フォント
PHPファイルと画像、フォントは同じディレクトリにアップします。
こんな感じ
背景色にサイト名だけ入れた画像に、タイトルテキストを載せたものです。
php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php $fontSize = 40; // 文字サイズ $fontFamily = 'xxx.ttf'; // 字体 $txtX = $fontSize; // 文字の横位置(文字の左が基準) $txtY = $fontSize * 2; // 文字の縦位置(文字のベースラインが基準) $txt = $_GET['text']; // テキスト $img = imagecreatefrompng('ogp_base.png'); // テキストを載せる画像 $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を指定するとテキストが画像の外に行ってしまいます。
また、いい感じの改行などはしてくれないので、実際には改行させたりなどもう少し記述が必要です。
少し面倒だなと思ったのが、headerでContent-Type: image/pngを送信しているため、phpファイルを見てもエラーなどが表示されなくて自分がどこで詰まっているのかわからなかった点ですかね。ローカルサーバーで総当たりして辿り着いたって感じです。
og:imageの指定
|
1 |
<meta property="og:image" content="img.php?text=<?php the_title(); ?>"> |
画像のURLを入れるところに、先程作ったimg.phpを入れます。
渡すテキストをパラメータとして渡せば、画像に載せるテキストが変わります。
まとめ
画像の代わりにPHPファイルを読み込み、生成させる。
PHPのイメージ関数を知っている方には当然の内容だったかもしれないのですが、私はイメージ関数というものがあることすら知らなかったです。できないかな～ってググったらあったよ、まじかよ…（ちょっと引く）くらいの感じでした。
また、imgタグにphpファイルを指定できるのも初めて知りました。てことは、デフォルト画像なんかも用意してましたが、作れるってことですね。いや、デフォルトは普通に画像作った方が早いかな。
自分の中のJamstackに挑戦するための理由をまた一つ潰してしまったな…という感じです。