Wordpress 3

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
O WordPress .................................................................................................. 12
WordPress.com Versus WordPress.org ........................................................................... 14
Características ................................................................................................................................... 16
Funcionalidades ............................................................................................................................... 18
Extensões .............................................................................................................................................. 19
Temas .................................................................................................................................... 19
Plugins ................................................................................................................................. 20
Esqueleto de um Website .......................................................................22
Layout do WordPress ...................................................................................................................23
Header ..................................................................................................................................23
Content ................................................................................................................................25
Sidebar .................................................................................................................................25
Sidebar .................................................................................................................................26
Trabalhando com Imagens ......................................................................................................28
Instalando um Servidor Apache............................................................ 31
História ....................................................................................................................................................32
Características ...................................................................................................................................34
Instalando no Linux ....................................................................................................................... 36
Instalando no Windows ............................................................................................................. 36
Website em Localhost .............................................................................. 41
Configurando o Banco de Dados MySQL .....................................................................44
Instalando o WordPress ..............................................................................................................45
9
UNIDADE
02
Web Design em Wordpress
10
INTRODUÇÃO
Com o avanço da utilização do ambiente virtual para o 
compartilhamento e a comercialização de informações entre pessoas, 
empresas e produtos, faz-se necessário manter presença online para não 
ficar para trás.
Por isso, hoje em dia, ter um bom website é importante para se 
destacar no mundo online. Então, precisamos de ferramentas de apoio 
que podem nos ajudar nessa empreitada. 
Portanto esta unidade explanará os conhecimentos iniciais para 
quem deseja entrar no mundo de construção de websites utilizando uma 
plataforma poderosa: o WordPress. Vamos lá!
Web Design em Wordpress
11
OBJETIVOS
Olá. Seja muito bem-vindo à Unidade II. Nosso objetivo é auxiliar 
você no desenvolvimento das seguintes competências profissionais até o 
término desta etapa de estudos:
1. Assimilar o funcionamento geral do WordPress, identificando seus 
principais elementos, recursos e suas funcionalidades.
2. Criar o esqueleto de um website no WordPress, exportando 
imagens e criando as divs para as suas principais partes funcionais.
3. Instalar um servidor Apache para suportar um website em 
WordPress. 
4. Instalar um servidor em localhost para suportar um website em 
WordPress. 
Então? Preparado para adquirir conhecimento sobre um assunto 
fascinante e inovador como esse? Vamos lá!
Web Design em Wordpress
12
O WordPress
OBJETIVO:
Neste capítulo, iniciaremos nossos estudos sobre a 
plataforma WordPress. Primeiramente, falaremos sobre 
a sua história e as versões. Posteriormente, pontuaremos 
suas principais características e, por fim, conheceremos 
suas principais funcionalidades. Bons estudos!.
Na unidade anterior, vimos que o WordPress é um sistema 
gerenciador de conteúdo que permite a edição de conteúdo regularmente, 
sem a necessidade de um editor HTML tradicional (KINSTA, 2020). 
A primeira versão oficial do WordPress foi lançada em 2004, mas 
seu desenvolvimento iniciou-se em 2003, quando Matt Mullenweg e Mike 
Little começaram a construir uma nova plataforma para blogs criada a 
partir de um software chamado b2/cafelog (LONGEN, 2020).
Quadro 1 – Versões do WordPress
Versão Características
1.0 (Davis)
Comentários moderados, links amigáveis, 
editor de conteúdo.
1.2 (Mingus) Suporte a plugins.
1.5 (Strayhorn) Adição dos temas.
2.0 (Duke)
Melhoria das ferramentas de 
administração, upload de imagens.
2.9 (Carmen) Edição de imagens.
3.0 (Thelonious)
Tipos customizados de posts, existência 
de vários sites em uma única instalação.
3.9 (Smith) Listas de reprodução de áudios e vídeos.
Web Design em Wordpress
13
4.0 (Benny)
Incorporação de conteúdo ao site, como 
tweets e vídeos do Youtube.
4.5 (Coleman)
Pré-visualização de como o site ficará em 
tablets e smartphones.
5.0 (Bebo) Edição baseada em blocos.
5.4 (Adderley)
Interface mais limpa, melhorias na 
velocidade.
Fonte: Elaborado pelas autorascom base em WordPress.org (2020).
A versão 0.7 era basicamente uma variação do b2, mas, a partir da 
versão 1.0, o WordPress começou a se tornar o que é hoje. Você pode 
visualizar algumas versões e suas características no quadro 1.
VOCÊ SABIA?
Observando o quadro 1, você pode perceber que as 
versões do WordPress têm um codinome. Esses nomes 
são homenagens feitas por Mullenweg a artistas do jazz.
Ao longo dos anos, o WordPress vem passando por diversas 
melhorias e atualizações que são feitas constantemente. O projeto é 
mantido por uma comunidade dedicada de código aberto composta por 
milhares de membros no mundo (LONGEN, 2020).
SAIBA MAIS:
Você pode conhecer todas as versões do WordPress, desde 
o seu lançamento até a versão mais atual, acessando o link 
disponível aqui.
Os usuários e desenvolvedores podem se encontrar pessoalmente 
em conferências anuais, denominadas WordCamps. O primeiro evento 
desse tipo foi realizado em São Francisco, em 2006, e, apesar de já ter 
se espalhado ao redor do mundo, continua tendo São Francisco como 
encontro principal (WORDCAMPS, 2020).
Web Design em Wordpress
https://wordpress.org/news/category/releases/
14
Existem diferente formas de trabalhar com WordPress. Kinsta (2020) 
lista algumas:
 • Design.
 • Blogueiro.
 • Loja de temas.
 • Desenvolvedor.
 • Comerciantes.
 • Empresas de hospedagem.
 • Fabricantes de plugins.
