29 Jul

Howto: WordPress: Agrupando posts por mês

Veja como fazer para puxar todos os posts de uma determinada categoria, exibindo em listas agrupadas por meses, assim:

Julho 2010

  • Titulo do post
  • Titulo do post

Junho 2010

  • Titulo do post
  • Titulo do post

Vejamos:

< ?php
    $args=array(
     'tag'   		   		=> 'tag1',
     'posts_per_page' 		=> -1,
     'post_status' 		        => 'publish',
     'orderby' 			=> 'date',
     'order' 				=> 'DESC',
     'caller_get_posts'	        =>1
    );

    $my_query = new WP_Query($args);
    if( $my_query->have_posts() ) {
      $ymdate = '';
       while ($my_query->have_posts()) : $my_query->the_post();
         $ympost = mysql2date("M Y", $post->post_date);
         if ( $ympost != $ymdate) {
           $ymdate = $ympost;
           echo '<h2>Artigos do mes: ' . $ymdate . '</h2>';
         }
         ?>
        <p>
			<small>< ?php the_time('F jS, Y') ?></small>
			<a href="<?php the_permalink() ?>" rel="bookmark" title="link para < ?php the_title_attribute(); ?>">< ?php the_title(); ?></a>
		</p>
       < ?php 
		endwhile; 
		} wp_reset_query();  
?>

Dá pra dar uma incrementada, e colocar uma slide-down, como sanfona, onde exibe o título do artigo e ao clicar, é exibido o conteúdo logo abaixo, deslizando, vamos usar um pouco de Jquery.

<script type="text/javascript" src="js/jquery-1.2.2.pack.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		//Definimos que todos as tags dd terão display:none menos o primeiro filho
		$("dd").hide();
		//Ao clicar no link, executamos a funcao
		$('dt a').click(function(){
			//As tags dd's visíveis agora ficam com display:none
			$("dd:visible").slideUp("slow");
			//Apos, a funcao é transferida para seu pai, que procura o proximo irmao no codigo o tonando visível
			$(this).parent().next().slideDown("slow");
			return false;
		});
	});
</script>
<style>
#faq dl {margin:0 auto; width:100%}
#faq dt {background-color:#E8E9ED; font-size:1.1em; border-bottom:2px solid #fff; padding:5px;line-height: 2em;}
#faq dt a {color:#000;font-weight: bold;}

#faq dd, ul {margin:0; padding:0}
#faq ul li {background-color:#fff; font-size:1.1em; list-style:none;line-height: 1.5em;margin-bottom:10px;}
#faq ul li a {color:#069; padding:5px; padding-top: 12px;}
#faq ul li a:hover {color:#fff}
</style>

< ?php
	$args=array(
	  'cat'     		     => '12',
	  'posts_per_page'     => -1,
	  'post_status' 	     => 'publish',
	  'orderby' 		     => 'date',
	  'order' 	             => 'ASC',
	  'caller_get_posts'    =>1
	);
	$my_query = new WP_Query($args);
	if( $my_query->have_posts() ) {
	  $ymdate = '';
	   while ($my_query->have_posts()) : $my_query->the_post();
		 $ympost = mysql2date("F Y", $post->post_date);
		 if ( $ympost != $ymdate) {
		   $ymdate = $ympost;
		   echo '<br /><h1>'.$ymdate.'</h1>';
		   echo '<ul>';
		 }?>
<div id="faq">
  <dl>
    <dt><a href="#">< ?php the_title(); ?></a></dt>
    <dd>
      <ul>
        <li>< ?php the_content(); ?></li>
      </ul>
    </dd>
  </dl>
</div>            
	   < ?php
	 endwhile;
	  echo '</ul>';
	} wp_reset_query(); 
?>

Perfeito!!!

One thought on “Howto: WordPress: Agrupando posts por mês

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>