Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreira #cpbr11

118 visualizaciones

Publicado el

Aprenda o que é o WordPress e como instalar o CMS em seu computador para desenvolver sites sem precisar de acesso à internet. Workshop apresentado na bancada da comunidade Software Livre da Campus Party Brasil 2018

Publicado en: Internet
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreira #cpbr11

  1. 1. WordPress: criando seu site no ambiente local Anyssa Ferreira #CPBR11
  2. 2. versão Google Presentations bit.ly/wplocal-cpbr11
  3. 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. 4. Quem são vocês? Nome, ocupação, objetivo
  5. 5. Pesquisa rápida ● Quem nunca utilizou o WordPress? ● Quem já utilizou um pouco? ● Quem já teve um blog ou site em WordPress?
  6. 6. Onde o WordPress é usado? Você já visitou muitos sites em WordPress...
  7. 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. 8. 13 grandes sites brasileiros feitos com WordPress https://www.hastedesign.com.br/novidades/13-grandes-sites-brasileiros-feitos-com-wordpress/
  9. 9. +29% de todos os sites do mundo usam WordPress https://w3techs.com/technologies/details/cm-wordpress/all/all
  10. 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. 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. 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. 13. Aparência Funcionalidades Conteúdo
  14. 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. 15. Por que instalar o WordPress local? Primeiramente...
  16. 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. 17. Como funciona o WordPress na web? Online vs. local
  18. 18. Como funciona a navegação internet? Usuário Dispositivo Arquivos do site Servidor Internet domínio Navegador
  19. 19. Como funciona a navegação internet? Usuário Arquivos do site Servidor Internet WordPress domínio Dispositivo Navegador Banco de dados
  20. 20. Como funciona um servidor local? Dispositivo Servidor local Internet domínio Arquivos do site WordPressBanco de dados Usuário Navegador
  21. 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. 22. Vamos instalar? Mão na massa
  23. 23. Qual é o seu sistema operacional? Independente do sistema, tem WordPress para todos!
  24. 24. Método 1. XAMPP
  25. 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. 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. 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. 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. 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. 30. Fazendo o WordPress rodar Agora que você tem o servidor, vamos usá-lo!
  31. 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. 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. 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. 34. Tela de configuração do WordPress
  35. 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. 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. 37. Tela do instalador do WordPress
  38. 38. Sucesso! WordPress instalado
  39. 39. Faça login para entrar no painel
  40. 40. Para visualizar o front-end do seu site (a parte pública). localhost/seusite/
  41. 41. Para acessar o painel do seu site. localhost/seusite/wp-admin/
  42. 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. 43. Método 2. Outras soluções
  44. 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. 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. 46. Gerenciador de instalações WordPress. https://www.instantwp.com/ Instant WP - MacOS e Windows
  47. 47. Theme Juice - MacOS Gerenciador de instalações WordPress. https://www.themejuice.it/
  48. 48. Bitnami Application Stacks [todos] Stacks de aplicações, incluindo o WordPress. https://bitnami.com/stacks
  49. 49. Vamos produzir um site? É isso!
  50. 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. 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. 52. Tipos de publicações
  53. 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. 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. 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. 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. 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. 58. Estrutura de conteúdo
  59. 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. 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. 61. Single ou ítem singular Página que exibe um único ítem: ● Post único ● Página única ● Página do produto
  62. 62. Plugins
  63. 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. 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. 65. Adicionando plugins Em Plugins > Adicionar novo o usuário pode navegar e buscar plugins do repositório oficial do WordPress.
  66. 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. 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. 68. Explorando alguns plugins Há mais de 50 mil plugins gratuitos no repositório oficial
  69. 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. 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. 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. 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. 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. 74. Obrigada! Siga nas redes sociais @anyssaferreira www.hastedesign.com.br

×