Web design em wordpress livro didático

Prévia do material em texto

Livro Didático Digital
Web Design em 
Wordpress
Diretor Executivo 
DAVID LIRA STEPHEN BARROS
Gerente Editorial 
ALESSANDRA VANESSA FERREIRA DOS SANTOS
Projeto Gráfico 
TIAGO DA ROCHA
Autoria 
BRUNA RIBEIRO RODRIGUES 
JESSICA LAISA DIAS DA SILVA
AUTORIA
Bruna Ribeiro Rodrigues 
Possuo graduação em Ciência da Computação pela Universidade 
Federal da Paraíba (UFPB) e, atualmente, atuo como professora de lógica 
de programação e como professora conteudista.
Jessica Laisa Dias da Silva 
Possuo graduação em Sistema da Informação pela Universidade 
de Ciências Sociais Aplicadas (Unifacisa) e sou mestre em Sistema e 
Computação pela Universidade Federal de Rio Grande do Norte (UFRN). 
Atualmente, sou doutoranda em Sistema e Computação pela UFRN e 
professora conteudista, elaborando cadernos. 
Desse modo, fomos convidadas pela Editora Telesapiens a integrar 
seu elenco de autores independentes. Estamos muito felizes em poder 
ajudar você nesta fase de muito estudo e trabalho. Conte conosco!
ICONOGRÁFICOS
Olá. Esses ícones irão aparecer em sua trilha de aprendizagem toda vez 
que:
OBJETIVO:
para o início do 
desenvolvimento 
de uma nova 
competência;
DEFINIÇÃO:
houver necessidade 
de apresentar um 
novo conceito;
NOTA:
quando necessárias 
observações ou 
complementações 
para o seu 
conhecimento;
IMPORTANTE:
as observações 
escritas tiveram que 
ser priorizadas para 
você;
EXPLICANDO 
MELHOR: 
algo precisa ser 
melhor explicado ou 
detalhado;
VOCÊ SABIA?
curiosidades e 
indagações lúdicas 
sobre o tema em 
estudo, se forem 
necessárias;
SAIBA MAIS: 
textos, referências 
bibliográficas 
e links para 
aprofundamento do 
seu conhecimento;
REFLITA:
se houver a 
necessidade de 
chamar a atenção 
sobre algo a ser 
refletido ou discutido;
ACESSE: 
se for preciso acessar 
um ou mais sites 
para fazer download, 
assistir vídeos, ler 
textos, ouvir podcast;
RESUMINDO:
quando for preciso 
fazer um resumo 
acumulativo das 
últimas abordagens;
ATIVIDADES: 
quando alguma 
atividade de 
autoaprendizagem 
for aplicada;
TESTANDO:
quando uma 
competência for 
concluída e questões 
forem explicadas;
SUMÁRIO
Exportando um Tema ................................................................................ 12
Escolhendo um Tema .................................................................................................................. 13
Temas Gratuitos ............................................................................................................. 14
Temas Premium ............................................................................................................ 16
Adicionando um Tema ................................................................................................................. 18
Criando Partes do Website......................................................................22
Customizer ..........................................................................................................................................22
Criando Cabeçalho e Rodapé .............................................................................24
Adicionando Páginas .................................................................................................26
Adicionando Menus....................................................................................................27
Adicionando Funções ...............................................................................................28
Construtores de Páginas ............................................................................................................29
Edição de Código ........................................................................................................................... 30
Personalizando o Website com Categorias ..................................... 32
Taxonomias ..........................................................................................................................................32
Categorias .............................................................................................................................................34
Criando Categorias .....................................................................................................35
Tags .......................................................................................................................................................... 38
Adicionando Tags ........................................................................................................ 38
Ajustar a Navegação do Website ......................................................... 41
Tipos de Navegação .....................................................................................................................42
Navegação Global .......................................................................................................43
Navegação Hierárquica ...........................................................................................44
Navegação Local ..........................................................................................................45
Organizando a Estrutura de Navegação ........................................................................45
Ampliando os Menus do Website ...................................................................................... 46
Utilizando Plugins ........................................................................................................47
9
UNIDADE
03
Web Design em Wordpress
10
INTRODUÇÃO
Após obtermos os conhecimentos iniciais para quem deseja entrar 
no mundo de construção de websites utilizando a plataforma WordPress, 
nesta unidade veremos como utilizar alguns dos recursos oferecidos pela 
plataforma.
Estudaremos sobre os temas e como eles formam a base de um 
website e conheceremos recursos para organizar e estruturar as diferentes 
partes de um site construído em WordPress.
Espero que você aprecie os estudos. Vamos começar!
Web Design em Wordpress
11
OBJETIVOS
Olá. Seja muito bem-vindo à Unidade III. Nosso objetivo é auxiliar 
você no desenvolvimento das seguintes competências profissionais até o 
término desta etapa de estudos:
1. Exportar um tema para o WordPress.
2. Criar home, header, functions, menu, footer e páginas em um 
website WordPress.
3. Criar e personalizar categorias em websites WordPress.
4. Ajustar a navegação em um website WordPress.
Preparado para adquirir conhecimento sobre um assunto fascinante 
e inovador como esse? Vamos lá!
Web Design em Wordpress
12
Exportando um Tema
OBJETIVO:
O objetivo deste capítulo é aprofundar os conhecimentos 
sobre os temas WordPress. Veremos como escolher o 
tema ideal para um site e os tipos de temas disponíveis. 
Concluiremos pontuando como obter temas e como 
instalá-los para que possam ser utilizados na construção 
de um website.
Para iniciar nossos estudos, vamos definir o que é um tema 
WordPress.
DEFINIÇÃO:
Os temas são os arquivos que controlam a forma como 
seu site WordPress será exibido. Esses arquivos buscam 
informações do banco de dados do WordPress e geram o 
código HTML que é interpretado pelo navegador (MACIEL, 
2014).
Figura 1 – Templates
Fonte: Pixabay. 
Web Design em Wordpress
13
Logo, de forma simplificada, um template é o que define a forma 
como os elementos do site estão estruturados. Porém, antes de exportar 
um tema para seu website, é preciso primeiramente escolher um. Portanto, 
na próxima seção, veremos como realizar essa escolha. Vamos lá!
Escolhendo um Tema
Nós vimos na primeira unidade que existem diferentes tipos de 
sites. Levando-se em conta que há uma variedade imensa de temas 
disponíveis, é importante saber escolher que tema se encaixa melhor de 
acordo com o nicho do site que será criado. 
Alguns critérios podem ser avaliados para escolher o melhor tema 
para o seu projeto. Fetter (2015) destaca:
 • Escolha um tema coma “cara” do seu projeto.
 • Avalie o nível de customização do tema.
 • Análise se atende aos requisitos de SEO.
 • Escolha um tema responsivo.
 • Certifique-se de que o template está atualizado.
Com base nas informações anteriores, além de escolher o 
tema que mais se adeque ao seu projeto, é preciso avaliar se ele 
permite customização. Temas customizáveis  permitem o uso de 
recursos extras, como fácil integração com as  redes sociais, criação 
de formulários e galerias de fotos, entre outras coisas (FETTER, 2015).
Outro ponto a ser levado em consideração é se o template adequa-
se aos requisitos de Search Engine Optimization (SEO), que otimiza o 
website para os resultados de busca. Falaremos sobre SEO com mais 
detalhes na próxima unidade. 
Por fim, com a expansão do uso de dispositivos móveis, como 
smartphones e tablets, é fundamental que o tema escolhido seja 
responsivo. Isso significa que o website se adequa automaticamente 
dependendo do dispositivo em que está sendo visualizado.
Web Design em Wordpress
14
IMPORTANTE:
Fetter (2015) destaca que responsividade passou a ser um 
dos fatores de ranqueamento de sites para o Google, que, 
por sua vez, privilegia sites responsivos nas buscas feitas 
via dispositivos móveis. Portanto você tem mais chances de 
que o seu website apareça nos resultados de busca se ele 
for responsivo.
E, claro, é importante que o tema escolhido esteja atualizado. Fetter 
(2015) diz que é necessário se certificar de que ele foi atualizado no último 
ano ou recentemente e verificar se não existem problemas de segurança 
anteriores.
Os temas podem ser gratuitos, premium ou oferecerem as duas 
opções. Alguns temas premium permitem que seja feito um teste 
grátis de alguns dias antes de adquiri-los oficialmente. Os templates 
gratuitos podem ser encontrados na própria biblioteca do WordPress ou 
em lojas externas, enquanto os pagos podem ser adquiridos em sites 
especializados.
Temas Gratuitos
A biblioteca do WordPress oferece centenas de alternativas de 
temas para utilização. Kinsta (2020) salienta as vantagens de usar-se um 
tema gratuito:
 • Não tem que pagar pelo tema.
 • Os temas gratuitos na biblioteca WordPress estão sujeitos a rígidas 
