Agregar y personalizar formato del enlace Leer más en WordPress

Agregar y personalizar formato del enlace Leer más en WordPress

Agregar mediante función el enlace “Leer más” y personalizar el formato por hoja de estilo CSS en las entradas WordPress.

Indice de contenido

Bloque Leer más

El bloque Leer más en WordPress es una función que nos permite cortar el contenido donde nosotros queramos y así resumir el texto del artículo, indicando en ese extracto el tema principal de la entrada.

Cuando instalé WordPress localmente en mi PC comencé a editar el tema a mi gusto, después de unas horas definiendo colores, logos y estructura general del sitio me decidí a escribir mi primer artículo.

Cuando fui a verla noto que la entrada se mostraba completa en la página principal (Home del sitio) y no sólo el resumen como yo quería.

Leyendo un poco y ayudándome en la gran comunidad que tiene WordPress no tardé mucho en saber que para que se muestre el enlace Leer más en las entradas y que WordPress resuma el contenido se debía insertar un bloque del tipo “Más” o como se conoce mayormente Leer más.

Una vez más fui a ver mi página principal y ahí estaba, mi resumen de entrada estaba bien descriptivo sobre el contenido de mi entrada y al entrar al enlace “Leer más” se cargaba la página completa.

Agregar enlace Leer más mediante función

La mejor forma de agregar este enlace es mediante una función a la cual podremos darle una clase propia para poder personalizar el formato mediante nuestra hoja de estilo CSS.

Vamos a agregar una función que añada un bloque DIV con una clase propia y dentro de esta etiqueta insertaremos una imagen y el texto del artículo, todo esto funcionará como enlace “Leer más” hacia la página de la entrada.

Abrimos el archivo functions.php de nuestro tema activo en WordPress y le agregamos esta función:

// Modifica enlace Leer más
function modify_read_more_link() {
    return '<div class="LeerMas"><img src="' . home_url() . '/IMG/leermas.png"> <a href="' . get_permalink() . '">' . get_the_title() . '</a></div>';
}
add_filter( 'the_content_more_link', 'modify_read_more_link' );

Debemos reemplazar /IMG/leermas.png por la ruta en nuestro servidor donde tengamos almacenada la imagen que se mostrará en el enlace. La ruta del enlace mismo la agrega automáticamente get_permalink() y get_the_title() lo utilizamos para el anchor del enlace y es precisamente el título de la entrada. Vemos como todo está contenido en un <div class=”LeerMas”> el cual podremos usar en la hoja de estilo para personalizar el formato.

Formato del enlace “Leer más”

Al haber creado una clase específica para éste elemento podremos editar su formato directamente en nuestra hoja de estilo CSS. Abrimos el archivo style.css y agregamos en la parte que queramos este código que por supuesto puedes editar como más te guste cambiando los valores o agregando más propiedades para formatear el texto o formato del bloque.

/** Enlace leer mas */
.LeerMas {
	text-align: right;
}
.LeerMas a:hover,
.LeerMas a:focus,
.LeerMas a:active,
.LeerMas a {
	
	font-size: 18px !important;
	color: red !important;
	opacity: 0.7 !important;
	font-family: Montserrat, "Helvetica Neue", sans-serif !important;
		
}

Con la clase LeerMas podemos formatear todo el bloque DIV. En este ejemplo lo alineamos a la derecha. Luego para todos los enlaces dentro de esta clase definimos varias propiedades para personalizar el texto. !important nos sirve para que cualquier otra código que trate de modificar el formato de este enlace no pueda hacerlo.

Propiedad box-shadow

Cuando quise modificar el formato del enlace Leer más (color, tamaño del texto, etc) no tuve problemas, pero al querer sacarle el subrayado fue una verdadera pesadilla. Probé tantas opciones modificando el CSS que llegó un punto que ya no sabía que había cambiado y que no.

Mi gran error fue pensar que el subrayado era generado por el enlace mismo, como casi todos los enlaces que de forma predeterminada se subrayan para indicar que precisamente es un vínculo hacia otra página.

Hasta que por fin di con la opción concreta. Resulta que el subrayado del enlace está puesto por el propiedad box-shadow de la etiqueta A la cual debemos modificar en el CSS de nuestro tema.

Como siempre recomiendo, es mejor que te hagas de un tema HIJO para tu tema principal de WordPress, de esta manera no perderás los cambios cuando el tema “padre” se actualice.

No sabes que es un tema HIJO? Visita,
Como crear un tema hijo en WordPress

La propiedad box-shadow agrega un efecto de sombra a un elemento, en este caso un texto que es utilizado como enlace. Para eliminar cualquier efecto de sombra o subrayado debemos cambiar el valor a none, quedando de esta manera:

/** Enlace leer mas */
.LeerMas a:hover,
.LeerMas a:focus,
.LeerMas a:active,
.LeerMas a {
	
	box-shadow: none;
	
}

Resumen

Vimos Agregar y personalizar formato enlace Leer más

El uso del enlace leer más es muy usado en los blog ya que en ellos, generalmente en la página HOME, se van publicando los artículos más nuevos del sitio y por lo general el formato de la mini entrada o resumen del contenido del artículo principal lo gestiona un CMS como por ejemplo WordPress.

Agregar una función que edite por completo el bloque creado para contener el enlace Leer más nos da la posibilidad de formatearlo como más nos guste, pudiendo agregar imágenes o estilos propios al texto del enlace.

Por lo general el enlace es formateado y personalizado junto con el resto de los vínculos de todo el sitio pero vimos cómo a través de CSS podemos modificar a nuestro gusto las diferentes propiedades de este específico enlace.

Te fue útil el artículo? Califícalo

Votos: - Promedio: