Apostila: versão 1.

0
29/11/2015

www.youtube.com/canalfessorbruno

www.cfbcursos.com.br

canalfessorbruno@gmail.com

www.facebook.com/canalfessorbruno

twitter: @fessorBruno

2
Sumário
Introdução ...................................................................................................................................................................... 4
Instalando o EasyPHP ..................................................................................................................................................... 4
Instalando o WordPress no computador ........................................................................................................................ 7
Primeiro contato com o WordPress .............................................................................................................................. 15
Menu Painel .............................................................................................................................................................. 16
Menu Posts ............................................................................................................................................................... 16
Menu Mídia .............................................................................................................................................................. 17
Menu Páginas ........................................................................................................................................................... 18
Menu Comentários ................................................................................................................................................... 18
Menu Aparência ....................................................................................................................................................... 18
Menu Plug-ins ........................................................................................................................................................... 19
Menu Usuários.......................................................................................................................................................... 19
Menu Ferramentas ................................................................................................................................................... 20
Menu Configurações ................................................................................................................................................. 20
Começando o trabalho, primeiros passos..................................................................................................................... 20
Personalizando o tema ............................................................................................................................................. 22
Criando novas páginas .............................................................................................................................................. 32
Criando o menu principal.......................................................................................................................................... 34
Edições básica para construção das páginas ............................................................................................................. 37
Gerenciando comentários ........................................................................................................................................ 39
Definindo uma página inicial..................................................................................................................................... 42
Inserindo vídeo nas páginas ...................................................................................................................................... 43
Adicionar um novo post na página “Notícias” .......................................................................................................... 45
Edição e Formatação de textos ................................................................................................................................. 46
Criando links nas páginas .......................................................................................................................................... 50
Criando categorias para os posts .............................................................................................................................. 51
Imagem destacada .................................................................................................................................................... 52
Instalando novos plug-ins ............................................................................................................................................. 53
Plug-in para slider (Huge IT Slider) ............................................................................................................................ 53
Plug-in para formulários (Contact Form) .................................................................................................................. 58
Exportando o trabalho .............................................................................................................................................. 63
Aumentando o tamanho máximo para envio de arquivos no EasyPHP .................................................................... 65
Instalando um novo tema ............................................................................................................................................. 66

3
Introdução
WordPress é uma plataforma moderna e prática para publicação de websites, com uma grande gama de plug-ins e
temas prontos para serem editados com os mais diversos focos, WordPress se torna cada dia a maior plataforma de
gerenciamento de websites do mundo. Paralelamente WordPress é uma ferramenta gratuita e livre construída por
centenas de voluntários da comunidade wordpress.org.

Neste curso você vai aprender a utilizar o software núcleo e alguns ótimos plug-ins e temas, não é necessário
conhecimento prévio de programação.

Antes de iniciar será necessária a instalação de um servidor web, iremos utilizar o EasyPHP e também será
necessário baixar o WordPress, a seguir estão os links dos sites onde encontramos os programas mencionados.

EasyPHP: Development Server

www.easyphp.org

WordPress (Comunidade brasileira)

br.wordpress.org

Após baixar o EasyPHP e o WordPress vamos instala-los, a seguir vamos ver os guias de instalação das duas
ferramentas.

Instalando o EasyPHP
Ao aplicar o clique duplo no arquivo de instalação do EasyPHP será mostrada a janela para seleção do idioma, neste
guia vou mostrar com o idioma em inglês, selecione o idioma desejado e clique em OK.

A próxima janela é a introdução da instalação, aqui, basta clicar no botão “Next >” para prosseguir.

4
Aceite os termos de licença selecionando a opção “I accept the agreement" e clique no botão “Next >”.

A próxima janela lhe mostrará algumas informações sobre o programa, para continuar, basta clicar novamente no
botão “Next >”.

O próximo passo é o local onde o programa será instalado, você não precisa mudar o local previamente indicado a
não ser que deseje instalar o programa em outro local do seu computador, então basta clicar no botão “Next >”.

A próxima janela nos mostrará o nome da pasta no menu iniciar, onde os atalhos do programa serão criados, não
precisa mudar, basta clicar no botão “Next >”.
5
Na sequência será mostrado um resumo das opções selecionadas anteriormente, para continuar clique em “Install”.

Agora vamos aguardar o término da instalação.

No término da instalação será mostrada a janela final com as opção marcadas “Open Help / Abrir Ajuda” e “Launch
EasyPHP / Carregar EasyPHP”, vamos desmarcar a opção “Open Help” conforme a ilustração a seguir e clicar no
botão “Finish”.

6
A instalação está terminada e o programa será carregado, note agora há um ícone referente ao EasyPHP na área de
notificações do seu Windows indicando que o programa foi carregado.

Aplique um clique duplo neste ícone e vamos abrir a janela de controle do EasyPHP, nesta janela iremos ter o
feedback do servidor Apache e do banco de dados MySQL, ambos deverão estar indicados como verde “Started”
indicando que foram iniciados, caso não esteja verde, clique no botão “Apache” ou “MySQL” para iniciar o serviço.

Pronto, o EasyPHP foi instalado e está rodando, vamos instalar o WordPress.

Instalando o WordPress no computador

Com o arquivo “.zip” referente ao Wordpress baixado, vamos iniciar o processo criando uma pasta na raiz da
unidade “C:” referente ao projeto que deseja criar.

Vamos fazer uma instalação do Wordpress off-line, ou seja, na nossa máquina, para instalar on-line, em seu servidor
de hospedagem web, consulte o procedimento, pois, cada servidor possui um procedimento diferenciado,
posteriormente vou mostrar também como instalar o wordpress no www.hostinger.com.br.

Vamos instalar.

Crie uma pasta na raiz da unidade “C:” com nome “curso-WP” sem aspas obviamente.

Mova o Wordpress “.zip” arquivo compactado que você baixou para esta pasta que acabou de criar.

Extraia o conteúdo do arquivo compactado “.zip” dentro desta pasta.

Agora teremos uma nova pasta chamada “wordpress”.

