O WordPress é o queridinho de muitos, tanto como plataforma de blogs quanto como sistema de gerenciamento de conteúdo (CMS). Isso ocorre porque a plataforma é fácil de aprender, usar e personalizar. Quero dizer, você pode transformar seu site da maneira que desejar sem se esforçar muito. Você pode até adicionar diferentes planos de fundo às suas postagens e páginas do WordPress, o que é o assunto deste guia.
Se você deseja adicionar um pouco de cor e estilo às suas postagens e páginas do WordPress, este guia aprofunda o tópico usando uma abordagem em duas frentes. Primeiro, adicionaremos diferentes planos de fundo a postagens ou páginas do WordPress usando CSS e uma função PHP simples, mas se essa não for sua xícara de chá (digamos que você seja o iniciante perfeito e o código assuste você), iremos oferecem alguns plugins de segundo plano do WordPress para ajudar no processo.
De qualquer forma, você deve se divertir muito, pois este é um projeto relativamente fácil. Além disso, é sempre divertido aprender algo novo. Aproveite até o final e compartilhe suas sugestões, comentários ou perguntas na área de comentários. Preparar? Vamos mergulhar em 3, 2, 1…
Como adicionar fundos ao WordPress com código
Esta seção será de grande benefício se você conhecer PHP, HTML e CSS. Não se preocupe, você sempre pode copiar e colar os snippets de código fornecidos aqui. Você só precisa saber onde os diferentes arquivos estão localizados na sua instalação do WordPress. Com esse preâmbulo, vamos editar.
Adicione fundos diferentes a posts e páginas do WordPress usando CSS
Muito do estilo que entra nas postagens e páginas do WordPress (e em todo o seu site) é controlado por um arquivo conhecido como folha de estilo. O arquivo de folha de estilo no WordPress geralmente é rotulado como style.css. Você pode acessar style.css navegando até Appearance > Editor em seu WordPress Admin:
Estamos adicionando planos de fundo (e outros estilos) às suas postagens/páginas do WordPress em style.css, por isso é importante carregá-lo em uma guia separada.
Ao navegar para Aparência -> Editor, você também verá uma lista de todos os modelos de tema à direita da tela. Se você estiver usando um tema filho – você deve usar um btw – você precisará carregar os arquivos de modelo do seu tema pai.
Você precisa se concentrar no arquivo header.php. Por que header.php? Porque este arquivo é adicionado a todos os outros modelos, ou seja, páginas e postagens quando o WordPress está reunindo os arquivos que compõem seu site. Em outras palavras, o código dentro de header.php aparece em cada página ou post que você cria.
Procure este trecho de código:
<body <?php body_class(); ?>>
Esta função tem um propósito. Ele divide classes CSS que você pode usar para alterar o estilo de suas postagens e páginas. Tudo o que você precisa fazer é direcionar uma classe CSS específica para a página ou postagem que deseja personalizar, adicionar seu plano de fundo e estilos, salvar suas alterações e se alegrar.
Se, por exemplo, você visualizou o código-fonte da sua página inicial, a função acima produzirá algo como:
<body class=”home blog logged-in admin-bar no-customize-support hfeed”>
E isso porque o <?php body_class(); ?> parte do trecho de código fornece todas as classes, por exemplo, .home, .blog, .logged-in, etc., que você pode usar em seu CSS para estilizar vários elementos de sua página inicial.
A parte : visualizar o código-fonte de qualquer postagem ou página é fácil. Se você estiver usando o Chrome, basta clicar com o botão direito do mouse em uma página/post e selecionar “Exibir fonte da página”. No Mozilla, clique com o botão direito do mouse na postagem/página e selecione “Exibir fonte da página”. Se você estiver usando o Microsoft Edge (Internet Explorer), clique com o botão direito do mouse em sua página/post e selecione “Exibir fonte”.
Se você visualizar o código-fonte de uma página do WordPress, essa mesma função produzirá:
<body class=”page page-id-2 page-template-default logged-in admin-bar no-customize-support”>
Se você visualizou o código-fonte de um único post, nossa função body_class gera algo próximo a:
<body class=”single single-post postid-1 single-format-standard logged-in admin-bar no-customize-support”>
Como você pode ver, você obtém algumas classes CSS que você pode segmentar facilmente:
- .page para todas as páginas
- .page-id-2 que permite segmentar uma página específica, ou seja, página com id no. 2
- .single para todas as postagens individuais, o que significa que todos os estilos CSS que você aplicar a esta classe serão aplicados a todas as postagens
- .postid-1 para a postagem com id=1, o que significa que todos os estilos CSS que você aplicar afetarão apenas essa postagem
- .single-format-standard – Isso permite que você aplique estilos CSS a todas as postagens com o formato de postagem padrão
- .logged-in – Os estilos que você aplica usando esta classe CSS só se aplicam a usuários logados
Todos os itens contidos em class=”” oferecem ganchos CSS que você pode usar para direcionar qualquer postagem ou página. Mas por que estamos adicionando o ponto (.) antes de cada classe? É uma sintaxe CSS convencional, que indica que você deve chamar todas as classes usando um ponto (.) e todas as divs usando hash (#). História para outro dia.
Por exemplo, para aplicar um plano de fundo preto a todas as postagens, adicione o seguinte snippet a style.css:
.single { background-color: #000; }
Adicionar plano de fundo a postagens e páginas do WordPress usando PHP (por meio de um campo personalizado)
Se você deseja adicionar um método manual embutido para alterar os planos de fundo do seu site por meio de um campo personalizado, isso também é muito fácil de fazer. Basta colar o seguinte código no arquivo functions.php do seu tema (se você estiver usando um tema de terceiros, isso é feito melhor por meio de um tema filho). Certifique-se de alterar onde diz “myprefix” para seu identificador exclusivo (isso é para evitar conflitos com temas e plugins) e, quando estiver tudo pronto, você poderá usar o campo personalizado “myprefix_background_image” para inserir um URL para uma imagem para qualquer página ou postagem na qual você deseja alterar o plano de fundo.
<?php
// Add inline style to set body background via “myprefix_background_image” custom field
function myprefix_custom_field_background() {
if ( $background = get_post_meta( get_the_ID(), ‘myprefix_background_image’, true ) ) { ?>
<style type=”text/css”>
body { background-image: url( “<?php echo esc_url( $background ); ?>” ); }
</style>
<?php }
add_action( ‘wp_head’, ‘myprefix_custom_field_background’ );
Observe como a função se conecta à ação “wp_head”? Isso significa que sempre que você usar o campo personalizado, o CSS embutido será adicionado à tag de cabeçalho do seu site com o código para alterar o plano de fundo de acordo com o valor do campo personalizado.
Adicionando fundos ao WordPress com plugins
Você pode segmentar postagens e páginas do WordPress e estilizar cada uma de acordo com o conteúdo do seu coração com PHP e CSS, como mostramos. Mas se você não tiver tempo para o código, ou as instruções acima não funcionarem por um motivo ou outro, aqui estão alguns plugins de segundo plano do WordPress para inicializar.
WP-Backgrounds Lite Plugin WordPress Gratuito
O que posso dizer? Este é um daqueles plugins do WordPress que atendem a necessidade. Você gosta de alguns fundos vibrantes para suas postagens e páginas do WordPress? Claro, por que não. Este plugin é fácil de instalar e usar? Eu adoraria ouvir sua opinião.
WP-Backgrounds Lite , pessoal, é o plugin que ajuda você a possuir fundos WordPress de uma vez por todas. Você pode até tornar o plano de fundo para suas postagens e páginas do WordPress clicáveis! E ele não executará todas as páginas, a menos que você queira, além de funcionar bem com todos os principais navegadores.
Plugin WordPress Premium de Fundos Personalizados
Trazido a você por RightHere, um autor de elite da CodeCanyon, o plugin Custom Backgrounds oferece controle total sobre seus planos de fundo do WordPress. Em questão de minutos, você pode criar excelentes planos de fundo para postagens, páginas, tipos de postagem personalizados, taxonomias e arquivos do WordPress, entre outros modelos, e incrementar tudo com efeitos de paralaxe, temporizadores e o melhor que o jQuery tem a oferecer.
Você pode até definir fundos clicáveis
Fundos de vídeo e paralaxe para o construtor de páginas WPBakery
A rolagem de paralaxe parece estar em todos os lugares hoje em dia, e por um bom motivo: é um dos efeitos visuais mais legais do mercado e, quando bem executado, é visualmente impressionante. Isso fez com que um grande número de temas parallax do WordPress chegassem ao mercado – para aqueles que não estão familiarizados com o termo paralaxe, é quando as imagens de fundo rolam em uma velocidade diferente do primeiro plano, o que cria um efeito visual intrigante.
De um modo geral, a maioria dos usuários do WordPress confia em seu tema para rolagem de paralaxe. No entanto, se você quiser adicionar um efeito de paralaxe a um tema sem paralaxe, confira o Video & Parallax Backgrounds for WPBakery .
O plug-in suporta fundos de largura total e largura normal, com o efeito de paralaxe funcionando nas quatro direções. Você pode fazer upload de suas próprias imagens para usar como plano de fundo de imagem fixo ou simplesmente usar um plano de fundo de bloco de cor sólida. Você pode optar por ativar a rolagem suave para garantir o melhor desempenho e pode desativar a paralaxe para dispositivos móveis. A interface intuitiva facilita a configuração de tudo, e você pode especificar a direção e a velocidade do efeito de rolagem de paralaxe com apenas o clique de um botão.
Além de um efeito de paralaxe, o plugin também pode ser usado para adicionar um fundo de vídeo, com vídeos do YouTube ou Vimeo facilmente incorporados – basta adicionar o URL para incorporar. Essa é outra ótima maneira de criar um site atraente que os visitantes achem memorável.
Palavras finais
Se você se aprofundar no código ou usar plugins, adicionar diferentes planos de fundo às suas postagens ou páginas do WordPress pode contribuir imensamente para o reconhecimento da marca e o design visual do seu site. Como você altera o plano de fundo de suas postagens ou páginas do WordPress? Deixe-nos saber suas perguntas, sugestões e pensamentos através da seção de comentários abaixo.
