Web design em wordpress

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
Adicionando Serviços ao Website ........................................................ 12
Adicionando Conteúdo ............................................................................................................... 12
Adicionando Mídias Sociais ..................................................................................................... 15
Portal de Boas-Vindas ................................................................................................................. 19
SEO do Website ............................................................................................ 21
Configurando o SEO ......................................................................................................................24
Keywords ...............................................................................................................................................28
Metatags ............................................................................................................................................... 30
Inserindo Formulários ...............................................................................32
Formulário de Contato ................................................................................................................34
Outros Formulários ....................................................................................................................... 40
Publicando o Website ...............................................................................42
Banners ...................................................................................................................................................42
Exportando o Site Localhost para uma Hospedagem ........................................43
Checagem de Erros ...................................................................................................................... 46
Ajustes de Tema .............................................................................................................................. 49
9
UNIDADE
04
Web Design em Wordpress
10
INTRODUÇÃO
Ao criarmos um website, devemos torná-lo atrativo para o visitante, 
proporcionando conteúdo de qualidade. Além disso, podemos criar 
proximidade com o visitante ao adicionar ícones para os perfis em redes 
sociais do proprietário do site, seja uma empresa ou uma pessoa, para 
que o usuário possa visitá-los.
Para que o site consiga atingir um maior número de visitas, devemos 
saber como otimizá-lo para que ele apareça em uma boa posição nos 
resultados das buscas em mecanismos, como o Google.
Assim, utilizando as estratégias anteriores e adicionando alguns 
outros serviços ao site, estaremos prontos para publicá-lo online.
Espero que você aprecie os estudos. Vamos começar!
Web Design em Wordpress
11
OBJETIVOS
Olá. Seja muito bem-vindo à Unidade IV. Nosso objetivo é auxiliar 
você no desenvolvimento das seguintes competências profissionais até o 
término desta etapa de estudos:
1. Criar notícias, query posts, welcomes, miniaturas, mídias sociais e 
outros serviços no website.
2. Otimizar o website para mecanismos de busca (SEO), aplicando 
metatags, keywords e outras estratégias. 
3. Criar formulários de cadastramento e envio de mensagens no 
website.
4. Publicar o website definitivo, efetuando ajustes no tema, além da 
checagem e correção de erros.
Então? Preparado para adquirir conhecimento sobre um assunto 
fascinante e inovador como esse? Vamos lá!
Web Design em Wordpress
12
Adicionando Serviços ao Website
OBJETIVO:
Neste capítulo, vamos aumentar nossos conhecimentos 
aprendendo a como adicionar conteúdo, introduzir mídias 
sociais e utilizar outros serviços e soluções para incrementar 
um site no WordPress. .
Nas unidades anteriores, aprendemos a criar e personalizar um 
website no WordPress. Agora, iniciaremos esta unidade explorando o 
editor de blocos que utilizamos para criar notícias e publicá-las no site. 
Vamos lá! 
Adicionando Conteúdo
Como já estudamos anteriormente, existem dois tipos padrões de 
publicações no WordPress: os posts e as páginas. As páginas são utilizadas 
para fornecer informações fixas sobre o site, a empresa, o desenvolvedor 
etc., enquanto o post é a forma de publicação do website. Ou seja, quando 
desejamos adicionar um novo conteúdo, criar uma notícia fazemos isso 
por meio da criação de um novo post. 
Figura 1 – News
Fonte: Freepik. 
Web Design em Wordpress
13
O WordPress tem uma ferramenta própria para publicação de posts 
de forma simples, mas que oferece diversos recursos. Para acessá-la, 
entre no painel de controle e, depois, em “posts”. Uma nova página será 
aberta em que serão exibidos todos os posts existentes e as opções para 
manipulá-los, como excluir e editar. Também é possível visualizar em qual 
categoria cada post está incluso.
Para criar uma publicação, é só clicar em “adicionar novo” e será 
aberto o editor do WordPress. Além da área para criação da postagem em 
si, o editor possui um menu lateral com dois itens: documento e bloco.
No item documento, é que fazemos toda a configuração do post. 
Na primeira opção, denominada “Status e visibilidade”, é possível definir se 
aquele post é público ou privado, e podemos escolher quando ele vai ser 
publicado, se de forma imediata ou em uma data e horário específico. Em 
documento, também podemos adicionar o post a uma ou mais categorias 
e adicionar tags a ele, como já aprendemos anteriormente.
Outra função interessante é que podemos adicionar uma imagem 
destacada ao post. Essa imagem representa o seu conteúdo e é mostrada 
como miniaturas dos posts.
EXEMPLO: 
Quando você compartilha o link de uma notícia no WhatsApp, além 
do link e do título, também é carregada uma figura em miniatura. É aimagem destacada escolhida quando a publicação foi criada.
Para montar um conteúdo, é só adicionar blocos a sua maneira. Os 
blocos disponíveis estão classificados em:
 • Blocos comuns.
 • Formatação.
 • Elementos de layout.
 • Widgets.
 • Códigos incorporados.
Web Design em Wordpress
14
Os blocos comuns contêm parágrafo, imagem, galeria, título, 
lista, citar, áudio, cobertura e vídeo. Na formatação, temos as opções 
de exibir trechos de código, usar o editor clássico do WordPress (sem 
blocos), adicionar pré-formatação, tabela, versos e inserir código HTML 
personalizado.
Os elementos de layout incluem quebras de página, botões, colunas, 
separadores e espaçadores. Os widgets permitem inserir na publicação 
um calendário, uma agenda e os posts mais recentes, entre outros. Por 
fim, com os códigos incorporados, é possível incorporar vídeos, imagens, 
tweets e outros conteúdos de fontes externas.
Podemos observar que temos à disposição diversos recursos para 
montar uma publicação. Basta ir em “adicionar blocos” e organizá-los da 
forma que achar melhor. O WordPress permite visualizar o post à medida 
que os blocos são inseridos, o que é muito útil para que ele seja publicado 
da forma desejada.
Quando adicionamos um bloco, no menu lateral, aparecem opções 
para personalizá-lo. Após escolher um título, você pode achar necessário 
incluir um subtítulo na postagem ou dividi-lo em seções. Nesse caso, é 
preciso acrescentar blocos de título, que oferecem configurações em que 
é possível escolher o nível do cabeçalho, de H1 até H6 e adicionar cor.
Para escrever o texto, o bloco selecionado deve ser o de parágrafo, 
em que é possível selecionar um tamanho predefinido para o texto ou 
qualquer tamanho desejado, assim como formatá-lo utilizando negrito, 
itálico e cores. Uma opção que pode ser ativada é a letra capitular, que 
exibe automaticamente a letra inicial do parágrafo em tamanho maior, 
destacandoa das demais.
NOTA:
As fontes utilizadas nos posts fazem parte do design do 
site, o que significa que elas estão ligadas ao tema que está 
sendo utilizado. Você pode adicionar fontes diferentes por 
meio da utilização de plugins ou adicionar manualmente, 
editando o arquivo de folhas de estilo do website.
Web Design em Wordpress
15
Ao adicionar um bloco de imagem, podemos enviar uma imagem do 
computador, da biblioteca ou de um URL. Após a imagem ser carregada, 
é possível alterar suas dimensões, o alinhamento, escrever uma legenda 
e um texto alternativo para ela.
IMPORTANTE:
É fundamental acrescentar um texto alternativo que 
descreva a imagem, pois ele é utilizado na indexação da 
imagem nos mecanismos de busca. Estudaremos sobre 
isso no próximo capítulo.
Com a adição desses três blocos, podemos constatar que as opções 
de personalização se alteram de acordo com o tipo de bloco escolhido. 
Ao finalizar a criação do post, clique em publicar, e ele estará disponível 
no website.
Adicionando Mídias Sociais
As redes sociais podem ser uma extensão do website, por isso é 
importante que existam formas de os visitantes acessá-las por meio do 
site. Podemos adicionar mídias sociais de duas formas: manualmente e 
por meio de plugins.
Figura 2 – Mídias sociais
 