7
Entre na pasta wordpress e você verá todo o conteúdo referente à ferramenta.

Com os arquivos extraídos, vamos configurar nosso sistema.

Clique com o botão direito do mouse no ícone do EasyPHP na área de notificações e clique na opção
“Administration”.

8
A seguir veja um exemplo da janela do EasyPHP que irá abrir em seu browser padrão.

Precisamos criar um alias para a pasta onde extraímos o Wordpress, o que é um alias? Nada mais é do que um
“apontador” para um local específico, então, iremos criar um alias que irá simplesmente apontar para o sistema
“Servidor Web / EasyPHP” onde estão os arquivos que iremos trabalhar.

Nesta janela de administração clique no pequeno botão “add na alias” na área referente a “LOCAL FILES”

Na janela que se abrirá vamos preencher os campos conforme a ilustração e as indicações a seguir.

No campo “Create a name for the Alias” preencha com o nome de identificação do nosso alias “cursoWP”

No campo “Copy the path to the directory you have created” preencha com o caminho “path” de onde extraímos o
wordpress “C:\curso-WP\wordpress”

Após tudo devidamente preenchido clique no botão “I have read the warming abobe >> Save”.

Pronto, agora temos um alias que aponta para nossa pasta wordpress em nosso projeto.

9
Agora precisamos terminar a instalação do worpress realizando a configuração, clique na alias “cursoWP” que
acabamos de criar.

Assim iremos acionar a configuração da instalação do wordpress, na janela de boas vindas do wordpress clique leia o
texto e clique no botão “Vamos lá!”

Na janela seguinte precisamos configurar nosso banco de dados, esta tarefa será feita no MySQL instalado
recentemente com nosso servidor EasyPHP, veja a ilustração a seguir da janela que está sendo mostrada e após
ilustração vamos criar o banco de dados.

10
Neste ponto precisamos voltar na janela de administração do EasyPHP para acessarmos o phpMyAdmin e criar o
banco de dados.

Na janela de administração do EasyPHP clique no botão “open” do lado direito da opção “MySQL Administration:
PhpMyAdmin 4.1.4”, a versão pode mudar conforme sua instalação.

Obs: Na ilustração de exemplo aparecem duas opções, isso é devido a minha instalação, no computador de você
provavelmente aparecerá somente uma opção.

Será aberta a janela do phpMyAdmin conforme ilustração a seguir.

Nesta janela clique no link “New” ao lado esquerdo da janela para criar um novo banco de dados.

Na janela que será mostrada digite o nome do banco de dados “db-cursowp” e clique no botão “Criar”.

11
Pronto, o banco de dados foi criado, veja do lado esquerdo que agora temos o banco de dados “db-cursowp”.

Não se preocupe com a criação das tabelas, todas elas serão criadas pelo próprio wordpress.

Vamos agora voltar para a instalação do wordpress e inserir as opções de configuração do nosso banco de dados.

Nome do Banco de Dados: db-cursowp

Nome de usuário: root
Senha: deixe em branco
Servidor do banco de dados: localhost
Prefixo da Tabela: wp_

Com todos os campos devidamente preenchidos clique no botão “Enviar”.

Pronto, agora o próximo passo é iniciar a instalação, clique no botão “Instalar”.

12
Na próxima janela iremos configurar o acesso ao wordpress, preencha os campos conforme a ilustração a seguir,
caso queira mudar o nome de usuário e senha fique à vontade, no campo email preencha com seu email, só não se
esqueça destas mudanças, depois de tudo devidamente preenchido clique no botão “Instalar Wordpress”.

Após o término da instação tudo estará pronto para acessarmos o wordpress pela primeira vez, então clique no
botão “Login” e vamos entrar.

Preencha os campos com as informações previamente configuradas e clique no botão azul “Login”.

13
Tudo pronto, entramos no wordpress, o próximo passo é aprender a usar esta maravilhosa ferramenta para
construção de sites.

Um ponto importante a observar é que sempre que for entrar no WordPress para editar um site, você precisará
efetuar o login, caso tenha saído do sistema, quando voltar execute o procedimento para login descrito a seguir.

Clique no alias, na janela de administração do EasyPHP.

É bem provável que não abra no WordPress e sim no tema atual selecionado.

14
Para efetuar o login e abrir o WordPress mude o link na barra de endereços para “http://127.0.0.1/cursoWP/wp-
login.php” sem aspas e pressione ENTER.

Informe o nome de usuário “cfb” e a senha “123” então clique no botão azul “Login”.

Esse procedimento fará você voltar para a tela de administração do WordPress.

Pronto para o próximo passo? Pronto para entrar no mundo de WordPress? Então siga em frente.

Primeiro contato com o WordPress

Ao contrário do que muitas pessoas pensam WordPress não é um bicho de sete cabeças, a maioria das pessoas não
conseguem usar a ferramenta simplesmente por não conseguirem instalar em suas máquinas, mas este problema
você já resolveu, então vamos em frente porque temos muito a aprender.

O menu básico do WordPress.

Na sequência podemos ver uma ilustração do menu básico do WordPress, vamos aprender um pouco sobre cada
uma das opções.

15
Menu Painel
Este menu mostra a janela padrão do WordPress, com boas vindas, resumo de atividades no site, algumas ações
como escrever posts, informações sobre atualizações para o WordPress.

Neste menu também temos uma área interessante que é o “Rascunho rápido”, onde podemos adicionar notas que
servem como lembretes.

Veja na ilustração a seguir uma nota digitada, basta clicar no botão “Salvar como rascunho”.

Após salvar o texto, será mostrado abaixo na área de rascunhos.

Todas as notas de texto salvas como rascunhos, ficam no menu de “Posts”, basta clicar neste menu e todos os posts
serão mostrados inclusive as notas de rascunho.

Menu Posts
Como foi dito anteriormente neste menu podemos administrar todos os posts de nosso site, o WordPress é uma
excelente ferramenta para blogs e sites que disponibilizam área de comentários, todo esse conteúdo pode ser
administrado no menu Posts.

