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".

20 comentarios:

Cartas de amor dijo...

hola olle disculpa tengo una duda....
cuando pongo el codigo que me pasaste si lo hago todo correctamente...

cuando publico me aparece toda la entrada completa ----> y despues aparece "leer mas" y cuando le das clic en leer mas me manda al articulo, osea mi problema es que no corta el parrafo que yo le indique... me podrias ayudar???

mi correo es : herick.ventas@gmail.com

José M dijo...

Cuando creas una nueva entrada, verás que te aparece:

Texto mostrado antes de "Leer más"

Texto mostrado al pulsar "Leer más"

Sin borrar nada, me refiero a líneas en blanco, sustituye "Texto mostrado antes de leer más" por el texto que quieras que inicialmente se vea en la entrada; y "Texto mostrado al pulsar leer más" sustitúyelo por el texto que continúa con lo anteriormente escrito y que solo será visible, si el usuario hace clic sobre el enlace "Leer más".

Xaos dijo...

Muchas gracias!
Me ha sido de mucha utilidad este post.

Un saludo!

José M dijo...

Gracias Xaos por tu comentario, saludos.

Braulio E. Parra C. dijo...

Sabes igual me aparece el texto completo y al final el leer mas y no me aparece la parte que se entiende solo se mostrara antes de cliquear leer mas

ayudame

gracias

José M dijo...

Hola Braulio,

Cuando creas una nueva entrada, verás que te aparece:

Texto mostrado antes de "Leer más"

Texto mostrado al pulsar "Leer más"

Sin borrar las líneas en blanco que ves que aparecen entre los dos textos, sustituye "Texto mostrado antes de leer más" por el texto que quieras que inicialmente se vea en la entrada; y "Texto mostrado al pulsar leer más" sustitúyelo por el texto que continúa con lo anteriormente escrito y que solo será visible, si el usuario hace clic sobre el enlace "Leer más".

Es muy importante tener en cuenta lo de las líneas en blanco puesto que contienen el código necesario para que esto funcione. Si las borras estarás eliminando ese código y entonces no funcionará.

Cuando publiques la entrada verás en texto que hayas introducido en el primer apartado y cuando hagas clic sobre el texto "leer más" será cuando veas la entrada completa.

JULIO CÉSAR dijo...

me ha funcionado, como bien dices hay que tener cuidado con el espacio en blanco. es preferible en lugar de utilizar la opción redactar, hacerlo con edición html, me resulta mas facil de esta forma.

José M dijo...

Me alegro Julio César que lo hayas conseguido, saludos.

isabel dijo...

Muchas gracias por tu ayuda Jose M, me ha costado un montón, pero al final ha funcionado sólo cuando hago la entrada en html con texto sencillo, luego guardo y voy a editar el texto para ponerlo más bonito (negritas, colores, links, etc).
Supongo que debe ser cosa del tipo de navegador que uses (Mozilla).

Una pregunta: ¿Sabes como poder ordenar las entradas del blog a tu gusto? Se ordenan por fechas y me interesa que la primera entrada que se vea sea otra.
Mil gracias.
Isabel

José M dijo...

Hola Isabel,

te refieres a poner fija una entrada, es decir, que cuando visites tu blog siempre te aparezca esa entrada como la primera?

BAUKASTEN CONSTRUCCIO dijo...

Eps, hola,
no, me refiero a ir metiendo contenido y luego subir o bajar las entradas segun mis prioridaes
gracias

José M dijo...

Ah vale (supongo que eres la misma que antes), entonces solo tienes que cambiar la fecha de publicación de las entradas para ordenarlas a tu gusto e incluso luego puedes ocultar la fecha de las entradas.

BAUKASTEN CONSTRUCCIO dijo...

Hola,
de momento he podido hacerlo cambiando la fecha de la entrada en "Opciones de la entrada", pero me parece un poco tedioso ir haciéndolo cada vez. Ahora tengo pocas entradas.
Gracias y un saludo

José M dijo...

Ya, pero siempre puedes realizarlo a la vez que publiques la entrada

Anónimo dijo...

Muchas gracias José M.por todos tus consejos, tu blog es muy interesante y sobre todo claro y fácil de entender para una novata como yo, creo que lo consultaré más a menudo.
Isabel (o Baukasten, según lo que salga)

José M dijo...

Gracias Isabel por tu comentario, saludos.

Knarf dijo...

Buena tio!! tu si ah me ha servido bastante.. espero poder ayudarte cuando sea necesario... GRACIAS

José M dijo...

gracias Knarf por tu comentario, saludos

Cogedor_barato dijo...

Hey jose. Gracias por el excelente tutorial. Lo hize la primera vez y no me salio asi que revise mil paginas y me interiorize mas con esto de las entradas resumidas. Despues me di cuenta que copie mal una parte del codigo que dejaste :P
asi que todo funciona de 10.

Para que el tuto quede completo, yo te diria que agregues un tip para la edicion en html de los resumenes: cuando redactan la entrada hay que encerrar dentro de los tags *span class="fullpost"* y */span* todo el texto que uno quiere que vaya oculto, es decir, lo que aparece cuando apretamos "leer mas" :)

un saludo

José M dijo...

Gracias Cogedor_barato por tu comentario, tendré en cuenta lo que indicas, un saludo :-)

Publicar un comentario en la entrada

Cualquier comentario que incluya en su contenido la dirección URL de una web o blog será reportado inmediatamente por spam y no será publicado.