Fonte: Pixabay. 
Web Design em Wordpress
16
Vamos aprender primeiramente como adicionar uma rede social de 
forma manual. O primeiro passo citado por Marques (2019) é encontrar um 
ícone da rede social desejada. 
NOTA:
É importante buscar uma imagem de boa qualidade e que 
esteja disponível de forma gratuita. Esses ícones podem ser 
encontrados em bancos de imagens. É possível, inclusive, 
adquirir um pacote com ícones de várias redes sociais.
Após encontrar o ícone, devemos fazer o upload dele na biblioteca 
de mídia do WordPress e, então, adicionar um widget para redes sociais 
no website. Para tal, adicione o widget “HTML personalizado” e arraste-o 
para o rodapé do site. Nesse widget, adicione o código a seguir, retirado 
de Marques (2019):
<div>
<a href=”http://instagram.com/usuário”> 
<img style=”margin:5px” src=”[caminho do ícone]”></a>
<a href=”http://facebook.com/usuário”> 
<img style=”margin:5px” src=”caminho do ícone]” width=”30” 
height=”30” alt=”Facebook”></a>
<a href=”http://youtube.com/usuário” > 
<img style=”margin:5px” src=”[caminho do ícone]” width=”30” 
height=”30” alt=”Youtube”></a>
</div>
Esse código cria uma div no rodapé, ou seja, cria um contêiner 
com ícones que levam para diferentes redes sociais. No código, o nome 
“usuário” deve ser substituído pelo perfil desejado e o “caminho do ícone” 
pelo URL da imagem já previamente adicionada na biblioteca.
Web Design em Wordpress
17
NOTA:
Para saber qual é a URL exata a ser inserida no código, 
acesse “Mídia > Biblioteca” e clique no ícone. À direita, você 
vai encontrar um campo URL que contém o endereço a ser 
adicionado (MARQUES, 2019).
Após configurar todas as mídias sociais desejadas, basta salvar e 
verificar como os ícones ficaram no rodapé da página. Você pode alterar 
o tamanho dos ícones alterando os valores dos atributos width e height.
A outra forma de adicionar redes sociais é utilizando plugins. Alguns 
plugins citados por Marques (2019) que podem ser utilizados para esse 
fim são:
 • Simple Social Icons - é simples e possui uma interface limpa.
 • Social Media Buttons - permite alterar a cor dos ícones das redes 
sociais.
 • Social Icons Widget by WPZOOM  - permite ajuste de tamanho 
e posicionamento, pesquisa de ícones com teclado e contém 
diferentes estilos de ícones.
Vamos utilizar o Simple Social Icons para entender como usar um 
plugin para adicionar redes sociais ao site. É preciso instalar e ativar o 
plugin para que possamos utilizá-lo.
Ao acessar a páginas de widgets, você pode perceber que estará 
disponível um novo widget, denominado “Simple Social Icons”. Ao clicar 
nele, aparecerão algumas opções de onde você pode colocá-lo, que 
pode ser no cabeçalho, rodapé ou barra lateral. Após escolher o local, 
clique em adicionar widget.
No widget adicionado, aparecerão diferentes opções. Um título 
deve ser denominado, que pode ser, por exemplo, “Redes Sociais”. Você 
pode definir o tamanho dos ícones e a forma que devem ser alinhados. 
Web Design em Wordpress
https://wordpress.org/plugins/simple-social-icons/
https://wordpress.org/plugins/social-media-button/
https://wordpress.org/plugins/social-icons-widget-by-wpzoom/
18
IMPORTANTE:
Abaixo do campo título, existe uma opção com a pergunta 
“abrir links em uma nova janela?”. Deixar essa opção 
marcada pode ser interessante, pois as páginas abrirão em 
outra janela, o que faz o usuário visitar as redes sociais, mas 
ainda assim permanecer com o website aberto.
Por fim, aparece uma lista com todas as redes sociais disponíveis 
no plugin, como o Facebook, Instagram e Linkedin. Também é possível 
adicionar links para o YouTube e e-mail. Para as redes sociais que não 
serão utilizadas, basta deixar os campos em branco e clicar em salvar. 
Pronto, os ícones para as mídias sociais escolhidas já estarão disponíveis 
em seu site.
Além de apontar para os perfis em diversas redes, os plugins 
também podem ser utilizados para facilitar o compartilhamento do 
conteúdo por parte do usuário do website em suas próprias redes sociais. 
Isso é ótimo, pois gera mais engajamento para o website.
EXEMPLO: 
Um plugin utilizado para este fim é o AddThis, que, de acordo com 
seu desenvolvedor, fornece botões de compartilhamento para mais de 
200 mídias sociais. Você pode configurar previamente os botões que 
deseja utilizar e adicioná-los de forma automática em suas postagens.
Outro recurso interessante do AddThis é que ele realiza uma análise 
a respeito do desempenho do conteúdo, fornecendo informações sobre 
qual conteúdo está sendo mais compartilhado, em que rede social e o 
número de visualizações. Essas informações podem ser utilizadas para 
melhorar e direcionar conteúdo para uma redesocial específica.
Podemos perceber que, tanto de forma manual como utilizando 
plugins, é simples adicionar as redes sociais em um website. É um ótimo 
recurso para atrair mais interesse, seja para uma pessoa, empresa, serviço 
ou produto.
Web Design em Wordpress
19
Portal de Boas-Vindas
Ao acessar um site, você já pode ter se deparado com uma tela, 
geralmente em tela cheia, que é exibida antes de o conteúdo do site ser 
mostrado. Essa tela denominada “portal de boas-vindas” é uma estratégia 
utilizada para atrair rapidamente a atenção do usuário e exibir ofertas 
para conseguir assinantes para lista de e-mails, divulgar e-books, vender 
produtos, entre outros. Caso o usuário não tenha interesse, ele pode 
simplesmente fechar a tela.
Podemos utilizar o plugin OptinMonster para criar um portal de 
boas-vindas. De acordo com Jersyer (2020), essa é uma das melhores 
soluções do mercado. Após instalá-lo, é necessário ativar o plugin e 
conectá-lo em uma conta.
Para começar a criar a tela de boas-vindas, clique em “criar uma 
nova campanha”. Aparecerão algumas opções, pois esse plugin é utilizado 
para outros tipos de conteúdo, mas, neste caso específico, escolheremos 
a opção “fullscreen”. Em seguida, devemos escolher um modelo entre os 
vários disponíveis.
NOTA:
Na interface de personalização, é possível ver a visualização 
ao vivo do portal de boas-vindas. Você pode alterar 
cores, texto, adicionar botões e personalizá-lo totalmente 
(JERSYER, 2020).
Caso o usuário realize a ação disponível, como se inscrever na lista 
de e-mails do website, por exemplo, é possível configurar uma tela que 
mostre ao usuário que a ação foi concluída com sucesso.
Outras opções que podem ser configuradas dizem respeito ao 
tempo que levará para que seja exibido o welcome após a página ser 
acessada e se a tela será exibida para todos os usuários ou alguns em 
específicos. Após configurar todas essas opções, salve e saia da interface 
de personalização.
Web Design em Wordpress
20
Jersyer (2020) pontua que é necessária mais uma etapa para que 
a tela seja de fato exibida no site. Para isso, é preciso acessar o painel do 
plugin, em que estará disponível o portal que acabamos de criar. Clique 
em “editar configurações de saída” e marque a opção de ativar para utilizá-
lo.
Para finalizar, devemos escolher uma configuração de exibição para 
o portal de boas-vindas. É possível escolher se ele deve aparecer em 
qualquer área do site ou apenas em um artigo ou categoria específica. 
Após salvar as configurações, o portal já aparecerá no site na forma 
configurada.
Podemos perceber que existem diversos serviços que podemos 
adicionar ao website, de acordo com os objetivos que foram traçados lá no 
começo na criação do briefing. Por isso, é importante tê-lo com base para 
nortear todo o processo de desenvolvimento do website, principalmente 
se você está criando um site para um cliente.
Aprenderemos posteriormente uma solução para obter dados 
do usuário por meio da adição do serviço de formulários ao website. 
Porém, antes disso, vamos entender como garantir que o site apareça 
nos resultados de pesquisas dos mecanismos de busca. Até o próximo 
capítulo.
RESUMINDO:
Finalizamos este capítulo em que conhecemos o editor 
de blocos do WordPress, que disponibiliza diferentes 
tipos de blocos para criarmos desde um post simples aos 
mais incrementados com a adição de mídias e até tweets. 
Aprendemos como inserir uma miniatura dos posts e vimos 
como acrescentar redes sociais em um website, tanto para 
apontar para os perfis em diferentes redes, como para 
permitir o compartilhamento direto nas redes sociais dos 
usuários. Finalizamos o capítulo com a criação de uma tela 
de boas-vindas a ser exibida antes do conteúdo do site, 
para atrair a atenção do usuário para algo específico.
Web Design em Wordpress
21
SEO do Website
OBJETIVO:
O objetivo deste capítulo é aprender o que é a otimização 
de sites para mecanismos de busca, o SEO. Além disso, 
vamos conhecer técnicas e estratégias de SEO e como 
aplicá-las em um website..
Umas das coisas mais importantes na criação de um website é 
se certificar de que ele seja indexado pelos mecanismos de busca. Isso 
significa que o site aparecerá nos resultados quando for realizada uma 
consulta relacionada ao conteúdo daquela página. 
Contudo, para que isso aconteça, é necessário otimizar o site para 
mecanismos de busca, o que chamamos de SEO. Existem diversos sites de 
busca, como o Yahoo e o Bing, mas, com certeza, o maior e mais utilizado 
é o Google. Portanto vamos entender como funcionam os buscadores, 
como o Google, e como aplicar estratégias para melhorar o SEO de um 
website.
Figura 3 – Google
Fonte: Pixabay. 
Web Design em Wordpress
22
De acordo com o próprio Google (2020), sua missão é “organizar 
as informações do mundo para que sejam universalmente acessíveis e 
úteis para todos”. O Google segue três etapas para produzir resultados: 
rastreamento, indexação e veiculação. 
O rastreamento é a etapa na qual o Google descobre os sites 
existentes na web. Isso é feito constantemente, visto que novas páginas 
são criadas todos os dias. Depois que o Google descobre um site, ele 
renderiza a página  e analisa o seu conteúdo, tanto textual quanto 
não  textual, e o layout visual para decidir onde ele deve aparecer nos 
resultados da pesquisa (GOOGLE, 2020).
NOTA:
O Google informa que não aceita pagamento para fazer o 
rastreamento de um site com mais frequência nem para 
atribuir a ele uma classificação mais alta. Portanto você 
deve ter cuidado se receber alguma proposta desse tipo.
O processo de identificação do conteúdo de uma página é 
denominado indexação. O Google analisa o conteúdo da página, cataloga 
arquivos de imagens e vídeos incorporados e registra essas informações 
no índice do Google (GOOGLE, 2020). 
DEFINIÇÃO:
Um índice do Google é o local onde ficam armazenadas 
todas as páginas da web conhecidas por ele. A entrada de 
índice de cada página descreve o conteúdo e o URL de 
uma página (GOOGLE, 2020). O Google apresenta algumas 
dicas para melhorar a indexação de um site:
 • Crie títulos de páginas curtos e significativos.
 • Use cabeçalhos que expressem o assunto da 
