Publisher is the useful and powerful WordPress Newspaper , Magazine and Blog theme with great attention to details, incredible features...

[diario_shortcode template=”card_img” colunas=”4″ s=”internofolha” numero_de_parceiros=”4″ mono_post=”sim” colunas=”4″ top=”4″]

Estilização de sites css wordpress

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:

1
2
3
4
5
<?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:

1
2
3
4
.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:

1
2
3
4
5
6
7
8
<?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:

1
2
3
4
5
6
.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:

1
2
3
4
5
6
7
8
9
<?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:

1
2
3
4
5
6
7
8
9
<?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:

1
2
3
4
5
6
7
8
9
10
<?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:

1
2
3
4
5
6
7
.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…):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?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