Toda a parte de configuração do WordPress no servidor, até colocar o site online, foi descrita nos capítulos anteriores. Neste capítulo, você verá um exemplo prático de personalização de um site usando WordPress.

Primeiros passos

Após realizar a instalação, WordPress exibirá o tema padrão com o post “Olá, mundo!” como página inicial. Vamos então começar a configurar nosso site tomando como base esse modelo.

Para este exemplo, iremos reconstruir uma página real para o site:
www.alfahelix.com.br

Figura 166. Página inicial de um site WordPress após ser colocado on-line.

(a) Post “Olá, mundo”, é o post padrão do WordPress. (B) Caixa de pesquisa do site. (C) Acesso ao painel de controle: interface de personalização e criação disponível apenas para usuários cadastrados. Fonte: próprio autor.

Acessando o painel de controle

Para acessar o painel de controle, você deve acessar o arquivo wp-login.php. Entretanto, você também pode fazer isso clicando no botão “Acessar”, disponível no menu “Meta” do rodapé. Ao clicar no item (C) da figura acima, você será direcionado a página de login. Apenas usuários com permissão de administração ou demais usuários cadastrados terão acesso, pois será necessário um login e uma senha (esses foram configurados durante a instalação do WordPress).

As versões mais recentes do WordPress estão trazendo cada vez mais funcionalidades para facilitar a personalização de seu site. Não é necessário saber escrever e estruturar um código em HTML ou qualquer outra linguagem de programação. Tudo fica por conta dos blocos dinâmicos, onde é possível fazer diversos tipos de inputs e formatações. Neste capítulo não iremos descrever os elementos do painel de controle do WordPress, pois isso já foi descrito nos capítulos anteriores. Vamos focar na personalização do site.

Figura 167. Painel Principal de gerenciamento do WordPress.

(A) Menu lateral. (B) Personalização: alterar o tema. (C) Adicionar informações profissionais ou pessoais, como uma biografia. (D) Configurar a página inicial. (E) Gerenciar os Widgets. (F) Gerenciar os menus. Fonte: próprio autor.

Aparência

Após logar no sistema com um usuário e senha de administrador, você será direcionado para o painel de controle. Vamos então alterar a aparência básica do nosso site. Clique no botão “aparência” e em seguida em “personalizar”. Você será levado para uma página com um menu lateral que exibe uma lista de opções para personalização de seu site.

Figura 168. Página de personalização do site.

(A) Tema atual do site (B) Menu com o acesso rápido as funções de personalização. Fonte: próprio autor.

Desse modo começaremos pela a escolha do tema. Lembrando que as opções de edição sempre ficarão na barra lateral esquerda. A versão 5.5 do WordPress já tem instalado por padrão algumas opções de tema. O tema atual da versão 5.5 é o Twenty Twenty (2020) que é um tema mais clássico e simples. Outro exemplo de tema que o WordPress pode apresentar é o Twenty Nineteen (2019), que tem um visual mais limpo com grandes blocos. Contudo, existem milhares de opções gratuitas de temas para você escolher e instalar. Para isso, basta apenas clicar em “Temas do WordPress.org”. Pode ser uma escolha difícil no começo, mas você pode explorar e escolher o que mais lhe agrada. Para seguir com nosso exemplo, vamos trabalhar com o tema Twenty Twenty. O objetivo aqui é demonstrar que é possível construir belo sites mesmo usando o tema mais simples do WordPress.

Figura 169. Escolha do tema do WordPress.

(A) Temas que já vem instalados por padrão (B) Biblioteca com dezenas de outras opções de tema para instalação e uso. Fonte: próprio autor.

Identidade do site

Agora precisamos aplicar uma identidade ao nosso site. Para isso, na opção “identidade do site”, vamos começar adicionando um texto no lugar do “Logo” (nas próximas seções, adicionaremos uma imagem). Em “Título do site” e “Descrição” vamos colocar os nomes “Alfahelix” e “Escola de computação”, respectivamente. Coloque uma frase que descreva e chame a atenção para a sua aplicação. Por fim, em “Ícone do site” podemos mudar o favicon do WordPress, isto é, a imagem que fica na parte superior barra do seu navegador.

Figura 170. Edição da identidade do site.

Fonte: próprio autor.

O próximo item é simples: selecionar a cor de fundo e cor primária do site. Podemos deixar os valores padrão ou clicar em “Personalizada” para escolher outras cores.

Figura 171. Escolha de cores.

Recomendamos sempre usar branco como cor de fundo. Fonte: próprio autor.

Dependendo do tema escolhido, haverá mais ou menos opções de personalização ao acessar “Opções de tema”. No caso do tema Twenty Twenty, é possível retirar a opção de busca ao desmarcar a caixa “Mostrar pesquisa no cabeçalho”.