página.
 • Use texto em vez de imagens para expressar o 
conteúdo publicado.
Web Design em Wordpress
23
Se o site foi rastreado e indexado, ele pode aparecer nos resultados 
de busca. Essa é a etapa de veiculação. Quando o usuário realiza uma 
consulta, o Google tenta encontrar a resposta no próprio índice  com 
base em vários fatores, como localização, idioma e dispositivo (GOOGLE, 
2020).
SAIBA MAIS:
Você pode saber como funciona a pesquisa do Google 
com mais detalhes, acessando a página “Como funciona 
a pesquisa”, disponível aqui. A página contém informações 
sobre rastreamento e indexação e, ainda, sobre algoritmos 
de pesquisa.
Com base nas informações anteriores, podemos perceber que 
o Google está constantemente trabalhando para rastrear e indexar 
páginas em seu índice. Logo, é importante garantir que seu site seja 
encontrado e obtenha uma boa classificação para que apareça nos 
resultados de pesquisa. Para atingir esse objetivo é que utilizamos as 
técnicas de SEO.
DEFINIÇÃO:
SEO é uma sigla para Search Engine Optimization, que 
significa otimização de websites para mecanismos de 
busca. É um conjunto de técnicas e estratégias que podem 
ser aplicadas em um website, com o objetivo de melhorar o 
seu posicionamento nos mecanismos de busca (OLIVEIRA 
et al. 2011).
Web Design em Wordpress
file:///C:/Users/anapa/Dropbox/TELESAPIENS/ENTREGAR/2022/06%20-%20Junho/Paula/2%20-%20Webdesign%20em%20Wordpress%20-%20urgente/E-book/Unidade%204/%3chttps:/www.google.com/search/howsearchworks/
24
Figura 4 – SEO
Fonte: Pixabay. 
Existem algumas técnicas que podemos aplicar em um website 
WordPress para que ele seja notado pelo Google. Vamos descobrir?
Configurando o SEO
O WordPress éuma plataforma considerada SEO amigável, pois 
facilita a utilização de técnicas de SEO em seus websites, inclusive por 
meio da utilização de plugins. Estrella (2020) destaca algumas estratégias 
que podemos utilizar:
 • Ative a visibilidade nos mecanismos de busca.
 • Instale um plugin de SEO WordPress.
 • Ajuste a estrutura de links permanentes.
 • Adicione seu site ao Google Search Console.
 • Integre o seu site ao Google Analytics.
 • Envie o mapa do site ao Google.
 • Otimize o site para dispositivos móveis.
 • Otimize as imagens do website para sites de busca.
Web Design em Wordpress
25
Vamos explanar as estratégias anteriores. Quando instalamos 
o Apache e, posteriormente, o WordPress, durante a instalação nos foi 
perguntado se gostaríamos ou não de ocultar o site dos mecanismos 
de busca. Se você não tem certeza se o site está visível, basta verificar 
no painel de controle, acessando as configurações e, depois, leitura. A 
opção “evitar que mecanismos de busca indexem este site” deve estar 
desmarcada. 
Você já deve ter percebido pelo conteúdo visto até aqui que os 
plugins oferecem diversas funcionalidades para o seu website, entre elas 
a de ajudar no SEO. A grande vantagem de utilizar um plugin para SEO é 
que você pode aplicar várias técnicas por meio dele. Alguns dos plugins 
mais populares são o Yoast SEO, o All in One SEO Packtive e o Google 
XML Sitemaps.
Eles permitem a otimização de títulos, tags, cabeçalhos, imagens, 
bem como integração com ferramentas do Google e geração de mapas 
de sites automáticos.
Outro aspecto importante no que diz respeito ao SEO é a utilização 
de URLs amigáveis. A estrutura de URL mais limpa do mecanismo de 
pesquisa é a configuração de “nome do post”, na qual você poderá incluir 
seu post ou título da página e até mesmo uma palavra-chave em seu 
URL (ESTRELLA, 2020). Isso pode ser feito nas configurações em links 
permanentes, na qual a opção “nome do post” deve estar marcada.
EXEMPLO: 
Ao acessar alguns sites, você já deve ter se deparado com um URL 
assim: <www.meusite.com/121216515?>. Isso dificulta a indexação da 
página pelo site de busca, visto que não é possível saber do que se trata. 
Com um URL amigável utilizando o nome do post, poderíamos ter um 
URL como este: <www.meusite.com/seo-para-wordpress>.
Podemos perceber que é muito mais fácil identificar o conteúdo 
dessa forma.
Como já citado no início do capítulo, o Google realiza o rastreamento 
e a indexação dos sites na web de forma automática. Todavia, ele 
Web Design em Wordpress
26
disponibiliza uma ferramenta, denominada Google Search Console, 
que mostra como o seu site está se saindo nos mecanismos de busca 
(ESTRELLA, 2020).
NOTA:
Para utilizar a ferramenta, basta adicionar o seu site nela, 
acessando a página aqui. O Search Console é disponibilizado 
de forma gratuita e fornece informações, como (GOOGLE, 
2020): 
 • Confirmar se o Google pode encontrar e rastrear 
seu site.
 • Corrigir problemas de indexação e solicitar a 
reindexação de conteúdo novo ou atualizado.
 • Com que frequência seu site aparece na pesquisa 
