Cómo Aprovechar al Máximo la sidebar de WordPress

Voy a mostrarte algunos códigos y trucos que se pueden aplicar a casi cualquier tema que desees, esto agregará algunas características realmente geniales a tu barra lateral y quién sabe, tal vez incluso te consiga una cita esta noche.

La verdad, en mis primeros años en WordPress y diseño de temas, nunca pensé que la sidebar fuera algo útil, de hecho, mi primer tema ni siquiera tenía una, pero tiempo después, me di cuenta de cuánto espacio en pantalla estaba desperdiciando, y cambié de opinión. Este es un recorrido por el rediseño de la sidebar del antiguo tema por defecto de WordPress Kubrik, antes de esto; agregué la sidebar a las entradas individuales, por si te preguntas de dónde vino.

#Creando diferentes barras laterales

Primero que nada, necesitamos dos archivos de sidebar, nombra el primero sidebar.php para que funcione en las páginas también (este es el predeterminado), luego creamos uno nuevo que se mostrará en nuestras entradas individuales, llamémoslo sidebar-single.php

#Separar la sidebar de Inicio de la de Entradas

Ahora, necesitamos que WordPress separe nuestra “sidebar de inicio” de nuestra “sidebar de entrada”, esto es más fácil si tu tema tiene un archivo single.php como aquí, pero si no, te recomiendo encarecidamente que crees uno ahora, te ahorrará muchos problemas en el futuro.

Para que WordPress muestre una sidebar diferente en las entradas individuales solo tienes que abrir el archivo single.php, encontrar la llamada a la sidebar y decirle que llame a la nueva sidebar en su lugar, algo así:

Ahora en nuestro blog podemos ver esto:

Inicio:

Post:

#¿Y si no quiero un archivo single.php?

Bueno, supongo que tenemos un rebelde aquí. Bueno, si realmente no quieres un archivo single.php rondando en tu tema puedes simplemente usar el archivo index.php, para hacer eso solo encuentra la línea donde se llama la sidebar:

1<?php get_sidebar(); ?>
2

Y cámbiala por esto:

1<?php
2  if( is_single() ) {
3      get_sidebar( 'single' );
4  } else {
5      get_sidebar();
6  }
7

Ese código mostrará nuestra sidebar única SOLO si estamos en una entrada individual. Si no, mostrará nuestra sidebar predeterminada.

OK, now we have a sidebar just for our single posts, how can we use it? There are plenty of ways! For example, do you show related posts or social icons below your posts? Maybe some of this stuff can look better on our new sidebar, let's try it.

#Agregando entradas relacionadas

Empecemos por agregar algunas entradas relacionadas a nuestra entrada, para hacer eso estoy usando el plug-in YARPP (¡una versión antigua, no me juzgues!), en tu sidebar-single.php agrega la función related_posts() (o cualquier función que use tu plug-in) y ahora en tu blog deberías ver algo así:

Hay otra forma de mostrar entradas relacionadas sin necesidad de un plug-in, pero simplemente no puedo hacer que funcione en la sidebar, aún así, no veo ningún problema en usar un plug-in para esto (ya que es el único plug-in que estoy usando en este tutorial).

#Agregando botones de redes sociales

¡Se ve bien! Ahora agreguemos algunos botones de redes sociales como Twitter o Facebook, estoy usando este set de iconos sociales.

Aquí en el tema predeterminado no tengo mucho espacio, así que solo agregaré botones de twitter y facebook, pero si quieres agregar más, es prácticamente lo mismo.

Agregar un botón de Facebook es fácil porque solo necesitas compartir la URL, solo tienes que pegar el siguiente código en la sidebar.

1<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/facebook.png" alt="Compartir en Facebook" /></a>
2

Twitter, por otro lado, es un poco complicado porque quieres que tus seguidores sepan qué estás compartiendo, por lo tanto, debes agregar el título, luego, cuando solo tienes 140 caracteres para usar, no puedes enviar la URL completa junto con el título, por lo tanto, necesitas una URL corta.