diretrizes de qualidade.
 • É possível encontrar excelente suporte ao usuário para temas mais 
populares.
Porém Kinsta (2020) também lista algumas desvantagens, como o 
fato de serem utilizados por muitas pessoas e de o desenvolvedor do 
tema não ser responsável por fornecer nenhum tipo de ajuda ou suporte 
aos usuários do template.
Web Design em Wordpress
15
NOTA:
Você pode perceber a relevância de escolher um tema que 
permita customização, visto que você pode personalizá-lo, 
diferenciando, assim, o seu site dos outros que também 
utilizam aquele tema como base.
Na loja de temas, você pode buscar temas usando o filtro 
de características para encontrar o tema mais adequado para suas 
necessidades. Esse filtro é dividido em três categorias que contêm 
diversas opções para sua escolha.
IMPORTANTE:
Você consegue perceber a importância de um briefing? Já 
vimos que o briefing é utilizado para colher informações a 
respeito do website. Com ele em mãos, é muito mais fácil 
saber quais são as características que devemos utilizar no 
filtro para buscar o tema ideal para seu site.
A primeira categoria, denominada assunto, diz respeito ao conteúdo 
sobre o qual o site irá tratar. Se a intenção é publicar um site de um 
restaurante, é possível aplicar o filtro “comida e bebida”. Por outro lado, 
se o website for uma loja para comercialização de produtos online, basta 
utilizar o filtro “e-commerce” que aparecerão temas para esse perfil.
A segunda categoria contém opções de características que podem 
ser desejadas no website. Caso o desejo seja utilizar um tema com 
várias opções de personalização, pode-se escolher as opções de fundo, 
cabeçalho e logo personalizadas. Também é possível escolher temas 
que disponibilizam posts fixos e imagens de destaque no cabeçalho, por 
exemplo.
Por fim, na terceira categoria, encontram-se alternativas para o 
esqueleto do website. Explicando melhor, existem diferentes opções de 
layout que podem ser aplicadas ao site.
Web Design em Wordpress
16
Você se lembra que já falamos sobre a estrutura de um site? Vimos 
um layout padrão, formado pelo corpo, cabeçalho, rodapé e barra lateral 
à direita.
Logo, nessa categoria se pode buscar temas que ofereçam outras 
opções para reajustar esses elementos. O corpo do website pode ser 
dividido em duas ou três colunas, e a barra lateral pode ser colocada à 
esquerda da página, por exemplo. No quadro 1, veja um resumo dos filtros 
que podem ser aplicados na busca por um tema.
Quadro 1 – Filtro de características
Assunto Caraterísticas Layout
Blog, e-commerce, 
educação, comidas 
e bebidas, notícias, 
entretenimento, 
feriados, fotografia 
e portifólio.
Suporte à acessibilidade, 
estilo do editor, fundos 
e logo personalizados, 
imagens de destaque, 
widgets do rodapé, modelo 
largura total, formatos de 
post, post fixo e opções do 
tema.
Modelo de 
grade; uma, 
duas, três ou 
quatro colunas; 
barra lateral à 
esquerda ou à 
direita, blocos 
amplos.
Fonte: Elaborado pelas autoras com base em WordPress (2022).
Perceba que a utilização destes filtros permite direcionar a 
escolha do template, pois disponibiliza opções que se adequam as suas 
necessidades. Logo, é uma boa ferramenta para simplificar e otimizar as 
buscas de temas para os websites.
Temas Premium
Os temas pagos são alternativas aos temas gratuitos para quem 
deseja ampliar o leque de opções. Entre as vantagens de comprar um tema, 
estão a maior disponibilidade de recursos e ferramentas de customização 
e o suporte que é oferecido pelos desenvolvedores (KINSTA, 2020).
Existem vários sites especializados em comercialização de temas 
premium para WordPress que disponibilizam templates com uma extensa 
variedade de recursos. Entretanto Kinsta (2020) explana que muitos temas 
têm características personalizadas ou incluem plugins que podem não 
Web Design em Wordpress
17
estar disponíveis se você mudar de tema. Isso pode ser um contratempo 
no futuro, pois você pode acabar perdendo características importantes 
do site.
Um outro ponto levantado por Kinsta (2020) é que você pode 
acabar se deparando com um mau provedor de temas, visto que há 
menos supervisão em relação aos desenvolvedores premium. Alguns dos 
principais sites que comercializam temas premium e suas características 
podem ser vistas no quadro a seguir:
Quadro 2 – Sites de temas premium
Sites Características
ThemeForest
Alta qualidade dos temas e do 
suporte.
Elegant Themes
Acesso anual ou vitalício aos temas e 
às funcionalidades.
Colorlib
Levantamento dos melhores modelos 
de tema para segmentos específicos.
Organic Themes
Temas mais leves, o que permite 
tempos de carregamento mais 
rápidos.
AppThemes
Fornece várias soluções entre temas 
e plugins.
Template Monster 
Possui mais de 26 mil templates para 
diferentes segmentos.
Fonte: Melhor Hospedagem de Sites (2020).
SAIBA MAIS:
Você pode conhecer mais sobre as lojas de temas premium 
acessando “Temas WordPress Premium”, disponível aqui. 
Você também conhecerá os temas pagos mais populares 
do mercado atualmente. Acesse!
Web Design em Wordpress
https://www.melhorhospedagemdesites.com/dicas-e-ferramentas/temas-wordpress-premium/
18
Adicionando um Tema
Na seção anterior, vimos questões a serem levadas em consideração 
na escolha de um tema e descobrimos os meios disponíveis para adquiri-
lo. Agora, iremos aprender como exportar um tema e utilizá-lo na sua 
página.
IMPORTANTE:
Você já deve ter o WordPress instalado e configurado 
para acessar o painel administrativo do seu site. Nós já 
aprendemos como instalar um website em localhost na 
unidade anterior.
Para acessar o painel de administração, você deve abrir o navegador 
e acessar o endereço http://localhost/nomedosite/wp-admin/,cujo 
“nomedosite” é o nome escolhido por você na criação do site em localhost. 
Com a página aberta, será necessário fazer o login com seus dados de 
usuário para ter acesso ao painel.
Para acessar a biblioteca de temas, deve-se escolher a opção 
“Aparência” e, depois, “Temas”, e a biblioteca será exibida conforme a 
figura 1.
Se é a primeira vez que a biblioteca é acessada, estão disponíveis 
para uso apenas os temas padrões que já vêm no WordPress: Twenty 
Twenty, Twenty Nineteen e Twenty Seventeen. Esses modelos já estão 
totalmente prontos para utilização.
Web Design em Wordpress
http://localhost/nomedosite/wp-admin/
19
Figura 2 – Biblioteca de temas
Fonte: WordPress (2022).
NOTA:
Passe o mouse em cima de qualquer um dos temas e 
algumas opções estarão disponíveis, como as informações 
adicionais a respeito do tema. Na opção “ver ao vivo”, 
você pode visualizar como ficará o site se aquele tema for 
escolhido e, caso deseje utilizá-lo, basta clicar em “ativar”.
Contudo, se o objetivo é adicionar um novo tema, deve-se utilizar a 
opção “Adicionar novo”. Ao clicar nessa alternativa, uma nova página será 
aberta e conterá as seguintes abas:
 • Destaques – mostra temas em destaque na Plataforma.
 • Populares – exibe os temas mais populares.
 • Mais recentes – mostra os temas que foram adicionados 
recentemente à biblioteca.
 • Favoritos – exibe os temas marcados como favoritos para que 
possam ser encontrados mais facilmente depois.
Web Design em Wordpress
20
 • Filtro de características – como já falado anteriormente, dispõe de 
