web-dev-qa-db-ja.com

背景色を画像から支配的に変更

ページの背景色を変更するスマートな方法を探していますが、見出し画像の主要色から#xxxxxxの値を取ります。

二十一一一テーマでは、私はロードされたページごとにランダムな画像を設定することができます、私は写真に合わせて背景色を変更します。

私はそれが可能であることを知っています、しかし私は特定の機能から値を取得するためにCSSまたはテンプレートを修正する方法を知りません（私はこれが有望に思えることがわかりました：

https://stackoverflow.com/questions/2541481/get-average-color-of-image-via-javascript

それは複雑すぎますか？

どうもありがとう

custom-backgroundcolor-picker
4
Apteryx

Color Thief というjQueryプラグインを使用できます。

必要なファイル：

  1. jquery.js（WordPressに含まれています）
  2. quantize.js（color-thief githubページからダウンロード ）
  3. color-thief.js（color-thief githubページからダウンロード ）

Wordpressのセットアップ：

テーマのフォルダにあるfunctions.phpを開き、以下のコードを追加してWordPressにファイルをロードします。この場合、私はすべてのファイルを "js"フォルダに置きました。

//color thief demo

wp_register_script('quantize', $base . '/js/quantize.js');
wp_enqueue_script('quantize');

wp_register_script('colorThief', $base . '/js/color-thief.js');
wp_enqueue_script('colorThief');

wp_register_script('main', $base . '/js/main.js');
wp_enqueue_script('main');

ご覧のとおり、カラーシーフコードを実行するコードを格納するためのmain.jsファイルも作成しました。

main.jsコード： 

jQuery(document).ready(function($) {

    $("#target").load(function(){

        // Dominant Color
        var dominantColor = getDominantColor($(this));

        //change background
        $("body").css("background-color", "rgb("+dominantColor+")");
    });        
});

上記のコードはid = targetの画像を探します。
load()関数は、コードが実行される前にイメージが既にロードされていることを確認します。

次に、主色の値が変数に格納されます（返される値は3つの数値で、これらはRGB色を形成します）。

背景色を変えるのに同じ変数を使います。

HTMLの設定：

TwentyElevenテーマはファイルheader.phpの関数を通して画像をロードしますが、それでもjQueryでそれを簡単に見つけることができるように画像タグを編集して画像IDを追加することができます。

この場合、私のイメージIDはtargetです。

<img 
    src="<?php header_image(); ?>" 
    width="<?php echo HEADER_IMAGE_WIDTH; ?>" 
    height="<?php echo HEADER_IMAGE_HEIGHT; ?>" 
    alt="" 
    id="target" />

そしてそれはそれをするべきです。ページが読み込まれると、jQueryスクリプトはid = targetを持つ画像を探します。その画像の主な色を取得してから、ページの背景に自動的に適用します。

この作業のデモを見ることができます ここ 。 （別の画像が読み込まれるまでページを数回更新します）

4
gdaniel