Cases, Portfolio

Apresentando o tema Evolution

Mockup do tema Evolution
Tema Evolution para WordPress

Está no ar o tema “Evolution”, o novo layout do site. Apesar da estrutura ser bem parecida com a versão lançada há dois anos, ele possui diversas melhorias e mudanças que tornam este tema do WordPress bem melhor do que os temas anteriores.

Esta é a primeira mudança no site depois do início dos estudos na área de desenvolvimento web. Foi uma boa oportunidade de colocar em prática os conhecimentos e também aprender novas funcionalidades de personalização do CMS.

As páginas agora seguem a formatação HTML5, com tags semânticas e totalmente responsivo. O menu para dispositivos móveis foi redesenhado e segue a linha visual do layout, com CSS e JavaScript bem mais leves que a versão anterior.

Embora o esqueleto seja semelhante, as mudanças visuais foram inspiradas em sites de notícias e em páginas de empresas de tecnologia.

O layout utiliza as fontes Ubuntu, para os títulos e destaques, e Roboto para os textos. Além disso, usa os ícones do Material Design, do Google. As únicas imagens fixas do layout são o logotipo e os ícones de mídias sociais, todos em formato de vetor SVG. As imagens dos posts estão agora em um subdomínio para otimização de requisições.

Outra das novidades é poder assistir diretamente às minhas livestreams no Twitch. Um player de vídeo ficará visível automaticamente no topo da página inicial do blog somente enquanto eu estiver transmitindo ao vivo, sem qualquer intervenção na programação do tema. O código é uma adaptação do disponibilizado no GitHub de fngryboi.

A programação do tema foi totalmente refeita usando o como referência inicial o projeto Underscores, buscando se adaptar às mudanças da plataforma, como o editor Gutemberg. É a primeira vez que um tema que crio também tem o mesmo visual customizado também no editor, e com arquivos de localização para traduções futuras.

Tentei realizar as adaptações necessárias sem o uso de plugins, para afetar menos o carregamento da página. Boa parte das adaptações foram feitas via functions.php, e no caso do recurso infinite scroll, diretamente no JavaScript.

Apesar do tema estar funcionando bem para o meu site, planejo realizar algumas alterações antes de disponibilizá-lo no Diretório de Temas do WordPress.

Screenshot da tela de edição de post do tema Evolution
Editor de post mostra o conteúdo exatamente como será exibido na página.

Features do tema Evolution

Tags: , , , , , , , ,

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.