filtros específicos para pesquisa de temas.
Além dessas opções, também é possível buscar por um tema por 
meio do seu nome, utilizando a caixa de pesquisa.
EXEMPLO: 
Se você fizer uma busca pelo tema denominado “Astra” na caixa de 
pesquisas, aparecerão dois temas gratuitos, Astra e Astral. Basta escolher 
qual você está buscando.
Antes de instalar um tema específico, para obter informações 
sobre ele, basta clicar em cima do modelo para abrir uma página de 
detalhes e visualização. Essa página oferece informações sobre o tema 
disponibilizadas pelo desenvolvedor e o exibe de forma simplificada. 
Após escolher o tema, é preciso obtê-lo. Se o tema será adicionado 
a partir da própria biblioteca do WordPress, basta clicar em instalar. Após 
instalado, o tema estará pronto para utilização e disponível juntamente 
aos outros temas na biblioteca.
NOTA:
Instalar um tema não significa que ele já será utilizado 
automaticamente pelo seu website. Para isso, você deve 
encontrar o tema na sua biblioteca e escolher a opção 
ativar. Pronto, o modelo será aplicado no site.
Até aqui, vimos como adicionar um template da biblioteca que 
se encontra dentro da plataforma WordPress. Contudo já foi citado 
anteriormente que é possível adquirir temas, gratuitos ou premium, de 
fontes externas. Esses temas vêm compactados no formato zip. Souza 
(2020) detalha os passos para realizar a instalação a partir de um arquivo 
externo:
PASSO A PASSO: 
Siga as seguintes etapas:
1. No menu do wp-admin, clique em “Aparência”.
Web Design em Wordpress
21
2. Na sequência, clique em “Temas”.
3. Após, clique em “Adicionar novo”.
4. Clique em “Enviar tema”.
5. Clique em “escolher arquivo” para fazer o upload do arquivo que 
deverá já estar salvo no seu computador.
6. Após enviá-lo, clique em “instalar agora”.
Após concluir a instalação, o tema estará disponível na sua 
biblioteca. Observe que a forma de adicionar um modelo a partir de um 
arquivo zip é bem similar a adicioná-lo a partir do próprio WordPress. De 
ambas as formas, o processo de instalação é simples e rápido. 
RESUMINDO:
Nesta seção, vimos questões a serem levadas em 
consideração na escolha de um tema, como o nível de 
personalização, se está atualizado, se possui um bom 
suporte e se o modelo é premium ou gratuito. Também 
descobrimos os meios disponíveis para adquirir um tema 
e como instalá-los, seja por meio da plataforma WordPress 
ou de fontes de externas.
Web Design em Wordpress
22
Criando Partes do Website
OBJETIVO:
No capítulo anterior, vimos como obter e adicionar um 
tema ao website, porém não mencionamos como utilizá-lo 
de fato, nem como personalizá-lo para atender as nossas 
necessidades. Portanto iremos aprender a customizar um 
tema e a criar as partes do website em cima do modelo 
escolhido..
Ao optar por um tema, é possível utilizá-lo da forma que ele está ou 
customizá-lo de acordo com suas preferências. Existem alguns métodos 
que podem ser utilizados para a tarefa de customizar um template, 
listados por Maciel (2014):
 • Usar o personalizador nativo do WordPress. 
 • Personalizar por meio do painel de opções do próprio tema, caso 
o tema ofereça um.
 • Criar sua própria personalização utilizando construtores de temas.
 • Editar diretamente o código do tema.
Customizer 
Para utilizar o personalizador do WordPress, o Customizer, é 
preciso acessálo no painel de controle, indo em “Aparência” e, depois, 
“Personalizar”. Maciel (2014) destaca que ele pode ser usado para boa 
parte dos temas, especialmente os gratuitos.
Ao entrar no personalizador, será mostrado o esqueleto do website 
de acordo com o tema selecionado. Como já mencionado anteriormente, 
esse esqueleto é formado pelo cabeçalho, corpo, rodapé e pela barra 
lateral do site. Você pode editar cada um desses elementos direto no 
personalizador.
Web Design em Wordpress
23
EXEMPLO: 
Caso você esteja utilizando o tema Twenty Seventeen, você irá se 
deparar com algo assim:
Figura 3 – Tema Twenty Seventeen
Fonte: WordPress (2022).
Além de exibir a estrutura do site, o customizer exibe diversas 
opções que dependem de qual tema WordPress esteja ativado. Usando 
o tema Astra, já citado anteriormente, como referência, teremos as 
seguintes opções (MACIEL, 2014):
 • Botão para salvar as alterações.
 • Opção para alterar o tema WordPress atual.
 • Opções extras para a versão paga do Astra.
 • Menu de opções de personalização.
 • Opção de esconder os controles, ou seja, o menu de personalização, 
para termos uma visualização melhor.
 • Controles de responsividade que permitem ter uma visualização 
por diferentes dispositivos.
Web Design em Wordpress
24
 • Personalização da identidade/logo do site.
 • Opções para editar widgets.
