ブログテーマのカウンターを改造した

投稿者: | 2019-04-25

カウンター付きのテーマ

今使ってるテーマはSimple Daysという物なのですが、これにはテーマ純正のカウンターがあります。

こんなの。

でもなんかしょb…地味

テキストベースだし、数字と文字の間にスペースないし、なんかスペース広いし、どうにも地味というのが感想でした。(作者さんすんません

なら改造してみよう!となったのです。

そうだ改造しよう

まずはテキストベースで改造を試みたのですが、そもそもいくらどう文言を変えたところでイマイチ納得できませんでした。

じゃあなんかリッチな装飾を入れるか!?といえば、それも違うよなぁという感じで…。

閃き

そこでふと、そういえば昔のカウンターって画像だったよねってことを思い出し、そうだカウンターは文字でなく画像にしようとなりました。

画像にしてみた

という訳で、サクッと画像にしてみて見栄えは問題なかったのですが、ちょっと納得できない部分がありました。

一枚の画像にしたい

そう、画像と言っても0-9のカウンタ画像を羅列してるだけだったので一枚の画像になっていなかったのです。

そこで一枚の画像にするにはどうすればいいか調べました。

GDとかImageMagicという単語は知っていたので、この辺りで出来るのではないかという筋です。

GDを使ってみよう。

ImageMagicは2016年あたりで更新が止まっている?のと、クリティカルな脆弱性があるようなので、どちらかといえばPHPオフィシャル?のGDを使ってみることにしました。

正直ImageMagicの脆弱性関係ない気がするんですけどね。まぁほら、GD使ってみたかったんですよ。

透過処理が難しい!

ここはぶっちゃけ最後まで妥協しました。

どうにもアルファブレンディングは出来るのですが、アルファ値そのものを扱うことはできない?ちょっとここ調査不足なんですが…w

昔の透過GIFって255, 0, 255を背景色にして、それを透過色として扱ってたじゃないですか。あれをやりました。

実現方法

予め幅高さを設定した背景色255, 0, 255を透過した矩形画像(キャンバス)を生成して、その上にカウンタ画像をのっけていきました。

取り敢えず合計カウンタを画像で出したかったので、widget-page_view.phpの27行目で指定しているところを空文字に

'all' => "",

45-46行目を以下で書き換えました。割と力技な気もします。

# init
$count_string = (string)$yahman_addons_count['pv'][$settings['coverage_period_'.$i]];
$count_length = strlen($count_string);
$wp_content_url = content_url();

# configure image width
$img_width = 45 * $count_length;
# create canvas
$base_img = imagecreatetruecolor($img_width, 100);
# fill canvas with purple
imagefill($base_img, 0, 0, imagecolorallocate($base_img, 255, 0, 255));
# set transparent color
imagecolortransparent($base_img, imagecolorallocate($base_img, 255, 0, 255));

# get png
for ($idx = 0; $idx < 10; $idx++) {
  $counter_imgs[$idx] = imagecreatefrompng("./wp-content/plugins/yahman-add-ons/assets/images/counter/". $idx . ".png");
}

# join png
for ($idx = 0; $idx < $count_length; $idx++) {
    # dstImg, srcImg, dstX, dstY, srcX1, srcY1, srcX2, srcY2
  imagecopy($base_img, $counter_imgs[$count_string[$idx]], 45 * $idx, 0, 0, 0, 45, 100);
}

# destory png
for ($idx = 0; $idx < 10; $idx++) {
  imagedestroy($counter_imgs[$idx]);
}

# output png
ob_start();
imagepng($base_img);
imagedestroy($base_img);
$img = ob_get_clean(); 
$enc_img = base64_encode($img);
echo "<img src=\"data:image/png;base64,{$enc_img}\" width=\"{$img_width}\" height=\"100\">";

yahman-add-ons/assets/images/counter/というフォルダは私が勝手に作ったので標準だとありません。ここにカウンタ画像を突っ込んでます。

ついでにカウンターの値も旧サイトから継承したので立派になりました(ぉ

いやー、ねこみみカウンターいいですよね。大好きです。