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.
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
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
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.
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.
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.
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.
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?
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/