1.
WordPress: criando seu
site no ambiente local
Anyssa Ferreira
#CPBR11

2.
versão Google Presentations
bit.ly/wplocal-cpbr11

3.
Anyssa Ferreira
Designer e desenvolvedora web há 10
anos, especialista em WordPress.
Co-fundadora do estúdio Haste.
Professora e palestrante.
Organizadora da comunidade
WordPress SP, 1ª ganhadora da Kim
Parsell Scholarship em 2015.
@anyssaferreira
hastedesign.com.br

4.
Quem são vocês?
Nome, ocupação, objetivo

5.
Pesquisa rápida
● Quem nunca utilizou o WordPress?
● Quem já utilizou um pouco?
● Quem já teve um blog ou site em
WordPress?

6.
Onde o WordPress
é usado?
Você já visitou muitos sites em WordPress...

7.
Para que tipo de site serve o WordPress?
● Blogs e portais;
● Sites institucionais;
● Portfólios;
● Diretórios e listas;
● E-commerces (lojas virtuais);
● Fóruns;
● LMS (Learning Management System)
● Redes sociais;
Entre outros.

8.
13 grandes sites brasileiros feitos com
WordPress
https://www.hastedesign.com.br/novidades/13-grandes-sites-brasileiros-feitos-com-wordpress/

9.
+29%
de todos os sites do mundo usam WordPress
https://w3techs.com/technologies/details/cm-wordpress/all/all

10.
O que é o WordPress
O WordPress é um software gratuito, livre e open source (código aberto), ou
seja desenvolvido colaborativamente por milhares de pessoas, que tem acesso ao
código fonte e podem ajudar corrigindo falhas, implementando melhorias e
sugerindo novas funcionalidades.
Sua distribuição gratuita permite que qualquer um possa baixar, estudar, alterar e
redistribuir o pacote do WordPress.
Download pelo site: http://br.wordpress.org.
Atenção: não confundir com o wordpress.com, que é um serviço para criação
de blogs online.

11.
O que é o WordPress
O WordPress é um CMS (content management system), um
sistema para gerenciamento de conteúdo.
Uma plataforma que fornece estrutura (banco de dados,
templates de exibição, etc.) e uma interface amigável (painel
do WordPress) para publicação de conteúdo na web, sem que
seja necessário entrar em contato com o código.

12.
Divisão do painel do
WordPress
A interface do painel do WordPress é
dividida em 3 partes:
Funcionalidades
Adiciona novas
capacidades ao sistema
através dos plugins.
Conteúdo
Estrutura e organiza as
informações através de
posts e taxonomias.
Aparência
Personaliza o design do
site através de temas e
customizer.

13.
Aparência
Funcionalidades
Conteúdo

14.
Este é o
WordPress
⚠ Não altere os arquivos do “core”
do WordPress.
Quando necessário, é possível alterar
arquivos da pasta wp-content.
Exemplo: para instalar temas ou
plugins.

15.
Por que instalar o
WordPress local?
Primeiramente...

16.
Vantagens de desenvolver local
● Não é necessário estar conectado a internet para usar o WordPress;
● Ninguém vê o site enquanto está em desenvolvimento;
● Se estiver refazendo um site, o antigo continua online normalmente
enquanto o novo é desenvolvido;
● A navegação pelo site é mais rápida do que pela internet, já que os arquivos
estão no mesmo computador;
● Não é necessário usar FTP ou sistemas de deploy para fazer upload de
arquivos.

17.
Como funciona
o WordPress na web?
Online vs. local

18.
Como funciona a navegação internet?
Usuário Dispositivo
Arquivos do site Servidor
Internet
domínio
Navegador

19.
Como funciona a navegação internet?
Usuário
Arquivos do site
Servidor
Internet
WordPress
domínio
Dispositivo
Navegador
Banco de dados

20.
Como funciona um servidor local?
Dispositivo
Servidor local
Internet
domínio
Arquivos do site
WordPressBanco de dados
Usuário
Navegador

21.
Requisitos de servidores para WordPress
Verifique sempre em: http://wordpress.org/about/requirements
PHP 7.2+
MySQL 5.6+ ou
MariaDB 10+
Linux
preferencialmente
Apache ou Nginx
com mod_rewrite
Suporte a HTTPS

22.
Vamos instalar?
Mão na massa