Figura 172. Personalização de detalhes do tema.

(A) as opções de personalização (B) Ícone e opção de pesquisa. Fonte: próprio autor.

Ainda, temos a opção “Em páginas de arquivo, mostrar dos posts: Texto completo ou Resumo”, uma personalização para o conteúdo que será adicionado.

Caso queira usar o “Modelo de cobertura” para algumas páginas, podemos ativar a opção “Imagem de fundo fixa” (caso não adicione, o WordPress utiliza a imagem destacada do post). Também é possível adicionar filtros de sobreposição sobre as camadas e os textos.

Nesse tema, pode-se ainda adicionar uma imagem de fundo como uma marca d’água na página. Ao escolher a imagem, WordPress fornecerá mais opções, como o “predefinição, posição e tamanho da imagem”.

Nas próximas seções, voltaremos até essas configurações para adicionar uma imagem vetorial de logo.

Menus

Enfim, chegamos na parte da configuração dos “Menus”. Neste link, é feito apenas a configuração de aparência dos menus. É muito importante configurar corretamente os menus do site, pois através deles é possível acrescentar mais links e facilitar o acesso à informação para seu público-alvo. Dentro de “Menus”, a opção “primário” corresponde aos links de fácil acesso aos conteúdos e as informações que você deseja disponibilizar que estarão em outras páginas. Por exemplo: livros, cursos, postagens, contatos e etc. No nosso modelo, também temos o menu focado em redes sociais. Usando-os, podemos personalizar links e direcionar o público-alvo para suas redes sociais, aumentando o engajamento.

Figura 173. Opções dentro do menu para personalização do site.

(A) painel com os menus criados. (B) Menu primário. (C) Edição do link para a página inicial com o rótulo que será exibido. Fonte: próprio autor.

Menus podem ser configurados ainda no painel de controle, na seção própria para edição de menus localizada também na opção “aparência”.

Adicionando um logotipo vetorial

Anteriormente, iniciamos a configuração do logo do site. No entanto, usamos apenas um texto para descrevê-lo. Isso ocorreu porque o WordPress aceita apenas imagens em formatos específicos. Entretanto, queremos adicionar um logo em formato vetorial (SVG), que possui uma resolução muito melhor. Infelizmente, isso não é possível usando as configurações padrões do WordPress 5.5 (esperamos que nas próximas versões esse problema seja resolvido).

Até agora usamos todas as funcionalidades disponíveis na versão padrão do tema Twenty Twenty. Mas o WordPress não tem fronteiras e uma forma de chegar mais longe é através da adição de plugins. Existem milhares de plugins com milhares de funcionalidades. Aqui, vamos apresentar alguns exemplos que podemos usar para personalizar a interface do site.

Para tentar solucionar o problema da falta de suporte a imagens vetoriais, vamos adicionar um plugin denominado SVG Support. Esse plugin permite o input seguro de arquivos de gráficos vetoriais escaláveis (SVG) à biblioteca de mídia, permitindo usá-los como qualquer outra imagem. Sugerimos usar o formato SVG devido às vantagens de se usar vetoriais sem a restrição de tamanho e perda de qualidade. Assim, o site irá manter a qualidade das imagens independentemente do tamanho da página ou do dispositivo em que será visualizado, seja em navegadores de desktop, smartphone ou tablets.

Figura 174. Instalação do plugin SVG Support.

Permite a adição de imagens em svg sem problemas de segurança. Você pode instalá-lo usando a aba plugins do painel de controle. Fonte: próprio autor.

Após instalá-lo, você já estará apto a enviar imagens no formato SVG. Então vamos adicionar uma imagem vetorial como logo do site. Volte até as configurações de aparência e, em seguida, até a configuração da identidade do site.

Figura 175. Configuração da logo do site.

Clique em selecionar logo. Fonte: próprio autor.

Após enviar a imagem, você terá a opção de opção de recorte ou deixar no tamanho original. No caso de imagens vetoriais, pule o recorte.

Figura 176. Opção de recorte da imagem.

Fonte: próprio autor.

Ao adicionar uma imagem na biblioteca de mídia, várias informações poderão ser vistas, como: nome, data, tamanho, resolução em pixels e a opção de editar ou excluir o arquivo da biblioteca do WordPress.

Figura 177. Exemplo que foi adicionado à página exemplo.

Fonte: próprio autor.

Alterando cores

Agora que alteramos a logo e otimizamos a identidade da página, é recomendável voltar às demais configurações para poder harmonizar a visualização das cores do site. Certifique que a cor de fundo é branca e selecione uma “cor de fundo do cabeçalho e rodapé” que represente a identidade da marca. No fim, escolha uma “cor primária” que crie um contraste.

