Wordpress + Docker
 

Desenvolvimento local reproduzível

O que me motivou

 

Alguém que, não sendo "expert" em código, mexia diretamente no código do site online.

Problemas:

  • compromete serviço aos clientes (por erros no site)
  • dificulta suporte técnico (até para especialistas)
    • ex.: esta alteração foi mesmo do plugin, ou foi tua?
  • dificulta experimentação
    • "não é no meu computador"
    • limita ferramentas
    • lida-se com dados sensíveis
    • como é que instalo isto? 
    • "mas no meu computador funciona!"
    • MySQL 5.6 ou 5.8?

Que fazer?

criar um
ambiente de desenvolvimento local

0 - Apresenta-te!

  • Nome?
  • Gostos?
  • Experiência a trabalhar na web?
    • conteúdo? (blog, artigos...)
    • desenvolvimento?

Porquê Wordpress?

  • elevada popularidade
    • + oportunidades de trabalho
    • + tutoriais/ecossistema
    • + extensões
  • acessível para diversos perfis
    • ex.: programador, criador de conteúdo
    • CMS + plataforma de desenvolvimento
  • montagem "simples"

Problemas Wordpress

  • excesso de opções - qual a melhor?
  • é CMS e framework - pode ser mais do que se pretende
  • otimizar pode ser complicado
  • questões de segurança

1 - Introdução ao Docker

link para apresentação

Setup Wordpress

  • elevada popularidade
    • + oportunidades de trabalho
    • + tutoriais/ecossistema
    • + extensões
  • acessível para diversos perfis
    • ex.: programador, criador de conteúdo
    • CMS + plataforma de desenvolvimento
  • montagem "simples"

Setup Wordpress

  • código do nosso projeto
  • contentor para correr o nosso site (PHP+Apache)
  • contentor para armazenar dados (MySQL)

De que precisamos

Setup Wordpress

  1. criar pasta para projeto
  2. criar ficheiros para arrancar com Docker 
    1. docker-compose.yml
    2. variáveis de ambientes
  3. arrancar contentores docker
  4. "instalar" o wordpress

Passos a seguir

Setup Wordpress

3 - Arrancar Projeto

docker-compose build (opcional)

docker-compose up

Setup Wordpress

3 - Arrancar Projeto

docker-compose up

1 - criar pasta

2 - criar ficheiros para arrancar projeto

version: '3.3'

services:
   db:
     image: mysql:8.0
     env_file: db.env
     ports:
      - "3306:3306"
   wordpress:
     depends_on:
       - db
     image: wordpress:5.5
     ports:
       - "8000:80"
     volumes:
      - ./projeto-wp:/var/www/html 
     env_file: wp.env
MYSQL_ROOT_PASSWORD=tantofaz
MYSQL_DATABASE=tantofaz_db
MYSQL_USER=tantofaz_user
MYSQL_PASSWORD=tantofaz
WORDPRESS_DB_HOST=db:3306
WORDPRESS_DB_NAME=tantofaz_db
WORDPRESS_DB_USER=tantofaz_user
WORDPRESS_DB_PASSWORD=tantofaz

Setup Wordpress

4 - Instalar Wordpress

  1. aceder ao projeto em localhost:8000
  2. seguir etapas no browser
  3. (para Linux) mudar permissões ficheiros

 

chmod -R 755 <pasta_do_projeto>

Setup Wordpress

5 - começar a criar!

  • escolher um tema
  • configurar um tema
  • criar um artigo ou página
  • experimentar um plugin (editor, etc.)
  • criar ou personalizar um menu
  • passar o código a outra pessoa (para poder arrancar o projeto)

Setup Wordpress

Painel de administração

  1. aceder a http://localhost:8000/wp-admin
  2. inserir credenciais e iniciar

Setup Wordpress

Comandos úteis

Propósito Comando
parar projeto docker-compose stop
"desinstalar" e apagar dados  docker-compose down --volumes
"desinstalar" (sem apagar dados) ​docker-compose down

Referências

Criar conteúdo

com wordpress

Campos personalizados

  • Advanced custom fields

Wordpress é um CMS

  • Artigos
  • Páginas
  • Categorias
  • ???

Serve para criar e servir conteúdo web

Artigos
Personalizados
(custom post types) 

Estrutura e conteúdo próprio

Criar Custom post type

Conteúdo com Wordpress

... ou instalar:

function create_custom_posttypes() {
 
    register_post_type( 'ad',
    // CPT Options
        array(
            'labels' => array(
                'name' => __( 'Anúncios' ),
                'singular_name' => __( 'Anúncio' )
            ),
            'public' => true,
            'has_archive' => true,
            'rewrite' => array('slug' => 'movies'),
            'show_in_rest' => true,
 
        )
    );
}

add_action( 'init', 'create_custom_posttypes' );

referências

Conteúdo com Wordpress

Temas wordpress

  • Selecionar e Instalar tema
    • pelo painel de administrador
    • por download
  • Personalizar

Personalizar temas

AVISO: opções podem variar com o tema

nome, favicon, slogan

Expandir wordpress

Plugins

plugins wordpress

  • O que são
  • Como instalar
  • Exemplos

plugins wordpress

Fornece API em GraphQL para site wordpress

WP-Graphql

Instalar

  1. fazer download de wp-graphql
  2. adicionar pasta a 'wp-content/plugins'
  3. trocar nome de pasta paara 'wp-graphql'
  4. ativar plugin no painel de administrador
  5. ativar pretty permalinks

plugins wordpress

Criar formulário de contactos ou newsletter com interface gráfica

WP Forms

Instalar

Referências

Configurar Wordpress

Cenários práticos

pretty permalinks

Configurar wordpress

  1. selecionar "Ligações Permanentes" (Permalinks) em "Opções"
  2. selecionar "Nome do Artigo"

Porquê?

Formato tradicional (?q=123) não reflete conteúdo, prejudicando-o em SEO

Headless CMS / api

  • WP-Rest
  • GraphQL

Exemplo Rest

https://www.cloudways.com/blog/use-react-with-wordpress-to-create-headless-cms/

Glossário

  •  
  • container/contentor (web) -
  • (ambiente) desenvolvimento - réplica de um produto para experimentação e melhorias
  • (ambiente) produção - site ou produto servido aos clientes
  •  
Made with Slides.com