Dominant Colorは添付画像でよく使われている色を取得してカスタムフィールドに保存してくれるプラグインです。
掲載した画像の色に合わせて背景や枠色を設定するなど、写真やイラストメインのサイトで使うと面白い演出ができると思います。
ADs
ダッシュボードの「プラグイン」→「新規追加」から「Dominant Color」を検索します。
多くのプラグインがヒットしますが、Liam Gladdyさんが作成したものが今回のプラグインです。
有効化すると、新しく画像を登録する際によく使われている色を8色取得し、カスタムフィールドに書き込んでくれます。
プラグイン有効化後に登録した画像には以下の4つのカスタムフィールドが追加されています。
dominant_color_hex
一番多く使われている色を16進数で保存
dominant_color_rgb
一番多く使われている色のR、G、Bを配列で保存
color_palette_hex
よく使われている色8色を16進数で保存
color_palette_rgb
よく使われている色8色のR、G、Bを配列で保存
カスタムフィールドなので画像IDさえ分かればget_post_metaで取得することができます。
実際には以下のような値が取得できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
var_dump(get_post_meta($attachmentid,'dominant_color_hex')[0]); /* array(1) { [0]=> string(7) "#cbf0f7" } */ var_dump(get_post_meta($attachmentid,'color_palette_hex')[0]); /* array(3) { [0]=> int(203) [1]=> int(240) [2]=> int(247) } */ var_dump(get_post_meta($attachmentid,'dominant_color_rgb')[0]); /* array(7) { [0]=> string(7) "#4b6a60" [1]=> string(7) "#cbf0f7" [2]=> string(7) "#fa4d4d" [3]=> string(7) "#7cbea4" [4]=> string(7) "#91c9b8" [5]=> string(7) "#e0acbc" [6]=> string(7) "#d4d0e8" } */ var_dump(get_post_meta($attachmentid,'color_palette_rgb')[0]); /* array(7) { [0]=> array(3) { [0]=> int(75) [1]=> int(106) [2]=> int(96) } [1]=> array(3) { [0]=> int(203) [1]=> int(240) [2]=> int(247) } [2]=> array(3) { [0]=> int(250) [1]=> int(77) [2]=> int(77) } [3]=> array(3) { [0]=> int(124) [1]=> int(190) [2]=> int(164) } [4]=> array(3) { [0]=> int(145) [1]=> int(201) [2]=> int(184) } [5]=> array(3) { [0]=> int(224) [1]=> int(172) [2]=> int(188) } [6]=> array(3) { [0]=> int(212) [1]=> int(208) [2]=> int(232) } } */ |
実践的にはアイキャッチ画像の色を取得したい場合が多いと思いますので、以下のように$postからアイキャッチ画像のIDを取得して使うことが多いでしょう。
1 |
$color = get_post_meta(get_post_thumbnail_id($post),'dominant_color_hex',false)[0]; |
Dominant Colorプラグインは「プラグイン有効化後に登録した画像」にしか処理が発生しません。
既に多くの画像を登録していて過去の画像の色も取得したい場合、以下のアクションフックをfunctions.phpに書いておき、管理画面で「?color=1」と叩くと全画像に対して色を取得する処理を行います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
add_action('admin_head',function(){ if($_GET['color'] == 1 && function_exists('update_attachment_color_dominance')){ $attachments = get_posts(array( 'numberposts' => -1, 'post_type' => 'attachment' )); foreach($attachments as $attachment){ if(!$attachment->dominant_color_hex){ update_attachment_color_dominance($attachment->ID); } } } }); |
枚数が多いと確実にタイムアウトになるので何度か繰り返しましょう。
タイムアウトさせずにちゃんとやる場合は管理画面上にボタンを用意し、Ajaxで小分けにして投げるような処理になると思います。
色を取得するだけでもいろいろできそうですが、取得した色を調整したい・判別したいというケースも出てくると思います。その場合参考になるコードを調べました。
背景色に使う場合、その背景に乗る文字の色を明るい色にするのか暗い色にするのかを判定する必要があります。
下記ページをご参照ください。
取得した色を少し暗めにしたり彩度を下げたり…といった操作をしたいこともあると思います。
下記ページをご参照ください。
画像のメインカラーを取得することはJavascriptでも可能です。
ただ画像を一旦canvasに持っていって色を取得しているため、複数枚に渡ると非常に重くなります。
画像1枚だけの場合やアップロードされた画像から色を取得するような動的な操作なら使えるかもしれません。
取得した色を調整する場合、chroma.jsというライブラリが非常に便利です。
色の取得はDominant Colorプラグインにまかせ、data属性に色を持たせておいて調整はchroma.jsでやるというのもいいアイデアかもしれません。
ADs
コメントはまだありません。