WordPress.com Versus WordPress.org
Ao iniciar no mundo do WordPress, você irá se deparar com duas 
plataformas diferentes como citado quando falamos sobre os Sistemas 
de Gerenciamento de Conteúdo na primeira unidade. Logo, é necessário 
conhecê-las para entender qual delas se adequa ao que você deseja 
fazer.
O WordPress.com é um serviço de criação e hospedagem de sites 
que utiliza o CMS WordPress. Sua grande vantagem é que você não tem 
que se preocupar com domínio ou a hospedagem, pois tudo é fornecido 
de forma gratuita.
DEFINIÇÃO:
O domínio é o nome que é utilizado para encontrar um 
site na internet. Para ter os direitos de uso de um domínio 
personalizado, é preciso registrá-lo em uma provedora de 
nomes (LONGEN, 2020). 
Web Design em Wordpress
15
Registrar um domínio nada mais é do que a compra ou contratação 
dele, mediante uma taxa de pagamento, que, geralmente, é anual.
O serviço de hospedagem armazena as informações do site em 
um servidor web. Assim, quando o endereço de um site é digitado no 
navegador, este recupera os dados do site do servidor de hospedagem e 
o exibe para o usuário (LONGEN, 2020).
Os provedores de hospedagem oferecem diferentes tipos de 
planos de acordo com espaço de armazenamento, servidor dedicado ou 
compartilhado, entre outras coisas. A taxa desse tipo de serviço é paga de 
forma mensal. 
Diante dessas informações, parece ser uma boa opção utilizar o 
WordPress.com, porém o domínio gratuito oferecido não é personalizado. 
O site teria um nome, como “meusite.wordpress.com”. Além disso, Gama 
(2018) ressalta que as opções de formatação e personalização do website 
são bem limitadas e não é possível trabalhar com banners de publicidade.
Por outro lado, temos o Wordpress.org, que é a versão auto-
hospedada. Nessa versão, é necessário contratar seu próprio domínio 
e adquirir um serviço de hospedagem. O benefício de um site auto-
hospedado, de acordo com Kinsta (2020), é que os webmasters têm 
acesso ao código por trás do site, bem como aos plugins e temas gratuitos 
que estão listados no repositório oficial do WordPress.
REFLITA:
Tendo em vista os aspectos observados, é razoável 
concluir que o WordPress.com é mais recomendado para 
criação de sites pessoais que não tenham pretensão de se 
tornarem uma referência na internet ou que não queiram 
monetizar seu conteúdo. Enquanto, com o WordPress.org, 
é possível criar desde blogs pessoais até lojas online e sites 
com diferentes tipos de recursos.
Existem diversos sites desenvolvidos no WordPress, inclusive o da 
Casa Branca, o site oficial do Poder Executivo dos Estados Unidos.
Web Design em Wordpress
16
Figura 1 – Site da Casa Branca
Fonte: WordPress.org. Acesso em: 9 ago. 2020.
Note que, a partir daqui, toda vez que utilizarmos o termo WordPress 
estaremos nos referindo ao WordPress.org.
Características
Como já citado anteriormente, o WordPress é um sistema de 
gerenciamento de conteúdo de código aberto, o que significa que ele é 
livre tanto para uso como para modificações. Apesar de ser muito utilizado 
por pessoas com nenhum ou pouco conhecimento de programação, o 
CMS é uma boa opção para programadores, já que ele é uma ferramenta 
altamente personalizável (LONGEN, 2020).
As vantagens de utilizar o WordPress são citadas por Longen (2020) 
e Gama (2018):
 • Baixo custo – só é necessário pagar pelo domínio e pela 
hospedagem, tendo diversas funcionalidades de forma gratuita.
Web Design em Wordpress
17
 • Facilidade de instalação e atualização – a instalação é intuitiva e as 
atualizações podem ser feitas com apenas um clique.
 • Facilidade de uso – a interface é bem agradável e fácil de usar.
 • Simplicidade de gerenciamento – a ferramenta de gerenciamento 
é simples de usar e não necessita de conhecimentos de 
programação;
 • Design personalizável – são diversos temas à disposição para 
personalizar a aparência do website de acordo com o ramo de 
atuação.
 • Liberdade de criação – para alguém com conhecimentos em 
programação, é possível personalizar absolutamente tudo dentro 
da plataforma, inclusive criar temas e plugins.
 • Multiusuários – um site pode ter colaboração de diversas pessoas.
 • Comunidade mundial – por ser uma ferramenta muito popular, 
possui uma comunidade gigante ao redor do mundo, o que facilita 
no compartilhamento de informações e resolução de dúvidas e 
problemas.
Com todas essas vantagens, fica fácil perceber por que o WordPress 
se tornou o gerenciador de conteúdo mais utilizado ao longo dos anos, 
mas claro que, como todas as ferramentas, ele também tem pontos que 
devem ser analisados.
Longen (2020) considera três fatores negativos sobre o WordPress:
 • Segurança – por ser uma plataforma muito utilizada, recebe 
ataques frequentes de hackers.
 • Terceirização –plugins e temas de terceiros podem vir com bugs.
 • Carregamento da página – instalar muitos plugins pode tornar o 
