Novo layout para site já utilizável

Akira, cadê a joça desse site que vc trabalha tanto e ninguém sabe de nada?
Pois bem! Hoje é o dia. O template de wordpress está pronto. Agora é colocar no ar e…

Uau, então já ta tudo resolvido? Bora fazer festa genteeee–
Opa calma aí, tem coisa para resolver ainda. O layout, tema, o que quer que você chame isso, é só o esqueleto do site. Tá ok, não é SÓ isso. Tem um monte de coisa de back-end nele. Foi difícil, tá?

Mas não é disso que eu quero falar aqui. O importante é que para o layout funcionar, o site precisa se reorganizar. Ou melhor, a gente tem que reorganizar ele.

Aff, vc ta é de zuera cmg. Vc quer é folgar e dar trabalho pros outros
Sim. Err, quer dizer não. Provavelmente vai sobrar pra mim e pro Kazuo fazer isso. Mas realmente, eu queria trabalhar em outros projetos também além do site. E alimentá-lo é o tipo de trabalho que qualquer estagiário faz. O layout é 90% configurável. Tem umas coisas hard-coded (que em um layout não deveria ter, mas já ta lá a issue; por enquanto da pra usar assim).

…ta, ok, e como faz isso de reorganizar e alimentar?
Boa pergunta!

Vamos começar explicando como organizei o site…

[ SEÇÕES ]
O layout divide o website em seções horizontais. Existem três tipos de seções: COVER, QUERY e PAGE. Quando você entra na dashboard do WP aparece no menu da esquerda a opção de editá-las.

A seção do tipo COVER apenas mostra a Header Image (configurada no customize do wordpress) e uns créditos do tema.

A seção do tipo PAGE mostra uma página. É legal colocar umas duas páginas de destaque. Discuti isso com alguns membros em uma-reunião-não-me-lembro-quando e no mockup tem duas seções desse tipo chamadas SOBRE e PARTICIPE. Enfim.

A seção de QUERY mostra posts de uma categoria a escolher. Isso é importante, pois temos que reoganizar as categorias para que todos os posts sejam acessíveis de nossas seções do tipo QUERY sem criar várias seções, uma para cada categoria. O legal é que cada post pode estar em mais de uma categoria, e isso ajuda bastante na pesquisa (ah sim, seções do tipo QUERY tem uma barra de pesquisa). Tags também são importantes para a relevância dos posts. Na real, tenho (temos) que trabalhar no algoritmo de busca, porque o do WP é zuado e meu código está um pouco personalizado demais então eu meio que tive que implementar metade dele no braço, sem plugins nem nada. (Aliás isso é uma coisa importante do meu desenvolvimento: fui ZERO dependente em plugins, o template funciona 100% sozinho).

[ REORGANIZAÇÃO ]
A organização atual, contudo, divide nossos nossos projetos em páginas. Para o layout dar certo, temos que tranformá-los em posts. O que acho bom, porque pages não tem categorias ou tags por padrão. Dá pra forçar essas taxonomias nas pages, mas isso buga o WP de maneiras inesperadas e imprevisíveis. E, enfim, é importante ter essas taxonomias nos nossos projetos para questões de busca. Também estamos limitados no número de pages como um todo. Mas para quê páginas estáticas, né? Menos é mais.

Além disso tem o problema das categorias. As seções de QUERY pegam uma categoria cada e mostram todos os posts nela. Como disse, não vai ser legal colocar trocentas seções de QUERY no site, então vamos ter que colocar TODOS os posts em…duas categorias. Não, isso não significa tirar as categorias que já estão lá, mas significa que talvez teremos que criar uma nova categoria e colocar 70% dos posts nela.

[ ALIMENTAÇÃO ]
Outra coisa importante que implementei é o post-meta. Todo post tem espaço para uns campos meta, ou custom fields. Enfim. É um lugar legal para por coisas do tipo especificações de um game, ou detalhes de um evento. É possível habilitar sua edição em um post mexendo na aba de “Screen Options” no topo da página de editar posts.

Os campos são meio que a critério de quem tá alimentando, mas é legal usar campos iguais para post análogos (i.e. se fulano usa um campo “Licença” para posts sobre nossos projetos, não é legal vir outro ciclano e criar um campo “License” para a mesma coisa). Consistence is the key. O legal é que o WP salva os campos já usados, então é difícil de errar.
Mais uma coisa legal é o campo “meta_title”. Esse tem que ser igualzinho. Se você cria um campo desse e preenche, quando o post aparece ele mostra esse “título” antes de mostrar os custom fields. Aí você cria tipo um bloquinho de informação com um título específico para aquele post. (i.e. num post de projeto, você pode colocar no meta_title o título de “Especificações”, ou num post de evento você pode colocar um título como “Hora e Local” )

E o mais importante de TUDO na alimentação: IMAGENS. Eu quero imagens em todos os posts, se possível. E não, não adianta colocar uma tag no meio, começo ou fim do texto. O WP tem um lugar para você registrar uma imagem de destaque por post, logo abaixo do menu de tags. O problema é que só dá para usar uma imagem de destaque. Outras imagens aí tudo bem usar o conteúdo, mas tentem não fazer um arquivo Word no post ok? Nada de Comic Sans centralizado justificado se apertando a uma imagem 150x150 pixelizada e alinhada ao tamanho da linha de texto. Me chama para deixar mais bling se precisar.

[ end ]

E olha só, já está disponível um preview atualizado com o repositório no github.

Aceito sugestões sobre o que fazer de Konami Code (sim tem um já programado, pode ir lá testar mas ele só dá um alert).

Vi agora o tema novo no site, ficou bem daora.

Uma coisa estranha que achei: em paginas com texto (tipo a SOBRE), colocando mouse em cima do texto aparece cursor de texto, mas somehow não dá pra selecionar texto com click&drag…

Ah sim, eu coloquei uns no select para o swipe ficar mais bonito, ja ponho de volta

EDIT: acabei de ver lá, pra mim ta selecionando de boa. Vc consegue explicar o problema com mais detalhes?

Eu tambén não consigo selecionar. Eu entro no site, vou duas telas para direita (na parte do “Sobre”), e tento clicar duas vezes em uma palavra do texto abaixo da figura. Isso deveria selecionar a palavra, mas nada acontece.

Corrigido, tutto bene adesso