16
No nosso caso iremos encontrar dois posts, um que é o post padrão do WordPress “Olá, mundo!” outro que é o post
que fizemos na área de rascunho.

Para excluir um post de forma rápida basta posicionar o mouse sobre o post, será mostrado um menu de opções
abaixo do post, como mostra a ilustração.

Então, basta clicar no comando “Lixeira”.

Agora podemos notar que o link “Lixo” indica que temos 1 item na lixeira.

Clicando no link “Lixo” serão mostrados todos os itens da lixeira, lá iremos encontrar nosso post, posicione o mouse
sobre o post e clique no comando “Excluir permanentemente”.

Pronto, assim nosso post foi excluído.

Menu Mídia
O menu mídia exibe todo conteúdo relacionado a imagens, vídeos, sons, sempre que adicionamos uma imagem em
nosso site, por exemplo, essa imagem fica na galeria mídia, podendo ser usada em qualquer parte do site.

17
Menu Páginas
No menu páginas podemos administrar todas as página de nosso site, aqui serão criadas, editadas e ou excluídas
todas as páginas que formarão nosso site.

Menu Comentários
Nesta parte iremos encontrar todos os comentários realizados nos posts, por exemplo, você fez um novo post em
seu site, as pessoas poderão comentar algo em seu post, estes comentários serão administrados aqui, no menu
comentários.

Note que existe um comentário padrão do WordPress.

Menu Aparência
Neste menu iremos configurar qual tema será usado em nosso site e toda a parte visual, cores, logotipos, layout
padrão das páginas, enfim, toda parte visual do nosso site e os menus.

18
Menu Plug-ins
Neste menu encontramos todos os plug-ins instalados para nosso site, por padrão já temos disponíveis o plug-in
“Akismet” que protege nosso blog contra spans e “Hello Dolly” que disponibiliza trechos da música “Hello, Dolly” do
lado direito das telas de administração.

Os plug-ins precisam ser ativados para funcionar, para ativar é bem simples, basta clicar no comando “Ativar” abaixo
do nome do plugin, por enquanto não vamos ativar nenhum.

Um ponto interessante é que existem muitos plug-ins disponíveis para WordPress com uma gama de atividades
incrível, o que torna bem prático o trabalho de criação do site.

Estes plug-ins adicionam funcionalidades extras em nosso site, existem plug-ins de tradução, sliders, comércio
eletrônico, etc.

Menu Usuários
No menu usuários podemos administrar todos os usuários cadastrados no site, desde os administradores aos
assinantes.

19
Menu Ferramentas
Neste menu temos algumas ferramentas para ajudar no trabalho principalmente de importação/exportação de
conteúdo, por exemplo, você pode construir todo seu site no computador exportar e no seu servidor de
hospedagem importar todo o conteúdo para que fique on-line.

Menu Configurações
Neste menu temos as configurações gerais do site, desde título e descrição a configuração de página inicial, formato
da data e da hora, etc.

Começando o trabalho, primeiros passos

Bom, vamos colocar a mão na massa e criar nosso primeiro site, iremos usar um dos temas/templates padrões do
WordPress, são bem limitados na verdade, mas para nosso primeiro trabalho, onde precisamos aprender como
funcionam as coisas no WordPress vai servir, mais adiante vamos usar um tema mais completo.

No meu “Aparência” clique no submenu “Temas”.

Você expandir os menus do WordPress clicando sobre eles, como na ilustração a seguir que mostra o menu
“Aparência” expandido.

20
Ou simplesmente posicionando o mouse sobre eles, como mostra a ilustração a seguir.

No janela dos temas note claramente que o tema “Twenty Fifteen” está ativo, então, este é o tema de trabalho,
qualquer alteração que for feita em aparência, será aplicada ao tema selecionado.

Vamos ativar outro tema, posicione o mouse em cima do tema “Twenty Fourteen”, será mostrado o botão “Ativar”,
basta clicar neste botão para ativar o tema e o tornar o tema de trabalho.

21
Agora o tema “Twenty Fourteen” passa a ser o tema “Ativo”.

Para personalizar o tema basta clicar no botão azul “Personalizar” abaixo do tema, ou clicar no submenu
“Personalizar” em “Aparência”.

Personalizando o tema

Vamos à personalização do nosso tema, então mãos à obra e clique em uma destas opções de personalização vistas
anteriormente.

Ao clicar em “Personalizar” será aberta uma janela com as opções de personalização do tema, estas opções podem
variar de tema para tema, veja na ilustração a seguir.

22
Clique na opção “Identidade do Site” e digite os campos “Título do site” e “Descrição” conforme as informações e a
ilustração a seguir.

Título do site: Meu primeiro site WordPress

Descrição: Este site está sendo criado para prática do curso de WordPress do CanalFessorBruno.

Ícone do site é uma imagem que podemos indicar para que apareça no lado esquerdo da barra de títulos e quando o
site é adicionado como favorito, na pasta de anexo deste material você irá encontrar a imagem “icone-100x100.jpg”,
vamos adicioná-la como ícone do site.

Clique no botão “Selecionar Arquivo”.

Na janela que se abrirá, clique no botão “Selecionar arquivos” e selecione o arquivo da imagem “icone-100x100.jpg”.

23
Após seleciona o arquivo, a imagem será carregada e mostrada na janela, então, clique no botão “Selecionar”
conforme a ilustração a seguir.

Caso a imagem precise ser recortada, será aberta a janela de recorte, assim, basta clicar no botão “Recortar
imagem”.

24
Pronto, acabamos de adicionar um ícone para nosso site, veja na ilustração a seguir como a janela será mostrada.

Para salvar estas alterações clique no botão “Salvar & Publicar” na parte superior da janela.

Com as alterações salvas clique no botão “<” para voltar a mostrar as opções de personalização.

Clique na opção Cores.

25
Para este Tema temos apenas duas opções de personalização de cores, como podemos ver na ilustração a seguir,
“Cor do título do site” e “Cor de fundo”.

Em “Cor do título do site” clique em “Selecionar Cor” e escolha uma cor

Repita a mesma operação para a “Cor de fundo”.