Perceba que, por meio do personalizador, é possível criar toda a 
estrutura do website.
Criando Cabeçalho e Rodapé
Vamos dar forma ao website configurando o seu cabeçalho e 
rodapé utilizando o personalizador do WordPress. Para isso, é necessário 
escolher e ativar um tema de sua preferência na biblioteca de temas. Com 
isso feito, basta acessar no painel Aparência>Personalizar.
NOTA:
Observe que você pode alterar o tema ativo diretamente no 
customizer, pois ele oferece essa alternativa. 
A primeira coisa que o website precisa é de uma identidade. Portanto, 
no menu de personalização, devemos escolher a opção “Identidade do 
Site”. Essa opção pode estar diretamente no menu ou estar dentro da 
opção cabeçalho. Na identidade do site, serão definidos:
1. Logo do site.
2. Título do site. 
3. Descrição do site.
4. Ícone do site.
Algumas opções extras podem estar disponíveis dependendo 
do template, como inserir uma logo diferente para dispositivos móveis. 
O ícone do site é aquele símbolo que aparece ao lado do título na guia 
do navegador. As informações inseridas aqui é que serão exibidas no 
cabeçalho do site.
Web Design em Wordpress
25
Após finalizar a identidade, podemos ir para a configuração do 
cabeçalho. Essa opção pode estar no menu de personalização como 
cabeçalho ou header. No cabeçalho, podemos definir várias coisas, como:
1. Layout – logo e título à esquerda, centralizado ou à direita.
2. Largura – se o cabeçalho deve ocupar toda a largura da página 
ou não.
3. Borda – para colocar borda ao redor do cabeçalho.
Além disso, o cabeçalho de um website costuma conter o menu de 
navegaçãoprincipal do site (TADEU, 2018), mas falaremos sobre menus 
mais adiante. Também é possível inserir imagens de destaque no header 
de um site.
IMPORTANTE:
Apesar de parecer algo trivial, um bom cabeçalho faz total 
diferença em um website, pois é a primeira coisa a ser vista 
por um usuário ao acessá-lo. Você deve usar o header 
como ponte para a imagem que se deseja passar sobre o 
seu website aos visitantes.
Após finalizar as configurações do cabeçalho, poderemos seguir 
para o rodapé. O footer é utilizado para inserir textos de expediente, breves 
informações institucionais ou o perfil do dono do site, mas também pode 
conter widgets e menu de navegação (TADEU, 2018). 
Um rodapé básico que contenha apenas informações poderia 
conter o seguinte texto “Copyright © 2020 Meu Site | Criado por Nome do 
Autor”. Porém o footer pode ser dividido em mais de uma seção em que 
pode ser adicionado um menu semelhante ao exibido no cabeçalho. 
Web Design em Wordpress
26
Adicionando Páginas
Com o cabeçalho e o rodapé criados e configurados, podemos 
começar a adicionar páginas ao website. 
DEFINIÇÃO:
Página é um tipo de publicação feita no WordPress quando 
se quer publicar conteúdo dentro de um site, porém fora da 
linha do tempo dos posts (TADEU, 2018).
Para adicionar páginas ao site, é necessário abrir o painel 
administrativo e acessar a opção “Páginas”. Nessa tela, aparecerão todas 
as páginas existentes no site para que você possa editá-las ou excluí-las, 
se necessário. É por aqui que novas páginas para o site podem ser criadas. 
Alguns exemplos de páginas que o seu site pode conter são: Sobre mim, 
Contato, Home, Blog, entre outras.
Um tipo de página muito comum é a página inicial ou Home, que, 
como o próprio nome diz, é a página de entrada do website. A Home pode 
ser apenas uma página que exibe suas postagens recentes, ou ainda 
uma página estática com o conteúdo que desejar. Para criar uma página 
estática para o site, pode-se seguir os passos a seguir:
PASSO A PASSO: 
Abra o painel de administração.
1. Clique em “Aparência” e depois “Personalizar”.
2. Clique na opção “Configurações de Página Inicial”.
3. Escolha a opção que diz “Sua página inicial exibe uma página 
estática”.
4. Escolha qual será a página inicial.
5. Escolha qual será a página de posts.
6. Salve as configurações.
Web Design em Wordpress
27
Note que, para definir uma página estática, ela já precisa existir 
mesmo que ainda não possua nenhum conteúdo. Também é necessário 
designar uma outra página onde ficarão as postagens do seu site.
Conforme Tadeu (2008), uma página terá um título, um conteúdo, 
uma URL única e não terá uma página anterior e uma posterior. Todavia 
o site pode possuir uma estrutura de páginas e subpáginas. Por padrão, 
toda página criada não tem ascendente, mas podemos transformá-la 
numa subpágina da forma a seguir (LOPES, 2020):
PASSO A PASSO: 
Abra o painel administrativo de “Páginas”.
1. Adicione uma nova página ou selecione a página que deseja 
transformar em filha e clique em “editar”.
2. No menu do lado direito, clique em “Atributos da Página”.
3. Na opção página ascendente, aparecerá uma lista com todas as 
páginas existentes do site.
4. Escolha qual página se tornará superior à página que você está 
editando.
5. Salve as alterações.
Esse procedimento pode ser repetido toda vez que for necessário 
criar páginas filhas para as páginas do seu site. Podemos questionar, 
então, como acessar essas páginas e subpáginas dentro do website, para 
isto é que utilizamos os menus de navegação.
Adicionando Menus
Os menus são utilizados para realizar a navegação pelo website. 
Com eles, pode-se criar um módulo de navegação como desejar, 
mesclando links para páginas, categorias ou qualquer outro item no menu 
(TADEU, 2008).
Os menus podem ser criados no painel administrativo em 
“Aparências > Menus”. Ao acessar, será possível criar, editar e gerenciar 
Web Design em Wordpress
28
menus. Para criar um menu, basta escolher a opção “Criar novo menu”, 
escolher um nome para ele e depois clicar em “criar menu”. 
Após o menu ser criado, você pode definir que itens aparecerão 
nele. É possível colocar posts, páginas, links personalizados e categorias. 
Por fim, é necessário configurar em qual parte do seu site o menu será 
exibido.
EXEMPLO: 
O menu que será exibido no cabeçalho pode ser construído criando 
um menu e inserindo as partes que estarão nele, como Home, Sobre mim, 
Posts, entre outros. Para que ele seja exibido no header, na configuração, 
deve-se marcar a opção de exibição “Menu Principal”. Com isso, o menu 
já é exibido no site. Você também pode exibir o mesmo menu ou um 
diferente no rodapé, marcando a opção “Menu do rodapé”.
Observe que inserir o mesmo menu no cabeçalho e rodapé pode 
ser útil, porque o usuário pode estar no final da página e, assim, não 
precisará subir para acessar outras áreas do site.
Adicionando Funções
DEFINIÇÃO:
As funções são códigos PHP que executam certas tarefas 
em um website, ajudando na automatização da sua 
aplicação (BRASIL, 2019).
Apesar da definição anterior, não é necessário entender de PHP 
para adicionar funcionalidades ao seu site, isso pode ser feito por meio da 
utilização de plugins. De acordo com Brasil (2019), utilizar um plugin para 
esses casos facilita o gerenciamento e não compromete a estrutura de 
arquivos do seu site.
Os plugins podem ser gratuitos ou pagos e podem ser encontrados 
em fontes externas ou no próprio diretório do WordPress no painel 
administrativo. O diretório de plugins é similar à biblioteca de temas e 
fornece opções para pesquisar e adicionar novos plugins. 
Web Design em Wordpress
29
Longen (2019) destaca alguns plugins essenciais para um website:
 • Yoast SEO – utilizado para otimizar seus conteúdos para os 
motores de busca.
 • Contact Form 7 – com ele, é possível criar um formulário de 
contato.
 • Askimet – fornece filtros para proteger o site de spam e comentários 
indesejados.
Para adicionar um plugin, o procedimento é similar ao de adicionar 
um tema, pois basta instalá-lo direto da biblioteca ou utilizando um 
arquivo zip. Apesar de existir diversos plugins para adicionar funções ao 
site, Longen (2019) frisa que o desempenho dele pode ficar comprometido 
em função da quantidade de funcionalidades adicionadas. Por isso, é de 
bom tom fazer um estudo dos plugins que são essenciais e aqueles que 
podem ser dispensados na construção de um website.
Construtores de Páginas
Na seção anterior, vimos como criar a estrutura do site utilizando o 
personalizador nativo do WordPress. Contudo outra forma de fazer isso é 
adicionando um plugin construtor de páginas, os Page Builders. Maciel 
(2019) enfatiza que eles permitem criar facilmente suas páginas e facilitam 
a personalização de sites, mas que alguns pontos devem ser levados em 
consideração:
 • Compatibilidade – é preciso verificar se o construtor é compatível 
com o tema que será utilizado.
 • Recursos – o plugin tem que oferecer recursos que atendam as 
suas necessidades.
 • Responsividade – o construtor deve trabalhar bem com dispositivos 
móveis.
 • SEO – deve seguir os requisitos de SEO para mecanismos de 
