Trucos para editar el botón “Leer más” en WordPress (Avanzado)

¿Quieres mejorar la imagen de tu web o blog? ¿Tu enlace al post es poco original o aburrido? ¿Te gustaría personalizar el enlace “Leer más” de tu blog? En este post descubrirás cómo hacerlo con unos sencillos pasos utilizando HTML y CSS.



¿Tienes conocimientos sobre programación HTML y CSS?
Lo que enseño en este blog necesitará que toques algo de código en tus plantillas de tu tema de WordPress. Si no dominas el tema te recomiendo que leas el post Como personalizar botón “Leer más” en WordPress, donde explico formas mas sencillas de editar tu tema sin necesidad de programar. En caso contrario continua leyendo.

Personalización básica

Para personalizar de manera rápida tu enlace simplemente deberás modificar la función the_content() en el archivo index.php de tu tema de WordPress.

Puedes añadirle texto simple o etiquetas HTML insertando texto entre los paréntesis de la función:

the_content(“Sigue <b>leyendo!</b>”);

Dale tu propio estilo con CSS:

WordPress asigna por defecto a ese link la clase .more-link, así que puedes añadir algunas líneas a tu archivo .css (normalmente style.css):

.more-link {
/* estilos del enlace */
}

Uno de los problemas que suele causar este botón es que, como se genera automáticamente con la entrada, muchas veces aplicar un estilo puede dar unos resultados que no esperábamos, como por ejemplo si añadimos un “float:left”.

¿Como podemos arreglar esto sin modificar los ficheros de WordPress?

La solución es incrustar el enlace en nuestra plantilla.

Configuración avanzada

Con este sistema tu mismo añadirás el HTML o CSS que tu decidas, puedes meter el botón en un contenedor (<div>) o añadirle una clase ( class=”more-link”).

  – Colocate en el archivo index.php y debajo de la función que muestra el post, que puede ser <?php the_excerpt(); ?> o <?php the_content(); ?> añade la siguiente línea:

<button onclick="window.open('<?php the_permalink(); ?>', '_self');" class="more-link">Leer más</button>

La función <?php the_permalink(); ?> contiene la url que dirige a la página del contenido del post, así que cuando hagan clic en este botón se dirigirán directamente a ver tu entrada.



Como puedes ver, hay muchas maneras de poder personalizar el botón “Leer más” en tu blog, depende de ti escoger la manera que más se adapte a tus necesidades. Si se te ocurre alguna otra manera de hacerlo o tienes cualquier duda déjame un comentario o ponte en contacto conmigo a través de nuestro formulario.



Muchas gracias por leernos!! Un saludo y que pases un buen finde!! Hasta pronto!!