26
Clique no botão “Salvar & Publicar” para gravar estas alterações e volte para as opções de personalização.

Clique em “Imagem do Cabeçalho”.

Em seguida clique no botão “Adicionar nova imagem”.

Será aberta a “Biblioteca de mídia”.

No nosso caso a imagem ainda não está na biblioteca, então, clique na aba “Enviar arquivos”.
27
Em seguida clique no botão “Selecionar arquivos” e selecione o arquivo “cabecalho-1260x240.jpg”.

Será mostrado o arquivo enviado, então, clique no botão “Selecionar e recortar”, na próxima tela clique no botão
“Pular recorte”.

Note que agora temos a imagem que acabamos de enviar no topo de nosso site.

28
Clique no botão “Salvar & Publicar” e volte para as opções de personalização.

Clique no item “Imagem de fundo” e no botão “Selecionar Imagem”.

Envie o arquivo “bg-600x600.gif” para a biblioteca e escolha esta imagem, note que o fundo que estava configurado
da cor azul, sem imagem, agora tem a imagem que acabamos de selecionar.

No painel da esquerda, vamos configurar o imagem de fundo.

Em “Repetição do fundo” selecione a opção “Repetir”, para que a imagem seja repetida de forma que preencha todo
o fundo.

Em “Posição do fundo” selecione a opção “Esquerda”, para indicar que a imagem vai começar alinhada à esquerda
da página.

Em “Fixação do fundo” selecione a opção “Rolar”, para que a imagem possa rolar junto à página ao invés de ficar
parada enquanto a página rola.

Veja as configurações na ilustração a seguir.

29
Clique no botão “Salvar & Publicar” e em seguida clique no botão fechar para voltarmos à tela principal do
WordPress.

Ainda no menu “Aparência” clique no submenu “Widgets”, vamos configurar a barra lateral principal, na ilustração a
seguir você pode ver qual é a barra lateral.

Ao clicar em “Widgets” será mostrada a janela a seguir, nesta janela vamos configurar a “Barra lateral principal”.

Vamos remover Pesquisar, Categorias e Meta.

30
Clique em pesquisar para expandir as opções do Widget.

Para excluir basta clicar no comando “Excluir”.

Repita o procedimento com os Widgets Categorias e Meta.

Por momento são somente estas configurações de “Aparência”.

Vamos ver como está ficando nosso trabalho, para visualizar nosso site posicione o cursor do mouse sobre o nome
do projeto na parte superior da janela “Meu primeiro site WordPress”.

Então clique em “Visitar site”.

31
Será mostrado o site como na ilustração a seguir.

Para voltar ao painel do WordPress posicione novamente sobre o mouse sobre o nome do projeto “Meu primeiro
site WordPress” e clique no comando “Painel”.

Assim voltaremos ao painel principal do WordPress.

Criando novas páginas

Vamos aprender a criar página para nosso site, é um procedimento muito simples.

Clique no menu “Páginas”, será exibida a janela que mostrará todas as páginas do nosso site, no nosso caso só temos
uma página de exemplo, para adicionar uma nova página clique no botão “Adicionar Nova” conforme a ilustração.

Será aberta a janela para criação da página.

32
Insira o título da página “Cursos” e os cursos conforme a ilustração a seguir.

C++
PHP
Unity 3D com C#
HTML/CSS/Javascript
Flash com ActionScript 3.0
Photoshop
WordPress
Breve mais cursos

Clique no botão azul “Publicar” do lado direito da página e a nova página será criada.

Clicando novamente no menu página ao lado esquerdo, veremos a página “Cursos” disponível para edição.

Vamos criar mais quatro páginas, Notícias, Contato, Sobre e Home, somente com os títulos, então mãos à obra e crie
estas páginas.

Veja a seguir a janela “Páginas” mostrando as páginas recém criadas.

33
Criando o menu principal
Com as página criadas agora podemos preparar o menu principal do nosso site, novamente no menu “Aparência”
clique no comando “Menus”, a janela a seguir será exibida para que possamos criar nosso menu principal.

No campo “Nome do Menu” digite “menuPrincipal” sem aspas e clique no botão “Criar menu”.

34
Na janela a seguir marque as opções conforme a ilustração mostra em vermelho.

Na seção “Configurações do menu” marcamos “Adicionar novas páginas de nível superior automaticamente” para
que as novas páginas criadas sejam adicionadas de forma automática em nosso menu

Marcaremos também “Menu principal do topo” para indicar que este é o menu principal da nossa página.

Na seção “Páginas” vamos selecionar as página que já foram criadas para serem adicionadas ao novo menu, após
selecionar as página clique no botão “Adicionar ao menu”.

Os itens/páginas do menu irão aparecer na seção “Estrutura do Menu”.

35
Vamos reposicionar os itens movendo-os para que fique conforme a ilustração a seguir.

Por enquanto nosso menu está pronto, então, clique no botão “Salvar Menu”.

Após salvar, vamos visualizar nossa página e conferir nosso menu, clique no comando “Visitar site”.

Veja que o menu está do lado direito na mesma sequência em que configuramos o menu.

A posição do menu no lado direito é definida pelo tema e neste caso o tema não disponibiliza opção para mudar o
lado.

36
Edições básica para construção das páginas
Vamos editar a página “Cursos”, clique no menu “Páginas”, posicione o cursor do mouse sobre a página “Cursos” e
clique no comando “Editar”.

Vamos apagar o texto nesta página, adicionar algumas imagens e novos textos.

Para adicionar uma imagem a uma página, basta clicar no botão “Adicionar Mídia”.

Será aberta a janela da biblioteca, clique na aba “Enviar arquivos” e vamos adicionar mais arquivos à nossa biblioteca
de mídias.

Selecione os arquivos cpp.jpg, flash.jpg, html.jpg, photoshop.jpg, php.jpg, unity.jpg e adicione estes arquivos.

37
Agora com os arquivos na biblioteca adicione estas imagens à página “Cursos” clicando no botão “Inserir na página”.

As imagens serão adicionada à página e você irá digitar os textos a seguir, cada um em baixo da sua imagem
correspondente.