busca.
Web Design em Wordpress
30
O WordPress contém diversos plugins construtores de páginas, 
vejamos no quadro 3 alguns dos mais populares.
Quadro 3 – Construtores de páginas
Page Builder Diferencial Gratuidade
Elementor
Altamente responsivo, 
edição simultânea de 
widgets.
Versão gratuita e 
premium.
SiteOrigin
Possui dois editores de 
página.
Versão gratuita e 
premium.
Beaver Builder
Pode ser utilizado em 
sites ilimitados na versão 
premium.
Versão gratuita e 
premium.
Live Composer
Muitos recursos na 
versão gratuita.
Versão gratuita e 
premium.
Fonte: Elaborado pelas autoras com base em Marques (2019).
A forma de criar um site utilizando construtores é similar ao 
personalizador do WordPress, porém, de acordo comMarques (2019), 
enquanto com o customizer é comum precisar adicionar plugins para 
conseguir o resultado desejado, utilizando construtores isso não é 
necessário, pois eles já possuem diversos recursos inclusos.
Edição de Código
Como mencionado no início deste capítulo, uma das formas de 
personalizar um template é editando diretamente seu código. Isso pode 
ser feito por meio da edição dos arquivos do tema. Os três tipos de 
arquivos que podem definir o visual e as funcionalidades do tema são 
Style.css, Functions.php e os arquivos de modelo (MACIEL,2014).
As folhas de estilo, como já estudamos anteriormente, permitem 
personalizar a aparência de uma página web. Conforme Maciel (2014), 
todo tema WordPress tem obrigatoriamente uma folha de estilo, que é 
um arquivo localizado no diretório do template, chamado de “style.css”. 
Esse arquivo pode ser editado para realizar alterações no tema.
Web Design em Wordpress
31
Para alterar ou adicionar funcionalidades a um tema, o arquivo 
Functions.php é que deve ser editado. Contudo esse arquivo é escrito 
praticamente todo em PHP, então é preciso entender sobre essa 
linguagem de programação para realizar alterações no arquivo (MACIEL, 
2014).
IMPORTANTE:
Mesmo que você tenha conhecimento de PHP, Maciel 
(2014) e Brasil (2019) não indicam que sejam feitas alterações 
diretamente no código do arquivo, pois qualquer problema 
pode acabar quebrando o site. A solução é que essas 
alterações sejam feitas de forma local ou por meio da 
utilização de plugins.
Por fim, os temas WordPress são criados em cima de uma hierarquia 
de modelos para diversas partes, e você pode personalizar a aparência 
de post, página, entre outros alterando esses arquivos (MACIEL, 2014). 
Entretanto esses arquivos também são em PHP e, se não forem alterados 
cuidadosamente, podem trazer problemas para o website, assim como 
modificar o arquivo de funções.
RESUMINDO:
Neste capítulo, conhecemos o painel de administração 
do WordPress e vimos como podemos utilizá-lo para criar 
partes de um website. Utilizamos o personalizador padrão 
do WordPress, o Customizer, para configurar os elementos 
de um site e adicionar funções e menus. E, por fim, 
apresentamos duas alternativas para a construção de um 
website, que são o PageBuilder e a edição direta de código.
Web Design em Wordpress
32
Personalizando o Website com Categorias
OBJETIVO:
Neste capítulo, estudaremos sobre as taxonomias do 
WordPress, conceituaremos o que é uma taxonomia e 
falaremos sobre as taxonomiaspadrão da plataforma: as 
categorias e tags. Além disso, veremos como utilizá-las 
para personalizar um website. Bons estudos!
Ao estudarmos sobre o funcionamento básico do WordPress na 
unidade dois, falamos sobre o post, que é um tipo de publicação clássica 
da plataforma.
Você deve se lembrar que um post é a forma tradicional de fazer 
uma publicação no WordPress. Ele é composto por um título, pelo 
conteúdo, uma categoria e por um link único (TADEU, 2018). 
Logo, por padrão, todo post pertence a uma categoria que 
conjuntamente com as tags são utilizadas para organizar os posts de um 
website em grupos. Esses agrupamentos são chamados de taxonomias, 
que estudaremos a seguir. Vamos começar!
Taxonomias
Conforme o Dicionário Online de Português, a taxonomia é 
uma “ciência que se dedica à classificação”. Baseado nessa definição, 
podemos entender que a taxonomia se dedica a classificar ou agrupar 
algo. Quando se trata sobre WordPress, utilizamos as taxonomias para 
agrupar conteúdos do website.
Web Design em Wordpress
33
Figura 4 – Agrupamento
Fonte: Freepik. 
DEFINIÇÃO:
Tadeu (2018) define taxonomia como “A lógica 
de classificação de informações em um sistema por meio 
de termos”. O WordPress explica a relação entre taxonomias 
e termos como simples, na qual você deve  pensar nas 
taxonomias como os “pais” e nos termos como os “filhos”.
Explicando melhor, a taxonomia é uma forma de reunir conteúdos 
semelhantes de alguma forma em grupos nomeados. No WordPress, 
existem duas taxonomias: as categorias e as tags. Tadeu (2018) explica que 
as categorias e tags funcionam como um filtro em que o usuário pode listar 
apenas os posts com conteúdos relacionados a um determinado termo.
NOTA:
Quando você visita um portal de notícias para buscar 
informações sobre algo específico, como política, será 
muito mais fácil encontrar o conteúdo que precisa se existir 
uma taxonomia relacionada a este assunto. Assim, não é 
necessário que você navegue por todo o site para ler o que 
deseja. 
Web Design em Wordpress
34
É preciso entender que categorias e tags são coisas distintas. 
Enquanto as categorias agregam o conteúdo de forma mais ampla, as 
tags são usadas para assuntos mais específicos.
Categorias
A categoria, como já citado anteriormente, é uma das taxonomias-
padrão do WordPress. Todos os posts criados, sendo publicados ou não, 
precisam ter uma categoria associada a ele (LUG, 2018). Se o website não 
possui categorias definidas, o WordPress automaticamente classifica as 
postagens utilizando uma categoria genérica, denominada “Sem Categoria”.
NOTA:
Quando você criar a primeira categoria do seu website, 
pode pensar em excluir a categoria-padrão “Sem Categoria”, 
porém perceberá que isso não é possível. O WordPress não 
oferece a opção de eliminar essa categoria, mas você pode 
renomeá-la se assim desejar.
Uma característica das categorias destacada por Tadeu (2018) que 
a diferencia das tags é que elas podem ter hierarquia. Em outras palavras, 
uma categoria “pai” pode se subdividir em categorias “filhas”. As categorias, 
além de classificarem o conteúdo do website, fornecem uma estrutura 
para navegação dentro dele.
Figura 5 – Hierarquia
Fonte: Pixabay. 
Web Design em Wordpress
35
Alguns pontos podem ser levados em consideração na utilização 
de categorias em um website, pois, se a intenção é organizar os posts em 
grupos, criar uma categoria a cada novo post não faz sentido. Vejamos 
alguns apontamentos feitos por Inovalize (2016):
 • É necessário estruturar as categorias para que todos os seus posts 
pertençam a pelo menos uma delas.
 • Considere utilizar subcategorias para refinar categorias muito 
amplas.
 • Nomeie as categorias de forma clara e objetiva.
 • Não crie inúmeras categorias.
 • Não classifique os posts em várias categorias, classifique-os em 
apenas duas ou três.
Com base nas informações anteriores, vemos que é importante 
estruturar a hierarquia de categorias de forma a facilitar a navegação pelo 
website. Agora, vamos aprender como criar categorias em um website.
Criando Categorias
Agora que já sabemos um pouco mais sobre categorias, vamos 
criá-las para o website. Para isso, acesse o painel do WordPress e vá em 
“Posts” e, depois, “Categorias”, onde uma nova tela será aberta.
Do lado direito da tela, é possível visualizar todas as categorias 
existentes do seu site. Caso seja a primeira vez que você esteja adicionando 
uma nova categoria, apenas estará listada a categoria padrão. Se você 
passar o mouse em cima do nome dessa categoria, aparecerão as opções 
“editar”, “edição rápida” e “ver”.
Do outro lado, encontra-se o formulário para adicionar novas 
categorias, no qual é necessário fornecer as seguintes informações:
 • Nome - o nome da categoria que será no site.
 • Slug - uma versão amigável da URL, geralmente em letras 
minúsculas e que contenha apenas letras, números e hífen.
Web Design em Wordpress
36
 • Categoria ascendente – indicar se a categoria será “filha” de uma 
categoria já criada.
 • Descrição – para descrever a categoria.
EXEMPLO: 
Vamos criar uma categoria para um site que fale sobre web design. 
Um nome para categoria poderia ser WordPress; seu slug, wordpress. 
Já na categoria ascendente, colocamos nenhum, porque não será uma 
subcategoria. Por fim, adicionamos uma descrição sobre aquela categoria 
se tratar de posts que falam sobre WordPress.
Após todas as informaçõesserem preenchidas, basta clicar em 
“Adicionar nova categoria” e a categoria é criada e passa a aparecer na lista 
de categorias. Se você passar o mouse em cima dessa categoria, verá que 
aparecerá a opção de excluir, diferentemente da categoria padrão.
IMPORTANTE:
O próprio WordPress informa que a exclusão de uma 
categoria não exclui as postagens nessa categoria. Em 
vez disso, as postagens que foram atribuídas somente 
à categoria excluída serão definidas para a categoria 
padrão “Sem categoria”.
Ao planejar as categorias que organizarão as postagens de um 
site, pode haver a necessidade de utilizar também subcategorias para 
que o usuário consiga achar o que procura com mais facilidade. Uma 
subcategoria pode ser criada de forma similar a uma categoria superior.
EXEMPLO: 
Vamos criar uma categoria filha para a categoria WordPress citada 
anteriormente. Você já deve ter percebido que, quando falamos deste 
CMS, existem diversos aspectos que podem ser explanados. Então, vamos 
criar uma categoria para agrupar todas as publicações que falem sobre 
temas. Após colocar o nome e o slug, em categoria ascendente, em vez 
de colocar nenhum, escolha a categoria superior como sendo WordPress. 
Após finalizar, a categoria “Temas” aparecerá na lista de categorias.
Web Design em Wordpress
37
As categorias também podem ser criadas no momento da 
elaboração de um post. Isso pode ser útil caso surja a necessidade de uma 
nova categoria naquele momento. Ao lado do editor de postagens, existe 
um menu com diversas opções, entre elas a seção “Categorias”, para que 
seja indicado em qual categoria aquele post deve ser classificado.
Após clicar nessa seção, todas as categorias estarão listadas. Ao final 
dessa lista, aparecerá a opção de adicionar nova categoria. A diferença 
em relação à forma que fizemos anteriormente é que será necessário 
inserir apenas o nome e informar se a categoria possui uma ascendente. 
Ao adicionar a nova categoria, ela aparecerá instantaneamente na lista e o 
post será automaticamente colocado nela.
REFLITA:
Perceba que, por se tratar de uma organização hierárquica, 
todos os posts classificados em uma subcategoria também 
pertencem à categoria “pai”. Logo, se você for na categoria 
“WordPress”, aparecerão os posts classificados nesta 
categoria e os listados na categoria “Temas”. É importante 
observar que o oposto não é recíproco, se você clicar em 
uma subcategoria, apenas os posts desta serão mostrados, 
e não os listados nas categorias superiores.
Para que as categorias sejam exibidas no website, é necessário 
adicionar o widget “Categorias” na barra lateral. Isso pode ser feito de 
forma simples seguindo as etapas:
 • Acesse “Aparência” no painel e, depois, “Widgets”.
 • Ao localizar o widget “Categorias”, basta arrastá-lo e soltá-lo na 
