Uma excelente tática de otimização de um site WordPress é a criação de um template personalizado para ele, pois ao desenvolver a solução especificamente para um único projeto é possível levantar suas principais necessidades, pontos fracos e falhas para então serem corrigidos da melhor maneira. Além disso o desenvolvedor terá um melhor controle sobre os recursos que implantou sem a necessidade de ficar estudando o código de terceiros que nem sempre estão otimizados.

Aqui na Escola WordPress, além de muitas dicas e truques que são apresentados a cada artigo, você pode conferir um guia completo que irá te auxiliar na criação de um template próprio para o WordPress visitando os links abaixo:

Como material de apoio você ainda poderá fazer uso do Ebook Aprenda a desenvolver Temas WordPress – disponível para download grátis – que traz em 161 páginas divididas em 9 capítulos os principais tópicos para criação de um template WordPress. O livro traz também um guia com as principais funções a serem aplicadas durante o desenvolvimento do template e em anexo 1 Tema WordPress completo que será utilizado na didática do livro.

PERSONALIZAÇÃO DE TEMPLATES

Dando prosseguimento a série ‘Como Criar Um Template WordPress‘ são apresentadas algumas técnicas para personalizar o template de acordo com seu conteúdo e eventuais circunstâncias que podem resultar em uma boa apresentação do mesmo. Para essas customizações e outras mais que você mesmo poderá criar é muito importante dominar o uso das folhas de estilo (CSS) ou pelo menos entender suas aplicações básicas.

DESTACAR UM POST FIXO

Ao realizar a publicação de um artigo podemos definí-lo como fixo através da caixa ‘Publicar’ na tela de edição de posts. Fazendo isso o WordPress posicionará esse artigo antes dos demais posts na listagem dos resultados, sendo que ao possuir mais de um post fixo a ordem respeitada entre eles é a cronológica (mais recentes primeiros).


Além dessa personalização básica inerente ao sistema, você poderá dar um maior destaque para esses posts que estão destacados. Ao exibir o conteúdo dos posts, informe na camada que irá agrupar o conteúdo:

<?php while ( have_posts() ) : the_post(); ?>
<div <?php post_class(); ?>>
      <?php // exibição do conteúdo dos posts... ?>
</div>
<?php endwhile; ?>

A função post_class irá informar o valor ‘sticky’ para os posts marcados como fixo, dessa forma fica prático personalizar sua formatação com o uso do CSS. Veja na formatação abaixo como definimos um plano de fundo e bordas específicos para esse caso:

.sticky {
     background: #eee;
     border: 1px solid #aaa;
}

Uma técnica muito usada para os posts fixos é a utilização de uma imagem que sobrepõe o conteúdo com a informação de que o referido post está em destaque, como na figura abaixo encontrada no template Geo Places da Templatic.

Para ter um resultado semelhante a esse inclua na exibição de resultados as seguintes instruções:

<?php while ( have_posts() ) : the_post(); ?>
<div <?php post_class(); ?>>
      <?php
      if ( is_sticky() ) echo '<div class="feature"></div>';
      // exibição do conteúdo dos posts...
      ?>
</div>
<?php endwhile; ?>

Na condição inclusa verificamos se o post que está sendo exibido está marcado ou não como fixo e em caso afirmativo, inserimos uma div que será responsável por exibir o detalhe desejado de acordo com as formatações de estilo:

.feature {
     position: absolute;
     width: 64px;
     height: 64px;
     background: url( 'img/feature.png' ) no-repeat;
}

No exemplo citado exibimos a imagem ‘feature.png’ com dimensões 64x64px – localizada na pasta ‘img’ – como plano de fundo para a camada criada. Altere os valores para altura e largura, assim como a localização da imagem para conseguir o efeito de acordo com a estrutura e arquivos do seu tema.

CAMPOS PERSONALIZADOS

Outra maneira de destacar determinado post é utilizando um campo personalizado para tal. Na edição de posts informe um novo campo de nome ‘destaque’ e valor ‘true’, enquanto que na exibição, faça a verificação desse campo:

<?php while ( have_posts() ) : the_post(); ?>
<div <?php post_class(); ?>>
      <?php
      $feat = get_post_meta( $post->ID, 'destaque', true );
      if ( $feat ) echo '<div class="feature"></div>';
      // exibição do conteúdo dos posts...
      ?>
</div>
<?php endwhile; ?>

Não necessariamente será preciso exibir essa imagem no canto das informações do post, você pode optar por exemplo em exibir uma imagem específica para cada post informando no campo criado com o nome ‘destaque’ o endereço da imagem (http://www.seusite.com/wp-content/uploads/2011/05/destaque.png) no lugar de ‘true’. Para exibir a imagem altere em seu código:

<?php while ( have_posts() ) : the_post(); ?>
<div <?php post_class(); ?>>
      <?php
      $feat = get_post_meta( $post->ID, 'destaque', true );
      if ( $feat ) echo '<img src="' . $feat . '" alt="Post em destaque" />';
      // exibição do conteúdo dos posts...
      ?>
</div>
<?php endwhile; ?>

ESTILIZAÇÃO DO TEMPLATE

Tratando ainda de como personalizar a exibição dos resultados dentro do Loop do WordPress, podemos aplicar uma formatação específica para resultados alternados de modo a facilitar a leitura pelo usuário delimitando bem onde começa e termina cada artigo:

<?php
$count = 0;
while ( have_posts() ) :
    the_post();
    $classe = ( $count%2 == 0 ) ? 'azul' : 'branco';
    $count++; ?>
<div <?php post_class( $classe ); ?>>
      <?php // exibição do conteúdo dos posts... ?>
</div>
<?php endwhile; ?>

Informamos para o sistema que alternadamente a camada receberá as classes ‘azul’ e ‘branco’, cabendo a formatação específica ser aplicada na folha de estilos:

.azul {
     background: #cce;
}

.branco {
     background: #fff;
}

Se for interessante para a proposta de seu trabalho, podemos aumentar o fator de legibilidade dos resultados e também de ordenação exibindo a posição que ele ocupada dentro da listagem (1, 2, 3, etc…):

<?php
global $wp_query;
$page_cur = intval( get_query_var( 'paged' ) );
$page_posts = intval( get_query_var( 'posts_per_page' ) );
$count = ( $page_cur > 0 ) ? ($page_cur*$page_posts-1) : 0;
while ( have_posts() ) :
    the_post();
    $classe = ( $count%2 == 0 ) ? 'azul' : 'branco';
    $count++; ?>
<div <?php post_class( $classe ); ?>>
      <?php
      echo '<strong>' . $count . '</strong>';
      // exibição do conteúdo dos posts...
      ?>
</div>
<?php endwhile; ?>

Abraços