No curso de Unity vamos aprender como programar em C# nesta excelente engine para criação de games, o curso
tem uma didática bem simples e progressivo de forma a dar tempo para o aluno assimilar o conteúdo.

No curso de PHP vamos aprender a programar nesta linguagem e criar sites com recursos diferenciais, com esta
poderosa linguagem podemos criar sistemas complexos para web.

No curso de Photoshop vamos aprender a usar esta poderosa imagem para edição de imagens, vamos aprender as
diversas ferramentas para criar montagens e trabalhar com edição de imagens diversas.

HTML é a linguagem universal da internet, quer aprender a criar sites na internet? Então aprenda HTML,
independente da ferramenta, saber HTML é fundamental para quem deseja trabalhar com sites.

Se animação é seu forte então não deixe o Flash de lado, esse poderoso aplicativo é versátil e fácil de usar, possui
uma linguagem de programação bem estruturada (ActionScript 3) que possibilita até criação de jogos dentro do
Flash.

Quer ser um programador? Então você precisa aprender C++, uma linguagem bem poderosa e que serve de base
para várias outras linguagens, aprenda C++ e ficará fácil adaptar-se a outra linguagem qualquer.

Após concluir as edições clique no botão azul do lado direito da página “Atualizar”.

Em seguida clique no botão “Visualizar Alterações”.

Por último vamos permitir que as pessoas façam comentários nesta página, para isto vamos habilitar a opção de
discussão, esta opção fica oculta, porém é bem simples de habilitar.

Na parte superior da janela encontramos o botão “Opções de Tela”, clique neste botão e será exibida uma lista de
recursos adicionais para a página.

Nesta lista vamos marcar a opção “Discussão”.

38
O próximo passo é marcar a opção “Permitir comentários” que fica na parte de baixo da janela, então role a tela até
encontrar esta opção que só estará disponível depois que habilitar a opção “Discussão” como fizemos
anteriormente.

Clique novamente o botão “Opções de Tela” para esconder estas opções e clique no botão “Atualizar” para gravar as
alterações. Na sequência clique no botão “Visualizar Alterações”.

Agora podemos notar no final de nossa página que dispomos da opção para comentários, como podemos ver na
ilustração.

Gerenciando comentários
Agora que disponibilizamos uma área de comentários na página de cursos, podemos aprender um pouco mais sobre
comentários.

Vamos adicionar um comentário nesta página com o seguinte texto: “Primeiro comentário na pasta de cursos, o
canalFessorBruno disponibiliza cursos muito interessantes, vale a pena conferir.”, obviamente sem aspas, clique no
botão “PUBLICAR COMENTÁRIO”.

39
O novo comentário será exibido conforme a ilustração.

Para responder a um comentário basta clicar no comando “RESPONDER” e digitar o texto na caixa de comentário, ao
clicar no botão “PUBLICAR”, a resposta será exibida com um certo recuo indicando que é uma resposta ao
comentário, note na ilustração a seguir a linha vermelha que tracei para mostrar o recuo.

Vamos administrar esses comentários.

No WordPress clique no menu “Comentários”, serão exibidos todos os comentários, no destaque vermelho note que
é exibida a página de onde vem o comentário, isso é bem útil quando tiver centenas de comentários para
administrar.

40
Para ver as ações que podemos aplicar a um comentário, basta posicionar o cursor do mouse sobre o comentário,
veja na ilustração.

Para excluir um comentário, basta enviar para a lixeira clicando no comando “Lixeira” e depois excluir da lixeira.

Para excluir todos os comentários de uma só vez, clique na caixa indicada na ilustração a seguir.

Note que todos os comentários ficarão selecionados, na caixa de listagem “Ações em massa”, selecione a opção
“Mover para a lixeira” e clique no botão “Aplicar”.

Agora abra a lixeira clicando no link “Lixos”.

41
Repita a mesma operação para selecionar todos os comentários, na caixa “Ações em massa” selecione “Excluir
permanentemente” e clique no botão “Aplicar”.

Pronto, quando voltar à página “Cursos” não existirão mais comentários.

Definindo uma página inicial

A página “Home” ainda não é a página inicial do nosso site, nossa tarefa agora é defini-la como tal. Para isto, clique
no comando “Leitura” do menu “Configurações”.

Nesta tela vamos fazer as seguintes alterações.

42
Marque a opção: “Uma página estática (selecionar abaixo)”, esta opção nos permite selecionar qual página será a
página inicial do nosso site.

Página inicial: Selecione a página “Home”, isto define a página “Home” como página inicial do nosso site.

Página de posts: Selecione a página “Notícias”, isto configura a página “Notícias” como a página principal dos posts,
sempre que você fizer um novo post, será adicionar na página “Notícias”.

Você ainda tem a opção de configurar se os posts serão exibidos completos ou só um resumo, configure como
desejado.

Após feitas estas alterações clique no botão “Salvar alterações”, veja na ilustração a seguir.

Vamos ver como está nosso site agora, clique no comando “Visitar site” para ver as alterações.

Note que “Home” será aberta como primeira página, e configura também a página “Notícias”, veja que o post
padrão do WordPress já está sendo exibido nesta página.

Inserindo vídeo nas páginas

Vamos editar a página “Home” e adicionar um vídeo nesta página.

Primeiramente vamos importar o vídeo para a biblioteca, clique no menu “Mídia” e em seguida clique no botão
“Adicionar Nova”.

43
Clique no botão “Selecionar arquivos” e selecione o arquivo “vinheta_cpp.mp4”, após importado o vídeo, clique no
menu “Páginas” e edite a página “Home”.

Na edição da página “Home” clique no botão “Adicionar Mídia”.

Selecione o vídeo e clique no botão “Inserir na página”.

O vídeo será carregado na página “Home”, para editar algumas configurações do vídeo, como iniciar
automaticamente, clique no vídeo e clique no botão “Editar” com ícone de lápis.

44
Serão mostradas as opções do vídeo, edite como quiser e ao final clique no botão “Atualizar” para gravar as
alterações.

Voltando na página “Home” clique no botão “Atualizar” para gravar as alterações nesta página.

