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?

Home Viva

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

E por hoje é só pessoal!Home Viva

Perguntas?Home Viva