O que eu preciso saber para começar a criar temas e plugins WordPress

Ajude as fadinhas

… não use query_posts( );

pre_get_posts();Preguetinho para os íntimos.

DEV WP:O que eu preciso saber para começar a criar temas e plugins para WordPress?

WordCamp 2016RIO DE JANEIRO

Leo Baiano#WebDev para pagar as contasMúsico quando estou bêbadoPoeta por vocaçãoRomântico de nascençaFAZEDOR DE SLIDES nas horas vagas

Pode não parecer, mas

ESTE CARA SOU EU

Estruturando o projetoDev 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?

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…)

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

Será uma taxonomia?Dev WP

Taxonomias se assemelham a categorias e tags, servem para categorizar posts de qualquer tipo.

Exemplo:- Categoria- Área

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

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?

Quais plugins prontos devo usar?

Dev WP

- ACF- Contact Form 7- Yoast SEO- Plugins de segurança

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…)

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.

Principais templatesDev WP

Páginas - page-slug.phpCPT - archive-slug.phpTaxonomias - taxonomy-slug.phpSingles - single-slug_do_cpt.php

O loop de postsDev 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.

Alterando o loop padrãoDev 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_Reference/pre_get_posts

Criando um segundo loopDev 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

Estrutura de templatesDev WP

Os templates normalmente são estruturados da seguinte forma:

HeaderConteúdo principalSidebar (opcional)

Footer

Estrutura de templatesDev WP

Como ficaria uma page.php por exemplo?

get_header();// Loop WordPress para mostrar o conteúdoget_sidebar();

get_footer();

Arquivos fundamentaisDev WP

- style.css- header.php- footer.php- index.php- home.php- functions.php

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.

ActionsDev 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’ );

FiltersDev 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’ );

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();

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.

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.

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.

Classes CSSDev 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.

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">

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">

Plugin ou functions.phpDev 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.

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.

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.

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.

Back to topDev 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.

Back to topDev 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

Back to topDev 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/

AtendimentoHome Viva

E por hoje é só pessoal!Home Viva

Perguntas?Dev WP