Adicionar um novo post na página “Notícias”

Vamos criar um novo post falando sobre o curso de WordPress, clique no menu “Posts” e em seguida no botão
“Adicionar Novo”.

45
Neste novo post adicione o título “Novo Curso de WordPress”, adicione a imagem “WordPress_logo-2000x456.png”
e o texto a seguir, siga o modelo da ilustração a seguir.

O CanalFessorBruno tem o prazer de disponibilizar o novo curso de WordPress, de linguagem fácil e direta este novo
curso vem trazer para vocês uma forma dinâmica e didática de aprender WordPress.
Não perca mais tempo e aprenda uma das melhores plataformas para criação de sites do mundo, acesse o canal e
aprenda a usar essa maravilhosa plataforma.

Habilite “Discussão” nas “Opções de Tela”.

Verifique se as opções “Permitir comentários” e “Permitir trackbacks e pingbacks nesta página.” Estão marcadas.

Clique no botão “Publicar” e nosso post está pronto, visite o site e clique na página “Notícias” para ver que seu novo
post já está publicado.

Edição e Formatação de textos

O WordPress já disponibiliza uma série de ferramentas para formatação de textos, são ferramentas com ícones e
ações bem intuitivas, bastante semelhantes aos editores de textos atuais, por isso acredito que não serão
encontradas grandes dificuldades neste ponto do nosso curso.

A seguir temos a ilustração da barra de ferramentas de texto sendo mostrada em modo simples.

46
Para exibir a barra completa, basta clicar no botão “Alternar barra de ferramentas” , é o último botão, a direita
da barra, ao clicar neste botão a barra é expandida, mostrando mais opções de configurações, veja a ilustração a
seguir.

Vamos a uma breve descrição sobre cada um dos botões.

Bold / Negrito = Este comando formata o texto em negrito que é um destaque deixando o traçado das letras
mais robusto.

Itálico = Esta formatação itálico faz com que o texto fique “tombado” chamando atenção em relação ao resto do
texto.

Riscado = Simplesmente Riscado traça um risco no texto dando a impressão de que este texto foi excluído ou
ignorado.

Lista com marcadores = Este tipo de lista insere um marcador (bolinha) na frente de cada parágrafo, formando
uma lista não ordenada.

 Carro
 Avião
 Navio
 Moto

Lista numerada = Esta lista, diferente da anterior, insere um número, sequencial, na frente de cada parágrafo,
formando uma lista ordenada.

1. Carro
2. Avião
3. Navio
4. Moto

Aspas = O texto formatado com aspas tem visual de destaque pré-formatado.

Linha horizontal = Insere uma barra horizontal ( <hr/> ).

Alinhamentos de texto = Alinha o texto à esquerda, centro e direita da página.

Inserir/editar link = Permite a criação de hyperlinks em nossa página, seja para páginas criadas em nosso site ou
páginas externas.

Remover link = Remove a configuração de hyperlink.

Insere a tag Leia mais = Este comando insere o “ponto de parada” do texto, ou seja, podemos definir a parte que
será exibida, então adicione a “tag Leia mais” neste ponto, o texto seguinte será oculto e precisamos clicar no link
leia mais para abrir o restante do texto.

47
 Tipo do texto = Define o tipo do texto selecionado, se será <p/>, <pre/>, <h1/>, <h2/>, até <h6/>.

Underline/Sublinhado = Sublinha o texto selecionado.

Justificar = Alinha o texto no modo justificado, alinhado pela esquerda e pela direita.

Cor do texto = Colore o texto selecionado com o texto indicado, basta clicar na listagem (seta para baixo) e
selecionar uma cor.

Colar como texto = Quando este botão está ativado, se copiarmos algum texto do Word por exemplo e colarmos
este texto, será colado somente o texto puro, sem a formatação.

Limpar formatação = Limpa toda a formatação aplicada ao texto selecionado.

Caracteres especiais = Abre a caixa de caracteres especiais para serem inseridos como texto.

Diminui a endentação = Diminui o recuo a esquerda do texto.

Aumentar a endentação = Aumenta o recuo a esquerda do texto.

Desfazer e Refazer = Comandos para desfazer (CTRL+Z) e refazer as alterações.

Atalhos do teclado = Exibe a caixa com as informações sobre os atalhos do teclado disponíveis.

Agora que já conhecemos um pouco das ferramentas de formatação, vamos colocar a mão na massa e formatar
alguns textos em nosso site.
48
Abra o post “Novo Curso de WordPress” para edição, você já sabe fazer isto, é a mesma ação que fazemos para
editar uma página.

Posicione o cursor na segunda linha após a palavra “WordPress” como no destaque vermelho na ilustração a seguir.

Clique no botão “Inserir a tag Leia mais” e note que será apresentado uma barra “---MORE---” no local onde o cursor
estava, insto fará uma divisão no nosso texto.

Clique no botão “Atualizar” e sem seguida “Visualizar Alterações” para ver o resultado, ao carregar a página clique
no menu “Notícias” para carregar o post com a formatação atualizada e ver a alteração.

Veja que agora só aparece parte do texto do post, para ver o restante clique no link “Continue lendo ” como
mostra a ilustração a seguir.

Agora vamos editar a página “Contato”, abra esta página para edição e adicione o texto conforme a ilustração a
seguir, fique à vontade para formatar como quiser.
49
Criando links nas páginas
Após digitado e formatado como desejado, vamos criar um link no texto “canalFessorBruno”.

O primeiro passo para se criar hyperlink em textos já digitado é selecionar o texto, então selecione o texto
“canalFessorBruno” e clique no botão “inserir/editar link”.

Na janela de configuração o link, digite a URL “http://www.youtube.com/canalfessorbruno” e marque a caixa “Abrir

link em uma nova janela/aba”, então, clique no botão “Adicionar link”.

50
Clique no botão “Atualizar” e em seguida no botão “Visualizar Alterações” e veja o resultado clicando no link.

Criando categorias para os posts

No WordPress podemos criar categorias para os posts, basicamente para se ter uma organização melhor, o processo
não é complicado, vamos criar algumas categorias e aplicar a nossos posts.