barra lateral. 
 • Por fim, você deve escolher se as categorias serão exibidas de 
forma hierárquica ou não.
Se por acaso, ao publicar um post, ele tenha sido classificado como 
sem categoria, é possível editar e adicioná-lo em uma categoria específica 
posteriormente. Também é permitido adicionar um post em mais de uma 
das categorias existentes no site.
Na próxima seção, estudaremos sobre as tags. Vamos começar!
Web Design em Wordpress
38
Tags
A segunda taxonomia-padrão do WordPress é a tag. Apesar de 
ser semelhante à categoria, a tag é  utilizada de forma mais específica 
para referenciar detalhes do conteúdo, e não só o conteúdo como todo. 
Como já foi mencionado, diferentemente das categorias, as tags não têm 
hierarquia. Além disso, a tag é totalmente opcional.
EXEMPLO: 
Considerando uma publicação sobre WordPress que fale sobre 
temas, já criamos duas categorias que podemos utilizar: “WordPress” e 
“Temas”. As tags a serem adicionadas poderiam ser: gratuito, premium, 
template, o nome de algum tema específico, entre outros.
De acordo com o WordPress, dependendo do tema e dos widgets 
utilizados, as tags podem ser exibidas na parte superior ou inferior dos 
posts ou das páginas, na visualização individual do post e/ou na  barra 
lateral. 
Inovalize (2016) fornece algumas dicas de como utilizar as tags:
 • Use tags descritivas e claras.
 • Use letras minúsculas para tags.
 • Não utilize tags como cópias de suas categorias.
 • Não use muitas tags, pois cada tag irá gerar uma nova página em 
seu site.
O ideal é que você consiga adicionar tags que representem bem o 
seu conteúdo e que, ao mesmo tempo, possam fazer ligações entre os 
posts do seu site. 
Adicionando Tags
Assim como nas categorias, podemos adicionar tags de duas 
formas. A primeira é por meio do painel e a outra forma é durante a criação 
das publicações. Para adicionar utilizando o painel, é preciso acessar 
“Posts” e, em seguida, “Tags”. Você vai se deparar com uma tela similar a 
Web Design em Wordpress
39
das categorias: uma lista de tags existentes e um formulário para criação 
de novas tags.
Um exemplo de como criar uma tag utilizando esse formulário pode 
ser visto no quadro a seguir.
Quadro 4 – Adicionar nova tag
Adicionar nova tag
Nome responsivo
Slug tema-responsivo
Descrição
Nesta tag, você pode encontrar conteúdos 
que falam sobre temas responsivos.
Fonte: Elaborado pelas autoras com base em WordPress (2022).
Após adicionar as informações referentes à tag a ser criada, é só 
clicar no botão “Adicionar nova tag”, e pronto. A tag já foi criada e aparecerá 
na lista.
REFLITA:
Você notou alguma diferença entre o formulário de tags 
o de categorias? Perceba que, na criação de tags, não há 
a opção de tag ascendente. Isso ocorre, porque as tags 
não têm hierarquia como as categorias. Logo, não há tags 
“filhas”.
Na lista de tags, ao escolher a tag “responsivo” e clicar em ver, uma 
nova página será aberta, listando todos os posts encontrados daquela tag. 
Se você está desenvolvendo um website em localhost, o endereço dessa 
página seria algo assim: 
http://localhost/nomedosite/tag/site-responsivo/
Caso esteja usando um servidor de hospedagem de sites, uma URL 
possível seria:
http://www.nomedosite.com/tag/site-responsivo/
Web Design em Wordpress
http://localhost/nomedosite/tag/site-responsivo
http://www.nomedosite.com/tag/site-responsivo/
40
Ainda no painel, abaixo da lista de tags, é exibida uma mensagem 
que diz que as tags podem ser convertidas em categorias e um link que 
redireciona para o conversor de tags e categorias. Para utilizar o conversor, 
é necessário instalá-lo. 
Após a instalação, clique em rodar conversor para que ele seja 
aberto. Para transformar um tag em categoria, basta escolher a tag que 
deseja converter, e uma nova categoria é criada. Os posts que eram 
referenciados pela tag passam a ser automaticamente agrupados na nova 
categoria.
Finalmente, aParte superior do formulário
Parte inferior do formulário
 outra forma de adicionar tags é durante a criação de um post. Na 
barra lateral do editor, logo abaixo da seção de categorias, encontra-se a 
seção de tags. Essa seção é apenas uma caixa de texto, na qual é possível 
adicionar diferentes tags apenas separando-as por vírgulas.
Uma informação importante sobre as taxonomias, sejam as 
categorias ou tags, é que elas podem ser utilizadas para otimização 
em mecanismos de busca. Trataremos sobre esse assunto na próxima 
unidade.
RESUMINDO:
Finalizamos mais um capítulo em que aprendemos o 
que são taxonomias e como utilizá-las para classificar o 
conteúdo de um website. Conhecemos primeiramente as 
categorias, que são utilizadas para classificar o conteúdo do 
site de forma mais ampla e hierárquica, e como adicioná-
las em uma publicação e exibi-las no website. E concluímos 
falando sobre as tags, que são utilizadas para especificar 
partes de um conteúdo.
Web Design em Wordpress
41
Ajustar a Navegação do Website
OBJETIVO:
No capítulo dois desta unidade, falamos sobre os menus 
e como eles são utilizados para realizar a navegação pelo 
site. Vamos agora aprofundar mais sobreesse assunto e 
como a navegação é importante para um website.
Vamos, primeiramente, conceituar o que é navegação de um 
website.
DEFINIÇÃO:
A navegação na internet é o processo de navegação de 
páginas, aplicações e sites da web, e a tecnologia por trás 
dela é denominada de hipertexto ou hipermídia (DUO, 
2020).
Lembre-se que já discutimos o que é um hipertexto na primeira 
unidade. Um hipertexto é um termo que contém um link que redireciona 
para outra página dentro do mesmo site ou de um website diferente. 
Logo, um hipertexto que redireciona para páginas do mesmo site realiza 
uma ligação interna.
Figura 6 – Navegação em um website
Fonte: Pixabay. 
Web Design em Wordpress
42
Segundo Duo (2020), a navegação no site utiliza menus com links 
internos para que os usuários possam encontrar a página que procuram 
com facilidade, o que torna uma boa navegação um elemento essencial 
para um website.
Portanto é importante organizar a estrutura de navegação de 
um site, que descreve como as diferentes páginas do seu site estão 
organizadas e ligadas entre si (DUO, 2020).
EXEMPLO: 
Na figura 6, você pode observar a estrutura de navegação de um 
website que contém as páginas:
 • Home.
 • About.
 • Products.
 • Contact.
Observe que a página Products pode levar a outras páginas que 
falem sobre os produtos de forma específica. Nessa configuração, 
poderíamos acessar as páginas Home, About, Products e Contact por 
meio do menu principal localizado no cabeçalho do site, mas as páginas 
ligadas a Products poderiam não estar no menu e seriam acessadas 
somente se entrássemos na página de produtos primeiro.
Esse tipo de questão sobre colocar ou não uma página no menu 
principal do site faz parte da organização da estrutura do website. O 
designer costuma planejar a estrutura durante a construção de um novo 
site (DUO,2020). Para isso, precisamos conhecer os diferentes tipos de 
navegação que podemos encontrar em um website.
Tipos de Navegação
Segundo Buzzo (2012), a navegação pode ser simples ou complexa, 
conter poucas páginas ou uma arquitetura com vários níveis e, ainda, um 
set de conteúdo para usuários logados e outro para os não logados, entre 
outras coisas. Existem três tipos de navegação, de acordo com Duo (2020):
Web Design em Wordpress
43
 • Navegação global.
 • Navegação hierárquica.
 • Navegação local.