site mais lento.
O autor, apesar de citar estes pontos, ressalta que existem plugins 
de segurança para reduzir o risco, e cache, que torna o carregamento 
da página mais rápido. E, como já citado anteriormente, a comunidade 
Web Design em Wordpress
18
do WordPress é grande, tornando mais fácil saber se um plugin funciona 
bem ou tem falhas, por exemplo.
Gama (2018) destaca um ponto diferente que pode pesar contra 
o WordPress: além de todo o conteúdo que ter que ser atualizado e 
administrado de forma manual, o backup do banco de dados e a atualização 
da própria plataforma também tem que ser feitos manualmente.
Funcionalidades
Após essa breve introdução sobre a história e as principais 
características do WordPress, nesta seção começaremos a entender 
como funciona a plataforma. 
Para criação, personalização e gerenciamento do website, o 
WordPress oferece um painel de controle intuitivo e fácil de usar. É 
por meio dele que criamos as publicações, mudamos a aparência e 
adicionamos plugins a nossa página, entre outras coisas.
A plataforma do WordPress tem tipos de publicação diferentes, 
sendo os dois mais comuns: posts e páginas. McCollin (2020) explica 
que os tipos de publicação são formas de categorizar diferentes tipos de 
conteúdo.
O post é a forma tradicional de fazer uma publicação no WordPress. 
Ele é composto por um título, pelo conteúdo e por um link único. Quando 
um novo post é criado, ele aparece no topo do site, pois os posts são 
mostrados do mais recente para os mais antigos. 
Os posts de um site podem ser divididos em categorias e tags. 
Conforme Tadeu (2018), a principal diferença entreelas é que as categorias 
podem ter hierarquia, em que categorias-mãe abrigam subcategorias, e 
as tags não.
Por outro lado, a página é um conteúdo estático, concebido para 
durar mais tempo do que os posts e para fornecer informações sobre os 
tipos de coisas que não mudam com tanta frequência (MCCOLLIN, 2020).
Web Design em Wordpress
19
EXEMPLO: 
Quando você entra em site e clica na notícia mais recente publicada, 
isso é um post, quando consulta as informações de contato, você está em 
uma página.
Ao navegar pelo painel de controle do WordPress, temos duas 
funcionalidades que dizem respeito à navegação: os widgets e os menus. 
Os widgets são utilizados para acessar as diversas áreas do site e, por 
padrão, são: pesquisar, posts recentes, arquivos e categorias.
Por outro lado, os menus podem ser personalizados e pode-se criar 
um módulo de navegação como queira, mesclando links para  páginas, 
categorias, ou qualquer outro item (TADEU, 2018). Estudaremos mais sobre 
navegação posteriormente. Agora, vamos conhecer duas funcionalidades 
muito famosas do WordPress: os temas e plugins. Vamos lá!
Extensões
Temas
Ao pesquisar sobre o WordPress em uma ferramenta de busca, 
pode-se notar que uma das palavras que mais aparecem é tema. Mas o 
que é um tema?
DEFINIÇÃO:
O tema é essencial para a organização de um site, 
pois determina como os elementos do seu site serão 
apresentados para os usuários (FETTER, 2015).
O tema é o que define o layout do site. Isso significa que ele 
determina a distribuição dos elementos, como menu e textos, ao longo 
da página. Uma das grandes vantagens do WordPress, como já vimos 
anteriormente, é a variedade de temas disponíveis de forma gratuita, além 
de temas pagos.
Web Design em Wordpress
20
NOTA:
Se você vir em algum lugar o termo “template”, não se 
preocupe. Tema e template são a mesma coisa. 
Os temas tornaram-se um negócio a parte dentro do WordPress, 
existem diversas empresas que desenvolvem e comercializam temas 
premium nas denominadas Lojas de Temas.
Plugins
Como já citado neste capítulo, os plugins foram adicionados 
na versão 1.2 e são importantes, porque melhoram ou aumentam as 
funcionalidades do WordPress. Eles desempenham diversas funções, 
desde adicionar um pequeno recurso no site ou transformar um site inteiro.
Para adicionar um plugin, é só acessar o painel de administração 
do website. De acordo com o próprio WordPress, existem mais de 55 mil 
plugins disponíveis na plataforma. Alguns plugins populares podem ser 
vistos no quadro 2.
IMPORTANTE:
Pode ocorrer de plugins diferentes terem problemas de 
compatibilidade, o que interfere no funcionamento correto 
deles. Por isso você deve avaliar a qualidade e a quantidade 
dos plugins do seu site.
Apesar de existirem inúmeros plugins gratuitos, também é possível 
obter plugins premium. Marques (2019) ressalta três aspectos que podem 
fazer diferença em um plugin premium: algum recurso exclusivo que não 
está disponível na versão gratuita, suporte online e fornecimento de um 
manual de uso do plugin.
Web Design em Wordpress
21
Quadro 2 – Plugins do WordPress
Plugin Função
WooCommerce Transforma o site em uma loja online.
Bookly Cria um sistema de reservas.
Envira Gallery  Cria uma galeria de fotos.
WPSmush  Realiza compressão de imagens.
W3 Total Cache Melhora a performance do website.
WordFence Melhorar a segurança do website.
Fonte: Elaborado pelas autoras com base em Marques (2019).
Percebe-se que os plugins são essenciais, pois agregam muitas 
funcionalidades aos websites, além de ajudarem a melhorar a performance 
e segurança dos sites.
RESUMINDO:
Neste capítulo, conhecemos a plataforma WordPress. 
Iniciamos aprendendo sobre sua história. Entendemos 
a diferença entre suas duas versões, WordPress.com 
e WordPress.org. Por fim, começamos a conhecer as 
principais características e funcionalidades da plataforma 
que utilizaremos ao longo desta unidade: WordPress.org.
Web Design em Wordpress
https://wordpress.org/plugins/envira-gallery-lite/
https://wordpress.org/plugins/wp-smushit/
https://wordpress.org/plugins/w3-total-cache/
https://wordpress.org/plugins/wordfence/
22
Esqueleto de um Website
OBJETIVO:
Nesta unidade, começaremos a dar forma a um website. 
Veremos quais são os componentes básicos que formam 
o esqueleto de uma página, bem como os recursos que 
podem ser inseridos em cada componente. Por fim, 
faremos uma introdução à utilização de imagens..
Quando utilizamos o termo esqueleto, estamos nos referindo à 
estrutura de algo. Logo o esqueleto de um website diz respeito à forma 
como as suas partes estão organizadas. Ele também é conhecido como 
layout.
Figura 2 – Exemplo de layout
Fonte: Elaborado pelas autoras (2020).
O esqueleto de um site poderia ser como o mostrado na figura 2. 
Nesse exemplo, temos os componentes descritos no quadro 3.
Web Design em Wordpress
23
Quadro 3 – Componentes de um website
Componente Descrição
Cabeçalho do website Presente na parte superior do site.
Corpo do site Parte maior onde ficam as postagens.
Barra lateral Por onde é possível navegar na página.
Rodapé Parte inferior da página.
Fonte: Elaborado pelas autoras com base em Tadeu (2018).
Note que você pode alterar o layout de um site apenas trocando 
um elemento de lugar, como a barra lateral, que poderia ser movida da 
direita para a esquerda do site. Vamos no tópico a seguir estudar sobre o 
layout do WordPress. 
Layout do WordPress
O WordPress possui uma estrutura padrão para organização do 
website. Essa estrutura pode ser vista desde os primeiros passos dentro 
da plataforma e é composta por quatro partes:
 • Header.
 • Content. 
 • Sidebar. 
 • Footer. 
Header
O header é o cabeçalho que fica localizado na parte superior da 
página. Nessa área, pode-se encontrar o nome, a logo e/ou uma descrição 
do site. É no cabeçalho também que geralmente fica localizado o menu 
de navegação do website. Tadeu (2018) pontua que, em casos especiais, o 
header pode ficar na lateral da página, mas são raras exceções.
Web Design em Wordpress
24
SAIBA MAIS:
Você consegue pensar em algum site em que o cabeçalho 
não se encontra no topo da página? Acessando a página 
da Resn, disponível aqui, você pode ver uma página com o 
design totalmente diferente do padrão.
Como citado, o nome do site encontra-se no cabeçalho. Geralmente, 
esse nome também é um link que redireciona para a página inicial do 
website. O código de um cabeçalho desse tipo poderia ser apenas:
<h1 id = “cabeçalho”>
<a href=”<?php bloginfo(‘url’); ?> “> <? php bloginfo (‘nome’); ?> </a>
</h1>
Porém, não é necessário alterar o código para modificar um 
cabeçalho, isso pode ser feito direto no painel de administração do 
WordPress. 
Em um cabeçalho, também é possível adicionar imagens. Existem 
diversos temas grátis e premium que fornecem suporte a imagens no 
cabeçalho.
O site oficial do WordPress possui toda uma documentação sobre 
cabeçalhos e fornece algumas dicas:
 • Preste atenção ao posicionamento e à cor do texto.
 • Tenha um propósito e objetivo – o cabeçalho deve refletir o 
conteúdo do site.
 • Deve misturar-se com a aparência geral – o estilo do cabeçalho 
deve estar de acordo com o resto do site.
 • Evite sobrecarregar o cabeçalho com informações demais.
