Blog

Utilizando o recurso "custom backgrounds" do WordPress

bloglite-custom-background-2custom-bg-blogliteHoje vamos trazer uma dica simples, rápida, mas muito bacana: fundos personalizados configuráveis pelo próprio painel do WordPress. Este é um dos muitos recursos que chegaram ao WordPress na versão 3.4.

Com suporte para custom background você terá uma nova opção no menu Aparência do seu site, podendo adicionar cor ou imagens, configurando posicionamento e repetição, para o body do seu site.

Adicionando suporte

Para adicionar o suporte ao custom background no WordPress, abra o functions.php do tema ativado e adicione a seguinte linha:

add_theme_support( 'custom-background' );

Pronto! Isto basta para conseguir personalizar o fundo do site. Porém, não vamos parar por aqui, veremos a seguir algumas formas de deixar algumas configurações como padrão.

Definindo configurações padrões

Vamos usar os seguintes argumentos para definir configurações padrões para nossa função:

$defaults = array(
'default-color'          => 'ff0000',
'default-image'          => get_template_directory_uri() . '/images/background.jpg',
'default-repeat'         => 'no-repeat',
'default-position-x'     => 'center',
'default-attachment'     => 'fixed',
);
add_theme_support( 'custom-background', $defaults );

Explicando: em ‘default-color’ definimos a cor em hexadecimal (sem usar #) para o background; em ‘default-image’ indicamos o caminho da imagem de fundo na pasta no tema ativado, nesse caso a background.jpg na pasta images; em seguida temos ‘default-repeat’, onde escolhemos o modo de repetição, nesse caso usamos no-repeat para não repetir.

Logo após temos ‘default-position-x’, onde podemos definir o posicionamento da imagem de fundo; em ‘default-attachment’ escolhemos o comportamento desse fundo, nesse caso definimos como fixo.

Nota: Para o funcionamento desse recurso do WordPress, é necessário que o tema tenha implementado corretamente o wp_head() e body_class().

Com isso, poderemos alterar cor e imagem de fundo do nosso site. Basta então acessar o painel administrativo e acessar o painel de Personalização em Aparência > Personalizar.

Bom proveito!

Deixe um comentário

Hospede seu projeto em WordPress com alto desempenho