ブログを書く際に、重要だけど時間を取られてしまうOGP画像を自動生成する方法を説明します。
こちらの記事を参照し、まずはフォルダとファイルを作っていきます。
ディレクトリ構成はこちら。
/wp-content/themes/テーマ
├─header.php
└─og
├─img.php
├─og_base.png
└─NotoSansJP-Bold.otfディレクトリをルートからテーマフォルダ内に変更し、
フォントはGoogleフォントからNoto Sans JPをダウンロードしてきました。
OGP画像のベースとなる画像はこちら。
シンプルにロゴと枠線のみにしました。
img.phpの中身はこちら。
<?php
$fontSize = 36; // 文字サイズ
$fontFamily = 'NotoSansJP-Bold.otf'; // 字体
$txtX = $fontSize * 6; // 文字の横位置(文字の左が基準)
$txtY = $fontSize * 6; // 文字の縦位置(文字のベースラインが基準)
$txt = $_GET['text']; // テキスト
//指定文字数で改行させる
function mb_wordwrap( $str, $width=20, $break=PHP_EOL, $encode="UTF-8" ) {
$c = mb_strlen($str, $encode);
$arr = [];
for ($i=0; $i<=$c; $i+=$width) {
$arr[] = mb_substr($str, $i, $width, $encode);
}
return implode($break, $arr);
}
$txt = mb_wordwrap($txt);
$img = imagecreatefrompng('og_base.png'); // テキストを載せる画像
$color = imagecolorallocate($img, 51, 51, 51); // テキストの色指定(RGB)
imagettftext($img, $fontSize, 0, $txtX, $txtY, $color, $fontFamily, $txt);
header('Content-Type: image/png');
imagepng($img);
imagedestroy($img);フォントサイズと位置はアップしながら確認するのが一番早いと思います…。
私の場合は以下の数値がちょうど良い感じでした。
$fontSize = 36; // 文字サイズ
$fontFamily = 'NotoSansJP-Bold.otf'; // 字体
$txtX = $fontSize * 6; // 文字の横位置(文字の左が基準)
$txtY = $fontSize * 6; // 文字の縦位置(文字のベースラインが基準)参考記事では文章を改行しないので、
指定の文字数で改行が入るようにコードを追記します。
//指定文字数で改行させる
function mb_wordwrap( $str, $width=20, $break=PHP_EOL, $encode="UTF-8" ) {
$c = mb_strlen($str, $encode);
$arr = [];
for ($i=0; $i<=$c; $i+=$width) {
$arr[] = mb_substr($str, $i, $width, $encode);
}
return implode($break, $arr);
}
$txt = mb_wordwrap($txt);$width=20で改行する文字数を指定します。
$txt = mb_wordwrap($txt);で
取得した記事タイトルを改行したもの（mb_wordwrap($txt)）を、
同じ変数（$txt）に再代入しています。
これをテーマフォルダの中にアップロードします。
次にheader.phpを編集します。
記事にサムネイル画像が設定されていると
サムネイル画像がOGP画像として自動で設定されるので、
「サムネイル画像がない場合だけ自動生成画像をOGP画像として出力する」
という記述を追加します。
<?php
//記事詳細ページ：
//サムネイル登録がなければ、動的にOG画像を生成する。
if (is_single()) {
$thumb = get_the_post_thumbnail();
if(!$thumb) {
echo '<meta property="og:image" content="ドメイン/wp-content/themes/テーマ/og/img.php?text='.get_the_title().'">';
}
}
?>
</head>if (is_single())で「記事詳細ページならば」という条件になります。
$thumb = get_the_post_thumbnail();でサムネイル画像を取得します。if(!$thumb)で「サムネイル画像がなければ」という条件になり、
その条件に合致すれば動的に生成されたOGP画像が出力されます。
<head>内であれば、どこに記述しても良いと思いますが、
追記箇所がわかりやすいように</head>のすぐ上に記述しています。
header.phpもアップロードして、
記事ページにアクセスするとOGP画像が生成されていると思います。
この記事のOGP画像はこんな感じです。
テキストが少し上に寄っていますが、
タイトルが長い記事のことを考えるとこれくらいがちょうど良いかなと。
