• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Personalizar enlace leer más en WordPress

Personalizar enlace leer más en WordPress

Personalizar enlace leer más en WordPress

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

mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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:

Leer más modificado

 

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:

Estilos cambiados leer más

 

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.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • CRUD en WordPress sin pluginsCRUD en WordPress sin plugins
  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (6 votos, promedio: 4,83 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. José Coronel

    27 enero, 2019

    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?

    • Jhon Marreros Guzmán

      29 enero, 2019

      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/

  2. juan trujillo

    7 octubre, 2019

    No lo he probado pero hasta hoy es el unico articulo que he encontrado.

  3. Antonio

    24 julio, 2020

    Lo añado a mi “child.theme” pero no funciona …

    • Jhon Marreros Guzmán

      24 julio, 2020

      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.

  4. María Eugenia Molinero

    16 febrero, 2021

    Hola!
    cómo sería el código si solo lo quiero cambiar el texto en una categoría especifica?
    Gracias

    • Jhon Marreros Guzmán

      16 febrero, 2021

      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.

  5. Christian Arlegui

    17 abril, 2021

    No me funciona!! segui tus indicaciones,
    Estoy en el tema principal de mi sitio y nada!

  6. Jorge

    3 marzo, 2022

    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.

  7. Mauro

    2 febrero, 2023

    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

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Mostrar categorías y etiquetas en lista de productos WooCommerce

Guía visual de Hooks para StoreFront y WooCommerce

Agregar descripción en ítems de menú WordPress

Mostrar Tabla Personalizada con Búsqueda y Paginación en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados