Vous êtes sur la page 1sur 70

P

A
R
A
T
O
D
OS

Nelmi Ederson Fernandes


Sumário
1 - O que é Wordpress ......................................................................4
2 – O que é e como Registrar Domínio ............................................6
Verificando a disponibilidade do endereço .............................8
Efetuando o cadastro no serviço .............................................9
Registrando o domínio ............................................................9
3 - Como contratar hospedagem para seu site ................................12
4 - Como Instalar o Wordpress (SERVIDOR) ...............................14
5 - Como Instalar o Wordpress - Parte 2 ........................................18
6 - Painel Administrativo ................................................................19
7 - Instalando tema no WordPress ..................................................26
8 – Instalando Plugins.....................................................................28
9 - Publicando posts e categorias ....................................................30
10 - Como categorias no post do WordPress ..................................36
Adicionar Nova Categoria.....................................................36
Tabela de Categorias .............................................................37
Edição Rápida .......................................................................37
11 - Criando página inicial do site ..................................................38
12 - Configurando página inicial do site em WordPress ................41
13 - Como criar menu no WordPress .............................................46
14 - Como inserir imagens no post WordPress ..............................50
Inserir Imagem na Página......................................................50
Configurações de exibição ....................................................52
15 - Conhecendo os widgets do WordPress ...................................54
16 - Como utilizar plugin de Posts Recentes ..................................55
17 - Botões de redes sociais no WordPress ....................................56
18 - Como colocar slider de posts no Wordpress ...........................59
Colocando uma Apresentação de Slides em uma Postagem de
Blog .......................................................................................59
19 - Formulário de contato com Contact Form 7 ...........................61
20 - Como alterar a aparência do formulário de contato Contact
Form 7.............................................................................................64
21 - Inserir mapa Google Maps no post .........................................66
22 - Incluir índice dentro de um post ..............................................68
Tabela de conteúdo ou índice ................................................69
Usando a âncora para linkagem externa ................................70
Conclusão .......................................................................................72
1 - O que é Wordpress

Se você chegou até esse curso


muito provavelmente já percebeu a
importância de ter um site para
seu negócio e em algum momento
ouviu falar em WordPress.

Mas o que é WORDPRESS?

WordPress é aplicativo de sistema de


gerenciamento de conteúdo para web, escrito em
PHP com banco de dados MySQL, é uma software de
vanguarda para publicação de blogs e sites na
internet. Com foco na estética, nos Padrões Web
e na usabilidade. Ao mesmo tempo é um software
livre, gratuito e feito por você e para você. As
causas do seu rápido crescimento são, entre
outras, seu tipo de licença (de código aberto),
sua facilidade de uso e suas características
como gerenciador de conteúdos. É distribuído sob
a GNU General Public License sendo gratuito.

O WordPress é utilizado também como plataforma


de desenvolvimento de sites de comércio
eletrônico, revistas, jornais, portfólio,
gerenciador de projeto, diretório de eventos e
outros conteúdos devido a sua capacidade de
extensão através de plugins, temas e programação
PHP.

O WordPress possui um sistema de modelos,


através de um processador de modelos. Os
usuários podem re-organizar o layout através de
widgets sem precisar editar códigos PHP ou HTML;
eles também podem instalar e alternar entre
temas WordPress. Os códigos PHP e HTML dos temas
também podem ser editados para adicionar
funcionalidades personalizadas.
2 – O que é e como Registrar
Domínio
Domínio é um nome que serve para localizar e
identificar você ou sua empresa na Internet.
O domínio é a base de toda a sua
identificação profissional na Internet. É o
“nome” do seu site e dos seus e-mails. Ele é
composto por um nome e uma extensão, exemplo:
www.nomedaempresa.com.br
Nome: nomedaempresa
Extensão: .com.br
Estes nomes são normalmente chamados de
"domínios" (por exemplo: www.wordpress.com).
O nome domínio foi criado com o objetivo de
facilitar a memorização dos endereços de
computadores na Internet. Sem ele, teríamos
que memorizar uma sequência grande de
números.
Cada computador ligado à Internet necessita
de um endereço para ser localizado pela
linguagem da rede chamada de IP ou Internet
Protocol.
Os endereços IP são compostos por uma
sequência de números, como por exemplo:
185.713.706.14.
Para consultar um site o seu navegador
(browser) necessita do endereço IP onde o
site está alojado.
Como endereços de IP não são fáceis de
memorizar a atribuição de nomes facilitam a
memorização e localização não só de sites,
mas de qualquer coisa que se deseje
encontrar na rede (internet).
A divulgação de domínios na internet fica a
cargo das entidades registradoras que, se
utilizam do protocolo hierárquico DNS para
publicar as informações.
Para registrar um domínio, é necessário ser
uma entidade legalmente representada ou
estabelecida no Brasil como pessoa jurídica
(Instituições que possuam CNPJ) ou pessoa
física (CPF) que possua um contato em
território nacional.
Existem serviços estrangeiros como o
GoDaddy, o mais usado pelo mundo, que
permitem registrar domínios ".com", ".net",
entre outros. No Brasil, existe o
Registro.br, um site em que você pode
checar se o nome do domínio está disponível
para uso, realizar o cadastramento e pagar
as taxas anuais para continuar com o
endereço. Agora, explicaremos o que você
deve fazer para transformar o seu site em
um com domínio “.com.br”.
Verificando a disponibilidade do
endereço
O primeiro passo ao acessar o Registro.br é
verificar se o domínio que você deseja
registrar já não foi utilizado por outra
pessoa. Na página inicial, você verá um
campo para incluir o nome do site que você

deseja cadastrar.
(Fonte da imagem: Reprodução / Registro.BR)

Caso o domínio já tenha sido registrado, o


serviço mostrará opções com o mesmo
endereço, mas com finais diferentes. Para
entender melhor o que cada terminação
significa (aquele "algumacoisa.br"), o
Registro.BR disponibiliza uma página (que
você pode visitar clicando aqui) explicando
cada uma. Assim, você poderá ver qual se
encaixa melhor ao seu site.
Efetuando o cadastro no serviço
Se tudo ocorreu como planejado, o endereço
está disponível para ser registrado e você
pode se cadastrar no serviço. Será
necessário incluir seus dados, como e-mail,
nome completo, endereço e telefone, assim
como criar uma senha dentro do serviço.
Feito tudo isso, você estará pronto para

registrar o seu domínio.


(Fonte da imagem: Reprodução / Registro.BR)
Registrando o domínio
(Fonte da imagem: Reprodução / Registro.BR)

Com o cadastro efetuado, é hora de realizar


o registro do endereço. Para cadastrar o
domínio, é necessário informar alguns dados
como CPF (em caso de pessoa física) ou CNPJ
(pessoa jurídica), endereço e telefone
válidos.
Note que existem opções do tipo de domínio
que você quer registrar e os valores
cobrados.
O plano do serviço é de R$ 40,00 (Agosto /
2018) por ano, com adicional de R$ 37,00
por ano complementar.

Também é necessário informar DNS do


servidor em que o seu site se encontra,
para poder realizar o direcionamento de
tráfego para o endereço que será
registrado.
No campo inferior, é possível ler o
contrato do serviço prestado pelo
Registro.BR.
No caso de querer um domínio .com, você
pode contratar o serviço pelo link:
GoDaddy.com.
3 - Como contratar hospedagem para
seu site

Agora chegamos em um ponto essencial na


construção de um site wordpress, a
hospedagem. Esta deve ser compatível com o
wordpress, muitas hospedagem não suportam
um site wordpress, na opção mais barata. No
entanto, em outras opções é suportada.
Veja o que você levar em consideração na
hora de escolher a hospedagem para o seu
site:
 Recursos oferecidos
 Espaço,
 Transferência,
 Domínios
 E-mails
Estes são os recursos mais importantes para
considerar, além do sistema operacional,
normalmente LINUX ou WINDOWS. Compare os
recursos oferecidos pela empresa de
hospedagem e como ele atende às suas
necessidades.
Para comparação entre as hospedagens
acesse:
https://tudosobrehospedagemdesites.com.br/h
ospedagem-wordpress/.
4 - Como Instalar o Wordpress
(SERVIDOR)

Para instalar o wordpress, primeiro é


necessário a instalação de um servidor,
recomendamos o XAMPP, porém existem outros
mas a sua instalação é basicamente a mesma.

Instalando um Servidor Web Local


Para nosso curso vamos utilizar o XAMPP
Server (conhecido anteriormente como WAMP5) é
um software publicado sob a GNU General
Public License desenvolvido pela PHP Team.
É usado para instalar rapidamente no
computador os softwares PHP 5, MySQL e
Apache, disponibilizando suporte ao uso de
scripts PHP localmente no Windows.
Existe um módulo para cada um dos sistemas
operacionais: WINDOW, LINUX, OSX e SOLARIS.
Para baixar, acesse:
https://www.apachefriends .org/download.html.
Se o seu sistema operacional é 64 bits, não
se preocupe, use o modulo de 32 bits sem
problemas. Após baixar o XAMPP. Inicie a
instalação clicando 2X no ícone do programa.
Obs.: verifique se a porta 80 está liberada, o
programa SKYPE usa esta porta como default. Troque
para a porta 82. o Xampp só funciona na porta 80.

Basta ir clicando e avançando. Após a


instalação será mostrado próximo ao relógio o
ícone de seu servidor WEB. Caso o XAMPP não
estiver ativo, clique no ícone que esta na
sua área de trabalho. Note que o programa já
ativa o APACHE e o MySQL, se não, é só ativar
clicando no ícone correspondente.
Agora para ver se o servidor está ativo abra seu
navegador preferido e basta digitar o comando:
http://localhost:80

Agora seu servidor esta instalado e funcionando.


5 - Como Instalar o Wordpress
- Parte 2
1. Baixe e descompacte o pacote do WordPress, se
você ainda não
o fez.
2. Abra o
wordpress:
http:\\localhos
t\install.php

3. Digite dados
abaixo:

Mais detalhes basta


dar uma olhada no
seguinte link:

https://codex.wordpress.org/pt-
br:Novo_no_WordPress_-_por_onde_começar
6 - Painel Administrativo

Para entrar no pinel de controle digite em


seu navegador http://localhost//wp-admin

Digite seu nome e senha já cadastrado na


instalação e clique em lembrar para não ter
que ficar decorando a senha.

Você vai para a página mostrada abaixo:


Como você pode ver, o painel admin conta com
um menu é vários submenus localizados à
esquerda. É através deles que você encontrara
divido e catalogado todas as opções de
gerenciamento de todo o conteúdo do seu site.
Segue abaixo uma tabela com todos os menus e
submenus e as suas principais funções no
gerenciamento do seu site.
Local de entrada para a área
administrativa do WordPress. Aqui
você poderá ver um resumo de
algumas sessões do seu site. Ex:
Últimos comentários realizados,
resumo de quantos post’s estão
publicados, quantas páginas foram
publicadas e quantos comentários
foram realizados em seu site. É
possível ver também as
atualizações que são necessárias
de se realizar, clicando no
submenu Atualizações.
Aqui estão as opções para a
criação de novos posts. Você
poderá criar um post, ver todos os
posts já criados (e poderá editá-
los. também). Nos submenus
Categorias e Tags, você também tem
as opções de criar e gerenciar
categorias e tags para organizar,
categorizar e distribuir melhor os
posts existentes, de acordo com o
conteúdo abordado.

Nesta opção, você poderá adicionar


imagens e áudios para
posteriormente anexarem em seus
posts ou páginas. Você poderá
fazer o upload desses arquivos,
diretamente do seu computador para
o seu painel admin. Após o upload
ter sido realizado, você também
poderá editá-las. Essa edição
conta com a possibilidade de
rotacionar, recortar e
redimensionar.
Esta opção é muito semelhante a opção
de posts. Aqui você poderá criar
páginas para seu site, gerenciar o seu
conteúdo, adicionar imagens a elas e
etc. A diferença entra páginas e posts
está na função que cada uma exerce
dentro do seu site. Indicamos o uso de
posts para sessões como notícias e
informativos periódicos, ex: Blogs e
portais de notícias (conteúdos que são
postados constantemente e precisam ser
ordenados e categorizados). Indicamos
o uso de páginas para o caso de algum
conteúdo que não será atualizado
constantemente, ex: páginas
institucionais e página de contato
(conteúdos que não são postados
constantemente e que não precisam ser
ordenados ou categorizados, pois
exercem funções únicas e quase nunca
são alteradas).
Neste local você gerenciará os
comentários que foram realizados
no seu site. Esta sessão é mais
comum em site tipo blog ou portal
de notícias, onde o fluxo de
comentários dos leitores são
constantes. Neste menu você poderá
ver todos os comentários
realizados e posteriormente poderá
aprová-los para serem exibidos no
seu site ou excluí-los, caso
possuam conteúdo impróprio ou
indesejável.
Este menu é um dos mais complexos
e cheio de opções. Como seu
próprio nome já diz, é nele que
podemos alterar toda a aparência
do site. Ele possuí submenus que
possibilitam a adição de novos
templates, adicionar Widgets,
criar e personalizar os menu do
site (não o confundam com o menu
da Área Admin, pois se trata de
outra coisa), editar o código do
site e outras opções de
customização que vão depender do
template que utiliza. Estas opções
que aparecem na imagem ao lado,
são as opções básicas de um
template nativo em WordPress. Os
templates que nós da Bueno Sites
criamos, possuem algumas opções
diferentes, para dar mais
liberdade e facilitar o
entendimento de nossos clientes no
momento da atualização de seus
próprios sites.
Uma das características principais
do WordPress é a capacidade de
adicionar funcionalidades extras
através de plugins. Os plugins são
incrementos que facilitam a vida
de quem administra sites
desenvolvidos em WordPress. Com
eles, uma infinidade de ações
podem ficar disponíveis no seu
site com apenas alguns cliques. E
é neste menu que você poderá
adicionar ou excluir, gerenciar
quais plugins devem ficar ativos
ou inativos, e se você tem
conhecimentos de programão PHP,
poderá até editá-los.
Esta sessão é pouco usual, mas
muito importante. Ela fica a cargo
de quem administra e de
preferência de quem desenvolveu o
site. Aqui você poderá exportar
configurações deste site WordPress
para um outro novo site WordPress
em uma outra hospedagem e também
poderá importar configurações de
um outro site WordPress para esta
nova hospedagem a fim de criar um
novo site WordPress com as
características que está
importando. Parece confuso mais
não é. Caso esteja começando agora
no mundo do desenvolvimento web,
sugiro ler mais alguns artigos
antes de se aventurar aqui, pois
pode comprometer o funcionamento
do seu site assim como do seu
banco de dados.

Observação: Tenha certeza de que sabe como


proceder nesta sessão pois qualquer engano
poderá prejudicar o funcionamento do site.
Por isso, recomendamos que apenas pessoas
com domínio técnico assumam a
responsabilidade por essa sessão.
É neste menu que você administrará
os usuários. Você pode cadastrar
novos usuários, remover usuários
existentes, editar seus dados
cadastrais, dar mais liberdade ou
restringir o acesso de suas ações
dentro da Área Admin.

O menu configurações é o primeiro


que você visitará após ter acabado
de instalar o WordPress na sua
hospedagem. Nele você terá acesso
a todas configurações principais
do site. É um menu muito
importante, pois através dele,
você define coisas como:

 nome do seu site


 endereço de e-mail padrão (para
receber avisos do seu site e que
servirá de base para o formulário
de contato)
 permissões de quem se torna novo
membro
 a forma como será exibido a data e
hora nos posts do seu site
 opções para publicação de posts
via e-mail
 opções para a exibição dos posts
(quantidade de posts por página e
qual página exibirá o post)
 configuração padrão para os
tamanhos das mídias (imagens)
 e por último uma das opções mais
interessantes para intensificar o
seu trabalho de SEO que o
WordPress fornece, os Links
Permanentes

Observação: Tenha certeza de que sabe como


proceder nesta sessão pois qualquer engano
poderá prejudicar o funcionamento do site.
Por isso, recomendamos que apenas pessoas
com domínio técnico assumam a
responsabilidade por essa sessão.

7 - Instalando tema no
WordPress

Ao acabar de ser instalado o wordpress vem


com um tema pré-determinado, o tema twenty
fifteen conforme figura acima:
Mas se você quer instalar um
outro tema, procure na
internet em páginas de temas
ou vá para o site
www.wordpress.org e clique
em temas, escolha o que
melhor lhe servir e baixe
para o seu computador. O
WordPress.com não possui
esse recurso.
Você pode baixar temas
diretamente para o seu blog,
usando a opção Adicionar novo Temas no
submenu Aparência. Vá ao Painel de
Administração em Painel > Aparência >
Temas.
1. Use o submenu ou a pesquisa (se quiser
marque opções de filtro) para localizar
um tema que você gostaria de usar.
2. Clique no link Visualizar para
visualizar o tema antes de fazer
download e instalar.
3. Utilize o link Download no topo do
submenu para fazer download do tema.
4.Clicar em um botão para ativar o tema.
8 – Instalando plugins
Esta é a forma mais fácil de instalar plugins
no WordPress. Para começar, vai ate o Painel
de Administração do WordPress, vá a Plugins >
Adicionar Novo.
Se o plugin que você pretende instalar,
estiver no repositório oficial de plugins (em
wordpress.org/plugins):
 Procure pelo nome do plugin no canto
superior direito
 Clique em "instalar" para instalar o
plugin
 Aguarde até a instalação terminar e no
fim clique em ativar o plugin
Se o plugin estiver no seu computador (por
exemplo, no caso de ter comprado o plugin):
 Na página do plugin, clique em "carregar
plugin" no canto superior esquerdo
 Na nova página, escolha o ficheiro .zip
do plugin e faça o upload
 Espere até o upload e instalação
terminar e no fim clique em ativar o
plugin
Duas notas importantes:
 Em alguns casos é necessário inserir os
dados de FTP ao instalar/fazer o upload
dos plugins. Se não souber os dados,
pergunte a sua hospedagem
 Se tiver o plugin no seu computador,
faça apenas o upload do .zip do plugin.
Muitos autores optam por criar uma pasta
e colocar ficheiros de ajuda e o plugin
dentro só vai conseguir fazer o upload
se enviar o .zip do plugin
Obs.: ativar todos os pluglins já
instalados.
9 - Publicando posts e
categorias
Antes de criar um post vamos incluir um
plugin para edição de conteudo (POST). Na
parte de plugins, clique em adicionar
plugin, depois procure pelo plugin TinyMCE
como na imagem abaixo. Instale e ative o
plugin.

O TinyMCE é um dos melhores plugins do


wordpress para edição de conteúdo, ele
permite acrescentar dezenas de outras
opções de formatação. Dentre elas podemos
destacar: justificar texto, incluir
tabelas, alterar cor do texto, alterar
tamanho da fonte, indentar para direita,
indentar para esquerda, incluir código e
código fonte, emoticons e várias outras.
Depois na sua área de plugins encontre o
TinyMCE e selecione a opção configurações.
Logo em seguida aparecerá as suas opções de
formatação, que são as opções padrões do
wordpress e em baixo as novas opções que o
plugin disponibiliza. Arraste e solte as
ferramentas que desejar.

Depois de colocar as opções que desejar e


clicar em salvar, retorne ao post e
atualize a página. Você verá as novas
ferramentas de formatação disponíveis.
Digite os seu post no conteudo da pagina
escolha a categoria detalhe a descrição da
pagina e inclua uma foto.

Abaixo mostra os principais comandos para


montar um post.
 b -Tag HTML para negrito.
 i – Tag HTML para itálico.
 B – </B> – Tag HTML para texto citado.
 del – <del></del>
 Tag HTML para texto excluído.
 link – <a href=”http://exemplo.com”></a>
 Tag HTML para link.
 ins – <ins></ins> Tag HTML para texto
inserido. Navegadores mostram como sublinhado.
 img – <img> </img> Insere o endereço de uma
imagem.
 ul – <ul></ul> Tag HTML para lista comum.
 ol – <ol></ol> Tag HTML para lista numerada.
 li – <li></li> Tag HTML para cada item de uma
lista.
 code – <code></code> Tag HTML para texto de
código. Geralmente usa fonte monoespaçada, como
Courier.
 more – <!–more–> Tag WordPress para quebrar
uma postagem mostrando um “teaser” na página
inicial, por exemplo.
 Fechar Tags – Fecha qualquer tag HTML que
estiver aberta – mas lembre-se que é uma forma
automatizada de impedir defeitos no código! Você
deve verificar seu código.
Uma das grandes vantagens do WordPress é a
facilidade de utilização para principiantes
na criação de sites. É por isso que o
aconselhamos, de forma tão clara, para
todos os que pretendem criar um site
pessoal ou profissional e não perder muito
tempo com as ferramentas técnicas. Criar um
post é uma tarefa muito simples no
WordPress, mas há algumas funcionalidades
que podem ser utilizadas para melhorar
ainda mais o conteúdo.
Muitas pessoas sentem-se intimidadas por
verem o painel de administração do
WordPress, mas na realidade é bastante
simples. Não perde mais do que uma hora
para compreender tudo o que pode fazer.
Compare esse tempo com o de ter de aprender
como fazer um site de raiz. Criar um post é
a primeira coisa que precisa de fazer para

ter o conteúdo.
Como facilmente se repara, cada post tem um
título. Logo abaixo do título está o Link
Permanente, que lhe mostra como vai ser o
endereço dessa página. O Link Permanente é
criado utilizando as palavras do título do
post. No entanto, você pode modificá-lo da
forma que bem entender. Tem de o fazer
ANTES de o post ser publicado. Sempre que
possível, coloque palavras-chave no Link
Permanente.
Outra funcionalidade importante é a
contagem das palavras do post, que pode ser
vista em baixo à esquerda. É importante que
os seus posts tenham pelo menos 350
palavras, para que sejam melhores
classificadas nos motores de busca. Os
motores de busca adoram conteúdo.
O menu que diz “Adicionar Multimédia” tem
funcionalidades muito úteis, como por
exemplo:
 Adicionar uma imagem
 Adicionar vídeo
 Adicionar áudio
 Adicionar mídia (um ficheiro em PDF, por
exemplo)
Sempre que precisar de adicionar algum
destes elementos à sua página, basta
selecionar este menu e carregar os
ficheiros a partir do seu computador ou de
um servidor (como o Youtube ou o Flickr).
Sempre que utilizar uma imagem que não seja
sua, contacte o autor e peça permissão para
a poder utilizar.
10 - Categorias no post

Através do menu Posts > Categorias é


possível criar novas categorias, editar ou
excluir as existentes.

Na esquerda, estão os campos de


preenchimento para criar uma nova
categoria. Na direita, é listado todas as
categorias já criadas, mostrando
informações como nome, descrição, slug e o
número de posts existentes em cada
categoria. Coloque o cursor do mouse em
cima da categoria para mostrar os links de
ação como Editar, Edição Rápida, Excluir e
Ver.
Na caixa de pesquisa acima é possível
procurar por um post através de palavras ou
frases que compõem o título do post.
Adicionar Nova Categoria
 Nome – nome (título da categoria) que
vai aparece em seu site (preenchimento
obrigatório).
 Slug – é uma versão amigável do url
(opcional).
 Pai – definir uma hierarquia para a
categoria. Exemplo: Uma categoria (pai)
chamada Notícias e nela haver categorias
para Tecnologia, Esporte, Cidadania e etc.
(opcional).
 Descrição – breve descrição da
categoria (opcional).
 Botão adicionar nova categoria – cria a
categoria ao WordPress.
Tabela de Categorias
 Nome – nome do post criado.
 Descrição – breve descrição da
categoria
 Slug – slug ou url amigável da
categoria.
 Posts – exibe o número de posts, em
formato de link, existente em cada
categoria.
Edição Rápida
Coloque o cursor do mouse em cima de uma
categoria para mostrar os links de ação:
 Editar – clique para editar a
categoria.
 Edição Rápida – clique para editar
rapidamente alguns aspectos da categoria
 Lixeira – exclui a categoria
permanente.
 Ver – visualiza a categoria no site,
listando os posts cadastrados nela.
Voce deve tratar com carinho as categorias
pois elas são fonte de acesso para o
google.
11 - Criando página inicial
do site
Para criar uma nova página, inicie a sessão
no WordPress. Vá em Painel > Páginas >
Adicionar nova.

Depois que você escolher esta opção,


aparecerá uma janela com duas opções de
inserção de texto.

Assim como você pode ter Subcategorias


dentro de categorias, você também pode ter
SubPáginas dentro de suas páginas, criando
uma hierarquia de páginas.
Por exemplo: você está criando um site
WordPress sobre esportes de aventura e
gostaria de criar uma página individual
para cada modalidade. Você poderia começar
criando uma página chamada “Tirolesa” e
descrever informações gerais sobre esta
atividade. Então você teria que criar uma
série de páginas que seriam SubPáginas
relacionadas a “Tirolesa”, como por
exemplo, dicas de segurança ou lugares onde
praticar o esporte. Outra página individual
é feita para “Equipamentos” e que
apresentam subpáginas de onde encontrar os
equipamentos necessários para a prática
esportiva.
Para criar subpáginas, é só definir sua
página mãe enquanto estiver criando uma
página.
WordPress é capaz de gerar automaticamente
uma lista de páginas do seu
site. Há basicamente quatro
maneiras de mostrar as
páginas que criou:
Widget Páginas

Adicione o item Páginas à


sua área de widgets para
mostrar todas as suas
páginas. Você pode mostrar
como lista suspensa,
excluir páginas da exibição
etc.
1. Vá em Painel > Aparência > Widgets
2. Adicione o item Páginas
Menus do tema
Se o seu tema suporta a funcionalidade de
menu do WordPress, é possível inserir
páginas em um menu que será mostrado pelo
tema.
Vá em Painel > Aparência > Menus
1. Crie um menu
2. Adicione as páginas ao menu criado, marcando-
as na caixa de páginas à direita.
12 - Configurando página
inicial do site em WordPress

Quando instalamos o WordPress ele já vem


configurado as páginas principais e blogs.
Porém, quando fazemos upload de template e
quick installs (importar template completo
(com imagens e escritos)), as páginas não
estão configuradas. Então este breve
tutorial é para auxiliar neste e em outros
casos.
O que mais podemos fazer com isso?
Podemos definir uma página de manutenção,
trocar a página principal momentaneamente
ou continuamente, definir nosso blog ou
criar uma página para o blog, enfim, temos
um enorme leque de possibilidades onde cabe
apenas a nossa criatividade e necessidade.
Então vamos lá, pressupondo que já estejam
criadas as páginas, home e blog, ou alguma
página de construção nós devemos:
Passo a Passo
Primeiro passo: No menu Opções ou Configurações
(depende a tradução) que está localizado no
menu lateral, clique em Leitura. Como pode ser
visto na imagem a esquerda!
Após feito isso, nas opções de leitura,você
deve escolher qual opção você vai utilizar, são
elas:
Os seus artigos mais recentes: está opção tem
como função utilizar a página principal do seu
site como exibição dos seus artigos mais
recentes. A configuração desta página varia de
template para template, então, caso escolha
esta opção você estará nas mãos do seu
template, terá uma limitação na criação.
Uma página estática (selecionar abaixo): aqui
você irá selecionar qual página você quer
utilizar como home e qual página você quer
utilizar para o blog. Vale lembrar que, a
página inicial é aquela que é acessada pelo seu
domínio e a blog ficará na página que você
configurar como “seudominio.com.br/suaPágina”.
Caso você queira utilizar alguma landingpage,
página de captura, página de manutenção, etc
para sua homepage, você pode simplesmente
selecionar ela no campo página inicial e
desabilitar os menus, cabeçalhos e rodapés, por
exemplo.
As demais configurações, pelo próprio título já
se dizem: a quantidade de posts que você quer
exibir na sua página de blogs (ou até se você
selecionar o campo “os seus artigos mais
recentes”) e a maneira que desejas exibi-los:
completo ou resumo.
A última opção serve caso você não queira ser
encontrado pelos mecanismos de busca (Google,
Yahoo, Bing, etc), porém é totalmente
desaconselhável fazê-lo, pois nosso objetivo é
trafego, não é?
13 - Como criar menu no WordPress
A área a direta da tela é onde ficam o
menus criados e onde também criamos
diferentes menus. Os menus que criar
ficarão como abas nesta área e você pode
criar vários menus mesmo que não use sem
problema algum. A primeira coisa a fazer é
informar um nome para seu menu, escolha um
nome que tenha a ver com a área que o menu
vai aparecer por exemplo.
Se o tema atual não suporta menus, na caixa
Posições no Tema a esquerda, aparece a
mensagem "O tema atual não suporta menus,
mas você pode usar o widget "Menu
Personalizado" para adicionar quaisquer
menus que você criar aqui a barra lateral
do
tem
a".

1.
1. Criando o Menu
Para criar um menu, clique na aba + na área a
direita da tela, digite um nome, por exemplo Menu
para o topo e clique em Criar Menu.

2. Adicionando itens
A seguir, marque os itens nas caixas ou módulos à
esquerda e clique no botão Adicionar ao Menu. É
possível adicionar: páginas, posts, categorias,
tags, taxonomias disponíveis e links
personalizados, para mostrar caixas destes itens
clique na aba Opções de Tela e marque as caixas
que quer mostrar.

3. Organizando o menu
Os itens adicionados ficam listados linearmente na
área a direita, você pode arrastar e soltar cada
item para a posição e ordem que quiser.

4. Itens Aninhados
Ou submenus, são itens que aparecem como um menu
suspenso ao mover o cursor do mouse sobre um item.
Este recurso existe nos temas padrão (TwentyTen e
TwentyEleven). Nota: Antes de criar submenus, veja
se seu tema está codificado para mostrá-los,
alguns temas só permite mostrar menus principais,
ou seja, sem submenus.

5. Editando itens individualmente


Além de ordenar e aninhar itens de menu, é
possível também editar algumas características dos
itens individualmente, por exemplo, o nome que
será exibido no item ou Rótulo, destino do link ao
clicar etc, são as propriedades avançadas de menu.
Para acessar as opções de um item no seu menu,
clique na seta no canto esquerdo do item. As
características editáveis dos itens são:

 Rótulo de navegação - O texto que aparecerá


para o item. Por exemplo, se um item aparecem como
contato, poderá modificar para Contato.
 Atributo do título - O título para o link do
item.
 Abrir link em uma nova janela/aba - Faz com que
o link seja aberto em nova janela do navegador.

 Classes de CSS (opcional) - Oferece uma caixa


de texto para informar uma classe CSS personalizada
ao item.
 Relação de Links (XFN) - Oferece uma caixa de
texto para informar a relação XFN do item.
 Descrição - uma caixa de texto para inserir uma
descrição ao item.

6. Clique na aba Gerenciar Posições

Para definir onde o menu que criou deve aparecer


selecione as opções de posição listadas.
14 - Como inserir imagens no post

Posicione o cursor do mouse na área

desejada e clique no botão Adicionar Mídia.

1. Envie o arquivo para biblioteca na


opção “Enviar Arquivos” ou selecione a
imagem na opção “Biblioteca de mídia”.
2. Ao selecionar a imagem, verifique e
faça as configurações do anexo conforme
necessário.
3. Clique no botão Inserir no Post.
Para inserir imagens no WordPress, primeiro
é necessário fazer upload dos arquivos no
menu Mídia. Também é possível inserir
diretamente na Página/Post através do botão
Adicionar Mídia, disponível acima da barra
de ferramentas de conteúdos.
Inserir Imagem na Página
1. Posicione o cursor do mouse na área
desejada e clique no botão Adicionar Mídia.
2. Envie o arquivo para biblioteca na
opção “Enviar Arquivos” ou selecione a
imagem na opção “Biblioteca de mídia”.

3. Ao selecionar a imagem, verifique e


faça as configurações do anexo conforme
necessário.
4. Clique no botão Inserir no Post. Em
seguida clique no botão Atualizar para
salvar as alterações.
Configurações de exibição

Alinhamento
É a configuração da posição da imagem em
relação ao texto criado. São possíveis os
seguintes alinhamentos:
 Esquerda – Imagem alinhada à esquerda e
o texto do lado direito.
 Direita – Imagem alinhada à direita e o
texto do lado esquerdo.
 Centro – Imagem alinhada ao centro.
 Nenhum – Insere a imagem sem
alinhamento.

Link Para:
 Página de Anexo – Cria um link para uma
página gerada pelo WordPress, usada para mostrar
anexos. O estilo desta página depende de como o
autor do tema formatou este contexto.
 Arquivo de mídia – Cria um link direto para o
arquivo.
 URL – personalizada permite que você defina
um link URL personalizado.
 Nenhum – Esta definição irá remover o link
completamente, tornando a imagem não-clicável.
Você também pode adicionar link
personalizado na imagem através da opção
Inserir/Editar Hiperlink disponível na
barra de ferramentas acima.
Tamanho
O WordPress oferece a possibilidade de
inserir imagens em miniaturas alterando o
modo de exibição e tamanho das imagens
conforme necessidade. As opções são:
miniatura, médio, grande ou tamanho
completo.
As miniaturas podem variar de site para
site, fazendo com que uma determinada
imagem não fique adequada se configurada em
alguma medida de miniatura.
Prefira o uso de imagens com peso baixo
(leve) e tamanho completo, pois assim você
evita que a imagem fique pesada e
inadequada ao conteúdo.
15 - Conhecendo os widgets
Widgets no WordPress destinam-se a tornar mais
fácil para você adicionar itens ao seu site
através de uma forma de comando simples:
arrastar e soltar. De forma prática, o
WordPress já oferece vários widgets. Esses
widgets padrão oferecem utilidades básicas e
são compatíveis com cada tema do WordPress.
Mas às vezes, esses widgets simplesmente não
facilitam. Nesses casos, sua melhor opção é
encontrar plugins que ofereçam a funcionalidade
que você deseja.
E, enquanto você procura plugins para a maioria
das tarefas típicas, há alguns cenários em que,
mesmo os complementos adicionais, não atenderão

aos seus requisitos.


É aí que os widgets personalizados são úteis.
Os widgets personalizados devem ser criados a
partir do zero. Isso proporciona aos usuários
um controle completo.
16 - Como utilizar plugin de
Posts Recentes

Para incluir um plugin devemos pesquisar no


wordpress.org o Wordpress Popular Posts,
baixar para o computador e proceder como
descrito no capitulo 8.

Com mais de 200.000 instalações o este


plugin é uma escolha popular na comunidade
WordPress. É um plugin gratuito e altamente
personalizável, fácil de instalar e
completamente configurável, se você gosta
de escrever código.
17 - Botões de redes sociais
no WordPress
No menu à esquerda na área administrativa, vá na
aba Aparência com o mouse e clique em
Personalizar.

No menu à esquerda, clique em Rodapé.


Depois clique em Elementos do cabeçalho.

Marque na caixa de seleção indicada,


clicando com o mouse, para habilitar os
botões de mídias sociais. Se não deseja que
os botões apareça no rodapé do site,
desmarque a caixa de seleção ao clicar
novamente. Após feita a escolha, clique em
Salvar e publicar no topo do menu.
Confira os resultados abaixo:
18 - Como colocar slider de
posts no Wordpress
Colocando uma Apresentação de Slides em uma
Postagem de Blog

1. Entre na página inicial do WordPress.


Abra a página "Novo Post".
2. Clique no botão “Adicionar Mídia”. Ele
fica a esquerda e abaixo da caixa de edição
de posts. Uma janela nova se abrirá.
3. Selecione a aba “Enviar Arquivos”.
Faça isso se você ainda não adicionou
fotos.
4. Adicione suas fotos. Clique no botão
"Selecionar Arquivos", escolha fotos do seu
computador e carregue-as; ou arraste fotos
do seu computador para dentro da janela.
5. Selecione a aba "Biblioteca de Mídia".
Abra o menu drop-down que diz "Imagens", e
selecione "Anexadas a este post".
6. Clique em "Criar Galeria" à esquerda.
Todas as imagens que você carregou estarão
selecionadas. Clique nelas para desmarcá-
las, e clique novamente para selecioná-las
7. Clique em “Criar Nova Galeria" na
parte inferior direita da janela. Faça isso
depois de selecionar as imagens.
8. Adicione legendas as imagens. Faça
isso na próxima página clicando na caixa de
texto abaixo de cada imagem.
9. Organize suas imagens. Arraste-as para
organizá-las na ordem desejada.
10. Selecione “Apresentação de Slides.” A
aba fica na parte direita da tela, embaixo
das configurações da galeria, no menu drop-
down perto de "Digite aqui".
11. Clique em “Adicionar à Galeria.” Faça
isso depois que você estiver satisfeito com
a configuração da sua apresentação de
slides, e ela aparecerá em seu post.
19 - Formulário de contato
com Contact Form 7

1.
)
In
st
al

ão
:

1.1) Acesse o Painel de Controle


1.2) No menu do lado esquerdo, clique em
"Plugins"
1.3) Clique em "Adicionar Novo".
1.4) No campo "Pesquisar", digite "Contact
Form 7".
1.5) Clique em "instalar agora" para
realizar a instalação.
2) Configure o Contact Form 7:
2.1) No painel vertical do lado esquerdo,
clique na opção "Form contato", que foi
ativada quando instalou, e ativou o
"Contact Form 7".
2.2) Nesta página clique em "Formulário de
contato 1".
2.3) Na seção "Mail", configure os campos
de acordo com a imagem abaixo:
OBS: Substitua "contato@seudominio.com.br"
por uma conta de e-mail válida de seu
domínio.
No exemplo, foi utilizado como padrão
enviar da conta "contato@seudominio.
com.br" para ela mesma, mas não há
problemas em configurar outra conta de seu
domínio como destinatário, por exemplo:
"site@seudominio.com.br"
2.4) Salve a configuração efetuada.
3) Crie a página do Formulário de Contato:
3.1) No painel vertical do lado esquerdo
dentro da administração do Wordpress,
clique na opção "Contato".
3.2) Nessa opção, copie o código
"Shotcode", que normalmente está na
seguinte estrutura: [contact-form-7 id="4"
title="Contact form 1"]
3.3) No menu vertical do painel
administrativo, clique na opção "Páginas".
3.4) Clique em "Adicionar Nova".
3.5) Digite o título da Página, que pode
ser "Contato", "Formulário de Contato", ou
qualquer outro título de sua vontade.
3.6) Adicione no corpo da nova página o
código que copiou.
Abaixo um exemplo de como a imagem ficará:

4) Para testar siga os passos abaixo:


4.1) Acesse a página de contato.
4.2) Preencha os campos do formulário.
4.3) Clique em "enviar".
4.4) Irá aparecer a mensagem abaixo:
4.5) Verifique se o e-mail chegou na caixa
de entrada

20 - Como alterar a aparência do


formulário de contato Contact Form 7

O formulário Contact Form 7 incorpora o


estilo do tema instalado. Mas as vezes o
formulário permanece com as configurações
padrão ou você simplesmente deseja alterar
o seu estilo. Abaixo estão os procedimentos
para alteração manual do estilo usando CSS.

–Adicione o estilo abaixo no arquivo


style.css do seu tema:
. formulario {
border: #ebebeb 1px solid; /*Cor, espessura e
estilo da borda do campo*/
font-size: 12px; /*Tamanho da fonte de dentro
do campo*/
padding: 3px; /*Margem interna do campo*/
border-radius: 5px; /*Cantos arredondados do
campo*/
height: 30px; /*Altura*/
}
.botao {
border: #333 1px solid; /*Cor, espessura e
estilo da borda do botão*/
font-size: 12px; /*Tamanho da fonte*/
font-weight: 400; /*Peso da fonte (Negrito)*/
padding: 3px; /*Margem interna do botão*/
background-color: #ebebeb; /*Cor de fundo*/
width: 70px; /*Largura*/
height: 30px; /*Altura*/
color: #999; /*Cor da fonte*/
}

–Após isso, basta chamar o estilo dentro de


cada shortcode do Contact Form 7:
[textarea your-name class:formulario
placeholder "Seu Nome"]
[email* your-email class:formulario
placeholder "Seu E-mail"]
[submit class:botao "Enviar"]

Você também pode usar um estilo diferente


para cada campo no seu formulário, basta
inserir novas classes
(.formulario2, .formulario3 etc) no arquivo
style.css e chamá-las nos shortcodes
(class: form2, class:form3 etc).
21 - Inserir mapa Google Maps no post

Para inserir um mapa no site, existem vários plugins para


WordPress, um deles é o Google Maps Widget, é muito
importante de se utilizar quando há a necessidade de demonstrar
a localização de um endereço por meio de um mapa. O Google
Maps é hoje uma das ferramentas para buscar e marcar
localizações mais utilizadas em PCs, tablets e smartphones. Por
isso, ela é a escolha certa para implementar a função de mapas
dentro de seu site. Uma das maiores vantagens de utilizar esse
plugin, é que você não precisa dispor de nenhum API key
referente ao Google Maps e seu mapa ainda pode abrir com efeito
lightbox.
Para começar a exibir um mapa nas sidebars de seu site você
precisa baixar o plugin Google Maps Widget. Depois que você
instalou e ativou o plugin Google Maps Widget, basta apenas
configurá-lo. Para isso, acesse a área de widgets do seu blog ou
site: Aparência > Widgets. Dependendo da estrutura do tema
que você utiliza, seu mapa pode ser adicionado no topo, lateral e
rodapé do site. Escolha em qual área de widgets você deseja
exibi-lo, arrastando e soltando o Google Maps Widget até ela.
Agora podemos partir para as configurações do seu mapa.
Atribuir um título para o widget é algo opcional, ficando a seu
critério colocar um título ou não. Depois você deve digitar o
endereço que será exibido por meio do mapa. Por exemplo, Barra
da Tijuca, Rio de Janeiro. Para evitar erros, primeiro você deve
buscar pelo endereço na página do Google Maps. Após a área de
endereço você verá que existem dois modos para exibir o seu
mapa, Thumbnail map e Lightbox map.
Após a instalação é só
incluir o shortcode na
pagina que você precisa
ter um mapa.
22 - Incluir índice dentro de
um post
Alguns sites como o Wikipédia fazem uso de
automatização de índices. Quando os
subtítulos H2, H3, H4, H5 e H6 são
ativados, por exemplo, o sistema das
páginas wiki cria uma tabela de conteúdos.
Tabela de conteúdo ou índice
Pensando nessa mesma lógica, o plugin para
WordPress chamado Table of Contents Plus
cria automaticamente um índice no seu site.

Basta instalar e ativar o plugin, como já


visto no capitulo 8, em seu painel de
controle para que seus posts apresentem tal
índice.
Além disso, através do painel de controle
do plugin é possível definir em quais
páginas o índice personalizado irá
aparecer.
Usando a âncora para linkagem externa
Índice criado, você agora pode compartilhar
esse “salto” na página com pessoas que
ainda não estão no seu site.
Por exemplo, no artigo “Marketing de
Conteúdo – Tudo que você precisa saber para
se tornar um especialista no assunto” temos
a seguinte URL:
https://marketingdeconteudo.com/marketing-
de-conteudo
Nesta página temos um índice que conta com
um tópico de Conclusão, o qual usa o id
#conclusao.
Para compartilhá-lo, basta inserir uma
barra (/) ao final da URL, junto da hashtag
(#) e o ID conclusao.
Conclusão