WordPress local Anyssa Ferreira #CPBR11

Prévia do material em texto

WordPress: criando seu 
site no ambiente local
Anyssa Ferreira
#C
PB
R1
1
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
Quem são vocês?
Nome, ocupação, objetivo
Pesquisa rápida
● Quem nunca utilizou o WordPress?
● Quem já utilizou um pouco?
● Quem já teve um blog ou site em 
WordPress?
Onde o WordPress 
é usado?
Você já visitou muitos sites em WordPress...
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.
13 grandes sites brasileiros feitos com 
WordPress
https://www.hastedesign.com.br/novidades/13-grandes-sites-brasileiros-feitos-com-wordpress/
+29%
de todos os sites do mundo usam WordPress
https://w3techs.com/technologies/details/cm-wordpress/all/all
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.
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.
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.
Aparência
Funcionalidades
Conteúdo
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.
Por que instalar o 
WordPress local?
Primeiramente...
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.
Como funciona
o WordPress na web?
Online vs. local
Como funciona a navegação internet?
Usuário Dispositivo
Arquivos do site Servidor
Internet
domínio
Navegador
Como funciona a navegação internet?
Usuário
Arquivos do site
Servidor
Internet
WordPress
domínio
Dispositivo
Navegador
Banco de dados
Como funciona um servidor local?
Dispositivo
Servidor local
Internet
domínio
Arquivos do site
WordPressBanco de dados
Usuário
Navegador
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
Vamos instalar?
Mão na massa
Qual é o seu sistema operacional?
Independente do sistema, tem WordPress para todos!
Método 1.
XAMPP
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
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)
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.
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
Pronto! Você tem 
um servidor local
No painel do XAMPP ative os 
módulos do Apache e MySQL 
sempre que for usar o 
WordPress.
Fazendo o WordPress
rodar
Agora que você tem o servidor, vamos usá-lo!
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.
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
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.
Tela de configuração do WordPress
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
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.
Tela do instalador do WordPress
Sucesso! WordPress instalado
Faça login para entrar no painel
Para visualizar o front-end do seu site (a parte pública).
localhost/seusite/
Para acessar o painel do seu site.
localhost/seusite/wp-admin/
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
Método 2.
Outras soluções
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
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
Gerenciador de instalações WordPress.
https://www.instantwp.com/
Instant WP - MacOS e Windows
Theme Juice - MacOS
Gerenciador de instalações WordPress.
https://www.themejuice.it/
Bitnami Application Stacks [todos]
Stacks de aplicações, incluindo o WordPress.
https://bitnami.com/stacks
Vamos produzir 
um site?
É isso!
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
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.
Tipos de publicações
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
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)
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.
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.
Exercício - Criando 
uma página
1. Crie a página com o título “Quem somos”. 
2. Insira o texto fornecido.
3. Publique.
Estrutura de 
conteúdo
Taxonomias
São recursos para organizar conteúdos. 
● Categorias - são hierárquicas, poder possuir 
sub-categorias
● Tags - não são hierárquicas.
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
Single ou ítem singular
Página que exibe um único ítem:
● Post único
● Página única
● Página do produto
Plugins
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.
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.
Adicionando 
plugins
Em Plugins > Adicionar novo o 
usuário pode navegar e buscar plugins 
do repositório oficial do WordPress.
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)
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
Explorando alguns plugins
Há mais de 50 mil plugins gratuitos no repositório oficial
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/
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/
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/
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/
Obrigada!
Siga nas redes sociais
@anyssaferreira
www.hastedesign.com.br