Post on 07-Jan-2017
Ajude as fadinhas
… não use query_posts( );
pre_get_posts();Preguetinho para os íntimos.
Home Viva:Do design da interface até a programação do sistema
WordCamp 2016BELO HORIZONTE
Leo Baiano Jeff Camargo#WebDev para pagar as contasMúsico quando estou bêbadoPoeta por vocaçãoRomântico de nascençaFAZEDOR DE SLIDES nas horas vagas
UX / UI DesignerO cara sério desta apresentaçãoNão faço slides de fadinhas
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
29%
27%24%
20%
SocialBusca Orgânica
Parceiros Home
Home Viva
Home Viva
Conteúdo editorial
Interfacemodular
Análise de uso
Curadoria
Usuário
Estratégia
Home Viva
Interface Modular● Notícias● Blogs● Álbuns● Vídeos● Ao Vivo● Conteúdo social
Home Viva
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
Home Viva
Home Viva
Home Viva
Antigamente uma página era montada assim
Home Viva
Home Viva
3 homens e um desafioHome Viva
3 homens e um desafioHome Viva
As vezes a roda não serveHome Viva
● Page builder by siteOrigin ● Visual composer
Customizer + Widgets = Home VivaHome 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.
Show time!Home Viva
Criando um widgetHome Viva
Criando um widgetHome Viva
Especificações dos blocosHome 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
Múltiplas posiçõesHome 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.
Múltiplas posiçõesHome Viva
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.
Home Viva
Se ela dança, eu danço...
Home Viva
Se ela dança, eu danço...
Home Viva
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.
Selecionando uma categoriaHome Viva
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?
Vamos as melhorias!Home Viva
That`s very good, may I use that?
Auto complete na busca dos posts
Home Viva
● jQuery UI - .autocomplete ● json estático com os últimos posts● Be Happy!
Auto complete na busca dos posts.
Home Viva
Auto complete na busca dos posts.
Home Viva
Auto complete na busca dos posts.
Home Viva
Live reload na página todaHome Viva
O que nós queremos?Home Viva
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/
AtendimentoHome Viva
Perguntas?Home Viva