WordPress é sem dúvida o CMS mais popular da internet e vem crescendo a passos largos, porém muitos dos que pretendem se tornar desenvolvedores WordPress sentem dificuldades para entender como começar a desenvolver seus próprios temas e plugins. Nesta apresentação vou mostrar como funciona a estrutura de um tema e plugins WordPress, como iniciar o desenvolvimento e o que é necessário saber para construir sites com layout próprio, criando um tema do zero e desenvolvendo plugins específicos para o projeto.

1. Ajude as fadinhas
… não use query_posts( );

2. pre_get_posts();
Preguetinho
para os íntimos.

3. DEV WP:
O que eu preciso saber para começar a
criar temas e plugins para WordPress?
WordCamp 2016
RIO DE JANEIRO

4. Leo Baiano
#WebDev para pagar as
contas
Músico quando estou bêbado
Poeta por vocação
Romântico de nascença
FAZEDOR DE SLIDES nas
horas vagas
Pode não parecer, mas
ESTE CARA SOU EU

5. Estruturando o projeto
Dev WP
● O que será uma página?
● Quais CPTs vou precisar criar?
● Quais Taxonomys?
● Quais custom fields?
● Qual a relação entre cada parte do projeto?
● Quais plugins prontos vou utilizar?
● Quais plugins eu preciso criar?

6. Será uma página?
Dev WP
Páginas são estruturas com conteúdo “estático”,
que podem possuir “filhos” mas não precisam,
necessariamente de uma estrutura de listagem.
Exemplo:
- Páginas de contato
- Páginas institucionais (quem somos, história…)

7. Será um CPT?
Dev WP
CPT é um tipo de post customizado, tem
basicamente a mesma estrutura dos posts e são
utilizados para definir um tipo que agrega várias
publicações.
Exemplo:
- Listagem de notícias
- Listagem de escolas
- Listagem de cursos

8. Será uma taxonomia?
Dev WP
Taxonomias se assemelham a categorias e tags,
servem para categorizar posts de qualquer tipo.
Exemplo:
- Categoria
- Área

9. Será um custom field?
Dev WP
Custom Fields são campos personalizados que
servem para cadastrar informações extras ligadas
a um tipo de post.
Exemplo:
- Ementa
- Bibliografia

10. Qual a relação entre as
partes do projeto?
Dev WP
Cursos possuem uma relação com as escolas, as
turmas possuem relação com um curso, como
definimos isso?

11. Quais plugins prontos
devo usar?
Dev WP
- ACF
- Contact Form 7
- Yoast SEO
- Plugins de segurança

12. Quais plugins devo
desenvolver?
Dev WP
Tudo que não possuir relação direta com o visual
do site (layout) e sim com a estrutura e/ou
conteúdo deve ser um plugin.
- CPTs
- Funcionalidades e sistemas específicos
(enquetes, galerias…)

13. Como funcionam os
templates?
Dev WP
O WordPress define qual arquivo do tema será
utilizado como template com base na página que o
visitante está acessando.

15. Principais templates
Dev WP
Páginas - page-slug.php
CPT - archive-slug.php
Taxonomias - taxonomy-slug.php
Singles - single-slug_do_cpt.php

16. O loop de posts
Dev WP
O WordPress faz um SELECT no banco para trazer o
conteúdo com base em critérios ligados a página
que está sendo acessada pelo visitante.
Chamamos isso de loop padrão.

17. Alterando o loop padrão
Dev WP
Em alguns casos precisamos fazer algumas
modificações no loop padrão de determinada
página, para isso utilizamos o filtro pre_get_posts.
Documentação e exemplo:
https://codex.wordpress.org/Plugin_API/Action_R
eference/pre_get_posts

18. Criando um segundo loop
Dev WP
Em outros casos é necessário criar um segundo
loop na página. Para estes casos o ideal e mais
correto é criar uma nova instância da WP_Query.
Documentação e exemplo:
https://codex.wordpress.org/Class_Reference/WP_
Query

19. Estrutura de templates
Dev WP
Os templates normalmente são estruturados da
seguinte forma:
Header
Conteúdo principal
Sidebar (opcional)
Footer

