• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
Inicio / Tutoriales / Themes / Personalizar enlace leer más en WordPress
Anuncio banner webservi

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

  • Exportar / importar  la configuración del personalizador de temas en WordPressExportar / importar la configuración del personalizador de temas en WordPress
  • Personalizar página de gracias de WooCommercePersonalizar página de gracias de WooCommerce
  • Configura el tema Twenty Twenty One WordPressConfigura el tema Twenty Twenty One WordPress
  • Abrir enlaces externos en un nuevo tab automáticamenteAbrir enlaces externos en un nuevo tab automáticamente
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.

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

*

* Gravatar habilitado

Barra lateral primaria

Presentación

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
Los 5 posibles errores que estas cometiendo cuando trabajas con código en WordPress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Crear un sitio One Page en WordPress

Mostrar mensajes en la administración de WordPress y en Gutenberg

Agregar Whatsapp flotante en WordPress

Configurar Akismet para evitar el spam

Recientes

  • Exportar / importar la configuración del personalizador de temas en WordPress
  • Personalizar página de gracias de WooCommerce
  • Configura el tema Twenty Twenty One WordPress
  • Abrir enlaces externos en un nuevo tab automáticamente
alojamiento wordpress

© logo decode pie Copyright 2021 | Todos los derechos reservados | Política de Privacidad