Cómo añadir un botón de post aleatorio a tu blog

Para añadir el botón aleatorio en el pie de página de cada uno de tus posts en el blog vamos a necesitar meter algo de código en tu WordPress.

No temas, porque aparte de copywriter, soy ingeniero informático y te voy a guiar paso a paso para que no te suponga ningún problema.

Básicamente, vamos a hacer el proceso en 3 pasos.

Primero vamos a instalar un programita (plugin) que te permita meter código en tu WordPress.

Luego, usaremos ese plugin para insertar 2 pequeños fragmentos de código:

Un fragmento de código que permite escoger un post al azar y otro fragmento de código que pinta un botón que «invoca» al código anterior de manera que, cuando el usuario lo clique, se recargue la página mostrando un post al azar.

Contado así parece muy lioso. Pero lo vamos a ver pasito a pasito suave suavecito.

Vamos a los 3 pasos:

Paso 1. Instala el plugin de Code Snippets

El plugin de Code Snippets te permite insertar trozos de código (snippets) sin que tengas que ponerte a editar tú directamente en tu web. Basta con que en el buscador de plugins de tu WordPress escribas la palabra snippets. Seguramente el primer resultado que te aparezca sea el que buscas:

Cuando encuentres el plugin, presiona el botón de Instalar ahora y luego actívalo.

Cuando actives el plugin verás que en el menú de la izquierda hay una sección con una tijera que dice Fragmentos de código. Ahí es donde vamos a meternos.

Paso 2. Agrega el código con la función Post Random

Lo siguiente que vamos a hacer es ir al menú de Fragmentos de código y darle a Añadir nuevo.

Se nos abrirá una ventana que nos pide un título y que le metamos el código.

Un buen título puede ser «Función de post aleatorio.»

En cuanto al código que debes poner, es este (copialo y pégalo tal cual):

add_action('init','random_post');
function random_post() {
       global $wp;
       $wp->add_query_var('random');
       add_rewrite_rule('random/?$', 'index.php?random=1', 'top');
}
 
add_action('template_redirect','random_template');
function random_template() {
       if (get_query_var('random') == 1) {
               $posts = get_posts('post_type=post&orderby=rand&numberposts=1');
               foreach($posts as $post) {
                       $link = get_permalink($post);
               }
               wp_redirect($link,307);
               exit;
       }
}

No voy a contarte qué hace cada línea de este código, pero sí que te voy a mostrar cómo comprobar si funciona.

Eso sí, antes de darle a guardar haz dos cosas más:

Debajo de la caja donde has insertado el código hay una serie de opciones acerca de dónde quieres que se ejecute el código en tu WordPress. Escoge la que dice «Ejecutar solo en la portada del sitio».

Por último, yo suelo anotarme en el campo de la descripción qué hace ese código y cuál es el enlace del sitio donde lo he encontrado. No es imprescindible, pero sí que es una buena práctica, especialmente si tienes la cabeza en mil cosas y sabes que dentro de unas semanas ni te acordarás de dónde encontraste esa información.

Bueno. Pues cuando hagas todo eso, toca guardar los cambios hechos y darle al botón de activar el código:

Ahora que tenemos activado nuestro código, es hora de comprobar que funciona y hace lo que tiene que hacer cuando lo tiene que hacer.

Para ello, abre una pestaña nueva de navegador, escribe la dirección de tu web y añádele al final:

/?random=1

Por ejemplo, para esta web sería:

https://javivicente.net/?random=1

Si todo ha ido bien, cuando le des a intro en tu navegador, te mostrará un post de tu blog al azar.

Comprueba que no es casualidad y vuelve a pegar la dirección un par de veces para ver si, efectivamente, te lleva a posts aleatorios.

Si no ocurre (a veces pasa) tus sospechosos habituales son los plugins de cache y esos que tratan de optimizar tu web. Son demasiados como para que te explique qué debes hacer en esos casos, pero es muy probable que cambiando algunos de sus ajustes consigas hacer que funcione este código.

Bien. Ahora solo queda hacer que ese código se ejecute cuando alguien clique un botón. Y que ese botón se muestre donde nosotros queremos, claro, que es en pie de cada post.

Vamos a ello:

Paso 3: Agregar el botón que lleva a un post aleatorio

De nuevo, vamos a volver al plugin de Fragmentos de código y vamos a agregar un nuevo fragmento.

Le vamos a poner de título «Botón post aleatorio al pie del post».

Sí, parece el nombre de un plato de restaurante fino, pero es recomendable que tus títulos sean lo más descriptivos y claros posible. Te aseguro que resulta muy útil cuando acabas con varios fragmentos de código que hacen diferentes cosas.

Lo siguiente es el código que vamos a pegar y que es este:

// Add signature or ad after post content
 
function wpb_after_post_content($content){
if (is_single()) {  
    $content .= '--------------------<br><i>Abajo, un botón para <strong>ir a otro correo al azar</strong>.<br>¿Qué te deparará el destino?</i><br><br><div class="wp-block-button is-style-fill"><a class="wp-block-button__link" href="/?random=1">No tocar. Soy adictivo.</a></div>';
}
    return $content;
}
add_filter( "the_content", "wpb_after_post_content" );

Al igual que con el fragmento anterior, marca la casilla de que este código sólo debe ejecutarse en la portada del sitio, anota en descripción lo que hace y dónde lo has encontrado, guarda los cambios y activa el código.

¿El resultado? ve a un post de tu blog y baja hasta el final del texto. Deberías ver algo así:

Lo primero que tienes que hacer es comprobar que, efectivamente, clicas el botón y este te lleva a un post aleatorio.

Y luego, cuando hayas terminado, puedes cambiar los textos de la entradilla y del botón si así lo deseas.

Para cambiar el texto de la entradilla, solo tienes que editar parte del fragmento de código que acabas de crear. En concreto, el que te marco en negrilla:

// Add signature or ad after post content
 
function wpb_after_post_content($content){
if (is_single()) {  
    $content .= '--------------------<br><i>Abajo, un botón para <strong>ir a otro correo al azar</strong>.<br>¿Qué te deparará el destino?</i><br><br><div class="wp-block-button is-style-fill"><a class="wp-block-button__link" href="/?random=1">No tocar. Soy adictivo.</a></div>';
}
    return $content;
}
add_filter( "the_content", "wpb_after_post_content" );

Por último, para cambiar el texto de tu botón, tienes que editar esta parte del código que te resalto en negrilla:

// Add signature or ad after post content
 
function wpb_after_post_content($content){
if (is_single()) {  
    $content .= '--------------------<br><i>Abajo, un botón para <strong>ir a otro correo al azar</strong>.<br>¿Qué te deparará el destino?</i><br><br><div class="wp-block-button is-style-fill"><a class="wp-block-button__link" href="/?random=1">No tocar. Soy adictivo.</a></div>';
}
    return $content;
}
add_filter( "the_content", "wpb_after_post_content" );

Y de esta forma tan sencilla, hemos creado un botón adictivo para dominarlos a todos y tenerlos enganchados a nuestro blog durante más tiempo.

--------------------
Abajo, un botón para ir a otro correo al azar.
¿Qué te deparará el destino?