Customização do WordPress

Vamos à segunda parte da nossa demonstração de site WordPress, que é a Customização. Na primeira parte, já havíamos escolhido um tema, o Radiate. Foi escolhido por ser simples, clean, e atendia aos requisitos.

Este é o Blog atualmente. Se vocês estão acompanhando, perceberam que não mudei praticamente nada, apenas incluí um artigo sobre Certificado SSL. E também alterei o favicon que é o ícone que aparece na aba do navegador, mas isso não foi através do WordPress.

Hoje queremos mudar os itens visuais:
• Logotipo,
• Estilo do Menu
• Cores de fundo
• Imagem do Cabeçalho

Logotipo

Acabei de descobrir que o tema escolhido tem uma parte de customização que é paga. Porém pode ser feita de outra forma, através de programação. Pode ser um problema se você não é familiarizado com Temas de WP, pois a alteração requer algum conhecimento de HTML e da estrutura de WordPress.

No Painel de Controle, escolha Aparência > Editor de temas.

Aparecerá um menu de arquivos do Tema na direita. Escolha o Cabeçalho do tema (header.php). Este é um arquivo padrão para todos os temas, sempre existe um header.php

Localize no código a tag <header>. Esta tag é padrão de HTML, todos os sites mais recentes tem essa tag, serve para indicar onde será o cabeçalho do site que inclui Logotipo, Menu e às vezes um banner.

Neste tema, perceba que há uma div com a classe “site-branding”, que indica que o nome do site / logotipo é definido aqui.

Todo esse código dentro da div “site-branding” deve sumir

Vou substituir esse código PHP por uma tag simples:

<a href="/default.asp"><img src="/images/logo.png"></a>

Então é só salvar e ver como ficou:

Parte do logo ficou “invisível” pois a imagem foi projetada para fundo escuro. Então vamos resolver logo esse fundo.

Cores de Fundo e Estilo do Menu

As cores do site são fáceis de se mudar, em Aparência > Personalizar > Cores. Só que, mais uma vez, o tema escolhido não permite customizar tudo na versão free, então vamos ter que editar manualmente o CSS. Após salvar as cores básicas, vamos para Aparência > Editor de Temas e dessa vez vamos escolher o arquivo style.css

Aqui devemos procurar a classe que define a cor de fundo do menu. Uma dica: para achar a classe mais facilmente, utilize o Chrome, clique com o botão direito no menu e selecione “Inspecionar”. Vai abrir o debug daquele elemento, mostrando a classe. No nosso exemplo, a classe a ser alterada é a header-wrap. Voltando ao editor de temas, é só procurar essa classe e alterar a cor de fundo (background-color).

Aproveitando que estamos em estilos, também vamos alterar a cor da fonte do menu, pois como eu vou deixar o fundo preto, a fonte deve ser uma cor clara. Usando o mesmo método de inspecionar, encontrei a classe do botão “Home” e alterei. Depois de salvar, o resultado foi esse:

O Logotipo da Nishiweb ficou bom no contraste com o preto

Imagem do Cabeçalho

A imagem padrão do tema, essa bela foto de NYC, combinou com o nosso site. Porém como prometido, vamos trocar a imagem. Essa troca fica em Aparência > Personalizar > Mídia do cabeçalho.

O tema escolhido permite utilizar mais de uma imagem no cabeçalho, porém nos testes que fizemos não funcionou. Posteriormente vou mostrar como se inclui um banner rotativo no lugar de uma imagem fixa. É recomendado utilizar uma imagem de 1500 x 450 pixels (jpeg ou png), mas para efeitos de teste, usei uma imagem pequena que ficou estourada.

Por ora, o resultado é este:

Adicionalmente, troquei a imagem de fundo da página, para ficar com uma identidade parecida com o site da Nishiweb. Fica em Aparência > Imagem de fundo . Selecionei a opção “preencher toda a tela” para que cubra todo o fundo sem cortes.

Espero que tenha ajudado! Em breve mais customizações de WordPress