Note que o cabeçalho é uma parte importante, pois é a primeira 
coisa que é vista pelo usuário ao entrar no site. 
Web Design em Wordpress
https://resn.co.nz/
25
Content
O content é a parte em que está localizado o conteúdo do site. De 
acordo com Tadeu (2018), ele normalmente costuma ocupar entre 70% a 
80% da largura disponível da página.
Figura 3 – Corpo de um website
Fonte: WordPress.org. Acesso em: 9 ago. 2020.
Sidebar
A sidebar é a barra lateral que geralmente fica do lado direito 
da página. Tadeu (2018) explica que o posicionamento à direita serve 
para privilegiar a visualização do conteúdo, já que fazemos a leitura da 
esquerdapara direita, logo olhamos primeiro para o conteúdo e depois 
para a sidebar.
VOCÊ SABIA?
Você sabia que em alguns países orientais a escrita orienta-
se da direita para a esquerda? Por causa disso a ordem de 
posição da barra lateral pode se inverter (TADEU, 2018). 
Web Design em Wordpress
26
Na sidebar, é onde ficam localizados os widgets. Conforme falado 
no capítulo anterior, eles são utilizados para acessar áreas dos sites. 
Alguns widgets que podemos adicionar à sidebar são:
Quadro 4 - Widgets
Widgets Função
Pesquisar Para realizar uma busca no website.
Posts recentes Lista as últimas postagens feitas.
Comentários Mostra os comentários recentes.
Arquivos Arquivo dos posts do site.
Categorias
Divide as postagens em categorias definidas 
pelo autor do site.
Fonte: Elaborado pelas autoras com base em WordPress.org. Acesso em: 9 ago. 2020.
Na figura 3, é possível ver a sidebar com widgets ao lado do 
contêiner do site. Os widgets também são utilizados para adicionar outras 
funcionalidades ao site, além das funcionalidades de navegação.
EXEMPLO: 
Você já deve ter visto banners de anúncios na lateral de websites. 
Esses banners são adicionados à página por meio de widgets.
Sidebar
Por fim, temos o footer, que fica localizado abaixo do contêiner 
de conteúdo do site. Ele é o rodapé da página e, geralmente, contém 
informações institucionais, do autor da página, entre outras coisas.
No rodapé, também é comum a adição de widgets e até de um 
menu de navegação, assim como no cabeçalho.
Web Design em Wordpress
27
Agora que você já conhece as quatro partes que formam um 
esqueleto de um website, vejamos algumas dicas de Patel (2020) para 
criar um bom layout para o seu website:
1. Espaçamento – é importante ter um espaçamento entre os 
elementos do site, para que haja um descanso visual e a página 
não se torne cansativa ou difícil de visualizar. O espaçamento 
também pode ser utilizado para destacar uma seção específica.
2. Navegação – você deve pensar em uma navegação simples e 
eficiente para o usuário passear facilmente pelo site.
3. Quem somos e contato - incluir no seu layout uma seção que 
fale sobre você, a empresa ou o projeto do site e informações de 
contato caso seu desejo seja atrair pessoas e criar relacionamento 
com elas.
4. Fontes - priorize fontes limpas e de fácil identificação das palavras 
e não utilize muitos tipos de fontes diferentes no website.
5. Imagens – adicione figuras que possam prender a atenção do 
usuário.
REFLITA:
Com base nas informações apresentadas até aqui, 
podemos perceber que estruturar o esqueleto de um 
website é simples. Basta inserir um cabeçalho, um rodapé, 
um contêiner para o conteúdo a uma barra lateral para 
navegação que a estrutura do seu site estará montada. 
Todavia, se uma página na web é uma vitrine para uma pessoa, 
uma empresa ou um projeto, é de extrema importância que esse site seja 
capaz de mostrar a imagem que se deseja passar e que tenha capacidade 
de prender a atenção do seu público-alvo.
Por isso devemos personalizar a estrutura do website de acordo 
com nossas necessidades. Quando falamos de layout no WordPress, você 
precisa saber que ele está ligado aos temas, pois a aparência visual do 
seu site é controlada por um tema WordPress (WPBEGINNER, 2020).
Estudaremos como utilizar e personalizar um website utilizando 
temas na próxima unidade.
Web Design em Wordpress
28
Trabalhando com Imagens
Na seção anterior, vimos que é importante adicionar imagens em 
um site para atrair e prender a atenção de quem está visitando a página. 
O WordPress oferece, então, recursos para adicionar e trabalhar com 
imagens nas diferentes áreas de um site.
IMPORTANTE:
Todas as suas imagens serão armazenadas e podem ser 
gerenciadas na biblioteca de mídia do WordPress. Você 
pode acessá-las a qualquer momento pela biblioteca.
A forma mais comum de adicionar imagens é colocá-las diretamente 
nos posts e nas páginas do site. 
Para adicionar imagens em um post ou página, basta adicionar um 
bloco de imagem no editor de conteúdo. É possível adicionar a imagem 
em qualquer ponto da publicação. Também podem ser adicionadas 
quantas imagem você desejar.
PASSO A PASSO: 
Você deve abrir o painel de controle e criar um post/página:
1. Com o editor aberto, clique no símbolo “+” ou digite “/”.
2. Após clicar, irão aparecer as opções de bloco disponíveis.
3. Você deve escolher a opção “imagem”.
4. Em seguida, você deverá escolher como a imagem será inserida 
na página, se por meio da biblioteca ou de um URL.
5. Escolha “biblioteca” para entender como funciona esse recurso.
6. No painel da biblioteca, irá aparecer todas as imagens utilizadas 
anteriormente, mas vamos adicionar uma nova imagem clicando 
na opção “enviar arquivos”.
7. Selecione a imagem no diretório do seu computador e clique em 
“abrir”.
Web Design em Wordpress
29
8. Pronto, a imagem já está disponível para ser utilizada na sua 
publicação!
Um recurso muito útil na biblioteca de imagens é poder adicionar 
um título e uma descrição a elas. Com a opção de pesquisar, fica mais fácil 
encontrar uma imagem específica em meio a tantas outras.
Após inserir a imagem na publicação, você pode ajustá-la ao texto 
como achar melhor. Para isso, pode ser utilizada a opção de alinhamento. 
Também é possível inserir uma legenda para a imagem.
Outro bloco interessante que você pode utilizar para adicionar 
imagens é o bloco “galeria”, que permite que várias imagens sejam 
adicionadas de uma vez.
Figura 4 – Biblioteca de imagens
Fonte: WordPress.org. Acesso em: 9 ago. 2020.
Ainda é possível adicionar imagens de capa em seus posts e suas 
páginas. WPBeginner (2020) explica que imagens de capa são imagens 
amplas total que podem ser usadas como um separador entre as 
diferentes seções de um artigo. Para adicioná-las, você deve utilizar o 
bloco “cover”.
Web Design em Wordpress
30
Algumas outras formas de trabalhar com imagens podem ser vistas 
no quadro a seguir:
Quadro 5 – Trabalhando com imagens
Recurso Descrição
Editor de ima-
gens
O WordPress fornece um editor básico que pode 
realizar tarefas, como cortar, girar, redimensionar e 
imagens. 
Adicionar 
imagem ao 
cabeçalho
É possível adicionar uma imagem ao cabeçalho da página, 
personalizando o tema utilizado.
Adicionar ima-
gem de plano 
de fundo
Você pode adicionar uma imagem de plano de fun-
do por meio da personalização do tema ou utilizando 
plugins.
Definir uma 
imagemdesta-
que padrão 
Você pode escolher uma imagem padrão que será 
utilizada nos posts, caso não se tenha colocado uma 
imagem específica.
Fonte: Elaborado pelas autoras com base em WPBeginner (2020).
Podemos perceber que é possível trabalhar com imagens em 
diferentes áreas de um website. 
RESUMINDO:
Finalizamos o segundo capítulo da nossa unidade 
entendendo como é formada a estrutura de um website 
no WordPress. Conhecemos os principais elementos 
que compõem essa estrutura e como eles podem ser 
personalizados. Por fim, falamos um pouco sobre como 
podemos inserir imagens em diferentes partes de um site.
Web Design em Wordpress
31
Instalando um Servidor Apache
OBJETIVO:
Chegamos ao início de mais um capítulo e, aqui, iremos 
conhecer o servidor web Apache HTTP Server. Serão 
apresentadas suas principais características, vantagens e 
desvantagens. Por fim, veremos como podemos instalar o 
Apache.
Vamos relembrar o que é um servidor web? Na unidade anterior, 
falamos sobre o modelo cliente-servidor, no qual o cliente solicita algo ao 
servidor, que devolve o recurso solicitado. 
Figura 5 – Cliente-servidor
Fonte: PixaBay. Acesso em: 9 ago. 2020.
Quando uma URL é digitada no navegador, este envia uma 
solicitação ao servidor, que recupera as informações da página solicitada 
e as devolve ao browser, que, enfim, exibe a página para o usuário. 
Alecrim (2006) classifica, então, o servidor web como um computador que 
processa solicitações HTTP, o protocolopadrão da Web.  
Web Design em Wordpress
32
Os servidores web geralmente são fornecidos juntamente de outros 
serviços por empresas de hospedagem de sites, contudo eles também 
podem ser instalados de forma local.
Existem diversos servidores web disponíveis no mercado, entre eles 
o Apache, o Ngynx, o Cloudflare e Microsoft-IIS. De acordo com dados 
da W3Techs, de julho de 2020, o Apache é o servidor utilizado em 37% 
dos sites disponíveis na web. Em segundo lugar, aparece o Ngynx, que 
abocanha 32,5% do mercado.
O Apache HTTP Server é um dos servidores web mais utilizados 
atualmente e ele não só executa o HTTP, mas também outros protocolos, 
tais como o HTTPS, o FTP entre outros (ALECRIM, 2006). Ele é um servidor 
de código aberto mantido pelo Apache Software Foundation.
História
O servidor web httpd, que era utilizado em meados de 1995, foi 
desenvolvido por Rob McCool  no National Center of Supercomputing 
Applications (NCSA). Porém McCool abandonou o projeto quando saiu da 
NCSA e, logo, outros desenvolvedores se juntaram de forma independente 
para dar continuidade ao projeto. 
Brian Behlendorf e Cliff Skolnick,  usando o NCSA httpd 1.3  como 
base, fizeram o primeiro lançamento do Apache em abril de 1995. Por 
outro lado, Brandon Long e Beth Frank retomaram o desenvolvimento 
do servidor pela NCSA e, posteriormente, juntaram-se a Behlendorf e 
Skolnick no projeto Apache. 
Em 1999, surgiu a Apache Software Foundation, que descreve 
o projeto Apache como um esforço de desenvolvimento destinado a 
criar um software de um servidor HTTP colaborativo robusto, de nível 
comercial, com recursos disponíveis gratuitamente. O projeto Apache é 
formado por um grupo de voluntários distribuídos ao redor do mundo.
Web Design em Wordpress
33
Figura 6 –Projeto Apache
Fonte: Apache (2020).
VOCÊ SABIA?
De acordo com seus fundadores, o nome Apache foi 
escolhido em homenagem a uma famosa tribo americana 
de mesmo nome. Inclusive, a logo do projeto é a imagem 
de uma pena. Interessante, não é?
Web Design em Wordpress
34
Características
Como já falamos, o Apache é um servidor web, porém Longen (2020) 
destaca que ele não é um servidor físico, e sim um software executado no 
servidor que gerencia a conexão entre os navegadores e o servidor web. 
Sua arquitetura é baseada em módulos, que podem ser de segurança, 
autenticação de usuário, execução de scripts, entre outros. 
Quadro 6 – Módulos Apache
Módulo Função
mod_allowmethods
Restringe quais métodos HTTP podem ser 
usados no servidor.
mod_auth_basic Autenticação HTTP básica.
mod_authn_dbd
Autenticação de usuário usando um banco 
de dados SQL.
mod_authn_file
Autenticação de usuário usando arquivos 
de texto.
mod_cgi Execução de scripts CGI.
Fonte: Elaborado pelas autoras com base em Apache (2020).
SAIBA MAIS:
Você pode descobrir todos os módulos suportados pelo 
Apache em sua documentação oficial, disponível aqui. 
Como já citado anteriormente, o Apache é um sistema de código 
aberto, e é graças a essa característica que o software continua sendo 
melhorado ao passar dos anos (ALECRIM, 2006).
Outra característica importante é que o Apache é um software 
multiplataforma, e isso significa que ele pode ser utilizado por servidores 
Linux, Windows e MAC OX.
Web Design em Wordpress
https://httpd.apache.org/docs/2.4/mod/mod_allowmethods.html
https://httpd.apache.org/docs/2.4/mod/mod_auth_basic.html
https://httpd.apache.org/docs/2.4/mod/mod_authn_dbd.html
https://httpd.apache.org/docs/2.4/mod/mod_authn_file.html
https://httpd.apache.org/docs/2.4/mod/mod_cgi.html
https://httpd.apache.org/docs/2.4/mod/
35
Longen (2020) resume as vantagens de utilizar o Apache:
 • É um software de código aberto, estável e confiável.
 • É atualizado frequentemente.
 • É flexível devido a sua arquitetura baseada em módulos.
 • Fácil de configurar.
 • Suporta múltiplas plataformas.
 • Possui uma gigantesca comunidade de apoio.
