Si tiene su sitio de WordPress configurado para mostrar publicaciones como extractos, es probable que se muestre una cantidad determinada de texto seguida de un enlace comúnmente conocido como el enlace «Leer más «.
El propósito de este enlace es ofrecer al usuario un extracto rápido de la publicación para que pueda navegar rápidamente a través de todas las publicaciones recientes en su blog. Hacer esto ofrece más opciones para sus usuarios, proporcionando así una experiencia más rica.
Hoy analizaré la etiqueta » Leer más » dentro de WordPress y te enseñaré cómo personalizarla a tu gusto.
La mayoría de los usos de la etiqueta Leer más se usan junto con la función de extracto de WordPress que muestra una cantidad determinada de palabras/caracteres. De forma predeterminada, WordPress limita esto a una cantidad determinada de palabras, pero pronto le mostraré cómo ajustar esta configuración.
La etiqueta de extracto en WordPress es una pequeña línea de PHP que se ve así:
|
01
|
<?php the_excerpt(); ?> |
Se puede cambiar por the_content()una etiqueta de plantilla cuando sea posible. La mayoría de las veces, tendrá una página de índice de blog que enumera sus publicaciones más recientes. Estas publicaciones pueden usar extractos simplemente intercambiando la etiqueta de plantilla the_content() por la etiqueta de plantilla the_excerpt() .
Si visitas nuestro blog y centras tu atención en un solo post de esa página, verás a lo que me refiero.
Esto es algo que estamos tratando de lograr usando el blog de Elegant Themes como ejemplo.
El texto es un pequeño extracto con un final » … » seguido de un botón titulado Ver publicación completa
Personalización de la etiqueta Leer más
Para comenzar, primero debe asegurarse de tener extractos habilitados dentro del área de administración de su instalación de WordPress.
Dirígete a tu administrador de WordPress e inicia sesión. Navegue hasta el enlace Configuración general a la izquierda y dentro de ese haga clic en Lectura
Cambie la configuración de lectura a resumen en lugar de texto completo.
Debería ver un puñado de configuraciones, pero la que nos preocupa es la sección con la etiqueta Para cada artículo en un feed, mostrar . También puede controlar cuántas publicaciones mostrar en su página de blog. Te lo dejo a ti. Por ahora dejaré esa configuración como está.
Continúe y seleccione Resumen en lugar del botón de radio de texto completo. Con Resumen seleccionado, haga clic en Guardar cambios
De forma predeterminada, algunos temas ya vendrán optimizados para mostrar un extracto en lugar de la configuración de texto completo como se indica en el área de configuración que acabo de describir. Nuestro tema Divi 2.0 es un ejemplo perfecto de esto.
A continuación tengo una instalación simple del tema Divi. Generé contenido falso para mostrar cómo se verá un blog activo usando nuestro tema. El tuyo puede parecer un poco diferente, especialmente si estás usando un tema diferente.
Me gusta cómo se ven las publicaciones, pero me gustaría incluir un botón al final de cada publicación similar a lo que ves en nuestro propio blog. Esto deja en claro al usuario que puede ver la publicación completa haciendo clic en el botón «leer más».
Para hacer esto, necesitamos sumergirnos en el código de nuestro sitio. Abre tu tema activo dentro de un editor de código. Estoy usando sublime text 2 con el tema Divi que se muestra a continuación:
Nuestro tema Divi 2.0 se abrió en un editor de código.
Tengo el index.phparchivo abierto. Dentro hay un código que genera lo que ves en la página de tu blog. Para el tema Divi está sucediendo bastante, pero lo básico sigue ahí. Donde queremos centrar nuestra atención es la sección que se ve así:
Modificar the_content() etiqueta
Si nunca ha tocado el código dentro de Divi, puede consultar los números de línea cuando busque dentro de su propio index.phparchivo. Esto solo se aplicará a aquellos de ustedes que usen Divi. Los números de línea 50-57 serán los que modificaremos.
Cambiemos el código para que sea the_excerpt()en lugar de the_content(), junto con la función personalizada.
Aquí está el bloque de código actualizado. Por motivos de legibilidad y seguridad, acabo de comentar el código que no estamos usando.
Aquí cambiamos nuestro código para incluir solo the_excerpt()la etiqueta
Si guarda los cambios y regresa a su sitio, probablemente no verá ninguna diferencia. Todavía necesitamos modificar la funcionalidad predeterminada de the_excerpt().
Necesitamos agregar el texto del enlace al final de cada extracto. Para hacer esto, necesitamos trabajar dentro de un archivo diferente llamado functions.php. Encuéntrelo y ábralo dentro de su editor de código.
Desplácese hasta el final y agregue este bloque de código PHP:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
/* Modify the read more link on the_excerpt() */function et_excerpt_length($length) { return 220;}add_filter('excerpt_length', 'et_excerpt_length');/* Add a link to the end of our excerpt contained in a div for styling purposes and to break to a new line on the page.*/function et_excerpt_more($more) { global $post; return '<div class="view-full-post"><a href="'. get_permalink($post->ID) . '" class="view-full-post-btn">View Full Post</a></div>;';}add_filter('excerpt_more', 'et_excerpt_more'); |
Las primeras 4 líneas anteriores forman una función personalizada para controlar la cantidad de palabras que aparecen dentro de cada extracto en una publicación de blog. Se define una función y luego se agrega un filtro para establecer (ejecutar) la función. Como parte de la API de WordPress, apuntamos a la excerpt_lengthfunción para optimizar nuestra publicación para que no tenga más de 220 caracteres.
La segunda función personaliza el enlace Leer más anulando el valor predeterminado de WordPress. Aquí he agregado un enlace contenido dentro de un div para que podamos diseñarlo. Pasaré al estilo en un momento, pero con este código en su lugar y guardado, puede dirigirse a su sitio y, con suerte, ver algo similar a lo que tengo.
Nuestros extractos de cada publicación de blog han sido modificados por nuestra función.
El estilo CSS predeterminado de un enlace y una publicación se representa automáticamente con nuestro tema Divi 2.0, por lo que solo queda un poco de trabajo por hacer para convertir el enlace en un botón.
Le dimos al enlace ancla dentro de nuestro archivo functions.php una clase de view-full-post-btn. Con esto, agregaré algo de CSS para orientar el enlace. Agregue el CSS a continuación al style.cssarchivo dentro de su tema para personalizar nuestro enlace. No importa dónde lo agregue, pero agregarlo en un área memorable a la que pueda hacer referencia en el futuro siempre es una buena idea.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
|
.view-full-post-btn{ display:inline-block; /*border-radius*/ -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; padding:8px 16px; margin-top:10px; color:#454545; border:1px solid #d8dcdc; font-family:Georgia,serif; font-style:italic; font-size:16px;}.view-full-post-btn:hover{ background:#454545; /*transition*/ -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease; transition:all .3s ease; border:1px solid #000000; color:#FFFFFF;} |
Después de agregar los estilos, ahora tengo un botón bastante atractivo con un estado de desplazamiento invertido.
El estado predeterminado de nuestro botón Ver publicación completa .
El estado activo o activo de nuestro botón Ver publicación completa .
En lugar de tener nuestro botón alineado a la izquierda, vayamos un paso más allá y flote hacia el lado derecho del contenedor. También necesitamos modificar algunos márgenes dentro de cada una de nuestras publicaciones. Agregue el siguiente código a su style.cssarchivo.
|
01
02
03
04
05
06
07
08
|
.et_pb_post { margin-bottom: 100px; border-top: 1px solid #e1e1e1;}.et_pb_post:first-of-type { border-top: none;}.view-full-post { float: right; } |
Con todos estos estilos en su lugar, ahora debería ver un resultado final completamente funcional. Cada botón hará clic en su publicación de blog, lo que permitirá a sus usuarios leer la publicación completa.
Nuestra etiqueta de leer más ha sido implementada con éxito.
Conclusión
Agregar mejoras como la etiqueta Leer más de WordPress ayuda a sus usuarios a navegar más fácilmente por su blog. Mantener la información organizada y resumida cuando corresponda ayudará a que su blog sea más legible que nunca. El uso de la funcionalidad de extractos integrada en WordPress es una excelente manera de hacer que su contenido sea más digerible. Con un poco de esfuerzo y un poco de estilo, puede lograr lo que he cubierto en este tutorial en muy poco tiempo.
Imagen destacada a través del autor de Shutterstock jesadaphorn