Entradas resumidas en blog

En más de una ocasión, habréis visto al visitar algún blog que, en la página principal de éste, las entradas no se muestran completamente y aparece un enlace con el texto "Leer más" (o similar) para acceder a la lectura completa del artículo.

En esta nueva entrada del blog veremos cómo realizar esto. De esta forma podremos mostrar varias entradas en nuestra página principal con parte del artículo y, si el usuario está interesado, hará clic en el enlace "Leer más" para visualizar el artículo completo.

En primer lugar, accedemos a la ficha Diseño -> Edición de HTML.

Como siempre digo, antes de realizar cualquier cambio en la plantilla, haced una copia de seguridad de la misma.

A continuación, activamos la casilla Expandir plantillas de artilugios y buscamos la siguiente línea de código:

<div class='post-body entry-content'>

Por la diversidad de plantillas os dejaré una posible variación de esta línea de código:

<div class='post-body'>

Quiero decir con esto que si buscamos la primera línea de código y no aparece en nuestra plantilla, buscaremos la segunda puesto que debe haber al menos una de las dos en el código.

Una vez hayamos localizado cualquiera de las dos líneas anteriores, pegaremos el siguiente código justo debajo del código citado anteriormente:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

A continuación, buscaremos esta línea:

<data:post.body/>

Aqui destacaré que en primer lugar encuentra esta línea de código <p><data:post.body/></p> pero no es la que estamos buscando, puesto que si nos fijamos un poco es la que hemos pegado en el código anterior.
Seguimos buscando y encontrará una segunda, ésta si es la que estamos buscando en esta ocasión.

Una vez localizada, justo después de la línea de código pegamos lo siguiente:

<a expr:href='data:post.url'>Leer más...</a>
</b:if>

Con esto habremos acabado las modificaciones que tenemos que hacer en el código de la plantilla, por lo que procederemos a guardar los cambios efectuados.

Para terminar con esto, accedemos a la ficha Configuración -> Formato y, en el apartado Plantilla de entrada, pegamos lo siguiente:

Texto mostrado antes de "Leer más"
<span class="fullpost">
Texto mostrado al pulsar "Leer más"
</span>

Guardamos de nuevo los cambios, y ya podemos visualizar los resultados.

Antes de terminar, quiero hacer dos aclaraciones.

Al crear una nueva entrada en nuestro blog, veremos como aparece dos líneas de texto:

Texto mostrado antes de "Leer más"

Texto mostrado al pulsar "Leer más"

Esto se debe al código que hemos incluido en el apartado Plantilla de entrada. Esto es solo una ayuda para saber el texto que queremos que sea visualizado en la página principal y el texto posterior al hacer clic en el enlace "Leer más".

La segunda aclaración, es que en las entradas que tengamos creadas con anterioridad a la introducción de este código no será aplicable lo de entradas resumidas, puesto que el texto que tenemos en las entradas está en la zona Texto mostrado antes de "Leer más".