REFLITA:
Com tantas vantagens, você consegue perceber por que o 
Apache é um dos servidores web mais utilizados. O fato de 
ser um software livre contribuiu para seu sucesso, visto que 
se formou uma comunidade de voluntários que contribui 
para seu desenvolvimento. Isso auxiliou também para que 
o sistema esteja em constante atualização. 
Por outro lado, Longen (2020) ressalta dois pontos negativos do 
Apache:
 • Problemas de desempenho em sites com tráfego muito alto.
 • Muitas opções de configurações podem levar a vulnerabilidades 
de segurança.
EXPLICANDO MELHOR:
Quando o Apache é utilizado como servidor para sites que 
têm tráfego muito alto, ele não consegue lidar com o alto 
número de requisições com a mesma velocidade e seu 
desempenho pode cair, deixando o site mais lento. 
Alguns serviços de hospedagem de sites resolvem esse problema 
utilizando o Apache em conjunto com outro servidor web, por exemplo. 
Já citamos anteriormente que o Apache é um servidor 
multiplataforma, ou seja, funciona em diferentes sistemas operacionais. 
Agora que você já aprendeu como ele funciona, vamos descobrir como 
instalá-lo na sua máquina. Vamos começar?
Web Design em Wordpress
36
Instalando no Linux
No Linux, é provável que o Apache já venha embutido no sistema. 
Caso contrário, é possível instalá-lo de forma simples por meio do terminal. 
Se você utiliza o Umbutu ou Debian, por exemplo, pode instalar o Apache 
por meio da linha de comando: 
sudo apt-get install apache2
IMPORTANTE:
A forma de instalar o Apache no Linux pode variar 
dependendo da distribuição utilizada. A forma mostrada 
anteriormente pode não funcionar para outras distribuições 
que não o Ubuntu e Debian.
Para iniciar o servidor no Linux, utiliza-se o comando:
sudo systemctl start apache2
Por fim, para verificar se o servidor está rodando corretamente, 
execute o comando:
sudo systemctl status apache2
Instalando no Windows
Em se tratando de Windows, podemos instalar o Apache de duas 
formas: instalando o servidor isoladamente ou utilizando um pacote que, 
além do Apache, inclui outros serviços, como um banco de dados.
Para instalar somente o Apache, você pode seguir o passo a passo 
a seguir:
PASSO A PASSO: 
Você deve seguir os seguintes passos:
1. Acessar a página http://httpd.apache.org/download.cgi e baixar a 
versão mais recente do Apache HTTP Server.
Web Design em Wordpress
http://httpd.apache.org/download.cgi
37
2. Depois que o arquivo for baixado, é só clicar para começar a 
instalação.
3. Você só precisa ir clicando em “próximo”.
4. Quando pedir para colocar um domínio e o servidor, você deve 
colocar “localhost” e o seu endereço de e-mail.
5. Marque a opção para utilizar a porta 80 e clique em “próximo”.
6. Na próxima janela, você deve marcar a opção “Apache HTTP 
Server” e clicar no botão “mudar”.
7. Você deve instalar todos os pacotes no diretório C:\Server\
Apache\ e alterar o nome do diretório para “C:\Server\Apache\”.
8. Agora, o Apache será, de fato, instalado. Ao ser concluída a 
instalação, você receberá uma mensagem avisando que o 
processo terminou.
Ao analisar esse passo a passo, note que é preciso ter algum 
conhecimento técnico para realizar essa instalação. Além disso, você 
também precisará instalar um banco de dados para poder utilizar a 
plataforma WordPress.
NOTA:
Você pode saber se ocorreu tudo bem na instalação do seu 
servidor acessando um browser e digitando a URL “http://
localhost/”. Caso tudo tenha dado certo, aparecerá uma 
mensagem indicando que o seu servidor funciona.
A segunda forma de instalar um servidor Apache é utilizando uma 
ferramenta que simplifica esse processo e, ainda, instala outros serviços 
ao mesmo tempo. Existem diversas ferramentas nesse estilo, e, para 
nossos estudos, utilizaremos o XAMPP.
O XAMPP é um acrônimo para x-cross plataforma, Apache, MySQL, 
PHP e Perl e é um pacote que permite que esses elementos sejam 
instalados de forma simples. É um software de código aberto gerenciado 
pela fundação ApacheFriends, que diz que seu objetivo é “construir uma 
Web Design em Wordpress
http://localhost/
http://localhost/
38
distribuição fácil de instalar para desenvolvedores entrarem no mundo do 
Apache”.
PASSO A PASSO: 
Vamos instalar o XAMPP!
1. Você deve acessar a página https://www.apachefriends.org/pt_
br/download.html para fazer o download do arquivo de instalação 
do XAMPP.
2. Inicie o instalador.
3. Você precisará escolher que módulos deseja instalar. Para a 
utilização do WordPress, é necessário instalar o Apache, o MySQL 
e o phpMyAdmin.
4. Em seguida, escolha a pasta em que o XAMPP será instalado e 
clique em “next”.
5. Desmarque a opção sobre conhecer o Bitnami, pois esse recurso 
não será necessário.
6. Clique em “next” para iniciar a instalação.
7. Aperte em “finish” quando solicitado.
8. Pronto! O XAMPP será instalado e você já pode começar a utilizá-
lo.
Ao finalizar a instalação, é necessário abrir o painel de controle do 
XAMPP para iniciar tanto o Apache como o MySQL, para isso basta apenas 
clicar em “start”. Se tudo ocorrer bem, o XAMPP deve estar como na figura 
a seguir.
Note que tanto o Apache como o MySQL estão destacados em verde, 
o que significa que os dois módulos estão funcionando corretamente. 
Web Design em Wordpress
https://www.apachefriends.org/pt_br/download.html
https://www.apachefriends.org/pt_br/download.html
39
Figura 7 – Painel de Controle do XAMPP
Fonte: Elaborado pelas autoras (2020).
Um erro de porta pode acontecer caso algum serviço do Windows 
esteja utilizando a porta 80 ou 443. Estrela (2019) detalha como esse erro 
pode ser resolvido:
PASSO A PASSO: 
Você deve abrir o Firewall do Windows e ir para as Configurações 
Avançadas.
1. Clique em “Regras de Entrada” e depois em “Nova Regra”.
2. Marque a opção a “porta TCP”.
3. Após marcar, você terá que digitar  80,443  no campo marcado 
como portas específicas e, então, clique em “próximo”.
4. Na próxima tela, selecione a opção “permitir a conexão” e, então, 
clique em “próximo” novamente.
5. Garanta que todas as opções listadas estejam marcadas e continue 
para a próxima página.
Web Design em Wordpress
40
No campo “nome”, digite um nome memorável e clique em terminar.
Você precisará repetir os passos 1 a 6, mudando novamente o nome 
para limpar a porta.
Por fim, reinicie seu computador. 
Após seguir esses passos, Estrela (2019) informa que as portas 80 e 
443, agora, devem estar desbloqueadas e abertas localmente.
NOTA:
Assim como quando instalamos o Apache separadamente, 
você também pode conferir se tudo está funcionando 
corretamente acessando o endereço http://localhost/ em 
seu navegador.
Observe que, em todas as instalações, o Apache foi instalado de 
forma local. No próximo capítulo, usaremos esse servidor para criar um 
website WordPress em localhost.
RESUMINDO:
Concluímos mais um capítulo no qual relembramos como 
funciona um servidor web e conhecemos um dos principais 
servidores utilizado por páginas web: o Apache HTTP 
Server. Compreendemos suas principais características 
e como elas influenciaram para que o projeto Apache se 
tornasse o que é hoje. Por fim, aprendemos a instalar o 
servidor web Apache utilizando o XAMPP.
Web Design em Wordpress
http://localhost/
41
Website em Localhost
OBJETIVO:
No capítulo final desta unidade, nosso objetivo é criar um 
ambiente para que seja possível criar website em localhost 
utilizando o WordPress.
No início desta unidade, descobrimos que, para criar um website no 
WordPress.org e disponibilizá-lo na web, é preciso adquirir um domínio 
e um serviço de hospedagem de sites. Esses serviços, por sua vez, 
oferecem recursos diversos para gerenciamento e manutenção de uma 
página na web.
Por outro lado, é possível construir uma página web utilizando 
WordPress de maneira local, porém esse site fica disponível apenas no 
ambiente em que está sendo desenvolvido. Então, você deve estar se 
perguntando: qual é o propósito de criar um website em um servidor 
local? Vamos descobrir!
Estrella (2019) enfatiza que criar um ambiente local é um passo 
importante para o projeto de desenvolvimento, pois permite que você 
possa testar de maneira segura os recursos e a funcionalidade do seu site 
em um ambiente privado.
NOTA:
Perceba que construir um website local te dá total liberdade 
para trabalhar. Você pode mexer em seu projeto sem se 
preocupar com erros que possam tirar o seu site do ar.
Web Design em Wordpress
42
Sites locais são perfeitos para executar os seguintes tipos de tarefas, 
conforme Estrella (2019):
 • Criar novos temas e plugins – sem se preocupar com quaisquer 
