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

124 views

Published on

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.

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
124
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. Ajude as fadinhas … não use query_posts( );
  2. 2. pre_get_posts(); Preguetinho para os íntimos.
  3. 3. DEV WP: O que eu preciso saber para começar a criar temas e plugins para WordPress? WordCamp 2016 RIO DE JANEIRO
  4. 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. 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. 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. 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. 8. Será uma taxonomia? Dev WP Taxonomias se assemelham a categorias e tags, servem para categorizar posts de qualquer tipo. Exemplo: - Categoria - Área
  9. 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. 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. 11. Quais plugins prontos devo usar? Dev WP - ACF - Contact Form 7 - Yoast SEO - Plugins de segurança
  12. 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. 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.
  14. 14. Principais templates Dev WP Páginas - page-slug.php CPT - archive-slug.php Taxonomias - taxonomy-slug.php Singles - single-slug_do_cpt.php
  15. 15. 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.
  16. 16. 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
  17. 17. 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
  18. 18. Estrutura de templates Dev WP Os templates normalmente são estruturados da seguinte forma: Header Conteúdo principal Sidebar (opcional) Footer
  19. 19. 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();
  20. 20. Arquivos fundamentais Dev WP - style.css - header.php - footer.php - index.php - home.php - functions.php
  21. 21. 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.
  22. 22. 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’ );
  23. 23. 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’ );
  24. 24. 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();
  25. 25. 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.
  26. 26. 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.
  27. 27. 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.
  28. 28. 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.
  29. 29. 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">
  30. 30. 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">
  31. 31. 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.
  32. 32. 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.
  33. 33. 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.
  34. 34. 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.
  35. 35. 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.
  36. 36. 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
  37. 37. 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/
  38. 38. Atendimento Home Viva
  39. 39. E por hoje é só pessoal! Home Viva
  40. 40. Perguntas? Dev WP

×