Figura 178. Configuração das cores do site.

Fonte: próprio autor.

CSS adicional

CSS é a sigla para Cascading Style Sheets ou folhas de estilo em cascata. Elas permitem adicionar configurações avançadas de estilo, como cores e espaçamentos. WordPress fornece a opção de personalização de “CSS adicional”. Essa opção é útil caso você tenha alguma experiência com código em CSS. Por exemplo, a seguir vamos demonstrar como adicionar um efeito dégradé para o cabeçalho onde está o título. Após terminar todas as alterações, clique no botão azul “Publicar”.

Figura 179. Configuração avançada de CSS.

Essa configuração é aplicado à âncora #site-header. Fonte: próprio autor.

Para aprender mais sobre CSS, visite: https://diegomariano.com/folhas-de-estilo-em-cascata-css/

Configurações avançadas de aparência do tema

O tema padrão do WordPress é bastante limitado quanto às configurações de aparência. Entretanto, uma das grandes vantagens do WordPress é a existência de plugins para múltiplos fins (como ressaltamos várias vezes). Um exemplo disso é o plugin Twentig, que foi desenvolvido exatamente para customização do tema padrão do WordPress.

Figura 180. Instalando o plugin Twentig.

Esse plugin é usado para expandir as configurações do tema TWENTY-TWNTY. Fonte: próprio autor.

Ao instalar esse plugin, novas opções estarão disponíveis na página de personalização do tema:

Figura 181. Novas configurações disponíveis para o tema.

Fonte: próprio autor.

Esse tema permite alterar as configurações de leiaute do cabeçalho (header layout), adicionando sombras (shadow) ou permitindo fixar o menu no topo enquanto lê a página (sticky header), por exemplo.

Figura 182. Aplicando configurações adicionais ao cabeçalho e ao menu.

Fonte: próprio autor.

Esse plugin também fornece uma série de opções para configurações de menu, permitindo por exemplo, a remoção de rótulos dos menus.

(A)	(B)

Figura 183. Removendo rótulos do menu.

(A) Configuração no painel de controle. (B) Como o menu pode ser visualizado sem os rótulos na interface. Fonte: próprio autor.

Criando a página inicial

Recomendamos que se crie uma página exclusivamente para servir como página inicial. Você pode até mesmo deixá-la sem título, uma vez que a página inicial servirá como forma de acesso para as outras páginas do site.

Vamos então configurar essa página. Na seção “páginas” do painel de controle, adicione uma nova página. Deixe o título em branco, pois neste caso ele não será necessário.

Figura 184. Título da página. Caso não altere os valores padrão, ele será exibido em branco.

Fonte: próprio autor.

Relembrando que âncoras são identificadores únicos (id) usados para descrever componentes de uma página. Elas podem ser acessadas apontando o link para:

#nome-da-âncora

Agora vamos adicionar alguns links apontando para seções internas desta página, ou seja, links que farão a navegação por âncoras HTML. Neste caso, queremos fazer uma página para exibir uma lista de cursos classificados em seis tipos. Por isso criaremos seis colunas na página e adicionaremos um link em cada uma dessas colunas. Observe a seguir como esses links poderiam ser implementados em uma página do WordPress:

Figura 185. Adicionando links em colunas.

Adicionou-se duas colunas com 50/50% de largura e, dentro de cada uma dessas, foram adicionados blocos de 3 colunas com 1/3 de largura para cada. Categorias: Web design, programação back-end, banco de dados, bioinformática, data science e programação front-end. Fonte: próprio autor.

A seguir, vamos adicionar o conteúdo da página, declarando cada um dos subtítulos referentes a seções e adicionando nomes para as âncoras HTML. Por exemplo, vamos criar um título de nível H2 denominado “Web design”. A seguir, nas configurações avançadas do título, altere o nome da âncora de HTML para “wd”, como na figura abaixo. Isso também será feito para os outros títulos (descritos na figura anterior).

Figura 186. Configurando âncoras HTML.

Fonte: próprio autor.

Observe na figura acima o trecho iniciado com [ufpw id= “1586742 … ”].
Esse trecho utiliza um shortcode para inserir conteúdo automaticamente coletado de cursos da plataforma Udemy através do plugin “UFWP – Online Learning Courses”. Não entraremos em detalhes quanto ao seu funcionamento. Entretanto, apenas saiba que esse código exibe uma lista de cursos de web design.

Agora retorne aos links criados e configure os endereços para as âncoras de HTML criadas anteriormente.

Figura 187. Criando links para âncoras HTML. Isso permite que o link aponte para uma parte da página indicada pela âncora.

