A algum tempo pensava em fazer alguns posts sobre wordpress, pegando o embalo do curso de wordpress na DRC, treinamentos aqui em São Paulo. Um dos recursos do wordpress que todo mundo fica ansioso em aprender é Post Thumbnail ou na tradução Imagem Destacada, este recurso permite adicionar uma imagem vinculada ao post.
Para habilitar o recurso que apareceu desde as versões 2.9 do wordpress temos que adicionar no nosso arquivo functions.php o seguinte código :
<?php
add_theme_support( 'post-thumbnails' );
?>
Agora vamos acessar o painel do wordpress, crie um novo post e adiconar uma imagem destacada. O painel de imagem destacada na versão 3.0 e 3.1 do worpdress, fica no canto inferior direito.
Faça o upload de uma imagem e selecione a opção usar como imagem destacada.
Lembre-se caso o post já estiver publicado não esqueça de atualiza-lo. Adicionando a imagem destacada não significa, que a imagem já irá aparecer em seu post. Para a imagem aparecer em seu post é preciso chamar a a template tag the_post_thumbnail() em algum lugar do seu loop, no arquivo da página que vc quer que apareça: index.php, single.php, category.php, search.php… O importante é estar dentro do loop.
Agora vamos aplicar um thumbnail ao nosso tema. no arquivo index.php adicionamos o sequinte código :
<!-- get_header pra chamar o header.php -->
<?php
get_header(); ?>
<div id="container">
<div id="content" role="main">
<!-- em nosso loop vamos exibir apenas título e thumbnail -->
<?php while ( have_posts() ) : the_post(); ?>
<div <?php post_class(); ?>>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="entry">
<?php the_post_thumbnail(); ?>
</div>
</div>
<?php endwhile; ?>
</div><!-- #content -->
</div><!-- #container -->
<!-- get_footer pra chamar o footer.php -->
<!-- esse tema não tem sidebar chamo apenas o footer -->
<?php get_footer(); ?>No código acima chamamos um thumbnail ou com tamanho original ou com o tamanho padrão caso tenha sido definido no admin. É um loop simple que puxa o título e o thumbnail, existe a possibilidade de definir o tamanho do thumbnail quando carregado passando os seguintes parâmetros:
the_post_thumbnail(‘thumbnail’); – resolução thumbnail (default 150px x 150px )
the_post_thumbnail(‘medium’); – resolução média (default 300px x 300px max)
the_post_thumbnail(‘large’); – resolução alta (default 640px x 640px max)
the_post_thumbnail( array(100,100) ); – tamanhos personalizados onde passamos um array com os valores de altura e largura.
Como no exemplo abaixo, nesse caso irei utilizar o mesmo código apenas modificando o esquem dentro do loop :
<?php while ( have_posts() ) : the_post(); ?>
<div <?php post_class(); ?>>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="entry">
<?php the_post_thumbnail(array(350,180)); ?>
</div>
</div>
<?php endwhile; ?>Nesse exemplo chamamos “” carregamos um thumbnail com 350px de largura e 180px de altura.
Além dessas opções de tamanho podemos registrar tamanhos personalizados de thumbnail, com a função “add_image_size” esta função é adicionada no arquivo functions.php.
A função add_image_size recebe os seguintes parâmetros :
add_image_size( ‘nome’, largura, altura , crop : true ou false );
Considerando as funções adicionadas anteriormente, agora vamos adicionar um tamanho personalizado “meu-thumb” em nosso arquivo functions.php ele vai ficar da seguinte forma:
<?php
add_theme_support( 'post-thumbnails' );
add_image_size( 'meu-thumb', 320, 280, true );
?>
Resumindo a história adicionamos um novo tamanho com 320px x 280px se a imagem não atender a proporção vai ser cropada(cortada).
Agora vamos chamar um thumb com o tamanho que criamos “meu-thumb”:
<?php
get_header(); ?>
<div id="container">
<div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<div <?php post_class(); ?>>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="entry">
<?php the_post_thumbnail('meu-thumb'); ?>
</div>
</div>
<?php endwhile; ?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_footer(); ?>Vou criar uma categoria agora wordpress e fazer um repositório dos meus estudos. Vou finalizando por aqui até o próximo tutorial