20. Estrutura de templates
Dev WP
Como ficaria uma page.php por exemplo?
get_header();
// Loop WordPress para mostrar o conteúdo
get_sidebar();
get_footer();

21. Arquivos fundamentais
Dev WP
- style.css
- header.php
- footer.php
- index.php
- home.php
- functions.php

22. O que são hoocks?
Dev WP
Hooks são ganchos utilizados para permitir que
desenvolvedores possam adicionar
funcionalidades ou modificar funcionalidades
através de actions e filtros.

23. Actions
Dev WP
Actions servem para acionar funções antes ou
depois de algo acontecer no WordPress. Por
exemplo, você pode utilizar uma actions que
chama uma função logo após um post ser salvo ou
logo depois do WordPress definir qual o tema do
site.
add_action( ‘nome_da_Action’, ‘ nome_da_função’ );

24. Filters
Dev WP
Os filtros são utilizados para interceptar e
modificar a forma como uma determinada função
do WordPress será executada. Por exemplo, voê
pode utilizar um filtro para modificar a forma como
a função the_excerpt() retorna o resumo dos posts.
add_filter( ‘nome_da_Action’, ‘ nome_da_função’ );

25. Adicionando hook ao
nosso tema
Dev WP
Os dois primeiros hooks que temos que adicionar
no nosso tema são: wp_head(); e wp_footer();

26. wp_head();
Dev WP
Este hook permite que o WordPress e plugins
carreguem coisas no <head> do nosso tema,
exemplo mais comum é o carregamento de estilos
CSS.

27. wp_footer();
Dev WP
Este hook permite que o WordPress e plugins
carreguem coisas no rodapé do nosso tema,
exemplo mais comum é o carregamento de scripts
JS.

28. Carregando folhas de
estilo e scripts JS
Dev WP
Para carregar as folhas de estilo e arquivos JS você
vai utilizar a action wp_enqueue_scripts e as funções
wp_enqueue_style e wp_enqueue_script para carregar
seus .css e .js respectivamente.

29. Classes CSS
Dev WP
O WordPress possui algumas funções para gerar
classes CSS que são muito uteis para ajudar a
personalizar o visual do tema de acordo com a
página ou seção que o visitante está vendo.

30. body_class()
Dev WP
Utilizada para adicionar classes CSS no elemento
<body>.
Uso
<body <?php body_class(); ?>>
Resultado
<body class="page page-id-2 page-parent
page-template-default logged-in">

31. post_class()
Dev WP
Utilizada para adicionar classes CSS no que
envolve o post.
Uso
<div <? Php post_class (); ? >>
Resultado
<div class = "post-4564 category-48">

32. Plugin ou functions.php
Dev WP
Devo criar uma função no functions.php ou criar
um plugin?
functions.php - Se a funcionalidade tiver ligação
direta com o tema e não seria útil caso precise
mudar o tema.
Plugin - Se a funcionalidade independe de tema.

33. O que pesa mais?
Dev WP
A performance do site depende diretamente da
funcionalidade e como ela foi desenvolvida
independente de onde ela está aplicada.
A performance será basicamente a mesma se
colocar a função no functions.php ou em um
plugin.

34. Como começar a criar
plugins?
Dev WP
O primeiro e principal passo para começar a
desenvolver plugins é conhecer os hooks, o que
fazem e quando são acionados.

35. Vamos brincar um
pouco?
Dev WP
Back to top
Vamos criar um plugin que inclui uma imagem
flutuante, no rodapé do site, que ao ser clicada leva
o visitante para o topo da página.

36. Back to top
Dev WP
O que preciso fazer?
1 - Carregar um arquivo .js com um script que vai
rolar a página para o topo quando o visitante clicar
em um botão.
2 - Incluir o botão no rodapé do tema.

37. Back to top
Dev WP
Quais actions ou filter posso utilizar para:
1 - Carregar um arquivo .js com um script que vai
rolar a página para o topo quando o visitante clicar
em um botão.
Action: wp_enqueue_scripts

38. Back to top
Dev WP
Quais actions ou filter posso utilizar para:
2 - Incluir o botão no rodapé do tema.
Action: wp_footer
https://wordpress.org/plugins/backtop/

39. Atendimento
Home Viva

40. E por hoje é só pessoal!
Home Viva

41. Perguntas?
Dev WP