Lembre-se que o endereço deve começar com #, seguido do nome aplicado. Fonte: próprio autor.

Agora, visualize a página. Ao clicar em cada um dos links, o navegador deve rolar a página até a posição indicada pela âncora.

Corrigindo problemas na estrutura com CSS

Ao visualizar a estrutura da página, nota-se que há uma barra superior que ocupa a região onde deveria ser inserido o título. Podemos remover esse problema alterando as configurações avançadas de CSS.

Figura 188. Removendo espaçamento desnecessário do modelo usando CSS.

Fonte: próprio autor.

Para isso, basta clicar em personalizar a aparência na barra superior (quando logado com um usuário administrador), navegar até “CSS adicional” e adicionar o seguinte código:

Figura 189. Visualização do modelo sem o espaçamento desnecessário.

Fonte: próprio autor.

Configurações usando CSS adicional podem ser mais complexas. Entretanto, elas permitem realizar mudanças avançadas nas páginas.

Seção: quem somos

Agora, vamos utilizar um bloco de mídia e texto para construir a seção “quem somos”, que apresenta informações sobre o site.

Figura 190. Adicionando mídia e texto.

Fonte: próprio autor.

Após inserir a imagem e o texto, alteramos o estilo para “overlap”. Isso permitirá que o texto sobreponha parte da imagem.

Figura 191. Adicionando sobreposição.

Fonte: próprio autor.

Além disso, configuramos a cor de fundo do texto para branco. Observe o resultado:

Figura 192. Visualização final da sobreposição do texto.

O fundo do texto foi configurado para branco. Fonte: próprio autor.

Definindo a página inicial

Vamos, por fim, configurar a página criada para ser a página inicial do site. Em “Configurações da página inicial” marcamos a opção “uma página estática” e na opção “página inicial” selecionamos a página criada. Observe que como não inserimos um título para a página, WordPress a nomeia com um número.

Figura 193. Alterando a página inicial.

#127 (sem título) refere-se à página criada (que não foi nomeada). Fonte: próprio autor.

Pronto! A página inicial já foi configurada.

Neste exemplo, apresentamos um estudo de caso real da construção de um site usando a plataforma WordPress. Ressaltamos que não foi possível apresentar aqui todas as etapas usadas para construção do site devido a limitação de espaço, mas o objetivo deste capítulo foi apresentar exemplos práticos de como proceder no desenvolvimento de websites com WordPress.

Para ver a versão completa do site, acesse: www.alfahelix.com.br

Conclusões

Aqui apresentamos uma breve introdução ao mundo do desenvolvimento de sites usando o sistema de gerenciamento de conteúdo WordPress.

WordPress é uma ferramenta fantástica que permite a construção de sites profissionais com interface amigável e sem a necessidade de dominar linguagens de programação. É claro que, com algum conhecimento em linguagens de marcação, folhas de estilo ou de programação front-end e back-end pode-se construir sites bem mais robustos. Entretanto, as funcionalidades disponibilizadas nativamente pelo WordPress, como plugins e temas, já proporcionam uma boa experiência no desenvolvimento de sites.

Caso tenha interesse em saber mais sobre programação web, recomendamos o livro:

MARIANO, DIEGO; de MELO-MINARDI, R. C. Introdução à Programação Web para Bioinformática: HTML, CSS, PHP & JavaScript. 1. ed. North Charleston, SC (EUA): CreateSpace, 2017. v. 3. ISBN: 978-1520895154; 403p.

Disponível gratuitamente em:

Introdução à Programação Web para Bioinformática

Referências bibliográficas

ABREU. Pingback e Trackback: o que são e como funcionam? Disponível em: <https://rockcontent.com/br/blog/pingback-trackback/>. Acesso em: 12 out. 2020.

GOURLEY, D. et al. HTTP: The Definitive Guide: The Definitive Guide. [s.l.] O’Reilly Media, 2002.

Hospedagem de Site Barata – Ranking das melhores (2020). Disponível em: <https://tudosobrehospedagemdesites.com.br/hospedagem-de-site-barata/>. Acesso em: 24 set. 2020.

MARIANO, D.; DE MELO-MINARDI, R. Introdução à Programação Web para Bioinformática: HTML, CSS, PHP and JavaScript. [s.l.] Independently Published, 2017.

MCCOLLIN, R. O Guia Completo para WordPress Widgets (O Que, Como e Código Snippets). Disponível em: <https://kinsta.com/pt/blog/wordpress-widgets/>. Acesso em: 11 out. 2020.

Usage Statistics and Market Share of PHP for Websites. Disponível em: <https://w3techs.com/technologies/details/pl-php>. Acesso em: 24 set. 2020.