23.
Qual é o seu sistema operacional?
Independente do sistema, tem WordPress para todos!

24.
Método 1.
XAMPP

25.
Baixe o instalador do XAMPP
1. Visite: https://www.apachefriends.org/pt_br/index.html
2. Baixe o XAMPP correto verificando:
a. A versão do PHP, de acordo com os requisitos do WordPress (7.2+)
b. O sistema operacional

26.
XAMPP + Windows
1. Baixe o XAMPP
2. Desative o antivírus temporariamente
3. Dois cliques para executar
4. Permita o XAMPP pelo firewall, quando for solicitado
5. A famosa instalação NNF - Next, Next, Finish!
6. Execute o XAMPP Control Panel (xampp-control.exe)

27.
XAMPP + MacOS
1. Baixe o XAMPP
2. Execute o instalador
3. Forneça usuário e senha sempre que for solicitado
4. NNF
5. Execute a aplicação manager-osx para abrir o XAMPP.

28.
XAMPP + Linux
1. Baixe o XAMPP
2. Abra o terminal e digite os seguintes comandos:
su root para acessar como super usuário. Coloque a senha root
cd pasta/onde/está/o-xampp/ substitua pelo diretório correto
chmod 755 xampp-linux-x64-7.0.20-0-installer-run permissão
sudo ./xampp-linux-x64-7.0.20-0-installer-run executar o arquivo
3. O instalador deve abrir. Prossiga com a instalação NNF.
4. Para executar o XAMPP, use:
sudo /opt/lampp/manager-linux.run para sistema x32
sudo /opt/lampp/manager-linux-x64.run para sistema x64

29.
Pronto! Você tem
um servidor local
No painel do XAMPP ative os
módulos do Apache e MySQL
sempre que for usar o
WordPress.

30.
Fazendo o WordPress
rodar
Agora que você tem o servidor, vamos usá-lo!

31.
Instalando o WordPress local
1. Baixe o WordPress em português do Brasil em br.wordpress.org.
2. Descompacte o arquivo zip dentro de uma pasta.
3. Renomeie esta pasta. O nome será o endereço do seu site no navegador,
portando não deve ter acentos, espaços, letras maiúsculas ou símbolos.
Apenas traço e underline são permitidos.
4. Copie a pasta.
5. Encontre a pasta htdocs dentro da pasta onde o XAMPP foi instalado:
a. Windows: C:/xampp/htdocs
b. MacOS: /Applications/XAMPP/htdocs
c. Linux /opt/lampp/htdocs
6. Cole a pasta do WordPress dentro da pasta htdocs.

32.
Criando o banco
de dados do
WordPress
1. No seu navegador, acesse o
PHPMyAdmin pelo endereço
localhost/phpmyadmin
2. Clique em Base de dados
3. Insira um nome para o seu banco,
sem espaços e símbolos. Guarde
este nome.
4. Clique em Criar
3
2
4

33.
Configurando o WordPress
1. No seu navegador, acesse localhost/nome-da-pasta
2. Vai se dar início o processo de configuração do WordPress, onde o banco de
dados é criado.
3. Preencha o nome do banco de dados que criamos no passo anterior.
4. Use o usuário root, sem senha.
5. Deixe o restante como está. Confirme.

34.
Tela de configuração do WordPress

35.
Em caso de bug: Erro ao estabelecer conexão.
Vamos fazer manualmente
1. Localize o arquivo wp-config.php ou wp-config-sample.php, se não
houver. Está localizado na raiz da pasta do WordPress.
2. Abra o arquivo em um editor de código. Se seu editor exibir todo o código
suprimido em poucas linhas, use o editor online: CodePad.
3. Localize no código e edite as informações realçadas em verde abaixo:
define( 'DB_NAME', 'nome_do_banco_de_dados_aqui' );
define( 'DB_USER', 'nome_de_usuario_aqui' );
define( 'DB_PASSWORD', 'senha_aqui' );
4. Cuidado com as aspas, não remova! Coloque o nome do seu banco de dados,
usuário ‘root’ e deixe as aspas vazias na senha.
5. Salve o arquivo como wp-config.php. Volte ao navegador

