Blog

Conhecendo o mais recente tema padrão do WordPress, o TwentyFifteen

Muitas pessoas acompanham o WordPress assiduamente esperando as sempre elaboradas melhorias e evoluções. Eu sou uma dessas pessoas. As mudanças são sempre focadas em um design que proporcione uma melhor experiência de usuário (sem deixar de lado a segurança de suas atualizações).

Muitos conhecem a rotina do WordPress lançar um tema a cada ano. Isso se iniciou ao observarem que depois do lançamento, em 2005 do tema padrão Kubrick, ele se manteve sem como tema padrão por seguintes 5 anos, e em 2010 o WordPress adotou a ideia dos temas anuais, e que o nome deles já expressassem sua validade, sempre juntando Twenty ____. E nesses temas padrões, que já é marca registrada, eles sempre oferecem as mais modernas e bem desenvolvidas soluções e criações, tanto para os temas como para apresentar isso no WordPress.

Falando de design, podemos ilustrar simplesmente com screenshot do novo tema TwentyFifteen.

Screenshot Twentyfifteen

Simplicidade e foco no conteúdo (o que importa) é o que podemos observar nesse novo tema lançado junto com a versão 4.1 do WordPress.

Estou inclusive usando o tema em um site pessoal. Ele possui configurações/personalizações básicas, mas que tem um potencial e alcance incríveis, alterando backgrounds e cores de vários elementos. Sem falar na versão responsiva, que é perfeitamente adaptável às telas menores, e não poderia ser diferente, afinal o projeto foi tocado com o conceito de Mobile-First, onde o projeto é pensado primeiro para dispositivos mobiles.

Essa é a descrição que vem junto com o tema:

“Nosso tema padrão 2015 é simples, focado em blogs e desenhado para maior clareza. A tipografia simples e direta do Twenty Fifteen é legível em uma ampla variedade de tamanhos de telas e adequada a vários idiomas. Desenvolvemos o design utilizando uma abordagem mobile-first, ou seja, seu conteúdo é o centro das atenções, não importando se seus visitantes acessam via smartphone, tablet, laptop ou um computador desktop. Por Equipe do WordPress”

Instalando e conhecendo suas funcionalidades.

Como disse estou usando esse tema em um de meus sites pessoais, então todas as impressões que coloco aqui são frutos de um uso contínuo no dia a dia desse tema.

Post Formats (Formatos de Post)

Post Formats do TwentyFifteen

Em posts, temos as opções de formatos de posts que estão disponíveis no WordPress desde a versão 3.1. vamos ver abaixo como são alguns deles:

Link

Post Format Link

Simples e direto, esse tipo de post tem como objetivo exibir um post que serve para direcionar para uma URL específica que deve ser inserida no corpo do post.

Imagem

Post Format Imagem

Com esse formato de post, o tema exibe o título, a imagem anexada ao post e os metadados como categoria, autor, data de publicação e tags. Ideal para sites que têm seu foco em imagens. Inclusive, com o aplicativo do WordPress para celular, publicar um post com esse formato exige pouco mais que dois cliques, algo extremamente prático.

Galeria

Post Format de Galeria

A apresentação desse post é bem mais elaborada, útil para criar no seu site um mosaico (grid) com suas fotos de uma forma elegante e profissional. Recomendo.

Paginação interna entre posts

Uma funcionalidade que já existe no WordPress desde as primeiras versões, é a <?php wp_link_pages( $args ); ?>, com ela podemos fazer a navegação interna em posts. E confesso, que vim conhecer essa ferramenta ao ver esse demo do tema Twenty Fifteen. Resolvi pesquisar o que era e então tive contato com essa incrível ferramenta.

Com ela aplicada e configurada devidamente em seu tema, a pessoa que estiver criando o post pode simplesmente separar blocos de conteúdos com essa Quicktag <!–nextpage–> e a cada inserção dessa tag ele vai gerar a espécie de uma página e então apresentará os números da paginação. Caso queira saber mais sobre essa e outras Quicktags, clique aqui e confira a documentação oficial.

Header

Como observamos, o tema aparentemente nem apresenta um cabeçalho, mas sim, ele existe até porque muitas tags HTMLs são dependentes de um de uma organização específica do HTML. E nesse tema, o que é considerado cabeçalho é a barra lateral, que por padrão vem no tema do lado esquerdo. Na administração temos a possibilidade de adicionar uma imagem nessa barra, a medida dela é 954 por 1300px, mas quando você adiciona uma imagem com dimensões diferentes, ele oferece uma ferramenta para cortar a imagem proporcionalmente, o mais próximo possível ao tamanho esperado de 954 por 1300px.

Print de Recorte da Imagem de Cabeçalho

Navegação

Outro ponto forte nos menus do site é a possibilidade de adicionar uma descrição para cada elemento, assim você torna muito mais intuitiva e explicativa a navegação do seu site.

Para isso, precisa editar suas Opções de Tela e marcar a opção Descrição, veja imagem abaixo:

print-menu

Footer (Rodapé)

O rodapé nesse site existe mais por uma necessidade de estrutura HTML, pois na administração ele não possui nenhum item para ser configurado nessa área, e na visualização do tema ele vem apenas com a frase “Orgulhosamente desenvolvido com WordPress” com um link para o site do WordPress.

Widgets

A área de Widgets desse tema é apresentado na barra lateral também, ele vem com os Widgets padrões do WordPress todos configurados e com o CSS (estilo) pronto para serem usados. E de acordo com suas necessidades você pode criar novos Widgets ou adicionar plugins que o auxiliem com essa demanda.

Esse trabalho de configuração de Widgets ficou super intuitiva com a nova API do Customize. Com ela você pode visualizar em tempo real as alterações que faz. Isso para o administrador e editor de posts foi um avanço muito grande e acredito que empolgue as pessoas ainda mais a trabalharem com Widgets.

Personalização do tema

Personalizando o TwentyFifteen

Fora tudo isso que falamos, da responsividade, facilidade de navegação, utilização dos Widgets, temos também um grande campo a explorar com a personalização do tema.

Podemos inicialmente trabalhar apenas com cores e dar um aspecto totalmente novo ao site, alterando as cores do fundo (background) e a cor do cabeçalho (header), que no nosso caso aqui é a barra lateral. Além de modificar também a cor das fontes.

Ele também vem com algumas cores pré-configradas, ao todo são 6 estilos de cores, o padrão onde o branco predomina; o escuro onde o cinza e o preto predominam e dão um ar de site elegante e moderno; o estilo amarelo exibe o fundo em dois tons de amarelo e as fontes em preto; no estilo roxo, para aqueles mais descolados, a cor roxa é a base da barra lateral com um tom mais avermelhado no fundo e por fim o estilo azul, onde as tonalidades lembram uma piscina. Além disso, a partir dessas cores pré-configuradas, você pode alterá-las a fim de melhorar ou adaptar melhor a sua realidade, com sua criatividade aqui as possibilidades são mais que infinitas.

Além das cores, a personalização nos oferece a possibilidade de adicionar uma imagem de fundo (background), e na barra lateral podemos fazer a mesma coisa, como vimos um pouco acima em Header.

Pronto, pode ser um tema padrão, mas que com poucos minutos e criatividade o seu site não será igual ao de mais ninguém com todas essas possibilidades.

Aventure-se nos Códigos

Com alguns hacks, que já encontramos em muitos sites por aí, é possível alterar alguns itens desse tema, por exemplo, se quisermos mudar a barra lateral da esquerda para o lado direito, podemos apenas com CSS fazer isso adicionando o seguinte trecho de código ao final do seu style.css

@media screen and (min-width: 59.6875em) {
	.site-content {
		float: left;
		margin-left: 0px;
		width: 70.5882%;
	}
	.sidebar {
		float: right;
		right:0;
		margin-right: 0px;
		max-width: 413px;
		width: 29.4118%;
	}
	body:before {
		right: 0;
		left:auto;
	}
	.site-footer {
		margin: 0 0 0 6.1%;
	}
}

 

Conclusão

Sem dúvidas que a equipe de desenvolvedores do WordPress se supera a cada lançamento, release ou correção e com esse tema não poderia ser diferente. Se olharmos todos os temas padrões, podemos observar a evolução, sempre levando em conta os objetivos da equipe de desenvolvedores, que nesse caso apresenta uma evolução no sentido de facilitar a interface ao usuário.

Se observarmos não muito longe, no tema TwentyFourteen, podemos ver que esse conceito cresceu consideravelmente.

TwentyFourteen x TwentyFifteen

Fora que não é tão comum ver o TwentyFourteen instalado por ai, já o Fifteen, tão novo já é observado em alguns sites em uso, em tutoriais ou reviews como esse. Isso pode ser tanto um resultado da evolução do tema em si, como da quantidade de pessoas que tem acompanhado cada vez mais as evoluções do WordPress.

Conclusão, vale a pena usar, testar e explorar os potenciais do tema. Se você for um aventureiro dos códigos, ainda mais: faça um child-theme do Fifteen e evolua suas funcionalidades de acordo com suas necessidades!

Deixe um comentário

Hospede seu projeto em WordPress com alto desempenho