problemas que poderia encontrar desenvolvendo online.
 • Ambiente de testes - você pode criar uma cópia do seu site online 
para ser utilizada para propósitos de teste.
 • Debugging e solução de problemas de sites - trabalhar nos 
códigos do seu site para resolver bugs ou outras questões que 
possam resultar em problemas ainda maiores, sem correr o risco 
de a página ficar fora do ar. 
Em virtude do que foi mencionado até aqui, é fácil perceber 
os benefícios de instalar um site local. Agora, vamos descobrir como 
podemos fazer isso.
Primeiramente, precisamos obter as ferramentas necessárias para 
criação de um website em WordPress em localhost. São elas:
1. Servidor web.
2. Sistema gerenciador de banco de dados.
3. WordPress.
Note que já conhecemos um servidor web que podemos utilizar: o 
Apache HTTP Server.
Porém o que seria um sistema gerenciador de banco de dados 
(SGBD)?
DEFINIÇÃO:
Um banco de dados é uma coleção de dados relacionados, 
enquanto um SGBD é um software que permite que os 
usuários criem e gerenciem os seus bancos de dados 
(FENDER, 2012).
Web Design em Wordpress
43
Figura 8 – Banco de dados
Fonte: Freepik. Acesso em: 9 ago. 2020.
Logo, como um website precisa ter uma base de dados, é necessário 
ter um SGBD instalado para conseguimos criá-lo. Por fim, necessitamos 
da plataforma do WordPress.
REFLITA:
Será que você precisa instalar esses elementos 
isoladamente? No capítulo anterior, vimos que não. Nós 
conhecemos uma ferramenta que possui um pacote de 
instalação que inclui o servidor web Apache e o banco de 
dados MySQL, o XAMPP. 
Portanto nós já temos duas das três ferramentas necessárias para 
construir um website local, só falta realizar a instalação do WordPress. 
Porém, antes disso, precisamos criar e configurar a base de dados que 
vamos utilizar. Vamos lá!
Web Design em Wordpress
44
Configurando o Banco de Dados MySQL
Levando-se em consideração que você já instalou o XAMPP e ele 
está funcionando corretamente, vamos abrir o seu painel de controle.
NOTA:
Lembre-se que você pode confirmar o funcionamento 
correto acessando localhost no browser.
Com o XAMPP aberto clique no botão “admin” que se encontra 
ao lado do MySQL para abrir a interface phpMyAdmin. Através desta 
interface, criaremos a base de dados que utilizaremos para a instalação 
do WordPress.
IMPORTANTE:
Você pode abrir o phpMyAdmin direto no navegador 
através do endereço: <http://localhost/phpmyadmin/>.
Você pode visualizá-lo na figura a seguir:
Figura 9 – phpMyAdmin
Fonte: Elaborado pelas autoras (2020).
Web Design em Wordpress
http://localhost/phpmyadmin
45
Com o painel aberto, clique em “Base de dados” para criar um banco 
de dados. O processo é bem simples, basta escolher um nome para o 
banco e clicar em “criar”. Vamos chamá-lo de “wordpressbd”. Pronto, o seu 
banco de dados foi criado!
NOTA:
Observe que assim que o banco é criado, uma nova aba é 
aberta no painel de controle. Ela se encontra vazia e exibe 
a mensagem “nenhuma tabela encontrada na base de 
dados”. Isto é normal, visto que o banco de dados não foi 
utilizado ainda.
O nosso próximo passo agora é instalar o WordPress, vamos lá!!
Instalando o WordPress
Inicialmente, é necessário adquirir a versão mais recente do 
WordPress fazendo o download que se encontra disponível no link: 
https://wordpress.org/download/.Porém Script Certo (2017) destaca que, para obter o WordPress 
trabalhando com o XAMPP, precisamos descompactar o WordPress na 
pasta correta. 
Por isso você deve abrir a pasta xampp no seu computador e 
localizar outra pasta denominada “htdocs”. Você pode encontrar essa 
pasta no diretório:
 C:/xampp/htdocs.
