Mejora la tasa de rebote con los post relacionados wordpress

Mejora la tasa de rebote con los post relacionados wordpress

16 Diciembre, 20140 Comentarios3


Hola de nuevo! Ya estoy aquí, como casi cada semana, y esta vez te quiero enseñar a mejorar la tasa de rebote de tu blog WordPress mediante el uso de posts relacionados.

Imagino que conocerás algunos plugins para mostrar posts relacionados en WordPress, normalmente suelen aparecen al finalizar los artículos o incluso hay algunos que se muestran en formato popup, aunque no funcionan muy allá la verdad.

El tutorial de hoy te explica como aprovechar estos artículos relacionados de una manera diferente ya que cuando llegues al final de tu artículo aparecerá unpopup al final de la página con estos artículos relacionados y si vuelves hacia arriba desaparecerá automáticamente, también he querido dar la posibilidad de cerrar dicho popup por si no quieres que aparezca. Te dejo un mini vídeo que describe visualmente lo que vas a realizar y así podrás saber si estás interesado en el contenido o no.

Para la generación de artículos relacionados me he decantado por el plugin Yet Another Related Posts Plugin (YARPP) y por lo tanto si quieres seguir con el tutorial debes descargarlo a través de este enlace e instalarlo. Una vez descargado e instalado vamos a seguir una serie de pasos hasta conseguir el resultado deseado.

Configuración de YARPP

Dirígete al menú de Ajustes y selecciona YARPP, a continuación aparecerá una pantalla muy semejante a esta:

Configuración YARPP para mostrar posts relacionados en WordPress

Lo que nos interesa para nuestro propósito es configurar las opciones de visualización de la siguiente manera:

Opciones de visualización YARPP para mostrar posts relacionados en WordPress

Como puedes ver he marcado la opción de listar las entradas relacionadas mediante php ya que así tendrás el control total sobre esta funcionalidad, para ello debes usar el código a continuación mostrado en el archivosingle.php que  muestra los artículos de tu blog:

  1. En Heading he escrito “También te puede interesar <span class=”close-related fa fa-times”></span>” que mostrará el título y la cruz para cerrar el popup. Para usar esta cruz deberás tener incluída en tu WordPress la librería de iconos Font Awesome, en caso de que no la uses deberás implementar otra solución diferente para mostrar el icono de cerrar el popup. Te ofrezco la siguiente solución “También te puede interesar <span class=”close-related custom”>x</span>” ya que esto mostrará la cruz pero tomándola como texto.
  2. El campo Default image (URL) mostrará la imagen por defecto de las miniaturas (thumbnails) de los posts relacionados en caso de no tenerlas.
  3. ParaFalta de Visualización si no hay resultadosdebes introducir el texto a mostrar cuando no existan entradas relacionadas.

Hecho esto nos queda generar el código que mostrará los posts relacionados, los estilos (CSS) y el comportamiento (javascript).

Mostrar post relacionados en un artículo

Simplemente debes editar el archivo single.php e introducir el siguiente código:

<?php related_posts(); ?>

Te recomiendo que lo hagas después de la etiqueta </article>

Estilos de los artículos relacionados

Además de la apariencia que le vamos a dar al popup también lo vamos a hacer responsive de manera que cuando navegemos con un PC veamos 4 sugerencias, con tablets 2 y con móviles 1.

.pretty-related-posts {
 opacity:0;
 width: 100%;
 position: fixed;
 left:0px;
 bottom: -500px;
 z-index: 99999;
 text-align:center;
 color:#ffffff;
 padding:20px 0px;
 background:#22313F;
 transition-timing-function: ease-in-out;
 transition-duration: 500ms;
 }
.pretty-related-posts.visible {
 opacity:0.9 !important;
 bottom:0px;
 transition-duration: 500ms;
 }
.yarpp-related h3 {
 font-size:25px !important; 
 font-family: 'PT Sans Narrow' !important;
 text-transform:uppercase !important;
 padding-bottom:10px;
}
.yarpp-thumbnails-horizontal {
 padding-top:18px !important; 
}
.yarpp-thumbnail {
 width:300px !important;
 height:auto !important;
 border:none !important; 
}
.yarpp-thumbnail-title {
 float:right !important;
 font-size:14px !important;
 width:50% !important;
 max-height:none !important;
 padding:11% 0px; 
}
.yarpp-thumbnail img {
 float:left !important;
 width:40% !important;
 height:auto !important;
 -webkit-transition: all 500ms ease; /* Safari and Chrome */
 -moz-transition: all 500ms ease; /* Firefox */
 -o-transition: all 500ms ease; /* IE 9 */
 -ms-transition: all 500ms ease; /* Opera */
 transition: all 500ms ease; 
 border-radius:50%;
}
.yarpp-thumbnail:hover img {
 -webkit-transform:scale(1.10); /* Safari and Chrome */
 -moz-transform:scale(1.10); /* Firefox */
 -ms-transform:scale(1.10); /* IE 9 */
 -o-transform:scale(1.10); /* Opera */
 transform:scale(1.10); 
}
.close-related {
 float:right;
 background:none;
 color:#ffffff;
 cursor:pointer; 
 margin-right:10px;
 font-size:20px;
}
.close-related .custom {
 font-size:18px;
 font-family:Arial; 
}

