1280 800 410316

しゅんぼー(@shun_kashiwa)です。

iTopiaのテーマでは、サムネイルにタイトルを重ねて表示するデザインを採用しています。

僕の無駄なこだわりでグラデーションをかけたような背景の色にしているのですが、黒い背景に黒い文字を表示しても見えません。白い背景に白い文字でも同じです。

そこで、背景画像が白いのか黒いのか判断するPHPを書いてみましたので、ご紹介したいと思います。

やること

僕はPHPをちゃんと勉強していない(CSSとかjQueryとか専門)ので、ミスも多くあると思いますし、もっと賢いコードもあると思います。
それを知った上で使って頂ければと思います。

PHPのコードとしては、下から35pxの部分を横に見ていき、黒っぽいところがあれば黒、なければ白を返すということをしています。

Shumbo Image 2015 01 04 at 13 58 51

このように使う場合、画像の色が問題になってくるのは下の部分です。

また、「黒地に白」ならサムネイルが白っぽかった場合でも見えるのですが、「白地に黒」でサムネイルが黒かった場合が非常に見難くなります(グラデーションするため)。

Shumbo Image 2015 01 04 at 15 35 57

こんな感じになります。

そのため、全体が白くない限り黒を返すプログラムになりました。

関数

コードとしては、このようなものになっています。

WordPressのループ内で使うことを想定しているので、IDを指定することなどはしていません。

「wpgetattachmentimagesrc()」でサムネイルのURLを取得できます。 それをPNGとJPEGの場合に分けてそれぞれPHPで読み込みます。

画像の色、サイズをそれぞれ変数に代入し、forを使って下から35pxの部分の色を見ていきます。

最後に、returnを使って「white」か「black」という文字列を返します。

single.phpやindex.phpでこのようなコードを使ってその値をクラスとして追加し、CSSのcolorやbackgroundを使って色を指定します。

さいごに

画像を処理するので表示が遅くなるのは仕方ないのですが、このような仕組みを使うことでデザインにより幅を持たせることが出来ると思います。 キャッシュなどを使うことで表示速度は改善出来ると思います。

PHPで画像を処理するのは初めてだったのですが、満足できるものができてよかったと思っています。 参考にしていただければ幸いです。

以上、しゅんぼー(@shun_kashiwa)でした。