Personalizar enlace leer más en WordPress

[ 11 julio 2018 ] [ Autor: Jhon Marreros Guzmán ] [ Themes - Intermedio] [ ]

En un artículo anterior aprendiste las diferencias entre usar leer más y extractos en WordPress, si has elegido usar la funcionalidad de leer más, en este artículo aprenderás cómo personalizar el enlace leer más que te crea por defecto tu theme en WordPress.

1- Modificando “leer más” para una entrada específica

Puedes modificar el texto de leer más directamente en las entradas, al ver la entrada en modo HTML puedes agregar un texto como parte de la etiqueta creada para leer más, tal como se muestra en la siguiente imagen:

Vista HTML para cambiar texto de leer más

Esto dará como resultado lo siguiente:

2- Modificando “leer más” para todas las entradas

Si deseas personalizar no sólo el texto, sino también cambiar el HTML y que se aplique en todas las entradas, en este caso lo mejor será hacerlo por código a través de un Hook

Puedes usar el siguiente código que puedes agregar en el archivo functions.php tu theme o tu child theme.


function modify_read_more_link() {
    return '<a class="more-link btn-read-more" href="' . get_permalink() . '"> Leer más </a>';
}
add_filter( 'the_content_more_link', 'modify_read_more_link' );

En el código anterior :

Usamos el hook the_content_more_link, a través de este hook hacemos referencia a la función modify_read_more_link()
Dentro de la función podemos retornar la nueva cadena de “leer más”, esta cadena puede contener el enlace al artículo actual ( función get_permalink()), se puede además personalizar las clases del enlace, cambiar texto, etc.

En base a la clase agregada btn-read-more podemos usar CSS para personalizar el diseño del botón


.btn-read-more{
	background:black;
	padding:6px 12px;
	border-radius: 4px;
	color:white;
	text-transform: uppercase;
	font-size:12px;
	text-decoration: none;
}

.btn-read-more:hover{
	background-color:red;
	color:white;
}

Al final obtendremos algo similar a:

Es posible que el theme que usemos ya tenga clases para botones, en tal caso sólo sería agregar la clase correspondiente como parte del código HTML.

Conclusión

Si tu theme tiene por defecto un enlace leer más que quieres retocar, como verás la opción más flexible es usar el Hook y hacer las personalizaciones del enlace de leer más a través de código.

¿Aún tienes dudas?, en el siguiente video se detallan los puntos anteriores.