@media only screen and (min-width : 0px) and (max-width : 660px) {
 .yarpp-related h3 {
 font-size:20px !important; 
 }
 .yarpp-thumbnail {
 display:none !important; 
 }
 .yarpp-thumbnail:first-child {
 display:block !important; 
 margin:0px auto !important;
 }
}

@media only screen and (min-width : 661px) and (max-width : 1280px) {
 .yarpp-thumbnail:nth-child(3),.yarpp-thumbnail:last-child {
 display:none !important; 
 }
}

Comportamiento del popup mediante Javascript y jQuery

var permanenClosed = false;
jQuery(window).load(function () {
 if ($j('.pretty-related-posts').length > 0) {
   var articleTop = $j('article').position().top+$j('article').outerHeight(true);
   var targetTop = (articleTop-($j('.pretty-related-posts').height()+250))-200;
 
   $j('.close-related').live('click', function () {
     permanenClosed = true;
     jQuery('.pretty-related-posts').removeClass('visible'); 
   });
 
   $j( window ).resize(function() {
     var articleTop = $j('article').position().top+$j('article').outerHeight(true);
     var targetTop = (articleTop-($j('.pretty-related-posts').height()+250))-200;
     showRelatedPosts();
   });
   $j(document).scroll(showRelatedPosts);
     showRelatedPosts();
   }
);}
function showRelatedPosts() {
 if (!permanenClosed) {
   var articleTop = $j('article').position().top+$j('article').outerHeight(true);
   var targetTop = (articleTop-($j('.pretty-related-posts').height()+250))-200;
   if (jQuery(this).scrollTop() > targetTop) { 
     jQuery('.pretty-related-posts').addClass('visible');
   } else {
     jQuery('.pretty-related-posts').removeClass('visible');
   } 
 }
}

 


Con estos sencillos pasos ya puedes disfrutar de tu popup con los posts relacionados para mejorar tu tasa de rebote debido a que de esta forma el usuario recibirá información de interés de manera visual y atractiva incitándole a hacer click en alguno de tus otros artículos.

Para los que tienen una web en WordPress y les interese lo que aquí explico, pero no se atreven a hacerlo o no tienen los suficientes conocimientos técnicos, les vamos a dejar un formulario en cual se podrán inscribir para que desarrollemos un plugin WordPress que realice lo que acabo de explicar. Así que si estáis interesados podéis rellenar este formulario y al cabo de un mes contabilizaremos las peticiones para ver si lo llevamos a cabo.


Espero que te haya gustado y te sea de utilidad de manera que lo único que necesitaría es que compartieras esta información por tus redes sociales.

Si te ha parecido interesante el tutorial pero todavía no tienes WordPress te enseñamos a instalarlo en cómodos y sencillos pasos mediante este artículo o si por el contrario ya dispones de tu propio WordPress nos gustaría ofrecerte la posibilidad de aumentar el tráfico a tu web o blogconfigurando una lista de suscripción mediante el uso de Mailchimp y SumoMe haciendo click aqui.

En caso de que tengas alguna duda al respecto de lo que he explicado, no te ha funcionado o no lo entiendes, estaré encantado de atenderte mediante nuestro sistema de comentarios.

Gracias y nos vemos en el siguiente!

Soy Ing. de Telecomunicaciones, diseñador/programador desde hace 8 años, los últimos 3 centrado en el desarrollo de Apps .

Además de muchomasquewebs.com mantengo bepremium.es. En lo personal un apasionado del Windsurf y surf , en general todo lo que tenga que ver con el mar, como afición friky que todo ingeniero debe tener, me encanta el aeromodelismo.

Si queréis contactar conmigo directamente podéis hacerlo a jose.revenga@muchomasquewebs.com

Mejora la tasa de rebote con los post relacionados wordpress
Mejora la tasa de rebote con los post relacionados wordpress
✓ Si quieres mejorar la tasa de rebote con los posts relacionados WordPress para tu web o blog. Te enseñamos a mostrar tus entradas de forma visual y atractiva.



Soy Ing. de Telecomunicaciones, diseñador/programador desde hace 8 años, los últimos 3 centrado en el desarrollo de Apps . Además de muchomasquewebs.com mantengo bepremium.es. En lo personal un apasionado del Windsurf y surf , en general todo lo que tenga que ver con el mar, como afición friky que todo ingeniero debe tener, me encanta el aeromodelismo. Si queréis contactar conmigo directamente podéis hacerlo a jose.revenga@muchomasquewebs.com