Muda a cor do fundo com uma imagem dominante

4

Estou à procura de uma forma inteligente de alterar a cor de fundo de uma página, mas tomando o valor #xxxxxx da cor dominante da imagem principal.

Em vinte e onze temas, eu posso definir uma imagem aleatória para cada página carregada, eu mudaria a cor de fundo para combinar com a imagem.

Sei que isso é possível, mas não sei como modificar o CSS ou o modelo para obter o valor de uma função específica (descobri isso que parece promissor:

enlace

Isso é muito complicado?

muito obrigado

    
por Apteryx 05.04.2013 / 12:32

1 resposta

4

Você pode usar um plugin do jQuery chamado Color Thief .

Arquivos necessários:

  1. jquery.js (está incluído no WordPress)
  2. quantize.js (download do ladrão de cores página do github )
  3. color-thief.js (faça o download do página do github para o ladrão de cores )

Configuração do Wordpress:

Abra functions.php (localizado na pasta do seu tema) e adicione o código abaixo para carregar os arquivos no WordPress. Neste caso, coloquei todos os arquivos na pasta "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');

Como você pode ver, também criei um arquivo main.js para armazenar o código que executará o código de ladrão de cores.

main.js code:

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

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

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

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

O código acima procurará uma imagem com id = target .
A função load() garantirá que a imagem já tenha sido carregada antes que o código seja executado.

Em seguida, o valor da cor dominante é armazenado em uma variável (o valor retornado é de 3 números, que formam a cor RGB)

Usamos a mesma variável para alterar a cor do plano de fundo.

A configuração de HTML:

O tema TwentyEleven carrega a imagem através de uma função no arquivo header.php , mas você ainda pode editar a tag de imagem e adicionar uma ID de imagem para poder encontrá-la facilmente com jQuery.

Nesse caso, meu ID de imagem é target :

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

E isso deve ser feito. Depois que a página for carregada, o script do jQuery procurará uma imagem com id = target . Obtenha a cor dominante dessa imagem e aplique-a ao fundo da página automaticamente.

Você pode ver uma demonstração desse trabalho aqui . (atualize a página algumas vezes até carregar uma imagem diferente)

    
por gdaniel 05.04.2013 / 16:15