Ao baixar o WordPress, ele vem em uma pasta compactada. Você 
deve descompactar essa pasta dentro da pasta htdocs e renomeá-la 
com um nome de sua preferência. Por questões de entendimento, vamos 
chamá-la de “wordpress”. Neste ponto, concluímos a primeira etapa da 
instalação do WordPress. 
Web Design em Wordpress
https://wordpress.org/download/
46
EXPLICANDO MELHOR:
Até aqui, você extraiu os arquivos do WordPress e os colocou 
dentro da pasta do XAMPP para que essas ferramentas 
possam trabalhar conjuntamente. Nos próximos passos, 
vamos instalar o WordPress de fato.
Para continuar a instalação, você deve abrir o seu navegador web e 
acessar o endereço: http://localhost/wordpress/.
NOTA:
Perceba que, após localhost, devemos colocar o nome da 
pasta que escolhemos ao descompactar os arquivos do 
WordPress. Se você tivesse escolhido o nome “meusite” 
por exemplo, o endereço a ser acessado deveria ser: http://
localhost/meusite.
Voltando à instalação, ao acessar a página localhost/wordpress no 
navegador, aparecerá primeiramente uma tela na qual você deve escolher 
o idioma a ser utilizado. No nosso caso, escolhemos português do Brasil 
e clicamos em continuar.
Após esse passo, aparecerá a seguinte tela de boas-vindas.
Figura 9 – Boas-vindas
Fonte: WordPress.org. 
Web Design em Wordpress
http://localhost/wordpress/
http://localhost/meusite
http://localhost/meusite
47
Essa tela indica algumas informações que serão necessárias sobre 
o banco de dados que será utilizado:
1. Nome do banco de dados.
2. Nome de usuário do banco de dados.
3. Senha do banco de dados.
4. Servidor do banco de dados.
5. Prefixo de tabela (se quiser rodar mais de um WordPress no 
mesmo banco de dados).
E informa como os dados pedidos serão utilizados. 
Na tela seguinte, devemos fornecer essas informações. Lembre-se 
que já criamos e configuramos um banco de dados anteriormente, que 
denominamos de “wordpressbd”. 
Então, devemos preencher as informações pedidas de acordo com 
o quadro a seguir:
Quadro 7 – Informações do banco de dados
Nome do banco de dados wordpressbd
Nome de usuário do banco de dados root
Senha do banco de dados sem senha
Servidor do banco de dados localhost
Prefixo de tabela wp_
Fonte: Elaborado pelas autoras com base em WordPress (2020).
Se tudo ocorrer bem, aparecerá a seguinte mensagem:
“Muito bem! Você concluiu esta parte da instalação. Agora o 
WordPress pode se comunicar com seu banco de dados.”
Web Design em Wordpress
48
Agora que o WordPress já estabeleceu uma conexão com o banco 
de dados, ele solicitará informações sobre o site que você deseja criar, 
como:
 • Título do site – você deve escolher um título para o seu site. Ele 
aparecerá no cabeçalho da sua página.
 • Nome de usuário – é preciso escolher um nome para realizar login 
na plataforma.
 • Senha – você deve escolher uma senha de acesso. Caso a senha 
escolhida seja considerada fraca pelo WordPress, você deve 
marcar uma opção para confirmar que utilizará essa senha mesmo 
assim. 
 • Seu endereço de e-mail.
