O documento apresenta uma solução chamada Home Viva para criar uma página home dinâmica no WordPress através de widgets e customização. A Home Viva permite adicionar vários módulos como notícias, blogs e vídeos e definir o conteúdo de cada um de forma automática ou manual. Ela também possui recursos como live reload e autocomplete para facilitar a edição.

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

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

3. Home Viva:
Do design da interface até a
programação do sistema
WordCamp 2016
BELO HORIZONTE

4. Leo Baiano Jeff Camargo
#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
UX / UI Designer
O cara sério desta
apresentação
Não faço slides de fadinhas

5. Por que Home Viva?
● Apesar das redes sociais e compartilhamento de
notícias a home ainda é a página mais acessada de
forma direta
● Detêm cerca de 30% de todos os acessos
● Conteúdo da home apresenta a linha editorial da
empresa
● 55% dos usuários são provenientes de dispositivos
mobile, 45% dos usuários usam desktop
Home Viva

6. 29%
27%
24%
20%
SocialBusca Orgânica
Parceiros Home
Home Viva

7. Home
Viva
Conteúdo
editorial
Interface
modular
Análise
de uso
Curadoria
Usuário
Estratégia
Home Viva

8. Interface
Modular
● Notícias
● Blogs
● Álbuns
● Vídeos
● Ao Vivo
● Conteúdo social
Home Viva

9. Módulos vivos
● Priorização e destaque de conteúdos
● A todo momento a disposição pode mudar
● A edição é totalmente flexível
● É possível agendar as notícias em todos os módulos
● É possível identificar a quantidade de interação em
cada módulo
Home Viva

10. Home Viva

11. Home Viva

12. Home Viva

13. Antigamente uma página
era montada assim
Home Viva

14. Home Viva

15. 3 homens e um desafio
Home Viva

16. 3 homens e um desafio
Home Viva

17. As vezes a roda não serve
Home Viva
● Page builder by siteOrigin
● Visual composer

18. Customizer + Widgets = Home Viva
Home Viva
API Customizer para motar os blocos, ordenar e exibir as
mudanças em tempo real. Widgets para criar os blocos e
permitir que os editores gerenciem o conteúdo de cada
um deles.

19. Show time!
Home Viva

20. Criando um widget
Home Viva

21. Criando um widget
Home Viva

22. Especificações dos blocos
Home Viva
● Cada bloco tem mais de uma posição
● O conteúdo de cada posição pode ser
preenchido automaticamente ou pelo editor
● O editor pode definir de onde vem o conteúdo
automático

23. Múltiplas posições
Home Viva
A segunda vez é sempre mais gostosa!
Criar uma propriedade privada para definir a
quantidade de posições que o bloco tem e fazer um
for para gerar o formulário e salvar o conteúdo.

24. Múltiplas posições
Home Viva

25. Conteúdo automático ou editado
Home Viva
Definições são como cantadas, o objetivo
é fuder com você!
No front end é preciso verificar se os campos da
posição estão com conteúdo, se tiver exibe, caso
contrário pega o conteúdo do post.

26. Home Viva
Se ela dança, eu danço...

27. Home Viva
Se ela dança, eu danço...

28. Home Viva

29. De onde vem os posts automáticos?
Home Viva
E é assim, sem um jantar, sem flores nem
nada?
O editor pode definir o conteúdo de cada posição do
bloco, mas ele precisa poder escolher uma categoria,
por exemplo, e mostrar os posts dela.

30. Selecionando uma categoria
Home Viva

31. Home Viva
Com os widgets prontos só precisa criar a área no
template da página inicial e, pronto, o conteúdo já
vem dos widgets que são gerenciados no customizer.
Tá tranquilo? Tá favorável?

32. Home Viva

33. Vamos as melhorias!
Home Viva
That`s very good, may I use that?

34. Auto complete na busca dos posts
Home Viva
● jQuery UI - .autocomplete
● json estático com os últimos posts
● Be Happy!

35. Auto complete na busca dos
posts.
Home Viva

36. Auto complete na busca dos posts.
Home Viva

37. Auto complete na busca dos posts.
Home Viva

38. Live reload na página toda
Home Viva

39. O que nós queremos?
Home Viva

40. Live reload "certeiro"
Home Viva
add_theme_support( 'customize-selective-refresh-widgets' );
$widget_ops = array(
'classname' => 'atendimento-loser',
'description' => 'Não sou fã de atendimento',
'customize_selective_refresh' => true
);
Entrou no core na versão 4.5 do WordPress
Referência: https://make.wordpress.org/core/2016/03/22/implementing-selective-refresh-support-for-
widgets/

41. Atendimento
Home Viva

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

43. Perguntas?
Home Viva