Clique no comando “Categorias” do menu “Posts”.

No campo “Nome” escreva “Cursos” sem aspas, não precisamos configurar Slug, clique no botão “Adicionar nova
categoria”, note que a nova categoria será mostrada ao lado direito.

Adicione as categorias a seguir.

Nome Pai
Programação Cursos
Design Cursos
Noticia Nenhum
C++ Programação
WordPress Design

Com as categorias adicionadas, clique no comando “Todos os Posts”.

Clique no comando “Editar” do post “Novo Curso de WordPress”.

Ao lado direito, localize o campo “Categorias” e selecione Cursos, Design e WordPress.

51
Clique no botão “Atualizar”, ao visualizar o post note que as categorias serão exibidas no post.

Imagem destacada
Outro recurso visual interessante é a “Imagem destacada”, podemos inserir uma imagem para representar um post
ou uma página, no nosso post “Novo Curso de WordPress” ao lado direito, localize o campo “Imagem destacada”.

Clique no link “Definir imagem destacada”, importe a imagem “WordPress-logo-300x300.png” e adicione como
imagem destacada do post, clique no botão “Atualizar” e visualize o post para ver o resultado.

52
Instalando novos plug-ins
Chegamos em um ponto onde necessitamos de um recurso que nosso tema não dispõe, então, vamos recorrer aos
Plug-ins.

Plug-ins são recursos adicionais que instalamos para nosso site, no nosso caso, vamos instalar um plug-in para
construção de slider.

