Neste artigo eu registro os detalhes mais importantes da construção do site Tunes Ambiental, um portal de notícias e artigos sobre temas relacionados ao meio ambiente.

Inspiração

O novo site foi desenvolvido a partir da elementos inspirados nos designs do site antigo e do Gates Notes, o site de notícias do Bill Gates.

O site antigo utilizava o tema Natural, um tema pago do repositório do WordPress.com. O layout era do tipo boxed, com uma área grande para o logo na primeira dobra, seguida do menu de navegação. Os outros elementos variavam a cada tipo de página. Destaque para a imagem de fundo, aproveitada no novo site, composta por folhas sobre tábuas de madeira envelhecidas.

A página inicial mostrava um número muito grande de posts, o que a deixava relativamente lenta. Além disso, o rodapé não estava corretamente configurado.

A página principal do blog continha duas colunas, com o sidebar utilizando somente widgets básicos. O Jetpack, que é nativo ao serviço WordPress.com, era utilizado para compartilhamento e para os posts relacionados, apesar dos autores utilizarem bastante listas simples com artigos com a mesma finalidade.

A outra inspiração é o Gates Notes, um site de estilo jornalístico, minimalista nas cores (preto, branco e azul) e não tão minimalista para os padrões web nas fontes, ao utilizar quatro fontes diferentes.

O design simples demonstra, contudo, um domínio pleno do conceito de grid, que foi transportado tanto quanto possível para o novo site da Tunes Ambiental.

Vale a pena citar ainda o menu sticky com um botão para inscrição na lista de e-mails e uma página de pesquisa que é de difícil replicação no WordPress. O sistema que trata das hierarquia das páginas também é mais complexo do que o do WordPress, sendo que algumas “taxonomias” têm páginas próprias, enquanto as publicações de alguns temas são listadas na página de procura através de filtros.

Tema Escolhido

O Tunes Ambiental foi o site com o maior nível de personalização que eu já desenvolvi. Era inevitável utilizar um construtor de páginas. Nesses casos, como na maioria dos meus trabalhos, eu escolho o X Pro da Themeco.

Elementor, Divi e Oxygen parecem ser os construtores com mais espaço no mercado atualmente, mas nos testes que eu fiz até agora o X Pro se mostrou superior no design, usabilidade, e estabilidade. Em contrapartida, ele tem menos funcionalidades básicas do que os concorrentes (principalmente para montar blogs), não tem praticamente nenhum add-ons (enquanto os do Elementor não param de aumentar), nem uma comunidade de usuários relevante para trocar experiências.

De todo modo, considero que o X Pro ainda continua na frente dos outros construtores. A liberação da versão 4.0 irá atenuar ou até mesmo acabar com alguma das suas desvantagens ao trazer, finalmente, um construtor de layouts e várias recursos para o Woocommerce.

Style Guide

Eu sempre começo os trabalhos pelo desenvolvimento de um Style Guide, uma página ou post contendo os principais elementos que compõe o site: títulos, parágrafos, listas, imagens, botões, etc. O desenvolvedor Bill Erickson chama essa abordagem de design atômico:

We start with the atoms of our style guide – headings, paragraph, link, and button. These are then built into molecules, like a Post Summary (post title, category, excerpt). These are then built into organisms, like a Post Listing (section header, 3 column grid of posts).

Paleta de Cores

O Coolors é minha opção número um para construção de paletas de cores. E para utilizá-las nos sites, eu sigo as instruções contidas em dois vídeos do Greg Gunn no canal Futur Academy:

A logo (ou isotipo, para os chatos) e a paleta resultante:

Fontes Utilizadas

Optamos por utilizar três da quatro fontes do Gates Notes:

• Títulos: Source Serif Pro;
• Subtítulos e seções: Roboto Condensed;
• Resumos: Helvetica Neue Roboto Condensed;
• Textos: Lusitana.

Página Inicial

Tentei aproveitar o design da página inicial do Gates Notes tanto quanto possível. Lá eles usam um grid com quatro posts no desktop que diminui para dois no tablet e depois para um no celular. Já no Tunes Ambiental, em razão do design boxed, eu optei por utilizar apenas 3 posts no layout para desktop. E onde o Gates Notes mostra vídeos, mudamos para publicações do Instagram com o plugin Social Feed Gallery.

Foi bem desafiante montar essa página porque o X Pro não conta com nenhum elemento de exposição de posts. Por isso, tive que instalar e configurar o plugin Display Posts, que é um “canivete-suíço”, mas totalmente cru no design.

Para que a publicação mais recente fosse exibida com os campos na ordem Categorias, Título, Resumo, Autor, Data, tive que criar um filtro de saída personalizado:

/* Mudar a ordem de saída do shortcode do plugin Display Posts */
function be_dps_output_customization( $output, $original_atts, $image, $title, $date, $excerpt, $inner_wrapper, $content, $class, $author, $category_display_text ) {
if ( $original_atts['include_author'] ) {
$author = 'Por ' . get_the_author() . ' | ';
}
$output = '<' . $inner_wrapper . ' class="' . implode( ' ', $class ) . '">
' . $image . '
' . $category_display_text . $title . $excerpt . $author . $date . $content . '
';
return $output;
}
add_filter( 'display_posts_shortcode_output', 'be_dps_output_customization', 10, 11 );  

No menu, o foco foi a lista de e-mails (integração com o Mailchimp). Por isso sobraram apenas dois botões: um para cadastro na lista e outro, tipo hambúrguer, para abrir as outras opções de navegação. Como não achei nenhum plugin que reproduzisse o efeito da página de procura do Gates Notes, acabei inserindo a seção de pesquisa no próprio menu com o plugin Search & Filter.

Páginas de Artigos

As páginas de artigos também seguiram o estilo do Gates Notes. Foram utilizados os seguintes plugins:

• Reading Time WP para previsão do tempo de leitura dos artigos;
• Social Snap Lite para os botões de compartilhamento em redes sociais;
• Yet Another Related Posts Plugin (YARPP) para os posts relacionados ao final de cada artigo.

O layout dos posts relacionados é o seguinte:

Para reproduzi-lo, é preciso criar um arquivo PHP com o código a seguir e inseri-lo na pasta onde estiver os outros modelos do YARPP na sua instalação do WordPress:

<?php 
/*
YARPP Template: Tunes Ambiental
Author: Frederico B. Teixeira
Description: Thumbnail, title and excerpt
*/
?><h3 class="related-posts-title">Leia também</h3>
<div class="related-posts-container">
<?php if (have_posts()):?>
	<?php while (have_posts()) : the_post(); ?>
    	<?php if (has_post_thumbnail()):?>
        	<div class="related-posts-child">
            	<a href="<?php the_permalink() ?>" rel="bookmark">
                	<div class="related-posts-thumb">
                	    <?php x_featured_image(); ?>   
                	</div>
                	<div class="related-posts-texts">
                	    <div class="related-posts-thumb-title"><?php the_title(); ?></div>
                	    <div class="related-posts-excerpt"><?php the_excerpt(); ?></div>
                	</div>
            	</a>
            </div>	
    	<?php endif; ?>
	<?php endwhile; ?>
</div>
<?php else: ?>
<p>Nenhum artigo relacionado.</p>
<?php endif; ?>

Já para a estilização do CSS, eu escrevi este código:

.related-posts-title {
  display: inline-block;
  border-bottom: 3px solid black;
    white-space: nowrap !important;
  font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700 !important;
    text-transform: uppercase !important;
  padding: 0 !important;
  margin-bottom: 1rem !important;
  font-size: 1rem !important;
}

.related-posts-container {
  overflow-y: hidden;
  overflow-x: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.related-posts-child {
  width: 32%;
}

.related-posts-child:hover .related-posts-thumb-title {
	text-decoration: underline !important;
}

.related-posts-thumb .entry-thumb img {
  height: 150px;
  object-fit: cover;
}

.related-posts-thumb-title {
  font-family: 'Source Serif Pro Extra'; serif;
  font-weight: 700;
  line-height: 1.1rem;
  margin-top: 10px;
  margin-bottom: 7px;
}

.related-posts-excerpt p {
  margin-bottom: 2px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 0.8rem;
  line-height:1rem;
  font-weight: 300;
  overflow-wrap: break-word;
}

.related-posts-excerpt p, .related-posts-excerpt p a {
  color: rgb(12, 12, 12) !important;
  font-weight: 300;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

.related-posts-excerpt p a:hover {
	text-decoration: none !important;
}

a.more-link {
    display: none !important;
}

@media (max-width: 767px) {
  .related-posts-child {
    width: 100%;
    margin-bottom: 1rem;
  }

  .related-posts-container {
		flex-flow: column;
  }
  
  .related-posts-thumb .entry-thumb img {
    height: auto;
    max-height: 250px;
	}
}

SEO

Como faremos ainda um trabalho de peso em SEO para site, eu instalei o Rank Math, que é um alternativa mais recente ao plugin Yoast SEO. O Rank Math está com os seguintes módulos ativados:

• Image SEO;
• Link counter;
• Local SEO & Knowledge Graph;
• Schema (Structured Data);
• Role Manager;
• SEO Analysis;
• Sitemap;

O trabalho de redirecionamento está sendo feito pelo plugin Redirection. Esse tema merece uma seção à parte.

Redirecionamento das páginas

No site antigo, os permalinks do WordPress estavam configurados como: tunesambiental.com/AAAA/MM/DD/titulo-do-artigo.

Em razão da melhoria para SEO, eu mudei os permalinks para: tunesambiental.com/titulo-do-artigo.

Para evitar a criação de uma regra de direcionamento para cada artigo, basta criar uma expressão regular (regular expression ou regex) no plugin Redirection. Com a opção de regex ativada:

• URL de origem: ^/\d{4}/\d{2}/\d{2}/(.*)
• URL de destino: /$1

Mais instruções sobre como utilizar regex no plugin Redirection encontram-se na página de suporte do plugin.

Lista de Plugins Utilizados

Além dos plugins já citados, eu instalei ainda:

• Segurança:
  • Antispam Bee: evitar spams nos comentários;
  • Disable XML-RPC Pingback: evitar ataque por pingbacks;
  • UpdraftPlus – Backup/Restore: backup do site;
  • Wordfence Security: firewall e proteção contra ataques de força bruta;
  • WPS Hide Login: para mudar a página de acesso ao dashboard do WordPress.
• Otimização:
  • Autoptimize: para minificar código fonte;
  • Cloudflare Page Cache: para ativar o cache do HTML no Cloudflare Workers;
  • Edge Cache HTML via Cloudflare Workers: altíssimo ganho de desempenho em servidores compartilhados utilizando Cloudflare Workers;
  • Flying Analytics by WP Speed Matters: para inserir o script do Google Analytics;
  • ShortPixel Image Optimizer: otimização das imagens.
• Outros:
  • Custom 404: plugin nativo do X Pro para criação de páginas 404 personalizadas;
  • Fluent Forms: para o formulário da página de contato;
  • Loco Translate: tradução de algumas palavras em inglês do X Pro;
  • LuckyWP Table of Contents: geração com shortcode de índices para os artigos;
  • White Label: plugin nativo do X Pro para criar telas de login personalizadas;
  • WP Mail SMTP: para disparo de e-mails do site via e-mail do Google em vez do sistema nativo do WordPress, que algumas vezes é tratado como spam pelos serviços de e-mail.