Como añadir post relativos con thumbnail a Wordpress sin plugin

6/12/2010 08:16:00 p.m. | Publicadas por nenesio | Editar entrada

CSS3 Memory - Juego de memoria en CSS3 puro

Si usas WordPress y buscar añadir a post relativos con thumbnail, sin necesidad de usar plugins para evitar el alto consumo que tiene algunos de estos plugin, este hack te sera de gran ayuda.

La gente de Intense Blog ha creado un código con el uso de TimThumb, este código ya viene listo para el uso de HTML5, si aun tu template no soporta HTML5 solo debes cambiar el uso de <aside> a <div>.

El primer paso es descargar TimThumb y subir el archivo timthumb.php a la carpeta del template que estés usando:

Descargar TimThumb

El segundo paso, añadir el siguiente código al archivo functions.php del template que estés utilizando:


function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=['"]([^'"]+)['"].* />/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];

  if(empty($first_img)){ // Defines a default image if in related post doesn't has any image
    $first_img = "/images/default.jpg";
  }
  return $first_img;
}

El tercer paso, añadir el siguiente código al archivo single.php del template que estas usando, debes copiar el código en el sitio que deseas que aparezcan los post relativos:

<br />		<!-- Display related posts without a plugin --><br />			<?php<br />			$tags = wp_get_post_tags($post->ID);<br />			if ($tags) {<br />			  echo '<aside id="related-post"><h3>Related Posts</h3><ul>';<br />			  $first_tag = $tags[0]->term_id;<br />			  $args=array(<br />				'tag__in' => array($first_tag),<br />				'post__not_in' => array($post->ID),<br />				'showposts'=>5,<br />				'caller_get_posts'=>1<br />			   );<br />			  $my_query = new WP_Query($args);<br />			  if( $my_query->have_posts() ) {<br />				while ($my_query->have_posts()) : $my_query->the_post(); ?><br />				  <li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><br />					<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo catch_that_image() ?>&w=100&h=100&zc=1" /><br />					<?php the_title(); ?><br />				  </a></li><br />			<?php endwhile; }<br />				echo '</ul></aside><br class="clear" />';<br />				wp_reset_query();<br />			}?><br />		<!-- End of display related posts without a plugin --><br />

El cuarto y ultimo paso, es añadir el código al archivo CSS de tu template para darle estilo:

<br />#related-post h3 {font-size:1.6em;margin:5px 0}<br />#related-post ul {list-style:none;}<br />#related-post ul li{float:left;margin-right:15px;width:110px}<br />#related-post img {border:1px solid #ddd;background:#F9F9F9;padding:5px}<br />#related-post a:hover {color:#c00}<br />

Etiquetas: Wordpress

Descargar TimThumb

El segundo paso, añadir el siguiente código al archivo functions.php del template que estés utilizando:


function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=['"]([^'"]+)['"].* />/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];

  if(empty($first_img)){ // Defines a default image if in related post doesn't has any image
    $first_img = "/images/default.jpg";
  }
  return $first_img;
}

El tercer paso, añadir el siguiente código al archivo single.php del template que estas usando, debes copiar el código en el sitio que deseas que aparezcan los post relativos:

<br />		<!-- Display related posts without a plugin --><br />			<?php<br />			$tags = wp_get_post_tags($post->ID);<br />			if ($tags) {<br />			  echo '<aside id="related-post"><h3>Related Posts</h3><ul>';<br />			  $first_tag = $tags[0]->term_id;<br />			  $args=array(<br />				'tag__in' => array($first_tag),<br />				'post__not_in' => array($post->ID),<br />				'showposts'=>5,<br />				'caller_get_posts'=>1<br />			   );<br />			  $my_query = new WP_Query($args);<br />			  if( $my_query->have_posts() ) {<br />				while ($my_query->have_posts()) : $my_query->the_post(); ?><br />				  <li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><br />					<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo catch_that_image() ?>&w=100&h=100&zc=1" /><br />					<?php the_title(); ?><br />				  </a></li><br />			<?php endwhile; }<br />				echo '</ul></aside><br class="clear" />';<br />				wp_reset_query();<br />			}?><br />		<!-- End of display related posts without a plugin --><br />

El cuarto y ultimo paso, es añadir el código al archivo CSS de tu template para darle estilo:

<br />#related-post h3 {font-size:1.6em;margin:5px 0}<br />#related-post ul {list-style:none;}<br />#related-post ul li{float:left;margin-right:15px;width:110px}<br />#related-post img {border:1px solid #ddd;background:#F9F9F9;padding:5px}<br />#related-post a:hover {color:#c00}<br />

comments powered by Disqus.

Blogger Recursos

Como añadir post relativos con thumbnail a Wordpress sin plugin

Recientes Post:

Suscripciones

Sígueme en Twitter

Facebook

RSS de Blogger Recursos

Subscribe via E-mail

Blog Archivo

Paginas Amigas