No site oficial do WordPress ( https://wordpress.org/plugins/ ) você encontra vários plug-ins, nós iremos utilizar um
plug-in chamado “Huge-IT slider”, fácil de usar, a versão gratuita está na pasta “plug-ins” dentro da pasta “anexos”,
você também pode baixar diretamente do site pelo link ( https://wordpress.org/plugins/slider-image/ ).

Plug-in para slider (Huge IT Slider)

Com o arquivo “slider-image.2.9.9.zip” em mãos vamos instalar este plug-in.

Clique no menu “Plugins” e em seguida clique no botão “Adicionar Novo”.

Na sequência clique no botão “Fazer upload do plugin”.

Clique no botão “Escolher arquivo”, selecione o arquivo “slider-image.2.9.9.zip”.

53
E clique no botão “Instalar agora”.

O plug-in será instalado, após a instalação clique no link “Ativar plugin”.

Agora o plug-in está instalado e ativado, note que agora existe a opção “Huge IT Slider”, clique neste novo menu e
vamos criar nosso slider.

Na tela do “Huge IT Slider” clique no botão “Add New Slider” para criar um novo slider.

Precisamos adicionar as imagens ao nosso slider.

54
Clique no botão “Add Image Slider” e selecione as imagens da pasta “slides” dentro da pasta “anexos”.

Importe estas imagens para a biblioteca.

Com as imagens importadas configure nosso slider conforme a ilustração a seguir.

55
Width = Largura do slider.
Height = Altura do slider.
Effects = Efeito da troca dos slides, selecione outro se desejar.
Pause Time = Tempo de exibição de cada slide.
Change Speed = Tempo do efeito de troca dos slides.
Slider Position = posição do slider.
Loading Icon = Exibe ou não ícone de carregamento.
Navigate By = Forma de navegar entre os slides, mudança manual dos slides.
Pause on Hover = Pausar o slider quando o mouse estiver sobre o slide.

Podemos trocar a posição dos slides, basta arrastá-los para uma nova posição, para cima ou para baixo.

Outro recurso interessante é a possibilidade de adicionar links nos slides, iremos fazer isso no primeiro slide, que
contém os cursos.

Vamos linkar este slide à página “Cursos”, antes de ir pegar o link precisamos salvar as alterações, então, clique no
botão “Save Slider”.

Clique no menu “Páginas” e abra a página “Cursos” em modo de edição.

Clique no botão “Pegar link permanente”, como mostra a ilustração.

Será aberta uma caixa de mensagem com o link que precisamos copiar, então, copie este link.

Volte à edição do nosso slider.

56
Cole o link no campo “URL” como mostra na ilustração a seguir e clique no botão “Save Slider”.

Com o link adicionado ao slide, sempre que clicar neste slide será aberta a página “Cursos”.

Para inserir o slider em uma página, existem duas formas, copiar o “shortcode” ou usar o botão “Add Slider” que
após a instalação do plug-in estará disponível na edição da página.

O shortcode pode ser encontrado do lado direito mais abaixo, procure pela seção “Usage” e verá o shortcode
disponível.

Vamos inserir nosso slider, clique no menu “Páginas” e abra a página “Home” para edição.

Posicione o cursos acima do vídeo e clique no botão “Add Slider”.

57
Na caixa de listagem selecione o slider que criamos, como não mudamos o nome, está com nome padrão “New
slider”, após selecionar o slider clique no botão “Insert Slider”.

Note que o código do slider foi adicionado na página, basta clicar no botão “Atualizar” e em seguida clique no botão
“Visualizar Alterações” e veja o slider funcionando.

Plug-in para formulários (Contact Form)

O tema que selecionamos não tem um formulário de contato, então precisamos instalar um plug-in para tal tarefa,
iremos instalar um dos mais usados plug-ins de formulário de contato, o “Contact Form”, vamos baixar este plug-in
do site oficial do WordPress pelo link ( https://wordpress.org/plugins/contact-form-7/ ), você vai encontrar também
este plug-in na pasta plug-ins dentro da pasta de anexos.

58
Com o arquivo em mãos vamos instalar o plug-in, clique no comando “Adicionar Novo” no meu “Plugins”, na janela
de instalação de plug-ins clique no botão “Fazer upload do plugin”.

Da mesma forma que o plug-in anterior, instale o “Contact Form” e ative o plug-in após a instalação.

Com o plug-in ativado, clique no comando “Configurações”, mostrado na imagem a seguir.

Vamos adicionar um novo formulário de contato, clique no botão “Adicionar novo”.

Caso precise informar o idioma, verifique se o padrão é (Português (Brazil)), caso não sele basta selecionar o idioma
abaixo e adicionar, se o idioma já estiver correto basta clicar no botão azul “Adicionar novo”.

59
No campo do nome formulário, onde está com a seta vermelha, digite “Contato simples”.

Na janela do “Contact Form” na seção “Formulário” estão todos os elementos que podemos adicionar ao nosso
formulário, text, email, URL, tel, number, date, etc.

Também temos as abas para configurações do formulário, Mail, Mensagens, Configurações adicionais.

Por padrão o formulário básico já possui os campos nome, email, assunto, mensagem e o botão enviar, veja no
código do formulário como na ilustração a seguir.

60
Para remover um dos campos, basta deletar o código relacionado e para adicionar um novo campo, basta clicar no
botão correspondente.

Vamos adicionar o campo telefone abaixo do campo nome, posicione o cursos o local indicado pela seta vermelha na
ilustração a seguir.

Em seguida clique no botão “tel” indicado na ilustração a seguir.

Configure o campo como na ilustração a seguir e clique no botão “Insert Tag”.

Organize o código gerado como na ilustração a seguir destacado em vermelho.

61
Clique na aba “Mail” para configurar o email de recebimento dos dados.

Nesta janela precisamos conferir se os e-mails estão corretos, caso estejam de acordo com seu email, tudo certo.

Os outros campos você pode configurar de acordo como desejar, caso queira também pode configurar as mensagens
na aba “Mensagens”. Após tudo pronto clique no botão “Salvar”.

Após salvar precisamos do “shortcode” destacado pela seta vermelha, copie este código e vamos usar na página
“Contato”.

62
Abra a página contato em modo de edição e cole o “shortcode” conforme a ilustração a seguir.

Clique no botão “Atualizar” e em seguida “Visualizar Alterações”, veja que agora temos um formulário de contato
em nossa página.

Com isso finalizamos nosso primeiro site em WordPress usando um tema padrão básico da plataforma.

Exportando o trabalho
Ao terminar um trabalho em WordPress feito off-line, diretamente no computador, podemos exportar as
informações básicas.

Para exportar posicione o mouse sobre o menu “Ferramentas” e clique no comando “Exportar”, na janela que se
abrirá selecione a opção “Todo conteúdo”, esta opção criar um arquivo de exportação que contém os seus posts,
páginas, comentários, campos personalizados, categorias e tags. Imagens e outros tipos de arquivos não são
exportados, portanto, precisam ser refeitos na plataforma on-line.

Clique no botão “Download de arquivos de exportação” como mostra a ilustração a seguir.

63
Será aberta uma janela com o nome do arquivo XML que será criado, basta informar a pasta onde quer armazenar
este arquivo, no caso a pasta “exportados” que está dentro da pasta “anexos”, selecione esta pasta e clique em
“Salvar”.

Para importar na plataforma on-line, posicione o mouse no menu “Ferramentas” e clique no comando “Importar” e
selecione a opção “WordPress”.

Faça a instalação deste “importador” clicando no botão “Instalar agora”.

64
Ative o plug-in clicando no link “Ativar Plugin & Importar”.

Clique no botão “Escolher arquivo” e selecione o arquivo XML que exportamos e clique no botão “Enviar arquivo e
importar”.

Pronto, com isso terminamos a primeira parte do curso, a próxima etapa vamos usar um tema mais avançado, mas
lembre-se, cada tema possui seu modo de trabalho e suas peculiaridades.

Aumentando o tamanho máximo para envio de arquivos no EasyPHP

Algumas vezes vamos ter algum problema com limite de tamanho de arquivo para envio, na verdade isso não é um
erro, é só uma limitação configurável no servidor PHP, para alterar esta configuração e evitar erro no envio de
arquivos maiores que excedam o tamanho máximo para envio de arquivos configurado em nosso servidor, vamos
executar o procedimento de modificação a seguir.

Na pasta onde instalamos o EasyPHP no início do curso “C:\Program Files (x86)\EasyPHP-DevServer-14.1VC11” no

início do curso, precisamos encontrar o arquivo “php.ini”, está dentro da pasta “conf_files” o caminho completo é
este “C:\Program Files (x86)\EasyPHP-DevServer-14.1VC11\binaries\conf_files”.

Clique com o botão direito do mouse sobre o arquivo “php.ini” selecione “Abrir com” e escolha “Bloco de notas”.

65
Procure pela linha de comando “upload_max_filesize = 2M”.

Altere para 10M, então a linha ficará da seguinte forma: upload_max_filesize = 10M

Salve a alteração no bloco de notas e tudo está corrigido, caso ainda tenha problemas aumente mais este limite.

Instalando um novo tema

Agora que já sabemos o suficiente do WordPress, estamos prontos para usar um tema mais avançado, você pode
baixar o tema “Pinnacle” que pode ser encontrado no link ( wordpress.org/themes/pinnacle ) ou na pasta “Tema”
dentro da pasta “Anexos”.

Vamos fazer a instalação deste tema clique no comando “Temas” do menu “Aparência”.

Clique no botão “Adicionar Novo”.

66
Em seguida clique no botão “Enviar tema” e selecione o tema “pinnacle.1.3.1.zip”.

Ao escolher o arquivo, clique no botão “Instalar agora”.

Aqui podemos nos deparar com um pequeno problema de configuração do servidor PHP.

Após instalado o tema clique no comando “Ativar” e pronto, vamos partir para um tema mais avançado.

67
Bom, como instalamos o tema em nosso site, não precisaremos criar as página novamente, nem reenviar as
imagens, estas coisas permanecem intactas, só que precisam ser reconfiguradas e precisamos configurar a parte
visual de acordo com as opções deste tema.

Se você abrir as páginas Cursos, Contato e Notícias, vai encontrar todo o conteúdo destas página intactos.

Agora que já instalamos um tema mais completo e você já possui os conhecimentos básicos necessários, você já
consegue se divertir sozinho e desbravar o tema pinnacle por conta própria, então mãos a obra e boa diversão.

68
69