Mostrar posts aleatorios con imágenes

Una excelente forma de promocionar viejos posts dentro de los puntos más visibles de nuestro blog, es haciendo un listado o display mostrándolos aleatoriariamente.

Mostrarlos en un simple listado no bastará, para hacerlo más llamativo podemos optar por incluir en ese listado la imagen que representa dicho post, así que en este tutorial les explicaré paso a paso como hacerlo.

Información: Este tutorial es para mostrar un listado aleatorio con imágenes de una proporción de 60 de ancho x 40 alto para lo cual las miniaturas autogeneradas por Wordpress son de 150 ancho x 100 alto. *Información de fines estéticos.

Antes de empezar debemos de tener lo siguiente:

  1. Una imagen gif / jpg / png de 60×40 que represente que el post no tiene una imagen que lo acompañe.
  2. Dentro del theme tener el archivo functions.php, de no tenerlo crear uno.
  3. Ganas y paciencia para completar el tutorial.

Paso Número 1

Abrimos el archivo functions.php de nuestro theme e ingresamos el código que se muestra dentro de este archivo

Note: There is a file embedded within this post, please visit this post to download the file.

Este código nos permitirá obtener desde nuestro theme la primera imagen en miniatura de cada post que solicitemos.

Paso Número 2

Escribamos el siguiente código en el lugar que deseamos donde aparesca el listado. *** Como una observación este tutorial estará destinado a mostrar el listado en un sidebar.php ó en un single.php por el diseño final del mismo.

<div class="contenedor">
<div class="random">
<ul>
 <?php
 $random_posts = new WP_Query();
 $random_posts->Query ('orderby=rand&showposts=4');
 while ($random_posts->have_posts()): $random_posts->the_post()
 ?>
 <li>
 <?php
 $files = get_children("post_parent=$id&post_type=attachment&post_mime_type=image");
 if($files){
 $keys = array_keys($files);
 $num=$keys[0];
 $thumb=wp_get_attachment_thumb_url($num);
 print "<img src='$thumb' alt='".get_the_title()."' style='padding: 8px 12px 4px 7px; float: left;' width='60' height='40'/>";
 }else{
 print "<img src='http://tudominio.com/tuimagen' style='padding: 8px 12px 4px 7px; float: left;' alt='".get_the_title()."' width='60' height='40'/>";
 }
 ?>
 <a href="<?php the_permalink();?>" rel="bookmark" title="<?php the_title(); ?>">
 <?php the_title(); ?><br>
 <span>escrito por <?php the_author();?></span>
 </a>
 </li>
 <?php endwhile; ?>
</ul>
 </div>
 </div>

Este código seleccionará aleatoriamente 4 posts (ver showposts=4) y los mostrará en una lista con sus respectivas imágenes, nombre del post y nombre del autor.

Paso Número 3

Finalmente agregamos a nuestra hoja de estilos  el siguiente código para dar vida a nuestro nuevo listado.