Google.
Essa ferramenta é muito útil, pois, por meio do feedback obtido 
por ela, é possível ajustar o SEO para melhorar a classificação do website 
nos resultados de busca. Outra ferramenta interessante é o Google 
Analytics, que mostra o desempenho da sua estratégia de SEO ao analisar 
detalhadamente o tráfego do seu site (ESTRELLA, 2020). Um outro recurso 
utilizado pelos mecanismos de busca é o mapa do site, os sitemaps.
DEFINIÇÃO:
Um sitemap fornece uma visão completa de todas as 
páginas importantes de um website, organizadas de forma 
hierárquica (WEBNODE, 2012).
O mapa permite que o Google faça o rastreamento do site de forma 
mais eficiente. É também possível garantir que determinadas páginas que 
não contribuem para suas classificações não sejam rastreadas, além de 
dar prioridade a suas páginas mais importantes (ESTRELLA, 2020).
Web Design em Wordpress
file:///C:/Users/anapa/Dropbox/TELESAPIENS/ENTREGAR/2022/06%20-%20Junho/Paula/2%20-%20Webdesign%20em%20Wordpress%20-%20urgente/E-book/Unidade%204/%3chttps:/search.google.com/search-console/welcome%3e.
27
O sitemap é um arquivo XML que pode ser gerado por meio de 
um plugin, como o Yoast SEO ou o Google XML Sitemaps. É importante 
atualizá-lo sempre que houver alterações em seu site.
Em relação a otimização para dispositivos móveis, é importante que 
você utilize um tema que seja responsivo. O Google utiliza o desempenho 
e a funcionalidade das versões mobile das suas páginas para determinar 
os seus rankings (ESTRELLA, 2020).
Por fim, é necessário fazer também a otimização das imagens 
usadas no website. Podemos fazer isso por meio da utilização de três 
componentes da imagem: o texto de título da imagem, o alt text e o nome 
do arquivo.
O texto da imagem aparece quando o usuário do site passa o mouse 
por ela. O alt text, o texto alternativo da imagem, fornece um indicador 
para o Google sobre o conteúdo, então você deve alterar o texto para a 
palavra-chave de foco da postagem (ESTRELLA, 2020). Essas informações 
podem ser alteradas ao adicionar a imagem em uma postagem na opção 
editar. 
O nome do arquivo também deve estar relacionado com o conteúdo 
da página, pois, segundo Estrella (2020), pode ajudar a classificação da 
imagem na pesquisa de imagens do Google e trazer tráfego adicional ao 
site.
ACESSE:
O guia “Otimização de mecanismos de pesquisa (SEO) 
para iniciantes”, disponível aqui, contém informações 
de fundamentos de SEO de acordo com as práticas 
recomendadas do Google.
Além das formas faladas até aqui, uma das bases para otimizar 
websites para mecanismos de busca é a aplicação de keywords, o que 
estudaremos nas seções a seguir.
Web Design em Wordpress
https://support.google.com/webmasters/answer/7451184
28
Keywords
As keywords podem ser consideradas a base do SEO, porque são 
palavras e frases que os usuários digitam nos mecanismos de pesquisa 
quando querem realizar uma busca (SOULO, 2020).
EXEMPLO: 
Se você deseja pesquisar como melhorar o SEO de um site 
WordPress, você poderia digitar “seo wordpress” no buscador para que 
sejam retornadas páginas que tenham esse conteúdo.
A grande jogada em relação ao uso das palavras-chave é saber 
quais são as palavras certas para usar em seu site. Explicando melhor, o 
ideal é que sejam utilizadas keywords que representem bem o conteúdo 
e que gerem tráfego para o site por meio das pesquisas do Google.
Para tal, deve ser feita a pesquisa de palavras-chave, que é o 
processo de encontrar palavras que você deseja classificar nos motores 
de busca (SOULO, 2020). Por meio desse processo, é possível descobrir 
quais palavras e/ou frases estão sendo mais utilizadas pelos usuários nas 
buscas. De acordo com Estrella (2020), essa pesquisa permite que você 
desenvolva uma melhor compreensão das necessidades do mercado e 
crie conteúdo que os visitantes do site estão procurando, além de que 
acompanhar o desempenho do que está sendo publicado pode ajudar a 
gerar tráfego valioso para o site.
Soulo (2020) e Estrella (2020) descrevem os passos básicos para 
realizar uma pesquisa de palavras-chave:
 • Crie uma lista de palavras-chave relacionadas ao seu o conteúdo.
 • Use ferramentas de pesquisa de palavras-chave.
 • Analise os concorrentes para descobrir quais palavras estão 
gerando mais tráfego.
 • Veja quais dessas palavras-chave têm concorrência baixa o 
suficiente para conseguir competir.
Web Design em Wordpress
29
Primeiramente, é preciso criar uma lista de palavras que representem 
o seu nicho de atuação. Se você está produzindo cursos online sobre 
WordPress, algumas palavras-chave poderiam ser “ead”, “wordpress”, 
“cursos online”, porém você pode utilizar ferramentas de apoio para isto. 
Com uma lista de palavras-chave em mãos, algumas métricas 
podem ser utilizadas para analisá-las.
Quadro 1 – Métricasde análise de keywords
Métrica Descrição
Volume de 
pesquisa
Informa o número médio de vezes que uma 
palavra-chave é pesquisada a cada mês.
Tendência
Palavras que estão sendo muito utilizadas no 
momento.
Cliques
Número médio de cliques mensais nos 
resultados da pesquisa para uma palavra-
chave.
Potencial de tráfego Verifica não só o potencial de uma palavra em 
si, mas também de sinônimos e variações.
Fonte: Elaborado pelas autoras com base em Soulo (2020).
Existem diversas ferramentas que podem auxiliar na busca por 
Keywords, e o Google possui sua própria ferramenta, o Keyword Planner. 
Essa ferramenta mostra informações, como a concorrência e a média de 
pesquisa mensal das palavras que você deseja utilizar e, ainda, fornece 
ideias de outras palavras relacionadas.
Mas onde utilizar as palavras-chave para otimizar o site para 
mecanismos de busca? Elas devem ser utilizadas em diferentes partes do 
website: na home; nas categorias e subcategorias; nos títulos e subtítulos; 
nas descrições das imagens; e no URL e no texto, de preferência no 
primeiro parágrafo. 
Se você souber escolher e utilizar as palavras-chaves corretamente, 
conseguirá melhorar os resultados da sua página nos sites de busca.
Web Design em Wordpress
30
Metatags
Outro artefato interessante para melhorar o SEO é a utilização de 
metatags. Já estudamos sobre tags anteriormente e, em se tratando de 
SEO, elas indicam para o mecanismo de busca que encontrará informações 
sobre a página, facilitando a leitura (PATEL, 2020). As principais tags para 
SEO são a title, meta description e meta robots.
A tag title é representada por um link nos resultados de busca. Patel 
(2020) destaca a importância dessa tag, pois o termo de pesquisa para o 
qual você quer ranquear precisa aparecer na title tag.
EXEMPLO: 
Se você utiliza “seo para wordpress” como uma keyword, um 
título ideal para sua página ou post seria “Principais técnicas SEO para 
WordPress”. Isso melhoraria sua classificação nos mecanismos de busca.
Quando é realizada uma pesquisa em um mecanismo de busca, 
além do título, também é exibida uma pequena descrição dos resultados. 
Essa descrição é a tag meta description. Ela tem influência, porque uma 
boa descrição atrai mais cliques e gera mais tráfego, um dos fatores mais 
importantes para a otimização (PATEL, 2020). 
Por fim, temos as tags meta robots, que realizam uma comunicação 
direta com os dispositivos de busca. Patel (2020) descreve-as como 
atalhos para que o Googlebot atue com maior precisão e velocidade 
sobre uma página na web. São utilizadas a nível de código com a sintaxe 
<meta=“nome” content=”comando”>. Um exemplo de comando é “noindex”, 
para quando você não quer que uma determinada página seja indexada.
A utilização de metatags associada às palavras-chave corretas 
pode garantir que o seu site se destaque nos mecanismos de busca.
Web Design em Wordpress
31
RESUMINDO:
Neste capítulo, entendemos o funcionamento dos 
mecanismos de buscas, como o Google, e como otimizar 
o website para aparecer nos resultados das buscas. 
Conhecemos as principais estratégias para SEO, como a 
utilização de ferramentas do próprio Google e de plugins 
para sites WordPress. Ressaltamos a importância da 
otimização de imagens e URL e concluímos explicando 
como utilizar palavras-chave e metatags para obtenção de 
melhores resultados nos sites de busca.
Web Design em Wordpress
32
Inserindo Formulários
OBJETIVO:
Neste capítulo, vamos entender a importância de se utilizar 
um formulário como meio de comunicação entre usuário 
e site. Vamos conhecer os tipos de formulários existentes 
e concluiremos aprendendo como inserir formulários em 
um website. .
O formulário é um canal de comunicação entre o usuário e o website. 
Utilizar formulários é a forma mais simples de coletar informações, seja 
para obter dados do cliente, utilizar informações para personalização de 
conteúdo ou para permitir que o usuário entre em contato direto por meio 
do website.
Figura 5 – Exemplo de formulário
Fonte: Freepik. 
Web Design em Wordpress
33
QuestionPro (2020) resume alguns tipos de formulários que podem 
ser utilizados para coleta de dados:
 • Formulário de inscrição para um boletim informativo.
 • Formulário para capturar leads.
 • Registro de eventos.
 • Comentários dos clientes.
 • Formulário para login.
 • Formulário de solicitação de serviços.
