【WordPress】添付画像のメインカラー・カラーパレットを取得するプラグイン「Dominant Color」 | Wood-Roots:blog

2019
06/10

添付画像のメインカラー・カラーパレットを取得するプラグイン「Dominant Color」

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で小分けにして投げるような処理になると思います。

PHPで色を調整する

色を取得するだけでもいろいろできそうですが、取得した色を調整したい・判別したいというケースも出てくると思います。その場合参考になるコードを調べました。

その色が明るい色か暗い色かを判定する

背景色に使う場合、その背景に乗る文字の色を明るい色にするのか暗い色にするのかを判定する必要があります。
下記ページをご参照ください。

色コードの明暗を判定する

HSBを調整する

取得した色を少し暗めにしたり彩度を下げたり…といった操作をしたいこともあると思います。
下記ページをご参照ください。

PHPでRGB・HSV変換

ちなみに：同じ処理をJavascriptでやる

画像のメインカラーを取得する

画像のメインカラーを取得することはJavascriptでも可能です。

画像からメインカラーを取得するjavascriptライブラリの比較

ただ画像を一旦canvasに持っていって色を取得しているため、複数枚に渡ると非常に重くなります。
画像1枚だけの場合やアップロードされた画像から色を取得するような動的な操作なら使えるかもしれません。

色を操作する

取得した色を調整する場合、chroma.jsというライブラリが非常に便利です。
色の取得はDominant Colorプラグインにまかせ、data属性に色を持たせておいて調整はchroma.jsでやるというのもいいアイデアかもしれません。

chroma.js

ADs

Related Articles関連記事

Post Comments

メールアドレスが公開されることはありません。

Comments

コメントはまだありません。

Category

Archive

Search

Social