.contenedor {background-color:#ddd;width:320px; padding:5px;border: 1px solid #333; -webkit-border-radius:5px; -moz-border-radius:5px;}
.random ul, .random  li {margin: 0; padding: 0; border: 0; outline: 0; list-style-type:none;}
.random ul {background-color:#fff;font-family:verdana;font-size:12px;}
.random ul li {text-decoration:none;border-bottom:1px solid #ddd; min-height: 60px;}
.random ul li a {text-decoration:none;padding:7px 13px; display:block; color:#333; font-weight:bold;}
.random ul li a:hover {color:#cc0000;}
.random ul li a span {text-decoration:none;padding-left:6px; font-size:11px; font-weight:normal; line-height: 20px;}
.random ul li a:hover span {color:#666;}

Y listo si hicieron todos estos pasos al pie de la letra podrás obtener un diseño similar al de la siguiente imagen.

Random de ejemplo

Añade un contador de twitter en tu blog

¿Quieres mostrar en tu site las veces que una entrada la ha enlazado alguien en twitter? En Wwwhat´s new? nos dan un listado de aplicaciones web que hacen posible esto.

Imprimir tus campos personalizados fuera de un artículo

Los Campos Personalizados

Vamos a echar hoy un vistazo introductorio a los campos personalizados de WordPress, esto es, aquellas cajas de edición extras que en el Editor de WordPress podemos llenar de información, más allá del artículo que hayamos escrito, y que pueden ser útiles cuando la mayoría de nuestros posts son marcados con fragmentos de información adicionales.

Por ejemplo, si escribimos sobre música, en vez de llenar el cuerpo del post con los detalles del álbum sobre el que hemos escrito, podremos usar los campos personalizados y sistematizar la clasificación extra.

Título del Album :
Año :
Discográfica :
Género :
Puntuación : (5 estrellas, etc).

Cada uno de estos elementos sería un campo personalizado (”nombre”) creado por nosotros y llenado con texto o imágenes (”valor”).

El uso pues de los campos personalizados cobra su interés cuando hay que sistematizar datos añadidos al cuerpo de un post : librerías, reseñas de cine, links recomendados …

Los campos personalizados sin embargo, permite aplicaciones más creativas, en el caso de que, en la ocurrencia, queramos dos, tres o cuatro Extractos y no sólo uno, o querramos rodear el artículo principal con párrafos extra, o si cada uno de nuestros artículos tuviera un botón al que dotar de un link (una url hacia la página de un producto por ejemplo).

Imprimir los campos personalizados

No nos bastará con haberlos creado y rellenado, que tendremos que abrir nuestro single.php (o, en su defecto, index.php, a los que encontraremos en el directorio de nuestro tema), y añadir, dentro del Loop, este código, que nos los traerá de la base de datos :

<?php echo get_post_meta($post->ID, "NOMBREDELCAMPO", true); ?>

En el ejemplo de las reseñas de discos, habría que hacer algo así :

<h2>Título del Album</h2>
<p>
     <?php echo get_post_meta($post->ID, "Album", true); ?>
</p>

Es decir, escribir también en el template el título de la información que vamos a mostrar.

Recordemos que si nos interesa almacenar y recojer imágenes en los campos personalizados tendremos que escribir su ubicación en HTML, o sino simplemente nos saldría impresa su URL !

<img src="http://www.camino.com/ala/imagen.png" alt="">

Y si los requiero fuera del Loop ?

Nos podemos encontrar entonces con que quisiéramos usar los campos personalizados en nuestra barra lateral, o en el header de cada uno de nuestros artículos.

Con este pequeño snippet de código conseguiremos que nuestra base de datos nos proporcione tal o cual campo personalizado en cualquier lugar de nuestro template :

<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'NOMBREDELCAMPO', true);
?>

Aquí, tendréis que sustituir NOMBREDELCAMPO por tal o cual nombre de campo que hayáis creado.

Esperamos vuestros comentarios.

Meneame Technorati del.icio.us Bitacoras.com Digg Wikio Google Bookmarks Live Yahoo! Bookmarks Yahoo! Buzz Twitter Facebook Print email

Artículos Relacionados por Categorías

Como lo prometido es deuda, he aquí un snippet, encontrado en los foros de WordPress, para obtener posts relacionados por categoría al final de nuestros artículos.

Hay ciertamente excelentes plugins a nuestra disposición para conseguirlo, pero para los ‘bricoleros’, siempre es interesante manejar nuestros templates directamente con algo de código.

<?php

//Gets category and author info
global $wp_query;
$cats = get_the_category();
$tempQuery = $wp_query;
$currentId = $post->ID;

// related category posts
$catlist = "";
forEach( $cats as $c ) {
if( $catlist != "" ) { $catlist .= ","; }
$catlist .= $c->cat_ID;
}
$newQuery = "posts_per_page=5&cat=" . $catlist;
query_posts( $newQuery );
$categoryPosts = "";
$count = 0;
if (have_posts()) {
while (have_posts()) {
the_post();
if( $count<4 && $currentId!=$post->ID) {
$count++;
$categoryPosts .= '<li><a href="' . get_permalink() . '">' . the_title( "", "", false ) . '</a></li>';
}
}
}
$wp_query = $tempQuery;
?>
<?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<h2>Ultimos art&iacute;culos de la categor&iacute;a: <?php the_category(', ');?></h2>
<ul class="related-by-category"><li>
<?php echo $categoryPosts; ?>
</li></ul>

<?php endwhile;?>

Vamos a pastear esto tras el Loop principal, que convoca a nuestros artículos.

Dispondremos asímismo de una clase (.related-by-category) para estilar los items vía CSS.

Meneame Technorati del.icio.us Bitacoras.com Digg Wikio Google Bookmarks Live Yahoo! Bookmarks Yahoo! Buzz Twitter Facebook Print email

Artículos Relacionados por Etiquetas

Al final de nuestros posts, siempre es agradable para el lector tener una lista de artículos relacionados, por si deseara continuar su búsqueda en nuestro blog. Aprovechando el sistema de etiquetas que WordPress nos brinda, podremos, con el siguiente código, disponer de tal lista.

A notar que estaremos tabajando aquí con etiquetas y no categorías, que requerirían otro código (y que en nuestro siguiente artículo desvelaremos), y que por tanto cuantos más artículos compartan etiqueta, más útil sera el plan:

<?php
//for use in the loop, list 5 post titles related to first tag on current post
$backup = $post; // backup the current object
$tags = wp_get_post_tags($post->ID);
if ($tags) {
echo 'Related Posts';
$first_tag = $tags[0]->term_id;
$args=array(
'tag__in' => array($first_tag),
'post__not_in' => array($post->ID),
'showposts'=>5,
'caller_get_posts'=>1
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
<?php
endwhile;
}
}
$post = $backup; // copy it back
wp_reset_query(); // to use the original query again
?>

Vamos simplemente a pastear éste código dentro del Loop de nuestro single.php, o index.php, según queramos mostrarlo en la página principal de nuetsro site debajo de cada último artículo, o/y en la página singular correspondiente.

Gracias a Mike por este gran código.

Meneame Technorati del.icio.us Bitacoras.com Digg Wikio Google Bookmarks Live Yahoo! Bookmarks Yahoo! Buzz Twitter Facebook Print email

Habilitar nuestro tema para que anuncie próximos posts

He aquí un loop especial que, integrado en nuestra barra lateral, nos permitirá anunciar aquellos posts que hayamos marcado, a través de WordPress, como de futura publicación, en el Panel de Administración.

<div id="futuro">

     <h3>Próximamente...:</h3>
          <div id="lista">
               <?php query_posts('showposts=10&post_status=future'); ?>
               <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

               <?php the_title(); ?><?php edit_post_link('e',' (',')'); ?>
               <br>

               <span class="fecha">
                    <?php the_time('j. F Y'); ?>
               </span>

               <?php endwhile; else: ?>
                    <p>Sin eventos.</p>
               <?php endif; ?>
     </div>

</div>

Útil para mantener en vilo a nuestros lectores, y recordarles que es preciso que nos pongan en sus favoritos !

Meneame Technorati del.icio.us Bitacoras.com Digg Wikio Google Bookmarks Live Yahoo! Bookmarks Yahoo! Buzz Twitter Facebook Print email

Iconos Sociales en cada post, linkando a sus respectivas páginas

Hoy veremos un sistema rápido y eficaz de proporcionar a cada uno de nuestros artículos de una batería de iconos sociales, para que nuestro blog sea recomendado y esparcido por la red.

Primero, nos haremos con un set de iconos que nos guste. Y guardaremos esos iconos en nuestro tema en cuestión, dentro de la carpeta ‘images’.

Luego, dentro del Loop (buscarlo en single.php, index.php, aunque también nos funcionará en archive.php), pegaremos esto, después de the_content:

<div class="social">

<h3>Comparte este post</h3>

<a href="<?php bloginfo('rss2_url'); ?>" title="Flujo RSS.">
<img src="<?php bloginfo('template_directory'); ?>/images/feed.png" alt="Flujo RSS." />
</a>

<a href="http://twitter.com/home/?status=<?php the_title(); ?> : <?php the_permalink(); ?>" title="Tweetea esto!">
<img src="<?php bloginfo('template_directory'); ?>/images/twitter.png" alt="Tweetea esto!" />
</a>

<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;amp;title=<?php the_title(); ?>" title="StumbleUpon.">
<img src="<?php bloginfo('template_directory'); ?>/images/stumbleupon.png" alt="StumbleUpon" />
</a>

<a href="http://www.reddit.com/submit?url=<?php the_permalink(); ?>&amp;amp;title=<?php the_title(); ?>" title="Vota en Reddit.">
<img src="<?php bloginfo('template_directory'); ?>/images/reddit.png" alt="Reddit" />
</a>

<a href="http://digg.com/submit?phase=2&amp;amp;url=<?php the_permalink(); ?>&amp;amp;title=<?php the_title(); ?>" title="Digg this!">
<img src="<?php bloginfo('template_directory'); ?>/images/digg.png" alt="Digg This!" />
</a>

<a href="http://del.icio.us/post?url=<?php the_permalink(); ?>&amp;amp;title=<?php the_title(); ?>" title="Bookmarkame en Delicious.">
<img src="<?php bloginfo('template_directory'); ?>/images/delicious.png" alt="Bookmarkame en Delicious" />
</a>

<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;amp;t=<?php the_title(); ?>" title="Comparte en Facebook.">
<img src="<?php bloginfo('template_directory'); ?>/images/facebook.png" alt="Comparte en Facebook" id="sharethis-last" />
</a>

</div>

Hemos tomado en cuenta el Flujo RSS, Twitter, Stumble Upon, Reddit, Digg, Delicious y Facebook.
Si me pedís servicios extra, prometo responder.

A notar que cada set de iconos tendrá su nomenclatura, que habrá que ajustar en los ejemplos que yo he puesto aquí.

Y por lo demás voilà, ya tenemos a nuestros artículos ultra-socializados. A morir de éxito !

Integrando PDFs directamente en nuestro Post

A parte de poder subir un archivo PDF como si fuera un elemento multimedia en nuestros artículos (para proporcionar así su url y que el usuario lo active en línea), disponemos aún de otro método para mostrar un documento PDFen nuestros posts, esta vez inscrito directamente en el cuerpo de nuestro artículo, ya abierto y listo para lectura.

Veamos cómo:

1- Subiremos con nuestra cuenta FTP el archivo PDF en cuestión, en una carpeta específica en nuestro servidor (o, para los más ordenados, en la carpeta “Uploads”, dentro de “WP-Content”).

2- Empezaremos a escribir nuestro post, y, allí donde nos interese integrar el PDF, clicaremos en el botón del Editor Visual la Opción : Insertar / Editar inserción de archivos.

3- Seleccionaremos “Shockwave” como método, la URL completa del PDF, las dimensiones del frame a crear, y clicaremos en Insertar.

Si nos apeteciera hacerlo a través del Editor de HTML en vez del Visual, escribiremos en él lo siguiente :

<embed src="http://nuestrodominio.com/nuestro.pdf" width="500" height="375">

WordPress 2.9 contará con una papelera de reciclaje

Así es, como suena. WordPress 2.9, la versión que esta por llegar, tendrá una papelera de reciclaje, en la que podrás almacenar los posts y comentarios borrados y recuperarlos. Aquí les dejo unas imágenes (cortesía e WPEngineer) de cómo se vería implementado:

Papelera en la edición de PostsTrash en el postComentarios - Papelera

Y vosotros diréis, ¿para qué sirve esto? Bueno, además de tener un lugar con las cosas eliminadas, es un lugar donde nadie puede acceder salvo el administrador, entonces no se mostrarán  como borradores o entradas futuras.

Como apunta Andrés, también se podrá configurar la cantidad de días que los elementos se mantienen en la papelera, antes de ser eliminados, añadiendo este código en el wp-config.php

define( 'EMPTY_TRASH_DAYS', 30 ); // Donde 30 es el número de días

Sin dudas una interesante adición.

Vía aNieto2K

Mostrar la cantidad de artículos publicados al lado de cada mes

Investigando un poco al querer modificar un poco mi theme, he encontrado una manera muy fácil de visualizar la cantidad de articulo publicados.

Solamente hay que modificar “false” por “true” en una parte del código del general-template.php, que se encuentra en la carpeta wp-includes,

$defaults = array(
'type' => 'monthly', 'limit' => '',
'format' => 'html', 'before' => '',
'after' => '', 'show_post_count' => true,
'echo' => 1
);

y la visualización variará de la sig. manera

Archivos con cantidad de artículos Archivos sin cantidad de artículos