Os formulários de inscrição para boletins informativos são as listas 
de e-mails. Diversos websites oferecem essa opção para que o usuário 
possa se cadastrar e receber atualizações sobre o conteúdo do site ou 
ofertas de produtos em sua caixa de e-mail. 
Um lead é um potencial cliente interessado em um produto, logo 
um formulário para capturar leads é utilizado com a intenção de oferecer 
vendas diretas a ele (QUESTIONPRO, 2020). Após realizar uma venda, por 
exemplo, você pode enviar um link com uma página do seu site por e-mail 
que contenha um formulário em que é possível que os clientes deixem 
comentários a respeito do produto ou serviço adquirido.
Aquela tela de login, disponível em diversos tipos de sites, também 
é um tipo de formulário. Em alguns sites, como os de redes sociais, só é 
possível utilizar o site após a efetivação do login. Por outro lado, existem 
páginas que oferecem uma área exclusiva, podendo ser gratuita ou 
premium, em que apenas usuários cadastrados podem ter acesso.
QuestionPro (2020) destaca três dicas a serem levadas em 
consideração na criação de formulários:
 • Mantenha-o simples – formulários com muitas entradas podem 
não ser atraentes aos usuários, que perdem interesse em 
respondê-los.
Web Design em Wordpress
34
 • Otimização para dispositivos móveis – é importante que os 
formulários estejam claros e limpos para serem respondidos em 
qualquer dispositivo.
 • Validação de dados – bons formulários avisam ao usuário em 
casos de erro de preenchimento, como colocar um número a 
menos em um campo de telefone, por exemplo.
IMPORTANTE:
Na primeira unidade, quando estudamos a linguagem 
HTML, já vimos como criar um formulário utilizando essa 
linguagem. Pontuamos também que os elementos de 
um formulário não são somente os campos de texto, mas 
também podem ser as caixas de seleção, botões de opção 
e os botões de envio.
Baseado nas informações até o momento, você pode perceber 
que, basicamente, qualquer espaço que receba dados do usuário em um 
website é um formulário. Quando tratamos de websites em geral, um dos 
formulários mais comuns e que fornecem uma comunicação direta entre 
o usuário e o site, é o formulário de contato, que estudaremos a seguir.
Formulário de Contato
Como já falamos anteriormente, um formulário é um espaço em 
uma página web onde o usuário interage com o conteúdo, adicionando 
informações a ele. Eles podem ser utilizados para coletar diferentes 
tipos de dados, porém o mais básico que deve ser utilizado em qualquer 
website é o formulário de contato.
Web Design em Wordpress
35
Figura 6- Formulário de contato
Fonte: Freepik.
Um formulário de contato é aquele no qual o usuário pode enviar 
uma mensagem para o proprietário do site, sem que seja necessário utilizar 
meios externos, como o e-mail, por exemplo. Para Gonçalves (2019), ter 
um formulário de contato é uma obrigação, pois, além de engajar melhor 
com seu visitante, permite que os usuários se comuniquem com você de 
forma rápida e simples.
Ainda de acordo com Gonçalves (2019), a utilização de formulários 
de contato pode trazer algumas melhorias ao website, como:
 • Disponibilidade – mesmo que você não esteja disponível em um 
determinado momento, os usuários podem enviar uma mensagem 
e aguardar o retorno.
 • Informações valiosas – você pode utilizar os formulários para obter 
feedback sobre o website.
 • Segurança – é uma forma de o usuário poder entrar em contato 
diretamente pelo website, não sendo necessário que seja 
divulgado um endereço dee-mail, além de prevenir spam.
Apesar de alguns temas disponibilizarem opções de criação de 
formulários, utilizar plugins pode ser muito mais interessante. Um plugin 
Web Design em Wordpress
36
de formulário básico apresenta alguns campos de preenchimento e 
poucas ferramentas de design. Os mais avançados de formulário de 
contato possuem suporte para lógica condicional, ferramentas de design 
e opções de envio de arquivos (JACKSON, 2019).
Quadro 2– Recursos dos plugins de formulários
Recurso Descrição
Formulários personalizados
Oferecem diversas opções de 
formulário.
Construtores visuais
Montagem de formulários usando 
“arrastar e soltar”.
Lógica condicional
Exibe/oculta elementos do 
formulário baseado nas seleções do 
usuário.
Comunicação
Sistema de comunicação para avisar 
quando uma mensagem chega.
Envio de arquivos no front-
end 
Permite upload de arquivos do 
usuário, como um print.
Responsividade
Ajustam o formulário de acordo com 
o dispositivo.
Proteção contra spam Prevenção de spams.
Fonte: Elaborado pelas autoras com base em Jackson (2019).
Podemos perceber que os plugins oferecem diversos recursos de 
apoio para construção de formulários e nos permitem criar formulários 
personalizados para atender ao nosso objetivo.
Existem diversos plugins disponíveis, cada um com suas 
particularidades. Alguns são:
 • Contact Form 7.
Web Design em Wordpress
37
 • WPForms.
 • Gravity Forms.
 • Ninja Forms.
 • Entre outros.
Você pode fazer uma comparação entre os plugins para escolher 
qual é o melhor que se adequa às suas necessidades. 
Vamos criar um formulário de contato utilizando o plugin Contact 
Form 7, que permite criar e gerenciar vários formulários. Após a instalação 
e ativação do plugin, no menu lateral do seu painel de controle WordPress, 
aparecerá um novo item, denominado “Contato”. Ao clicar nesse item, o 
painel para criação e gerenciamento de formulários é aberto.
NOTA:
Todos os formulários criados ficam disponíveis em uma 
lista, o que facilita o gerenciamento deles. Isso também 
facilita caso você queira inserir um formulário já existente 
em outra área do site.
Quando escolhemos adicionar um novo formulário de contato, um 
modelo de formulário-padrão é exibido, já contendo os campos básicos 
de um form: nome, e-mail, assunto e mensagem (LAGO, 2014). O código 
deste modelo está assim:
<label> Seu nome (obrigatório)
 [text* your-name] </label>
<label> Seu e-mail (obrigatório)
 [email* your-email] </label>
<label> Assunto
 [text your-subject] </label>
<label> Sua mensagem
 [textarea* your-message] </label>