36.
Instalação do WordPress
1. Ainda no endereço localhost/nome-da-pasta no seu navegador, preencha
os campos da instalação
a. O nome do seu site. Pode usar maiúsculas, símbolos e espaços desta
vez.
b. O nome de usuário e senha que você vai usar para entrar no painel do
WordPress.
c. Um email para onde irão as notificações e informações do site quando
houver.
d. A visibilidade não faz diferença, já que estamos no ambiente local.

37.
Tela do instalador do WordPress

38.
Sucesso! WordPress instalado

39.
Faça login para entrar no painel

40.
Para visualizar o front-end do seu site (a parte pública).
localhost/seusite/

41.
Para acessar o painel do seu site.
localhost/seusite/wp-admin/

42.
Referências - instalação XAMPP
Windows
● [vídeo] Tutorial: Instalando WordPress no Windows com XAMPP
MacOS
● [vídeo][en] How to install XAMPP on Mac OSX
Linux
● [vídeo] Xampp - Instalando no Linux Ubuntu
● [vídeo] Install Wordpress Localhost on Linux With Xampp
● [tutorial][en] How to Install WordPress Offline on Linux using XAMPP

43.
Método 2.
Outras soluções

44.
Similar ao XAMPP, é um bundle que contém PHP, Apache e MySQL
1. Baixe o MAMP no site:
2. Execute o instalador e Next, Next, Finish.
3. No painel de controle, clique em Start Servers para iniciar o Apache e o
MySQL.
4. No seu navegador, acesse localhost:8888 para testar se funcionou.
5. Para executar o painel do MAMP novamente, abra a aplicação MAMP
Referência:
[vídeo][en] How to install MAMP on Mac OS X
MAMP - MacOS

45.
Uma plataforma local mais complexa, que além de ter o bundle, ainda gerencia
suas instalações locais do WordPress.
https://local.getflywheel.com/
É gratuito, mas requer um pequeno cadastro para baixar. Pode ser lento no
Windows.
Local by Flywheel - MacOS e Windows

46.
Gerenciador de instalações WordPress.
https://www.instantwp.com/
Instant WP - MacOS e Windows

47.
Theme Juice - MacOS
Gerenciador de instalações WordPress.
https://www.themejuice.it/

48.
Bitnami Application Stacks [todos]
Stacks de aplicações, incluindo o WordPress.
https://bitnami.com/stacks

49.
Vamos produzir
um site?
É isso!

50.
1. Configuração
● No painel, acesse o item Configurações do menu. Revise as opções.
● Configure os Permalinks (links permanentes)
● Configure opções de comentários

51.
2. Temas
Um tema é a roupa do site.
● Visite Aparência > Temas > Adicionar novo e explore os temas gratuitos do
repositório oficial.
● Pré-visualize os temas com um conteúdo genérico clicando em Visualizar.
● Instale um tema para poder fazer um test drive, visualizando o tema com o
seu conteúdo pelo recurso de Ver ao vivo.
● Só após Ativar um tema é que ele fica aplicado e é visualizado pelos
visitantes do seu site.

52.
Tipos de publicações

53.
Tipos de publicações (post types)
Como o WordPress é um gerenciador de conteúdo, tudo o que o usuário insere no
WordPress é uma publicação (em inglês, post). As publicações podem ser de
vários tipos. Entre os tipos de publicações, temos os posts do blog e outros.
Post type (tipo de publicação) ≠ Post do blog

54.
Tipos de publicações (post types)
Tipos de
publicações
(post types)
Posts [do blog]
(post)
Páginas
(page)
Anexos
(attachment)
Revisões
(revision)
Menu
(nav_menu_item)

55.
Posts
● Posts são cronológicos (possuem data)
● São listados pelos mais recentes
● São organizados por taxonomias (categorias e
tags),
● Podemos acessá-los por arquivos.
● Usados para notícias, status, etc.

56.
Páginas
● Páginas são hierárquicas (podem ter páginas
filhas).
● Podem ter diferentes modelos de exibição
(modelos de páginas).
● Não possuem taxonomias.
● Usadas para informações mais constantes,
como contato, página “sobre”, etc.

57.
Exercício - Criando
uma página
1. Crie a página com o título “Quem somos”.
2. Insira o texto fornecido.
3. Publique.

58.
Estrutura de
conteúdo

59.
Taxonomias
São recursos para organizar conteúdos.
● Categorias - são hierárquicas, poder possuir
sub-categorias
● Tags - não são hierárquicas.