Hay muchos servicios para acortar una URL, e incluso puedes crear la tuya, pero por ahora puedes usar servicios como tinyurl o bit.ly si quieres.

Agregando "+" al título

He encontrado que a veces en Twitter, si no agregas un signo más “+” al título cuando envías un tweet desde un enlace, muestra un horrible “%20” en cada espacio, afortunadamente, hay una forma sencilla de solucionar esto.

Esto va en tu archivo functions.php (¿ya notaste la importancia de este archivo?)

1<?php
2    function twitle( $title ) {
3        $newtitle = str_replace( " ", "+", $title );
4        echo $newtitle;
5    }
6?>
7

En realidad no necesitas crear una función solo para eso, pero creo que podría ser útil más adelante.

Usando Tinyurl

Si quieres usar tinyurl, aquí está el código que necesitas, pégalo en tu archivo functions.php:

1function tinyurl( $url ) {
2    $tinyurl = file_get_contents( "http://tinyurl.com/api-create.php?url=" . $url );
3    return $tinyurl;
4}
5

Ahora, pega el siguiente código en tu sidebar:

1<a href="http://twitter.com/home?status=<?php twitle( the_title() ); ?>+<?php echo tinyurl( get_permalink() ); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/twitter.png" alt="Compartir en Twitter" /></a>
2

Usando bit.ly

Prefiero bit.ly porque te permite mantener un registro de tus URLs acortadas, y es más corto que tinyurl.

Primero necesitas registrarte en bit.ly, y luego tendrás acceso a una clave de API, nuevamente, pega este código en tu archivo functions.php:

1//create bit.ly url
2function bitly() {
3    // login information
4    $url = get_permalink(); //generates wordpress' permalink
5    $login = '';//your bit.ly login
6    $apikey = ''; //your bit.ly apikey
7    $format = 'json';//choose between json or xml
8    $version = '2.0.1';
9    //create the URL
10    $bitly = 'http://api.bit.ly/shorten?version='.$version.'&longUrl='.urlencode($url).'&login='.$login.'&apiKey='.$apikey.'&format='.$format;
11    //get the url
12    //could also use cURL here
13    $response = file_get_contents($bitly);
14    //parse depending on desired format
15    if(strtolower($format) == 'json')
16    {
17        $json = @json_decode($response,true);
18        echo $json['results'][$url]['shortUrl'];
19    }
20    else //xml
21    {
22        $xml = simplexml_load_string($response);
23        echo 'http://bit.ly/'.$xml->results->nodeKeyVal->hash;
24    }
25}
26

No olvides llenar con tu nombre de usuario y clave de API, después de eso pega esto en tu sidebar:

1<?php $bitlyurl = bitly(); ?>
2<a href="http://www.twitter.com/home?status=<?php twitle(the_title('','',false)); ?>+<?php echo $bitlyurl; ?>" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/twitter.png" alt="Tweet me!" /></a>
3

Usando tu propio dominio.

Creo que usar tu propio dominio es la mejor forma de crear una URL corta, te da presencia, personalidad y tus potenciales lectores saben que van a un sitio web serio (sí, es cierto). Aún así, si tienes un dominio largo (como thisisthebestblogeveraccordingtomymomlol.com) tal vez deberías usar bit.ly o tinyurl.

La forma más fácil de crear una URL corta en WordPress es usar “el ID del post”, solo pega esto en tu sidebar:

1<a href="http://www.twitter.com/home?status=<?php twitle(the_title('','',false)); ?>+<?php bloginfo('url') ?>/?p=<?php echo $post->ID; ?>" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/twitter.png" alt="Twiteame!"/></a>
2