Web Design em Wordpress
38
[submit “Enviar”]
Porém acima existem diversos outros campos que podem ser 
inseridos nesse formulário, como telefone, arquivo, caixas de marcação, 
botões, entre outros.
Como já falamos, podemos inserir em um formulário uma opção 
para que o usuário envie um arquivo anexo a sua mensagem. Para inserir 
esse campo no modelo padrão, clique no campo arquivo e uma série 
de opções a respeito desse campo serão oferecidas: nome, opções 
para limitar o tamanho e o título do arquivo e, ainda, tornar esse campo 
obrigatório ou não.
EXEMPLO: 
Se editarmos os campos do arquivo limitando o tamanho da 
imagem em 8024 bytes e os tipos aceitos em jpg e png, uma nova linha 
de código será adicionada no modelo padrão:
[file print limit:8024 filetypes:jpg|png]
Caso você marque a opção de tornar esse campo obrigatório, o 
código fica assim:
[file* print limit:8024 filetypes:jpg|png]
Após escolher todos os campos desejados para o seu formulário, 
você deve configurar para qual e-mail serão enviadas as mensagens 
deixadas no site. Além disso, também é possível personalizar o padrão 
de como essas mensagens serão exibidas quando transformadas em um 
e-mail. 
Por fim, você pode personalizar as mensagens que são exibidas 
quando o usuário enviar a mensagem, cometer um erro ou deixar de 
preencher um campo obrigatório, por exemplo.
Web Design em Wordpress
39
NOTA:
O asterisco é o símbolo utilizado como padrão para indicar 
que um determinado campo é obrigatório. Ou seja, o usuário 
não conseguirá enviar a mensagem sem o preenchimento 
dele.
Quadro 3 – Modelo de formulário
Nome* [insira seu nome aqui]
Email* [insira seu e-mail aqui]
Assunto [insira o assunto da mensagem]
Mensagem* [escreva a mensagem aqui]
Arquivo [upload de arquivo]
Fonte: Elaborado pelas autoras com base em Lago (2014).
Pronto, agora é só escolher um título para o formulário, salvá-lo e 
ele estará pronto. Se você observar a lista de formulários, este que acabou 
de ser gerado estará lá. Mas como adicioná-lo ao website? 
Ao lado do título do form, está uma opção chamada “shortcode”, 
que contém um código assim:
[contact-form-7 id=”76” title=”Título do Formulário”]
É esse código que deve ser utilizado para adicionar o form na área 
desejada.   Copie o  shortcode  e cole dentro da página, post ou widget 
onde você queira exibir o formulário (LAGO, 2014).
Após esses passos, você já possui um formulário de contato em 
sua página para que os usuários consigam enviar mensagens no website.
Web Design em Wordpress
40
Outros Formulários
Além dos formulários de contato, pode ser necessário inserir outros 
tipos de forms em sua página. Contudo, você pode observar que o plugin 
que utilizamos anteriormente, o Contact Form 7, permite apenas a criação 
de formulários de contato.
NOTA:
Por esse motivo, ressaltamos anteriormente que a escolha 
de qual plugin utilizar deve ser baseada no tipo de recurso 
fornecido por ele e se atende as suas necessidades. 
Um outro plugin que podemos utilizar na geração de formulário 
é o WPForms. Seu uso é específico  para quem deseja implementar e 
inserir formulários em páginas de sites, independentemente de qual seja 
a intenção (SOUZA, 2020).
Uma característica desse plugin é que ele oferece diferentes tipos 
de formulários já totalmente prontos, mas que podem ser personalizados, 
inclusive personalizando a sua aparência. De acordo com Souza (2020), os 
principais tipos de formulários que podem ser criados por esse plugin são:
 • Formulário para realizar pesquisas.
 • Inscrição de contato.
 • Formulários com anexos.
 • Formulário para realização de pagamentos.
 • Calculadora de preços e fretes.
Vamos criar um formulário para que o usuário possa se inscrever 
em uma lista de e-mails ou newsletter do site utilizando esse plugin. 
Acessando o painel do WPForms, são apresentadas algumas 
opções de modelos já prontos, porém vamos escolher a opção “formulário 
em branco”. Uma nova janela é aberta, na qual, à direita, se encontra a tela 
do formulário que ainda está em branco e, à esquerda, todos os campos 
que podemos adicionar ao form.
Web Design em Wordpress
41
NOTA:
Diferentemente do Contact Form 7, o WPForms apresenta 
uma plataforma apenas de “arrastar e soltar” e não exibe os 
códigos HTML. Porém, na sua versão premium, o recurso 
de adicionar códigos HTML é liberado.
Um formulário para a inscrição em um newsletter costuma conter 
apenas o nome, sobrenome e e-mail do usuário que deseja se inscrever. 
Então basta escolher esses campos e organizá-los no formulário em 
branco. Após finalizar a criação do form, você pode configurar como 
aquele novo usuário será inserido na lista de e-mails e uma mensagem 
que será exibida ao usuário quando ele finalizar a inscrição.
Após salvar o formulário, você pode adicioná-lo em qualquer parte 
da sua página, também por meio da utilização de um shortcode.
Esse foi apenas um exemplo de outro tipo de formulário que 
podemos criar utilizando plugins, mas você pode criar vários outros tipos 
para incrementar o seu website. 
RESUMINDO:
Chegamos ao fim de mais um capítulo, aprendendo como 
adicionar uma solução valiosa para criar um canal de 
comunicação entre o usuário e o website: o formulário. 
Conceituamos o que é um formulário e os diversos tipos 
existentes. Falamos sobre o queé um formulário de contato 
e como utilizá-lo em um website. Por fim, vimos como 
utilizar plugins para criar e adicionar diferentes tipos de 
forms nas variadas áreas do site.
Web Design em Wordpress
42
Publicando o Website
OBJETIVO:
Neste capítulo, veremos como publicar o website, 
migrando-o do servidor local para um de hospedagem, 
efetuando ajustes no tema e realizando a checagem e 
correção de erros que podemos encontrar.
Banners
No capítulo anterior, vimos como adicionar redes sociais para 
incrementar o website. Outro recurso que podemos utilizar é a adição de 
banners.
DEFINIÇÃO:
Os banners são imagens localizadas em pontos estratégicos 
de um site para chamar atenção para um link, que pode 
ser uma propaganda, parceria, um programa de afiliados, 
entre outros (HOSTGATER, 2016). Os banners são clicáveis 
e podem ser estáticos ou animados.
Figura 7 – Exemplo de um banner
Fonte: Freepik. 
Web Design em Wordpress
43
Você pode adicionar banners em diferentes áreas de um website, 
como no cabeçalho, rodapé ou na barra lateral por meio da adição de 
widgets. Como não existe um widget-padrão para adição de banner, 
podemos utilizar um plugin para fazê-lo.
Vamos adicionar um banner utilizando o plugin WordPress 
Ad Widget. Esse plugin permite adicionar banners na barra lateral do site. 
Após instalá-lo, ele estará disponível no menu de widgets no painel de 
controle do WordPress.
Para criar um banner a partir dele, é muito simples:
PASSO A PASSO: 
Você deve, primeiramente, acessar o painel de widgets. 
1. Adicionar o widget Ad Image/Banner Ad a sua sidebar, que é o 
local em que o banner será exibido. 
2. Após isso, é necessário fazer o upload da imagem que formará o 
banner. 
3. Por fim, você irá configurar o anúncio adicionando um nome e o 
link para o qual aquele banner irá redirecionar. 
4. Salve as alterações e o banner estará pronto.
Você pode utilizar banners para veicular anúncios dentro do seu 
site, ou também para chamar atenção para um conteúdo específico, seja 
de uma fonte externa ou do seu próprio website.
Exportando o Site Localhost para uma 
Hospedagem
Quando instalamos a plataforma WordPress para a construção de 
um website, configuramos o site para rodar em localhost, ou seja, ele está 
disponível apenas na máquina em foi instalado. 
Para que o site possa ser publicado e esteja disponível online, 
é necessário adquirir um domínio e migrá-lo para um servidor de 
hospedagem.
Web Design em Wordpress
44
NOTA:
Um nome de domínio é um endereço que as pessoas 
usam para encontrar seu site na internet (LONGEN, 2020), 
ou, melhor, é a URL que digitamos no navegador para 
acessar uma página. Já o provedor de hospedagem  é o 
responsável por armazenar os dados do site em servidores 
e enviar essas informações para os navegadores (LONGEN, 
2020). Esses serviços de hospedagem é que permitem que 
os sites sejam publicados na web.
Quadro 4 – Servidores de hospedagem
Servidor Características
HostGator Bom custo-benefício.
WebLink Suporte via chat e e-mail.
GoDaddy Planos de hospedagem com domínio grátis.
UOL Host Servidor no Brasil e suporte por telefone, chat e e-mail.
Fonte: Elaborado pelas autoras com base em Melhor Hospedagem de Sites (2020).
Para obter tanto um domínio como uma hospedagem é necessário 
comprálos. Porém não é como adquirir um produto que compramos 
apenas uma vez. A hospedagem costuma ser paga de forma mensal, 
enquanto o domínio de forma anual. Após contratar um servidor de 
hospedagem, podemos iniciar os preparativos para migrar o site em 
localhost para lá.
O primeiro passo a ser feito é exportar uma cópia do banco de 
dados local do website. Para realizar essa tarefa, devemos utilizar o 
phpMyAdmin, digitando o endereço <http://localhost/phpmyadmin> no 
navegador. 
Web Design em Wordpress
45
NOTA:
Você deve se lembrar que já utilizamos o phpMyAdmin 
para criar um banco de dados para o site quando fizemos a 
instalação do Apache em WordPress.
Após acessar o painel do phpMyAdmin, devemos acessar o menu 
“Exportar” para iniciar a exportação do banco de dados. Você deve 
escolher “salvar em formato SQL” e clicar em “executar” para realizar o 
download do seu banco de dados.
Em seguida, devemos transferir os arquivos locais do site WordPress 
para o servidor de hospedagem. Primeiramente, acesse a pasta em que se 
encontram os arquivos em seu computador, selecione todos os arquivos 
e gere um arquivo compactado. Depois, você deve acessar o CPanel da 
hospedagem contratada e acessar o gerenciador de arquivos onde você 
encontrará uma lista de diretórios.
Devemos procurar o diretório “public_html”, que é o local onde 
os arquivos do site devem estar. Então, realizamos o upload do arquivo 
compactado que criamos anteriormente. 
Após realizar a importação, basta descompactar o arquivo e todos 
os arquivos do site já estarão no servidor de hospedagem, porém ainda 
não finalizamos. Precisamos importar, também, a cópia do banco de 
dados que fizemos no primeiro passo.
Primeiramente, é necessário criar um novo banco de dados no 
painel de controle do servidor de hospedagem. 
IMPORTANTE:
Você deve guardar os dados do nome do banco e o usuário 
e a senha de acesso para poder acessá-lo posteriormente. 
Não se esqueça!
Com o banco criado, você pode observar que ele estará vazio. 
Vamos, então, clicar em “importar” para adicionar o arquivo SQL 
gerado anteriormente. Todas as tabelas do banco de dados local serão 
adicionadas ao banco de dados da hospedagem.
Web Design em Wordpress
46
Como as configurações do banco de dados estavam apontadas 
para o site em localhost, você deve encontrar a tabela “wp_options” e 
alterar os registros “siteurl” e “home” com o endereço do seu site.
Para finalizar, você deve voltar ao gerenciador de arquivos e editar 
o arquivo “wp-config.php”, adicionando informações do banco de dados 
que você criou no servidor de hospedagem. Pronto, se tudo ocorrer bem, 
o seu site já estará online.
REFLITA:
Podemos observar que o processo de migração de um 
site local para um servidor de hospedagem não é tão 
simples. Logo, pode ser mais prático desenvolver o website 
hospedando-o diretamente em um servidor. Por outro lado, 
ao desenvolver o site de forma local, você pode fazer as 
alterações sem se preocupar com falhas que poderiam 
quebrar o site. Além disso, só seria necessário contratar 
uma hospedagem quando a página estivesse pronta, o que 
diminuiria os custos. 
Checagem de Erros
Ao finalizar a construção de um website, é importante verificar se 
tudo está funcionando corretamente e, caso não esteja, corrigir as falhas.
Figura 8 – Erro
Fonte: Pixabay. 
Web Design em Wordpress
47
Uma das primeiras coisas que devem ser verificadas é a velocidade 
de carregamento do seu site. Para realizar essa tarefa, você pode utilizar 
uma ferramenta que testa a velocidade do site. Pamungkas (2019) ressalta 
que alguns fatores devem ser levados em consideração para melhorar a 
precisão do teste:
 • Número de testes – realize vários testes em momentos diferentes, 