60.
Arquivos
Página que exibe uma listagem de conteúdos
(posts, produtos, projetos do portfólio, etc) com base
em um critério:
● Home page - arquivo de itens mais recentes
● Arquivo do ano de 2016 - listagem por data
● Posts do autor Fulano - arquivo de autor
● Categoria “Viagens” - arquivo de taxonomia

61.
Single ou ítem singular
Página que exibe um único ítem:
● Post único
● Página única
● Página do produto

62.
Plugins

63.
O que são plugins?
São códigos que adicionam funcionalidades ao
WordPress. São modulares, ou seja, podem ser
plugados e desplugados.
Por isso, os plugins são uma forma eficiente de
compartilhar código, estender o sistema sem alterar o
core (nunca altere o core!), manter funcionalidades
caso o tema seja trocado, deixar uma funcionalidade
a cargo de um programador experiente, entre outras
vantagens.

64.
Cuidados ao instalar
plugins
● Instalar muitos plugins pode deixar o site lento
(muitos plugins adicionam scripts ao site,
aumentando o tempo de carregamento).
Verifique se o WordPress ou o tema já possuem
a função.
● Instale somente plugins de fontes confiáveis -
não use plugins piratas!
● Escolha plugins com desenvolvedores ativos.
● Mantenha os plugins atualizados.

65.
Adicionando
plugins
Em Plugins > Adicionar novo o
usuário pode navegar e buscar plugins
do repositório oficial do WordPress.

66.
Detalhes do
plugin
Na tela de detalhes do plugin são
exibidas informações a serem levadas
em conta na hora de escolher um
plugin:
● Última atualização
● Compatibilidade
● Instalações ativas
● Classificação média (estrelas)

67.
Em Plugins o usuário pode ver a lista de plugins instalados (disponíveis no seu
servidor). Para utilizar o plugin é necessário ativá-lo antes.
Instalando e ativando plugins

68.
Explorando alguns plugins
Há mais de 50 mil plugins gratuitos no repositório oficial

69.
Contact Form 7
Plugin para criação de formulários de contato. Simples e muito flexível e poderoso.
https://br.wordpress.org/plugins/contact-form-7/

70.
Jetpack
É o canivete suíço dos plugins. O Jetpack possui vários submódulos que podem ser
ativos de forma independente com várias funcionalidades, por exemplo:
● Monitoramento de visitas.
● Segurança - bloqueio de ataque de força bruta.
● Otimização de imagens.
● Tipos de conteúdo personalizado.
● Compartilhamento em redes sociais manual e automático.
● Formulário de contato.
● Galerias de imagens, widgets e - e muitos outros.
Necessário ter uma conta gratuita no WordPress.com.
https://br.wordpress.org/plugins/jetpack/

71.
WooCommerce
Plugin para criação de lojas virtuais no WordPress, se tornou a plataforma de
e-commerce mais popular do mundo.
Permite a criação de produtos no painel, com configuração de preço, estoque,
variações, etc. Implementa a funcionalidade de funil de compras (carrinho de
compras e checkout) para os usuários do site.
Emite um pedido para o administrador da loja e se integra com vários métodos de
pagamento (PayPal, PagSeguro, Cielo, etc) e de entrega (Correios, transportadoras,
etc) através de plugins complementares.
Outros plugins complementares permitem criar outros tipos de lojas: venda de
assinaturas, marketplace, venda de cursos, etc.
https://br.wordpress.org/plugins/woocommerce/

72.
Elementor Page Builder
Permite a montagem de páginas com layouts diferenciados de forma visual,
através de “blocos” de construção chamados de elementos. Há vários deles, como
por exemplo:
● Títulos e bloco de texto
● Imagens
● Divisores
● Colunas
● Sliders, accordions, tabs
● Botões, entre outros.
https://br.wordpress.org/plugins/elementor/

73.
Links da comunidade
https://br.wordpress.org/support/
https://www.facebook.com/WordCampSaoPaulo/
https://www.facebook.com/groups/wordpress.brasil/
https://www.facebook.com/groups/wordpressbrasilwomen/
https://www.facebook.com/groups/woocommerce.brasil/

74.
Obrigada!
Siga nas redes sociais
@anyssaferreira
www.hastedesign.com.br