Vamos entender as diferenças entre elas nas seções a seguir.
Navegação Global
No estilo de navegação global, o menu de navegação permanece 
o mesmo independentemente de qual página do site o usuário esteja. 
Duo (2020) destaca que os menus globais são o padrão para a maioria das 
soluções CMS.
ACESSE:
Para visualizar como um menu global funciona na prática, 
acesse o site disponível aqui e navegue pelos links 
disponíveis no menu principal, localizado no cabeçalho 
do site. Você perceberá que, independentemente de qual 
página do site você acesse, o menu permanecerá o mesmo.
Figura 7 – Menu principal do WordPress
Fonte: WordPress.org (2022). 
Web Design em Wordpress
https://kinsta.com/pt/wordpress-quota-mercado/
https://kinsta.com/pt/wordpress-quota-mercado/
https://wordpress.org/news/category/releases/
44
Além do menu principal localizado no cabeçalho do site, o menu de 
rodapé também costuma ser um menu global.
Navegação Hierárquica
Diferentemente da global, na navegação hierárquica, os menus 
mudam em função do contexto de cada página do site (DUO, 2020). Em 
outras palavras, a cada página acessada o menu que aparece no topo da 
página é um menu relacionado ao conteúdo ou à categoria da página.
Duo (2020) ressalta que a maioria dos jornais e websites puramente 
baseados em conteúdo apresenta uma navegação hierárquica.
EXEMPLO: 
O portal de notícias Globo possui um menu principal composto por:
 • G1 – notícias em geral.
 • GE – notícias sobre esportes.
 • GShow – notícias de entretenimento.
 • Tech – postagens sobre tecnologia.
 • Vídeos – plataforma de streaming de vídeos.
Porém, ao acessar uma notícia na página inicial, uma nova página 
será aberta e aparecerá um menu embutido abaixo do principal. Esse 
menu oferece outras opções relacionadas àquele conteúdo. Se a página 
acessada tiver conteúdo relacionado a futebol, o menu oferecerá opções 
para ver mais páginas relacionadas a esse esporte e para outros esportes 
em geral.
NOTA:
Note que o menu principal pode continuar aparecendo em 
todas as páginas. Isto acontece se forem combinados os 
dois tipos de navegação, global e hierárquica.
Por fim, vamos conhecer o terceiro tipo de navegação: o local.
Web Design em Wordpress
45
Navegação Local
Ao contrário da navegação hierárquica e da global, a navegação 
local no website diz respeito a ligações internas que estão inclusas no 
próprio conteúdo (DUO, 2020). 
Organizando a Estrutura de Navegação
Como já mencionado, ter uma boa estrutura de navegação é 
fundamental para um website. Buzzo (2012) destaca que o primeiro passo 
a ser seguido é organizar o conteúdo. 
Quando iremos criar um website, já sabemos que tipo de site será 
e qual é o conteúdo que será publicado. Com isso, é possível classificar o 
conteúdo para definir em qual menu ele estará inserido. 
Buzzo (2012) sugere que um website deve ter pelo menos dois 
menus de navegação:
 • Menu primário – nesse menu, deve estar o conteúdo de maior 
interesse para o usuário do site ou, ainda, o conteúdo que o 
administrador quer destacar.
 • Menu secundário – conteúdos considerados menos interessantes 
para o usuário.
O menu primário de um site é o menu principal exibido no cabeçalho. 
Como ele é uma das primeiras coisas a serem vistas quando se acessa 
uma página na web, faz sentido que esteja ali o conteúdo que reflete o 
objetivo principal do website. Vejamos alguns exemplos:
 • Para um site de notícias, o menu pode conter categorias para os 
tipos de notícias publicadas.
 • Em um site de comercialização de produtos, é interessante que o 
menu aponte para páginas que contenham informações sobre os 
produtos e como o cliente pode adquiri-los.
 • Uma instituição não governamental que contenha um website 
pode priorizar em seu menu principal páginas que falem sobre a 
Web Design em Wordpress
46
missão da organização e como voluntários podem oferecer apoio 
a ela.
NOTA:
Observe que o conteúdo exibido no menu principal pode 
variar de acordo com as necessidades do idealizador 
do site. Esse menu deve ser bem-estruturado, pois, na 
navegação global, ele será exibido em todas as páginas 
existentes no website.
No menu secundário, podem estar conteúdos que o usuário tenha 
interesse em acessar em um segundo momento. Ele pode estar localizado 
na parte superior do site, na barra lateral ou, ainda, no rodapé das páginas.
Duo (2020) resume oito princípios para melhorar a navegação do 
website:
1. Planejar a estrutura de navegação do seu site.
2. Seguir as normas estabelecidas.
3. Utilizar vocabulário voltado para o seu público-alvo.
4. Usar menus responsivos.
5. Aproveitar o menu do rodapé.
6. Utilizar elementos, como cores e bordas, para enfatizar a área de 
navegação.
7. Evitar menus suspensos.
8. Manter a estrutura mais plana possível, sem muitas subpáginas e 
categorias.
Ampliando os Menus do Website
No capítulo dois, aprendemos como inserir menus em um website 
por meio do painel administrativo do WordPress. Configuramos dois tipos 
de menu:
 • Menu principal – localizado no cabeçalho do site.
Web Design em Wordpress
47
 • Menu de rodapé – localizado na parte inferior do site.
Estes tipos de menu são padrão da plataforma, e o nível de 
personalização deles pode depender do tema escolhido para construção 
do website. Uma vantagem já citada em utilizar o menu de rodapé como 
uma réplica do menu principal é para facilitar a navegação caso o usuário 
chegue ao final da página.
Todavia, uma alternativa para isso seria criar um menu para 
acompanhar a rolagem da página no navegador, o que pode ser feitoutilizando plugins.
Utilizando Plugins
Já aprendemos na unidade dois que os plugins são ferramentas 
que adicionam funcionalidades extras ao website. Eles também podem 
ser utilizados para formatar menus do WordPress. 
Duo (2020) explica as vantagens de se utilizar plugins para construir 
menus de um website no WordPress:
 • Criação de mega menus – já que menus maiores não podem ser 
criados com os menus padrões.
 • Fornecimento de suporte à mídia – nem todos os temas oferecem 
a opção de usar imagens, por exemplo.
 • Garantia de que o menu utilizado seja responsivo.
 • Plugins oferecem diferentes modelos de menus para serem 
incorporados ao website.
 • Opção de adicionar efeitos de transição e animação que não 
estejam disponíveis no menu padrão.
 • Fornecimento de um construtor visual que pode ser mais 