Além disso, você pode marcar uma opção para evitar que seu site 
seja indexado por mecanismos de busca, como o Google. Entretanto é 
exibida uma mensagem alertando que somente os próprios mecanismos 
de buscas podem decidir por isso.
IMPORTANTE:
Apesar de as informações pedidas nessa etapa serem 
obrigatórias, elas não são definitivas. Você pode alterá-las 
posteriormente.
Agora, basta clicar em “Instalar WordPress” e, se tudo ocorrer bem, 
aparecerá a seguinte tela:
Web Design em Wordpress
49
Figura 11 – Instalação concluída
Fonte: WordPress.org. Acesso em: 9 ago. 2020.
Pronto, o WordPress foi instalado com sucesso e você deve clicar 
em “iniciar sessão” para realizar seu primeiro acesso. Para realizar o login, 
você deve informar seu nome de usuário ou e-mail e senha.
IMPORTANTE:
Perceba que criamos um banco de dados e configuramos o 
ambiente do WordPress para a criação e o gerenciamento 
de um único website. Logo, caso você queira construir 
mais de um site em localhost, todo esse processo deve ser 
repetido para cada novo website.
Após finalizar a instalação do WordPress, nós, enfim, obtemos 
as três ferramentas citadas anteriormente para que um website possa 
funcionar localmente. Além disso, deixamos todo o ambiente configurado 
para a construção do site. 
Ao acessar o painel de controle do seu site, as seguintes opções 
estarão em destaque:
 • Personalize seu site.
 • Escreva seu primeiro post.
 • Adicione uma página Sobre.
 • Configurar sua página inicial.
 • Veja seu site.
Web Design em Wordpress
http://localhost/wordpress2/wp-admin/customize.php
http://localhost/wordpress2/wp-admin/post-new.php
http://localhost/wordpress2/wp-admin/post-new.php?post_type=page
http://localhost/wordpress2/wp-admin/customize.php?autofocus%5bsection%5d=static_front_page
http://localhost/wordpress2
50
Se você escolher a opção “veja seu site”, perceberá que o site é 
apenas um esqueleto esperando ser construído. Vamos começar a 
personalizar esse site utilizando temas na próxima unidade. Até lá!
RESUMINDO:
Chegamos ao fim deste capítulo aprendendo como 
podemos configurar um ambiente para desenvolver 
um website em localhost utilizando o WordPress. Ao 
longo desta unidade, conhecemos o funcionamento e 
as principais funcionalidades da plataforma WordPress, 
identificamos os principais elementos utilizados para 
estruturar uma página web e, por fim, aprendemos como 
instalar o servidor web Apache e utilizá-lo em conjunto 
com outras ferramentas para construir um ambiente de 
desenvolvimento de websites.
Web Design em Wordpress
51
REFERÊNCIAS
ALECRIM, E. Conhecendo o Servidor Apache (HTTP Server Project). 
Infowester, 2006. Disponível em: https://www.infowester.com/servapach.
php. Acesso em: 20 jul. 2020.
APACHE. HTTP Server Project. Disponível em: http://httpd.apache.
org/ABOUT_APACHE.html. Acesso em: 20 jul. 2020.
APACHE. Module Index. Disponível em: https://httpd.apache.org/
docs/2.4/mod/. Acesso em: 25 jul. 2020.
ESTRELLA, C. Como usar o XAMPP para configurar um site 
WordPress local em 3 passos. Hostinger, 2019. Disponível em: https://
www.hostinger.com.br/tutoriais/como-usar-o-xampp/. Acesso em: 22 jul. 
2020.
FETTER, V. Template WordPress: Como escolher o melhor tema 
para o seu site ou blog. Hostgator, 2015. Disponível em: https://www.
hostgator.com.br/blog/template-wordpress-como-escolher/. Acesso 
em: 18 jul. 2020.
GAMA, P. WordPress – Conheça a origem e as vantagens do maior 
CMS da Internet. 2018 Disponível em: https://www.pablogama.com.
br/wordpress-conheca-a-origem-e-as-vantagens-do-maior-cms-da-
internet/. Acesso em: 19 jul. 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 jul. 2020.
LONGEN, A. O que é Apache. Hostinger, 2020. Disponível em: 
https://www.hostinger.com.br/tutoriais/o-que-e-apache. Acesso em: 20 
jul. 2020.
LONGEN, A. O que é WordPress. Hostinger, 2020 Disponível em: 
https://www.hostinger.com.br/tutoriais/o-que-e-wordpress. Acesso em: 
18 jul. 2020.
Web Design em Wordpress
https://www.infowester.com/servapach.php
https://www.infowester.com/servapach.php
http://httpd.apache.org/ABOUT_APACHE.html
http://httpd.apache.org/ABOUT_APACHE.html
https://httpd.apache.org/docs/2.4/mod/
https://httpd.apache.org/docs/2.4/mod/
https://www.hostinger.com.br/tutoriais/como-usar-o-xampp/
https://www.hostinger.com.br/tutoriais/como-usar-o-xampp/
https://www.hostgator.com.br/blog/template-wordpress-como-escolher/
https://www.hostgator.com.br/blog/template-wordpress-como-escolher/https://www.pablogama.com.br/wordpress-conheca-a-origem-e-as-vantagens-do-maior-cms-da-internet/
https://www.pablogama.com.br/wordpress-conheca-a-origem-e-as-vantagens-do-maior-cms-da-internet/
https://www.pablogama.com.br/wordpress-conheca-a-origem-e-as-vantagens-do-maior-cms-da-internet/
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/o-que-e-apache
https://www.hostinger.com.br/tutoriais/o-que-e-wordpress
52
MARQUES, B. O que é plugin. Hostinger, 2019. Disponível em: 
https://www.hostinger.com.br/tutoriais/o-que-e-plugin/. Acesso em: 19 
jul. 2020.
MCCOLLIN, R. Tipos de publicações personalizadas do WordPress: 
O Guia Tudo-em-Um para Criar e Utilizá-los. Kinsta, 2020. Disponível 
em: https://kinsta.com/pt/blog/tipos-publicacoes-personalizadas-
wordpress/. Acesso em: 18 jul. 2020. 
PATEL, N. Layouts para sites. 2020. Disponível em: https://neilpatel.
com/br/blog/layouts-para-sites-melhorar-conversao. Acesso em: 21 jul. 
2020.
TADEU, G. Como funciona o WordPress. 2018. Disponível em: 
https://www.gt2s.com.br/blog/como-funciona-o-wordpress/. Acesso 
em: 18 jul. 2020.
WORDPRESS. 2020. Disponível em: https://wordpress.org/. Acesso 
em: 19 jul. 2020. 
Web Design em Wordpress
https://www.hostinger.com.br/tutoriais/o-que-e-plugin/
https://kinsta.com/pt/blog/tipos-publicacoes-personalizadas-wordpress/
https://kinsta.com/pt/blog/tipos-publicacoes-personalizadas-wordpress/
https://neilpatel.com/br/blog/layouts-para-sites-melhorar-conversao
https://neilpatel.com/br/blog/layouts-para-sites-melhorar-conversao
https://www.gt2s.com.br/blog/como-funciona-o-wordpress/
https://wordpress.org/
	_Hlk46591632
	O WordPress
	WordPress.com Versus WordPress.org
	Características
	Funcionalidades
	Extensões
	Temas
	Plugins
	Esqueleto de um Website
	Layout do WordPress
	Header
	Content
	Sidebar
	Sidebar
	Trabalhando com Imagens
	Instalando um Servidor Apache
	História
	Características
	Instalando no Linux
	Instalando no Windows
	Website em Localhost
	Configurando o Banco de Dados MySQL
	Instalando o WordPress