Wordpress

Boa parte dos projetos Din Digital são feitos com WordPress e algumas boas práticas são necessárias para desenvolvimento e manutenção.

Sumário

• Instalação do projeto
• Primeiros passos
• Versões
  • Node
• Montagem
  • Organização de pastas
  • Criação de novas páginas
  • Bibliotecas
    • Normalize.css
• Integração
  • Plugins
    • Advanced Custom Fields
    • Yoast SEO
    • WP Fastest Cache
    • Wordfence
    • EWWW Image Optimizer
    • All In One WP Migration
• Links úteis

Instalação do projeto

A instalação dos projetos WordPress, quando estão no novo padrão*, seguem-se da seguinte maneira:

1. Clone o repositório do docker do projeto com --recurse-submodules:

git clone project_git_url --recurse-submodules

2. Construa/Ligue o ambiente do docker compose estando na raiz do repositório:

docker compose up

3. Faça checkout em alguma branch na pasta do tema wp-content/themes/theme-name:

git checkout dev

ou, se a branch dev não existir:

git checkout -b dev

*Observação: se o repositório Docker não estiver nesse padrão, por favor atualizar para o novo padrão.

Primeiros passos

Versões

Node

É importante lembrarmos de anotar no arquivo package.json a versão do Node utilizada na criação do projeto, para que a instalação no futuro seja feita sem erros de pacotes. Anotamos da seguinte forma:

{
  "engines": {
    "node": "VERSÃO"
  },
}

Para encontrar a versão do Node rode no terminal node -v. Lembrar também de sempre utilizar o Node Version Manager para realizar a troca de versões de uma forma fácil.

Montagem

Organização de pastas

A organização padrão de um projeto WordPress da Din Digital é a seguinte:

- /assets (pasta de bundles)
  - /css (css buildado por página)
  - /fonts (arquivos de fontes e ícones)
  - /img (imagens estáticas do projeto)
  - /js (js buildado por página)
- /includes
  - /api (rotas de API personalizadas)
  - /functions (funções separadas por arquivo)
  - /services (conexões php externas)
- /src (estilos e scripts)
  - /js
  - /scss
- /template-parts
  - /modules
  - /sections
  - /layouts
- .gitignore
- 404.php
- footer.php
- functions.php (chamada dos arquivos criados em /includes/functions)
- gulpfile.php
- header.php
- index.php
- package.json
- README.md
- style.css (arquivo para documentação do tema)

O tema base utilizado pela Din é o Starter WP: https://github.com/dindigital/starter-wp

Criação de novas páginas

Para a criação de novas páginas na montagem é importante já criarmos no painel juntamente com o template da página em específico. Com o arquivo template-NOMEDAPAGINA.php conseguimos montar todo o conteúdo daquela página. Esse arquivo, para funcionar, precisa ter o seguinte formato:

<?php
/** Template Name: Homepage */
get_header();
?>

AQUI SEU HTML

<?php get_footer(); ?>

O comentário /** Template Name: Homepage */ especifica para o WordPress qual o nome daquele modelo, esse comentário é necessário estar em portguês para que o cliente final possa identificar da melhor forma qual aquela página.

Selecionamos esse template no painel criando uma nova página e selecionando o modelo, como no print abaixo:

Bibliotecas

Algumas bibliotecas CSS e JavaScript auxiliam e facilitam o desenvolvimento:

Normalize.css

Usamos o normalize.css para o reset css dos projetos WordPress e a instalação é feita da seguinte forma:

npm i -d normalize.css

E importamos no nosso arquivo main.scss, para que seja visto em todas as páginas:

@import 'normalize.css';

Integração

Plugins

Advanced Custom Fields

Yoast SEO

WP Fastest Cache

Wordfence

EWWW Image Optimizer

All In One WP Migration

Links úteis

Site a seguir mostra visualmente onde cada HOOK do WooCommerce é chamado/executado https://businessbloomer.com/category/woocommerce-tips/visual-hook-series/