interessante para a criação de menus.
Para entendermos como utilizar plugins para criação de menus, 
vamos criar um menu fixo para o website utilizando um plugin. Alguns 
temas podem oferecer esse tipo de menu de forma nativa, mas, caso não 
ofereça, essa funcionalidade pode ser adicionada por meio de um plugin.
Web Design em Wordpress
48
Um menu fixo é aquele que acompanha a rolagem da página, ou 
seja, você pode acessá-lo em qualquer ponto sem a necessidade de 
voltar para o topo.
Para esse fim, vamos utilizar o plugin myStickyMenu. Para obtê-lo, 
vamos acessar o diretório de plugins no painel administrativo e realizar 
uma busca por ele. Após encontrá-lo, realize a instalação e ative o plugin. 
Depois, acesse as configurações no painel e clique em “myStickyMenu”. 
Você verá a tela a seguir:
Figura 8 – myStickyMenu
Fonte: WordPress (2022). 
Web Design em Wordpress
49
PASSO A PASSO: 
Para criar o menu fixo, podemos seguir estes passos adaptados de 
Dantas (2019):
1. Vá para menu General Settings.
2. No campo “Sticky Class”, substitua o texto “.navbar” pelo texto 
“.site-header”.
3. No campo “Disable at Small Screen Sizes”, substitua “0” por “1” caso 
deseje ativar o menu fixo também em dispositivo móvel.
4. Salve as alterações.
5. Acesse o menu Styles.
6. Escolha a cor do menu.
7. Defina se o menu terá transparência ou não.
8. Salve as alterações.
Após concluir esses passos, o menu já estará criado, e você já 
poderá utilizálo em seu site.
Existem diversos outros plugins que podemos utilizar para 
personalizar menus e melhorar a navegação em um website. Podemos 
ver alguns desses plugins no quadro 5.
Quadro 5 – Plugins de menus
Plugin Característica
Max Mega Manu
Adiciona elementos interativos, 
como o Google Maps.
WP Mobile Menu
Otimiza o menu do website para 
dispositivos móveis.
WP Mega Menu
Oferece diversas opções de 
customização para menus.
Advanced Sidebar Menu
Proporciona diversas opções para 
ajudar a customizar o visual dos 
seus menus laterais.
Fonte: Elaborado pelas autoras com base em Estrella (2019).
Web Design em Wordpress
50
Com base nas informações vistas, podemos concluir que 
personalizar os menus utilizando plugins é uma ótima alternativa para 
melhorar a navegação do seu website.
RESUMINDO:
Neste capítulo, entendemos como funciona a navegação 
em um website e a importância de possuir uma estrutura 
de navegação bem-organizada. Vimos que a navegação 
pode ser de diferentes tipos: global, local e hierárquica. 
Escolher que tipo utilizar ou se devemos mesclar os três 
depende dos objetivos do website. Por fim, pontuamos que 
podemos personalizar os menus de navegação utilizando 
plugins.
Web Design em Wordpress
51
REFERÊNCIAS
BRASIL, A. Como adicionar funções e shortcodes personalizados 
em seu site WordPress. King, 2019. Disponível em: https://king.host/wiki/
artigo/adicionar-funcoes-e-shortcodes-wordpress/. Acesso em 1 ago. 
2020.
BUZZO, A. Planejando e implementando a navegação do website. 
2012. Disponível em: http://www.andrebuzzo.com.br/planejando-e-
implementando-a-navegacao-do-website/. Acesso em: 4 ago. 2020.
DANTAS, T. Como colocar um menu fixo 
no topo do site WordPress. Vive da Net, 2019. Disponível em: https://
vivedanet.com/menu-fixo-oceanwp/. Acesso em: 7 ago. 2020.
DICIO. Significado de Taxonomia. 2020. Disponível em: https://
www.dicio.com.br/taxonomia/. Acesso em: 3 ago. 2020.
DUO, M. Como melhorar a navegação do site (com exemplos e 
razões sobre porque você deve fazê-lo). Kinsta, 2020. Disponível em: 
https://kinsta.com/pt/blog/melhorar-a-navegacao-do-website/. Acesso 
em: 4 ago. 2020.
ESTRELLA, C. 10 Melhores plugins de menu WordPress. Hostinger, 
2019. Disponível em: https://www.hostinger.com.br/tutoriais/plugin-
menu-wordpress/. Acesso em: 7 ago. 2020.
FETTER, V. Template WordPress: como escolher o melhor tema para 
seu site ou blog. Hostgator, 2015. Disponível em: https://www.hostgator.
com.br/blog/template-wordpress-como-escolher/. Acesso em: 30 jul. 
2020.
LONGEN, A. O Que é plugin WordPress? Guia para iniciantes. 
Weblink, 2019. Disponível em: https://www.weblink.com.br/blog/o-que-
e-plugin-wordpress. Acesso em: 1 ago. 2020. 
LOPES, F. Como criar uma subpágina no WordPress. 2020. Disponível 
em: https://fredericolopes.com/como-criar-uma-sub-pagina-filha-no-
wordpress/. Acesso em: 31 jul. 2020.
Web Design em Wordpress
https://king.host/wiki/artigo/adicionar-funcoes-e-shortcodes-wordpress/
https://king.host/wiki/artigo/adicionar-funcoes-e-shortcodes-wordpress/
http://www.andrebuzzo.com.br/planejando-e-implementando-a-navegacao-do-website/
http://www.andrebuzzo.com.br/planejando-e-implementando-a-navegacao-do-website/
https://vivedanet.com/menu-fixo-oceanwp/
https://vivedanet.com/menu-fixo-oceanwp/
https://www.dicio.com.br/taxonomia/
https://www.dicio.com.br/taxonomia/
https://kinsta.com/pt/blog/melhorar-a-navegacao-do-website/
https://www.hostinger.com.br/tutoriais/plugin-menu-wordpress/
https://www.hostinger.com.br/tutoriais/plugin-menu-wordpress/
https://www.hostgator.com.br/blog/template-wordpress-como-escolher/
https://www.hostgator.com.br/blog/template-wordpress-como-escolher/
https://www.weblink.com.br/blog/o-que-e-plugin-wordpress
https://www.weblink.com.br/blog/o-que-e-plugin-wordpress
https://fredericolopes.com/como-criar-uma-sub-pagina-filha-no-wordpress/
https://fredericolopes.com/como-criar-uma-sub-pagina-filha-no-wordpress/
52
LUG, A. Como renomear a categoria “Sem Categoria” do 
WordPress. 2018. Disponível em: https://igluonline.com/como-renomear-
a-categoria-sem-categoria-do-wordpress/. Acesso em: 3 ago. 2020.
MACIEL, A. Começando com WordPress: editando a estrutura do 
site. Wp24 horas, 2014. Disponível em: https://www.wp24horas.com.br/
como-editar-estrutura-do-site/. Acesso em: 30 jul. 2020.
MACIEL, A. Como personalizar a aparência do WordPress. Wp24 
horas, 2014. Disponível em: https://www.wp24horas.com.br/comecando-
com-wordpress-como-personalizar-tema/. Acesso em: 31 jul. 2020.
MARQUES, B. Os 5 melhores plugins para construção de páginas 
Wordpress. Hostinger, 2019. Disponível em: https://www.hostinger.com.
br/tutoriais/construtor-de-paginas-wordpress/. Acesso em: 1 ago. 2020.
SOUZA, I. de. Quer saber como adicionar template no WordPress? 
Confira este tutorial. Rock Content, 2020. Disponível em: https://
rockcontent.com/br/blog/como-adicionar-template-no-wordpress/. 
Acesso em: 30 jul. 2020.
TADEU, G. Como funciona o WordPress: entenda o essencial. GT2S, 
2018. Disponível em: https://www.gt2s.com.br/blog/como-funciona-o-
wordpress/. Acesso em: 18 jul. 2020.
TAGS. WordPress, 2020. Disponível em: https://wordpress.com/br/
support/posts/tags/. Acesso em: 3 ago. 2020.
INOVALIZE. Como usar tags e categorias no WordPress. 2016. 
Disponível em: https://inovalize.com.br/como-usar-tags-e-categorias-
no-wordpress/. Acesso em: 3 ago. 2020.
Web Design em Wordpress
https://igluonline.com/como-renomear-a-categoria-sem-categoria-do-wordpress/
https://igluonline.com/como-renomear-a-categoria-sem-categoria-do-wordpress/
https://www.wp24horas.com.br/como-editar-estrutura-do-site/
https://www.wp24horas.com.br/como-editar-estrutura-do-site/https://www.wp24horas.com.br/como-editar-estrutura-do-site/
https://www.wp24horas.com.br/como-editar-estrutura-do-site/
https://www.wp24horas.com.br/como-editar-estrutura-do-site/
https://www.wp24horas.com.br/comecando-com-wordpress-como-personalizar-tema/
https://www.wp24horas.com.br/comecando-com-wordpress-como-personalizar-tema/
https://www.hostinger.com.br/tutoriais/construtor-de-paginas-wordpress/
https://www.hostinger.com.br/tutoriais/construtor-de-paginas-wordpress/
https://rockcontent.com/br/blog/como-adicionar-template-no-wordpress/
https://rockcontent.com/br/blog/como-adicionar-template-no-wordpress/
https://www.gt2s.com.br/blog/como-funciona-o-wordpress/
https://www.gt2s.com.br/blog/como-funciona-o-wordpress/
https://wordpress.com/br/support/posts/tags/
https://wordpress.com/br/support/posts/tags/
https://inovalize.com.br/como-usar-tags-e-categorias-no-wordpress/
https://inovalize.com.br/como-usar-tags-e-categorias-no-wordpress/
	_Hlk47725345
	Exportando um Tema
	Escolhendo um Tema
	Temas Gratuitos
	Temas Premium
	Adicionando um Tema
	Criando Partes do Website
	Customizer 
	Criando Cabeçalho e Rodapé
	Adicionando Páginas
	Adicionando Menus
	Adicionando Funções
	Construtores de Páginas
	Edição de Código
	Personalizando o Website com Categorias
	Taxonomias
	Categorias
	Criando Categorias
	Tags
	Adicionando Tags
	Ajustar a Navegação do Website
	Tipos de Navegação
	Navegação Global
	Navegação Hierárquica
	Navegação Local
	Organizando a Estrutura de Navegação
	Ampliando os Menus do Website
	Utilizando Plugins