Query_post: Les consultes

Una altre manera que tenim a WordPress per fer consultes és amb les query_post. Aquestes consultes es poden utilitzar per mostrar només els últims post a la pàgina principal com podrien ser “útlimes notícies” o “Projectes recents” o per mostra totes les entrades en un moment donat.

query_posts() és una forma de modificar la consulta principal que WordPress que es fa servir per mostrar missatges. Això es fa posant la consulta principal a un costat, i es substitueix per una nova consulta. Per netejar després d’una crida a query_posts, es far servirs ña funció wp_reset_query (), i la consulta principal original serà restaurada.

Veiem quina es l’estructura de la consulta:


<?php
// La consulta
query_posts( $args );

// El bucle
while ( have_posts() ) : the_post();
echo '<li>';  the_title();    echo '</li>';
endwhile;

// Reset
wp_reset_query();
?>

Paràmetres

Aquesta consulta té un sèrie de paràmetres que podem separar amb varis tipos:

Paràmetes de categoria, etiquetes i autor

  • cat
  • category_name
  • tag
  • author
  • author_name
query_posts('cat=3'); //Només es mostran els post de la categoria "3".
query_posts('cat=-3'); //Tots els pots menys els de la categoria "3".
query_posts('category_name=Noticies'); //Post de la categoria "Noticies".
query_posts('cat=1,4,5'); //Es mostren els post de varies categories.
query_posts('tag=arbres'); // Tots els post de l'etiqueta "arbres".
query_posts('tag=bread,baking'); //Tots els pots d'una o l'altre categoria.
query_posts('tag=bread+baking+recipe'); //Els posts que estiguin únicament a les 3 categories.
query_posts('author_name=Joan'); //Tots els post que tinguin autor "Joan".
query_posts('author=2'); //Tots els post amb autor de id "2".

Paràmetes de post i pàgines

  • p
  • name
  • page_id
  • pagename
  • showposts

query_posts('p=1'); //Unicament el post "1"
query_posts('name=segonpost'); //Unicament eL post amb nom "segonpost"
query_posts('page_id=7'); //Pàgines amb id "7"
query_posts('pagename=nosaltres'); //Pàgina amb el nom "nosaltres"
query_posts('posts_per_page=5'); //Es mostraran 5 post de la consulta
query_posts('order=ASC'); //Ordre amb el que es mostres els resultats "ASC" O "DESC"

Paràmetes de temps

  • hour
  • minute
  • second
  • day
  • monthnum
  • year

query_posts('hour=01'); //Tots els post de la hora "01:00"
query_posts('minute=30'); //Tots els post del minut "*:30"
query_posts('second=07'); //Tots els post del segon "*:*07"
query_posts('day=1'); //Posts del dia "1"
query_posts('monthnum=2'); //Post del més "2"
query_posts('year=2005'); //Post de l'any "2005"

Combinació de paràmetres

Amb el signe “&” podem sumar els paràmetres mencionats anteriorment.

query_posts('category_name=Projectes recents&posts_per_page=3' );

Exemples

Veurem uns exemples. Substituirem del nostre tema l’apartat recen work per una query_post. Crearem una categoria que es digui “Projectes recents” i crearem tres entrades amb un títol i una mica de text en aquesta categoria. Obrirem l’arxiu index.php i buscarem aquest codi:

        <div class="work">
                <img src="http://lorempixum.com/200/200/nature/1/" />
                <h3>Porjecte 1</h3>
                <p>"Sed et facilisis adipiscing et ultricies. Enim tincidunt elementum? Eu urna nisi. Turpis placerat. ..."</p>
        </div><!-- end of item" -->

        <div class="work">
            <img src="http://lorempixum.com/200/200/nature/2/" />
             <h3>Porjecte 2</h3>
             <p>"Sed et facilisis adipiscing et ultricies. Enim tincidunt elementum? Eu urna nisi. Turpis placerat. ..."</p>
		</div><!-- end of item" -->

        <div class="work">
            <img src="http://lorempixum.com/200/200/nature/3/" />
            <h3>Porjecte 3</h3>
            <p>"Sed et facilisis adipiscing et ultricies. Enim tincidunt elementum? Eu urna nisi. Turpis placerat. ..."</p>
    	</div><!-- end of item" -->

I el sustituirem per :


<?php query_posts('category_name=Projectes recents&posts_per_page=3' );
while ( have_posts() ) : the_post(); ?>

<div class="work">
	<img src="http://lorempixum.com/200/200/nature/1/" />
	<h2><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></h2>
	<?php the_excerpt(); ?>
</div>

<?php endwhile; wp_reset_query(); ?>

En aquesta part de codi el que li estem indican a wordpress és que busqui 3 post (posts_per_page=3) de la categoria Projectes recents (category_name=Projectes recents) i que els mostri com li diem nosaltres.

Imatges Descatades

Es pot apreciar al codi que no em agafat cap imatge del post concret de wordpress sino de lorempixum. Per poder fer això, primer hem de definir com volem que WordPress tracti les imatges destacades. Per a les nostres imatges utilitzarem la funció the_post_thumbnail que ens ofereix la possibilitat de gestionar miniatures de mida personalitzada sense necessitat de plugins. Per activar la funció ho haurem d’indicar al nostre arxiu functions.php que encara no tenim creat. Per tant, crearem un arxiu anomenat functions.php i posarem el següent codi a dins:


<?php
add_theme_support( 'post-thumbnails' );
add_image_size( 'homepage-thumb', 200, 200, true );
?>

Amb add_image_size indiquem a la plataforma que necessitem una mida personalitzada que anomenarem homepage-thumb i que volem que mesuri 200px d’amplada * 200px d’alçada. A més la imatge serà retallada i no redimensionada (el valor true final activa el crop, o retallar), d’aquesta manera evitem que algunes imatges es deformin. Si us fixeu en el backoffice no ha aparagut la opció d’afegir una imatge destacada fins que em activat add_theme_support( ‘post-thumbnails’ ); al arxiu fuctions.

Fet això ja podem afegir la nostre imatge a la query_post. Sustituirem :

<img src="http://lorempixum.com/200/200/nature/1/" />

per :

<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'homepage-thumb' ); } ?>

Ara afegirem una imatge destacada a cada post i mirem el resultat. Com es pot veure tenim el mateix resultat que teniem avanç però aquest cop mostrant al home la informació de 3 post de la categoria Projectes recents.

Ara farem alguna cosa similar amb l’apartat de Sobre Nosaltres. Per començar crearem un pàgina en WordPress amb títol Sobre Nosaltres i amb una mica de text.

Fet això buscarem a l’arxiu index.php en codi coresponent a aquest apartat:


<div id="about">
        	<h3>Sobre nosaltre</h3>
            <p>Scelerisque non pellentesque mauris, a in facilisis sagittis mus? Lorem. Nec ac sit natoque. Proin a nascetur scelerisque in scelerisque ac sociis facilisis augue in scelerisque parturient integer lorem habitasse. Elementum dignissim nec tincidunt tincidunt elit, eros in ac ac. Sed dapibus turpis vel diam. In risus velit? Purus et.</p>

<p>Ut rhoncus nunc! Augue adipiscing. Dapibus porta integer sagittis! Lacus quis purus. Sed, diam rhoncus integer mattis, augue! Et? Natoque sit! Pellentesque sed pulvinar dignissim scelerisque elementum et turpis aenean? Hac porta tempor, nisi sit phasellus integer. Et in. Nec duis eros vel tincidunt in, risus mattis. Enim in.</p>
			<a href="#" class="readmore"><span>Mas info</span> </a>

</div><!-- end of about -->

I el substituirem per:

<?php query_posts('page_id=14');
	while ( have_posts() ) : the_post(); ?>

	<div id="about">
		<h2><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></h2>
		<?php the_content(); ?>
		<a href="<?php echo get_permalink(); ?>" class="readmore"><span>Mas info</span> </a>
	</div><!-- end of about -->

<?php endwhile; wp_reset_query(); ?>

Aquesta vegada a query_post hem indicat que agafi la informació d’una pàgina concreta. En el meu cas la pàgina amb id=14, aquest id pot variar per cada cas. En número id de la pàgina el podem trobar a la url (http://localhost/wpcurs/wp-admin/post.php?post=14&action=edit&message=1).

Al no posar imatge no fa falta que afegim cap link. Aquest cop em utilitzat the_content(); per que volem que agafi el text sencer. Al botó em posat el link a la nostra pàgina amb la funció get_permalink();.

Ara farem el mateix amb l’apartat Recent Blog Post. Com que en aquest apartat volem mostrar els darrers post del blog acompanyats per una imatge, el que primer haurem de fer és donar d’alta la nova mida d’imatges personalitzada. Obrim l’arxiu functios.php i afegim:

add_image_size( 'recent-post-thumb', 60, 60, true );

Just a sota de la darrera línia abans de tancar el php. Seguidament, busquem el div id=”recent-posts” i el substituim pel següent codi:


<div id="recent-posts">
	<h3>Recent Blog Posts</h3>
	<?php query_posts('category_name=Blog&posts_per_page=3' );
	while ( have_posts() ) : the_post(); ?>

	<div class="single-recent-post">
	   <div class="thumb">
		   <?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'recent-post-thumb' ); } ?>
	   </div>
	   <a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a> Per <?php the_author(); ?>
	   <?php the_excerpt(); ?>
	</div>
	<?php endwhile; wp_reset_query(); ?>
	<a href="#" class="readmore"><span>Mes info</span></a>

</div><!-- end of recent-posts -->

Per que es mostri la informació crearem una categoria que es digui “Blog” i crearem tres entrades amb un títol, una mica de text i una imatge destacada en aquesta categoria.

Exercicis

  • Canviar El títol i el text de Recent Work per una Query_post que vingui d’una pàgina i fer que el títol sigui un enllaç
  • Afegir al home abans del footer un apartat que es digui “Productes Destacats” a on fen servir Query_post apareixin 2 post amb la seva imatge descataca 455x250 i el resum a sota. Cada post estarà a la catgoria “pdestacats”
    .pdestacats {
    float: left;
    width: 455px;
    margin: 20px 12px;
    

Per veure més exemples de les Query_post consultar aquesta pàgina.

A la propera classe veurem com gestionar els sidebars pels widgets.

Podeu descarregar els arxius de la classe aquí:

[download id=”620″]