Eso enviará algo como esto: Hola Mundo http://dominio.com/?p=123, es corto, pero puede ser aún más corto. Además, puedes cambiar <?php get_bloginfo('url') ?> (que envía la URL de tu blog) por otro dominio si quieres, por ejemplo, un dominio hack como aweso.me o bite.me (ya sabes, algo genial), solo recuerda que tienes que ser dueño de ese dominio (ni siquiera pienses en youtu.be).

Usando tu propio dominio v2.0

Usando el código anterior, y agregando algunas redirecciones 301 a nuestro archivo .htaccess podemos desprendernos del ?p= ganando tres valiosos caracteres.

En el código anterior, elimina ?p= para que quede así:

1<a href="http://www.twitter.com/home?status=<?php twitle(the_title('','',false)); ?>+<?php bloginfo('url') ?>/<?php echo $post->ID; ?>" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/twitter.png" alt="Twiteame!"/></a>
2

Eso envía algo como esto: Hola Mundo http://dominio.com/123, pero también viene con un bonito error 404. Para arreglar eso tenemos que agregar esta regla a nuestro archivo .htaccess:

1#shorturl
2RewriteRule ^([0-9]+)$ ?p=$1 [R=301,L]
3#shorturl
4

¡Listo! Ahora nuestro propio URL corto está funcionando, y ahora nuestra sidebar se ve algo así (¡con botones funcionando!):

#Agregando una URL “¡Compártelo!”

También puedes querer agregar una URL corta para que tus lectores puedan compartir la entrada por sí mismos, si es así, solo agrega el siguiente código dependiendo del método de acortamiento que elegiste antes:

Tinyurl

1<form>
2<input id="shorturl" name="q" size="30" readonly="readonly" onClick="javascript:this.form.shorturl.focus();this.form.shorturl.select();" value="<?php echo $turl; ?>" type="text">
3</form>
4

Bit.ly

1<form>
2<input id="shorturl" name="q" size="30" readonly="readonly" onClick="javascript:this.form.shorturl.focus();this.form.shorturl.select();" value="<?php echo $bitlyurl; ?>" type="text">
3</form>
4

Tu propio dominio v1.0

1<form>
2<input id="shorturl" name="q" size="30" readonly="readonly" onClick="javascript:this.form.shorturl.focus();this.form.shorturl.select();" value="<?php bloginfo('url'); ?>/?p=<?php echo $post->ID; ?>" type="text">
3</form>
4

Tu propio dominio v2.0

1<form>
2<input id="shorturl" name="q" size="30" readonly="readonly" onClick="javascript:this.form.shorturl.focus();this.form.shorturl.select();" value="<?php bloginfo('url'); ?>/<?php echo $post->ID; ?>" type="text">
3</form>
4

Eso mostrará algo como esto:

[!CAUTION] > Tienes que usar el mismo método de acortamiento que usaste antes si quieres que esto funcione.

#Agregando más entradas en la misma categoría

Ahora, agreguemos más entradas en la misma categoría que la que estamos leyendo (queremos que el lector se quede en nuestro blog por un tiempo, ¿no?)

Tomé esta función (bueno, no era una función cuando la tomé) del tema Agregado (que por cierto, realmente sabe cómo aprovechar la sidebar), agrega el primer código en tu archivo functions.php, y el segundo en tu archivo sidebar-single.php.

1<?php
2function get_more_category() {
3global $post;$categories = get_the_category();foreach ($categories as $category) :$posts = get_posts('numberposts=3&exclude='.$post->ID.'&category='. $category->term_id);if(count($posts) > 1) {?><h2>Mas <em>en</em> '<?php echo $category->name; ?>':</h2><p><ul><?php foreach($posts as $post) : ?><li><a href="<?php the_permalink(); ?>"<?php the_title(); ?></a></li><?php endforeach; ?></ul></p><?php } endforeach;}<?php get_more_category(); ?>
4

#Mostrando información del autor