pois resultados podem ser diferentes dependendo do tráfego do 
site.
 • Locais de teste – se o site é acessado globalmente, devem ser 
feitos testes em diferentes regiões, caso contrário, apenas na 
região em que se encontra seu público.
 • Alvos de teste – teste diferentes posts e páginas para realizar uma 
melhor análise.
Os testes de velocidades mais completos informam onde pode estar 
ocorrendo o problema de carregamento e, ainda, fornecem sugestões 
de como resolver. Alguns problemas desse tipo podem ser causados 
pela utilização excessiva de plugins, pela não compactação dos arquivos 
do site e até pela escolha errada do servidor de hospedagem. Somente 
após encontrar a fonte do problema é que podemos ir em busca de uma 
solução.
EXEMPLO: 
O navegador precisa carregar diferentes tipos de arquivo, como 
HTML, CSS e Java Script e, se esses arquivos estiverem pesados, isso 
pode afetar o tempo decarregamento da página. Uma solução para esse 
problema é utilizar um tipo de compressão chamada GZIP para compactar 
esses tipos de arquivo. Isso pode ser feito habilitando um plugin de cache 
do WordPress.
Outra coisa que deve ser verificada é se todos os links do seu site 
estão funcionando corretamente. 
Como seria custoso fazer isso de forma manual, existem diversas 
ferramentas que podem ajudar a encontrar link quebrados. Caso sejam 
Web Design em Wordpress
48
encontrados links quebrados, você pode redefinir a estrutura de links 
permanentes para corrigilos. 
PASSO A PASSO: 
Acesse “Configurações” > “Links Permanentes”
1. Em “Configurações comuns”, altere a estrutura de links para uma 
diferente da qual você está utilizando.
2. Salve as alterações.
3. Volte em configurações comuns e altere a estrutura de links 
novamente para a que estava anteriormente.
4. Salve as alterações.
5. Pronto, sua estrutura de links foi redefinida.
Por fim, você pode verificar se o seu site não apresenta problemas 
de segurança. Apiki (2019) sugere um checklist para garantir a segurança 
do seu site:
 • Página de login – utilizar senhas fortes e autenticação em duas 
etapas.
 • Painel de controle – coloque uma senha para acessá-lo e 
mantenha o WordPress sempre atualizado.
 • Temas – utilize temas de fontes confiáveis e mantenha o tema que 
está sendo usado atualizado.
 • Plugins – mantenha todos os plugins sempre atualizados e os 
obtenha de fontes conhecidas.
 • Banco de dados – utilize senhas fortes e faça backups constantes.
 • Hospedagem – verifique se o seu servidor de hospedagem é 
realmente seguro.
Se você utilizar as dicas anteriores, isso pode prevenir a abertura de 
brechas e problemas de segurança em seu website.
Web Design em Wordpress
49
Ajustes de Tema
O tema é uma parte importante do website, portanto, se você estiver 
utilizando um tema que não se adeque mais aos propósitos do site, você 
pode alterá-lo realizando um upload de um novo tema.
IMPORTANTE:
Trocar de tema pode parecer algo simples, porém, quando 
você alterna para um novo tema, pode bagunçar 
com a aparência do seu site e até mesmo com suas 
funcionalidades (DUO, 2020).
Porém Duo (2020) recomenda que, para alterar com sucesso e 
segurança o tema WordPress, podemos seguir os seguintes passos:
1. Configure uma cópia de testes do seu website.
2. Instale seu novo tema e visualize-o.
3. Ative seu novo tema.
4. Solucione erros, faça ajustes e substitua os elementos que 
estiverem faltando.
5. Coloque seu website de testes no ar.
Podemos configurar uma cópia de testes do site de duas maneiras. 
A primeira e mais fácil é por meio do próprio servidor de hospedagem 
que pode oferecer essa funcionalidade. Se não é possível fazer isso na 
hospedagem, a outra maneira é configurar um ambiente WordPress local, 
como já fizemos anteriormente para testar as alterações. 
Porém gerar uma cópia de testes de forma local pode ser uma 
opção trabalhosa, já que, nesse caso, você precisaria criar outra cópia do 
site quando estiver fazendo as alterações e carregá-la de volta para seu 
servidor quando tiver terminado (DUO, 2020).
Após instalar e ativar o novo tema, vamos visualizá-lo para descobrir 
o que precisamos consertar no website. Com a alteração do tema, 
algumas partes do website podem estar quebradas, de acordo com Duo 
(2020), incluindo:
 • Widgets e shortcodes específicos do tema.
Web Design em Wordpress
https://kinsta.com/pt/blog/restaurar-wordpress-partir-backup/
https://kinsta.com/pt/blog/restaurar-wordpress-partir-backup/
50
 • A barra de navegação e barra lateral.
 • Seções específicas dentro de suas páginas, geralmente em virtude 
