WordPressで固定ページを画像として配信する

素材画像の情報を取得する

素材となる画像は、ここではPNG形式のものをテーマディレクトリにアップロードして使用する。

まず、素材のファイル名（フルパスを含む）を $file_name に代入する。

URLでもいいんだけど、その場合は画像をHTTPアクセスで取得することになるから、処理は遅くなる。

get_stylesheet_directory() でテーマディレクトリ直下のフルパス（末尾のスラッシュは含まない）を取得できるので、ファイル名は以下のようになる。赤字部分は各自変更すること。

$file_name = get_stylesheet_directory() . '/img/counter.png';

次に、素材画像のサイズなどの情報を取得しておく。

以下のコードで $width （画像の幅）を÷10しているのは、素材が0から9までの画像を左から順に結合した画像であり、そのひとつひとつのサイズを取得するためだ。

$image_size = getimagesize($file_name);
$width  = $image_size[0] / 10;
$height = $image_size[1];

キャンバスを作る

次に、画像処理の土台となるキャンバスを設定する。

$cols にはアクセスカウンターに表示したい桁数を代入しておく。

$canvas = imagecreatetruecolor($width * $cols, $height);
imagecolortransparent($canvas, imagecolorallocate($canvas, 0, 0, 0));

1行目で imagecreatetruecolor() によりキャンバスを設定している。

第1引数はキャンバスの幅、第2引数はキャンバスの高さとなる。

ただし、このままではキャンバスの背景色が黒のままになる。

2行目では imagecolorallocate() により黒を指定し、 imagecolortransparent() によりその色を透過色に設定している。

これにより、キャンバスの背景色が透明になる。

素材画像を読み込む

先ほどは素材画像の情報を取得したが、今度は画像データを読み込む。

たった1行。

$the_image = imagecreatefrompng($file_name);

素材画像を貼り付ける

いよいよ生成する画像を形作っていく工程だ。

アクセス数はあらかじめ $view_count に代入しておくが、形式は数字添字の配列とし、左の桁から順に配列の各要素に1桁ずつ格納されているものとする。

つまり、たとえば「003176」なら以下のようになる。

$view_count = array(0, 0, 3, 1, 7, 6);
// つまり以下と同じ
$view_count[0] = 0;
$view_count[1] = 0;
$view_count[2] = 3;
$view_count[3] = 1;
$view_count[4] = 7;
$view_count[5] = 6;

この配列の作り方は、以下の通り。

$view_count = 3176;
$view_count = sprintf( '%0' . $cols . 's', $view_count ); // 先頭をゼロで埋める
$view_count = str_split($view_count);

この配列を使い、以下のように foreach ループを回す。

foreach ( $view_count as $key => $value ) {
    $process = imagecopy($canvas, $the_image, $width * $key, 0, $width * $value, 0, $width, $height);
}

キャンバスに画像を貼り付ける関数が imagecopy() であるが、引数が8つもあってややこしい。

第1引数がキャンバス、第2引数が貼り付ける画像。

第3引数は貼り付ける位置のx座標（左端が基準）、第4引数はy座標（上端が基準）となる。

foreach ループ内で $key は現在の桁番号（ゼロが基準）を表すので、 $width * $key が現在の貼り付け位置となる。

素材はこの位置を左上として貼り付けられる。

素材画像は任意の大きさにトリミングされて貼り付けられる。

素材画像のトリミング範囲の左上のx座標が第5引数、y座標が第6引数となる。

$value は“現在の桁の数字”を表し、素材画像は左から順に「0、1、2、3、……」となっているから、 $width * $value が目的の数字の位置となるのだ。

そして、トリミング範囲の幅が第7引数、高さが第8引数だ。

つまり、まとめると以下のような感じ。

imagecopy(キャンバス, 素材画像, 貼付位置x, 貼付位置y, トリミング位置x, トリミング位置y, トリミング幅, トリミング高);

foreach ループにより1桁ずつ位置をずらしながら貼り付けることにより、何桁のアクセスカウンターでも作ることができる。

画像を出力する

以上で画像は完成したので、あとはデータをリクエストに対して出力するだけだ。

ファイルとして出力することも可能だが、今回は画像を動的に生成するのが目的のため、標準出力（テキストであれば echo ）に出力する。

GDにおいては専用の関数 imagepng() が用意されているのでこれを使用する。

$print = imagepng($canvas, null, 9);

第1引数はキャンバス、第2引数は保存するファイル名（今回は保存しないので null ）、第3引数はPNGの圧縮率（たぶん9でいい）。

そして最後に後片付けだ。

imagedestroy($canvas);
imagedestroy($the_image);
exit;

imagedestroy() という物騒な名前の関数で、キャンバスと素材画像のキャッシュを消去。

画像を出力した以上、後の処理は必要ないので（というか下手に処理をしないように） exit で一切を終了させる。

その他

wp_header() や wp_footer() は？

そんなもの、いりません！

……それらはWebページを表示させるのに使うもので、今回は画像だから、むしろそれらを使ってはならない。

その他、何かを出力しかねないような余計なコードは一切不要。

アクセスカウンターの数値を取得するなどの処理は別途、必要に応じて、ただし出力は一切しないように。