Webtips

Al escribir una nueva entrada en WordPress, podemos hacer que en la página principal del blog aparezca sólo parte del artículo de dos formas distintas. La primera es usar el extracto (o excerpt) y la segunda es usar la etiqueta <!––more––> en el texto del artículo. Luego tendremos que editar el archivo index.php de nuestro theme y usar the_excerpt() o the_content() según la técnica que hayamos elegido.

Si usamos la segunda opción, WordPress mostrará en la página principal todo el texto del artículo hasta donde hayamos colocado la etiqueta <!––more––> y, a continuación, creará automáticamente un enlace para leer el resto del artículo. ¿Cómo podemos personalizar este enlace?

Cambiar el texto del enlace

Para cambiar el texto del enlace, simplemente hay que pasarle el nuevo texto como parámetro a la función the_content(). Por ejemplo:

1

the_content("Leer más");

También podemos usar etiquetas HTML en el texto del enlace:

1

the_content("<span>Leer más</span>");

E incluso podemos hacer que en cada post el enlace tenga un texto diferente sin modificar el código PHP:

1

<span id="more-458"></span>

Dar estilos al enlace

El enlace que crea automáticamente WordPress lleva la clase more-link por defecto, así que podremos abrir el archivo styles.css de nuestro theme y añadir algo como:

1
2
3

.more-link{
  /* estilos del enlace */
}

En mi caso, quería tener el botón a la derecha. La solución más intuitiva es añadir float:right al estilo del enlace, pero el resultado no fue el esperado ya que se superponía a algunos elementos del post. Así que decidí meter el enlace en un contenedor (<div> o <p>) con una altura determinada, y que el enlace flotase dentro de ese contenedor. Dado que el enlace es generado automáticamente, ¿cómo podemos hacer esto sin tocar los ficheros del motor de WordPress?

Incrustar el enlace en un contenedor

Si no queremos tocar el core de WordPress, lo mejor es usar un filtro para modificar el enlace que se genera automáticamente.

Abrimos el fichero functions.php de nuestro theme (si no existe, lo creamos) y añadimos el siguiente código:

1
2
3
4
5
6

function editMoreLink($link) {
    $link = '<p class="more-container">'.$link.'</p>';
    return $link;
}
 
add_filter('the_content_more_link', 'editMoreLink');

¿Qué hace esto exactamente?

En la línea 6 creamos el filtro, usando el hook the_content_more_link, que ejecutará la función editMoreLink (es un nombre inventado por mí, puedes usar el que quieras) cuando se vaya a generar el enlace para «leer más».

En la función, que toma como parámetro el propio enlace, lo único que hacemos es añadirle un <p> (también podría ser otro elemento, como un <div>) y retornamos la cadena compuesta. La clase more-container también es inventada y puedes usar la que sea.

Al final, podremos estilar el contenedor y el enlace de la siguiente forma:

1
2
3
4
5
6
7

.more-container {
   /* estilos del contenedor */
}
 
.more-link {
  /* estilos del enlace */
}

Si le añadimos el estilo float:right al enlace, flotará dentro del contenedor y no dentro de todo el post como pasaba antes, y podremos controlar la altura del contenedor y el tamaño del botón. También podemos mantener el enlace como elemento de línea y añadir el estilo text-align:right al contenedor.