Si tienes un blog con más de un autor, es posible que desees agregar una pequeña biografía a cada entrada, ¿verdad? Todos los demás blogs lo hacen mostrando la información debajo de la entrada, pero como nos gusta ser diferentes, y estamos mejorando nuestra sidebar, ¿qué tal si ponemos la biografía allí? Asegúrate de completar completamente tu página de perfil en el WP admin, eso es lo que vamos a usar.

Una vez que hayas hecho eso, pega esto en tu sidebar:

1<?php the_author_link(); ?> is a <?php the_author_meta('description'); ?>
2

Suponiendo que ya he puesto mi información en mi página de perfil, esto mostraría algo como esto:

Mario es un diseñador genial que ama hacer temas, escribir blogs y comer bebés, en ese orden.

1<?php echo get_avatar( get_the_author_meta('user_email'), '80', '' ); ?>
2

Donde "80" es el tamaño (en píxeles) de la imagen, también puedes cambiar eso. Fuente.

#Mostrando las entradas más populares

En caso de que quieras agregar una lista con las entradas más populares de tu blog (bueno, en realidad las más comentadas), estás en el lugar correcto.

Esto va en tu archivo functions.php:

1function most_popular_posts($no_posts = 10, $before = '<li>', $after = '</li>', $show_pass_post = false, $duration='') {
2global $wpdb;
3$request = "SELECT ID, post_title, COUNT($wpdb->comments.comment_post_ID) AS 'comment_count' FROM $wpdb->posts, $wpdb->comments";
4$request .= " WHERE comment_approved = '1' AND $wpdb->posts.ID=$wpdb->comments.comment_post_ID AND post_status = 'publish'";
5if(!$show_pass_post) $request .= " AND post_password =''";
6if($duration !="") {
7$request .= " AND DATE_SUB(CURDATE(),INTERVAL ".$duration." DAY) < post_date ";
8}
9$request .= " GROUP BY $wpdb->comments.comment_post_ID ORDER BY comment_count DESC LIMIT $no_posts";
10$posts = $wpdb->get_results($request);
11$output = '';
12if ($posts) {
13foreach ($posts as $post) {
14$post_title = stripslashes($post->post_title);
15$comment_count = $post->comment_count;
16$permalink = get_permalink($post->ID);
17$output .= $before . '<a href="' . $permalink . '" title="' . $post_title.'">' . $post_title . '</a> (' . $comment_count.')' . $after;
18}
19} else {
20$output .= $before . "None found" . $after;
21}
22echo $output;
23}
24

Y esto va en tu sidebar:

1<h2>Popular</h2>
2<ul><?php most_popular_posts(); ?></ul>
3

#Mostrando entradas recientes

Muchos blogs (casi todos) muestran algunas entradas recientes en su página de inicio, y hay muchos plug-ins para eso, pero dije que no usaría más plug-ins, y no puedo retractarme, ¿verdad?

Tomé este código del conocido plug-in de entradas recientes, es solo una función, por lo que se puede colocar fácilmente en nuestro archivo functions.php.

1<?php function mdv_recent_posts($no_posts = 5, $before = '<li>', $after = '</li>', $hide_pass_post = true, $skip_posts = 0, $show_excerpts = false, $include_pages = false) {
2global $wpdb;
3$time_difference = get_settings('gmt_offset');
4$now = gmdate("Y-m-d H:i:s",time());
5$request = "SELECT ID, post_title, post_excerpt FROM $wpdb->posts WHERE post_status = 'publish' ";
6if($hide_pass_post) $request .= "AND post_password ='' ";
7if($include_pages) $request .= "AND (post_type='post' OR post_type='page') ";
8else $request .= "AND post_type='post' ";
9$request .= "AND post_date_gmt < '$now' ORDER BY post_date DESC LIMIT $skip_posts, $no_posts";
10$posts = $wpdb->get_results($request);
11$output = '';
12if($posts) {
13foreach ($posts as $post) {
14$post_title = stripslashes($post->post_title);
15$permalink = get_permalink($post->ID);
16$output .= $before . '<a href="' . $permalink . '" rel="bookmark" title="Permanent Link: ' . htmlspecialchars($post_title, ENT_COMPAT) . '">' . htmlspecialchars($post_title) . '</a>';
17if($show_excerpts) {
18$post_excerpt = stripslashes($post->post_excerpt);
19$output.= '<br />' . $post_excerpt;
20}
21$output .= $after;
22}
23} else {
24$output .= $before . "Can't find any :S" . $after;
25}
26echo $output;
27}
28?>
29