de problemas de formatação ou elementos que estão faltando.
Precisamos, então, começar a resolver esses problemas. Enquanto 
estiver trabalhando no site, é importante certificar-se de que ele não 
perderá nenhuma funcionalidade primordial (DUO, 2020). 
Isso pode acontecer quando o tema novo não possui uma 
funcionalidade que estava disponível no tema anterior. Nesse caso, você 
pode adicionar plugins com as funcionalidades desejadas. 
Podemos acessar o painel WordPress Customizer para configurar 
o tema e realizar os ajustes necessários. Caso a barra lateral esteja 
bagunçada, pois ela é formada por widgets que podem variar de um tema 
para o outro, devemos acessar o painel de widgets para reorganizá-la e 
adicionar os widgets necessários. 
Após realizar todos os ajustes necessários, devemos colocar a cópia 
de testes do site online para nos certificar de que tudo está funcionando 
corretamente.
Caso tudo esteja funcionando bem, isso significa que a alteração de 
tema foi concluída com sucesso.
RESUMINDO:
Finalizamos este capítulo no qual fizemos os últimos 
ajustes para que possamos publicar um site na web. Vimos, 
por exemplo, como utilizar o recurso de banner para atrair a 
atenção dos usuários para algo específico, geralmente um 
anúncio. Além disso, como estávamos desenvolvendo o site 
em localhost, aprendemos uma forma de transportá-lo para 
um servidor de hospedagem para que ele fique disponível 
online. Seguimos pontuando algumas checagens que 
devemos realizar para verificar se não existem erros que 
podem atrapalhar o desempenho e a segurança do website 
e, por fim, fizemos algumas considerações de como realizar 
ajustes caso seja necessário alterar o tema do website.
Web Design em Wordpress
51
REFERÊNCIAS
APIKI. Checklist de segurança para WordPress. 2019. Disponível 
em: https://blog.apiki.com/checklist-seguranca-wordpress/. Acesso em: 
18 ago. 2020.
DUO, M. Como alterar um tema WordPress (sem quebrar seu 
website). Kinsta, 2020. Disponível em: https://kinsta.com/pt/blog/como-
alterar-tema-wordpress/. Acesso em: 20 ago. 2020.
ESTRELLA, C. 30 técnicas de SEO WordPress para alavancar seu 
site no Google. Hostinger, 2020. Disponível em: https://www.hostinger.
com.br/tutoriais/30-tecnicas-de-seo-para-wordpress/. Acesso em: 13 
ago. 2020.
GOOGLE. Como a pesquisa google funciona. 2020. Disponível 
em: https://support.google.com/webmasters/answer/70897?hl=pt-BR. 
Acesso em: 13 ago. 2020.
GOOGLE. Otimização de mecanismos de pesquisa (SEO) 
para iniciantes. 2020. Disponível em: https://support.google.com/
webmasters/answer/7451184. Acesso em: 13 ago. 2020.
GONÇALVES, A. 7 melhores plugins de formulário de contato para 
WordPress. Hostinger, 2019. Disponível em: https://www.hostinger.com.
br/tutoriais/plugin-formulario-de-contato-wordpress/. Acesso em: 14 
ago. 2020.
JACKSON, B. Os 18 melhores plugins WordPress de formulário de 
contato (comparados e revisados). Kinsta, 2019. Disponível em: https://
kinsta.com/pt/blog/wordpress-plugins-formulario-contato/. Acesso em: 
14 ago. 2020.
JERSYER, B. Como criar um portal de boas-vindas no WordPress. 
2020. Disponível em: https://pt.blogpascher.com/encaixes-wordpress/
how-create-a-portal-de-welcome-to-wordpress. Acesso em: 15 ago. 
2020.
Web Design em Wordpress
https://blog.apiki.com/checklist-seguranca-wordpress/
https://kinsta.com/pt/blog/como-alterar-tema-wordpress/
https://kinsta.com/pt/blog/como-alterar-tema-wordpress/
https://www.hostinger.com.br/tutoriais/30-tecnicas-de-seo-para-wordpress/
https://www.hostinger.com.br/tutoriais/30-tecnicas-de-seo-para-wordpress/
https://support.google.com/webmasters/answer/70897?hl=pt-BR
https://support.google.com/webmasters/answer/7451184
https://support.google.com/webmasters/answer/7451184
https://www.hostinger.com.br/tutoriais/plugin-formulario-de-contato-wordpress/
https://www.hostinger.com.br/tutoriais/plugin-formulario-de-contato-wordpress/
https://kinsta.com/pt/blog/wordpress-plugins-formulario-contato/
https://kinsta.com/pt/blog/wordpress-plugins-formulario-contato/
https://pt.blogpascher.com/encaixes-wordpress/how-create-a-portal-de-welcome-to-wordpress
https://pt.blogpascher.com/encaixes-wordpress/how-create-a-portal-de-welcome-to-wordpress
52
LAGO, S. Como criar um formulário de contato no WordPress. 
Canalwp,2014. Disponível em: http://www.canalwp.com/tutorial-
wordpress/como-criar-um-formulario-de-contato-wordpress/. Acesso 
em: 14 ago. 2020.
LONGEN, A. Diferença entre domínio e hospedagem. Hostinger, 
2020. Disponível em: https://www.hostinger.com.br/tutoriais/diferenca-
entre-dominio-e-hospedagem. Acesso em: 19 ago. 2020.
MARQUES, B. Como adicionar ícones de redes sociais no WordPress. 
Hostinger, 2019. Disponível em: https://www.hostinger.com.br/tutoriais/
adicionar-icones-redes-sociais/. Acesso em: 14 ago. 2020.
OLIVEIRA, A. M. de et al. A contribuição do bibliotecário na otimização 
de websites para os mecanismos de busca. Perspectivas em Gestão & 
Conhecimento. João Pessoa, v. 1, Número Especial, p. 137-159, out. 2011
PAMUNGKAS, R. B. Como executar um teste de velocidade 
de site com GTmetrix. Hostinger, 2019. Disponível em: https://www.
hostinger.com/tutorials/gtmetrix-for-testing-websites-speed?_
ga=2.174077734.541018292.1597922447-564781279.1593472671. Acesso em: 
18 ago. 2020.
PATEL, N. Meta tags: o que são, lista de meta tags e quais servem 
para SEO. 2020. Disponível em: https://neilpatel.com/br/blog/meta-
tags/. Acesso em: 18 ago. 2020.
SOULO, T. Como fazer pesquisa de palavras-chave para  SEO. 
2020. Disponível em: https://ahrefs.com/blog/keyword-research/. 
Acesso em: 13 ago. 2020.
SOUZA, I. de. WPForms: aprenda a criar formulários no WordPress 
usando este plugin. Rockcontent, 2020. Disponível em: https://
rockcontent.com/br/blog/wpforms/. Acesso em: 14 ago. 2020.
Web Design em Wordpress
http://www.canalwp.com/tutorial-wordpress/como-criar-um-formulario-de-contato-wordpress/
http://www.canalwp.com/tutorial-wordpress/como-criar-um-formulario-de-contato-wordpress/
https://www.hostinger.com.br/tutoriais/diferenca-entre-dominio-e-hospedagem
https://www.hostinger.com.br/tutoriais/diferenca-entre-dominio-e-hospedagem
https://www.hostinger.com.br/tutoriais/adicionar-icones-redes-sociais/
https://www.hostinger.com.br/tutoriais/adicionar-icones-redes-sociais/
https://www.hostinger.com/tutorials/gtmetrix-for-testing-websites-speed?_ga=2.174077734.541018292.1597922447-564781279.1593472671
https://www.hostinger.com/tutorials/gtmetrix-for-testing-websites-speed?_ga=2.174077734.541018292.1597922447-564781279.1593472671
https://www.hostinger.com/tutorials/gtmetrix-for-testing-websites-speed?_ga=2.174077734.541018292.1597922447-564781279.1593472671
https://neilpatel.com/br/blog/meta-tags/
https://neilpatel.com/br/blog/meta-tags/
https://ahrefs.com/blog/keyword-research/
https://rockcontent.com/br/blog/wpforms/
https://rockcontent.com/br/blog/wpforms/
	_Hlk48814848
	_Hlk48814881
	Adicionando Serviços ao Website
	Adicionando Conteúdo
	Adicionando Mídias Sociais
	Portal de Boas-Vindas
	SEO do Website
	Configurando o SEO
	Keywords
	Metatags
	Inserindo Formulários
	Formulário de Contato
	Outros Formulários
	Publicando o Website
	Banners
	Exportando o Site Localhost para uma Hospedagem
	Checagem de Erros
	Ajustes de Tema