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:
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:
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.
Ver comentarios (12)
Buen artículo, funciona a la perfección
Consulta, si se hace sobre el Theme original, ¿Cuándo se actualiza el Theme se pierde el código insertado?
Hola, si, es por eso que se recomienda usar un child theme, revisa: https://decodecms.com/crear-un-child-theme-en-wordpress-de-manera-correcta/
No lo he probado pero hasta hoy es el unico articulo que he encontrado.
Lo añado a mi "child.theme" pero no funciona ...
Hola, es posible que tu theme tenga una función propia para esto, podrías probar con otro theme temporalmente y verificar si te sucede lo mismo.
Hola!
cómo sería el código si solo lo quiero cambiar el texto en una categoría especifica?
Gracias
Hola, tendrías que colocar una condicional y obtener la categoría actual de la página que estas viendo, revisa: https://developer.wordpress.org/reference/functions/get_the_category/ el parámetro es opcional, si no lo colocas devuelve la categoría actual.
No me funciona!! segui tus indicaciones,
Estoy en el tema principal de mi sitio y nada!
Antes que todo, personalmente recomiendo utilizar un plugin de inserción de código (tipo Code Snippet) para estas tareas, de tal manera de no intervenir el archivo functions.php del theme o tener que estar manipulando un child-theme. En caso de conflictos, este plugin, desactiva el código para que lo puedas ir corrigiendo.
Éxito Jhon, te sigo hace bastante por tus consejos que son muy prácticos y útiles.
No me ha funcionado, estoy trabajando con colorMag versión Free y en el listado de las categorías en donde aparece el read more quiero cambiarlo por Leer más, pero no quiero instalar Loco Translate solamente para esto, es por ello que quiero hacerlo desde código, pero no lo he logrado con esta opción
Funciona, cambia el string, pero no se le pueden aplicar clases ni estilos en el theme que estoy utilizando...
Hola, tal vez necesites especificar un poco más los estilos CSS, por ejemplo:
article .btn-read-more{
}
O usando
Revisa: https://decodecms.com/usar-el-inspector-de-codigo-para-modificar-un-theme-wordpress/
Saludos.