Pega esto en tu sidebar:

1<?php mdv_recent_posts(); ?>
2

#Mostrando comentarios recientes

Los blogs son sobre la comunidad, así que queremos que nuestros lectores hagan muchos comentarios, pero son tímidos, necesitan saber que algún otro tipo genial lo hizo antes. Para que esto suceda, necesitamos mostrar una lista con los comentarios más recientes en nuestro blog.

Pega el siguiente código en tu archivo functions.php (lo siento, pero realmente no puedo recordar de dónde saqué esto, estaba en mi archivo functions.php):

1<?php
2function recent_comments($comm = 5) {
3global $wpdb;
4$sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID, comment_post_ID, comment_author, comment_date_gmt, comment_approved, comment_type,comment_author_url, SUBSTRING(comment_content,1,30) AS com_excerpt FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID) WHERE comment_approved = '1' AND comment_type = '' AND post_password = '' ORDER BY comment_date_gmt DESC LIMIT $comm";
5$comments = $wpdb->get_results($sql);
6$output = $pre_HTML;
7$output .= "n<ul class="recentcomments">";
8foreach ($comments as $comment) {
9$output .= "n<li><strong>".strip_tags($comment->comment_author) ."</strong> <em>en</em> " . "<a href="" . get_permalink($comment->ID)."#comment-" . $comment->comment_ID . "" title="". strip_tags($comment->com_excerpt). "">".$comment->post_title ."</a></li>";
10}
11$output .= "n</ul>";
12$output .= $post_HTML;
13echo $output;
14}
15

Ahora llamamos a la función en nuestra sidebar:

1<?php recent_comments(); ?>
2

#Mostrando entradas aleatorias

En este punto, tenemos muchas entradas mostrándose en nuestra sidebar, pero eso es algo bueno, ¿verdad? ¡Entradas! ¡Entradas por todas partes!

Ok, solo agrega el siguiente código a tu sidebar:

1<li><h2>Entradas aleatorias</h2></li>
2<li><ul>
3<?php
4$rand_posts = get_posts('numberposts=5&orderby=rand');
5foreach( $rand_posts as $post ) :
6?>
7<li><a href="<?php the_permalink(); ?>">
8 <?php the_title(); ?>
9</a></li>
10<?php endforeach;
11?>
12</ul></li>
13

Source

#Mostrando un blogroll

OK, tal vez esto no sea el mejor truco de WordPress, pero es bastante útil cuando tienes varios sitios web, o puedes mostrar todos tus perfiles en twitter, facebook, linkedin, etc. Solo agrega esos enlaces en tu administrador de enlaces de WordPress, y muéstralos con este código:

1<?php wp_list_bookmarks('title_li=&category_before=&category_after='); ?>
2

#El resultado

Creo que ahora tenemos una sidebar bastante útil para nuestro blog, pero si quieres, puedes seguir agregando funciones como quieras, ¡no hay límites!

Así es como se ve mi sidebar después de algunas correcciones:

#¡Sé creativo!

Recuerda, esto es solo un ejemplo, tu sidebar no tiene que verse exactamente como la mía, pero espero que estos consejos/trucos te ayuden a aprovechar al máximo tu sidebar, además, ¡sé creativo! Piensa en diferentes formas de usar esa sidebar, una vez vi un blog que tenía los comentarios en la sidebar. Ponte en el lugar de tus lectores, ¿cómo se puede mejorar su experiencia?