Algunos temas traen desactivado el botón "Leer Más" por defecto de las listas de los artículos o post. Para algunos usuarios es posible tener que mostrarles la opción más directa al artículo completo para que no se pierdan dónde tienen que picar.
Antes de modificar el archivo "funtions.php", es necesario crear y activar un tema hijo para no perder los cambios que hagamos con las futuras actualizaciones. La forma más rápida de crear un tema hijo es utilizando un plugin como "Child Theme Configurator". Si queréis ver un vídeo de cómo se crea un Child Theme, podéis acudir al vídeo donde explico cómo modificar los créditos del footer .
Añadir el botón LEER MÁS en Sydeny
Con el tema hijo activo, tenemos que editar el archivo "funtions.php" y añadir una función PHP que reactive la opción del botón. Fijaros bien que el código lo pegáis en el archivo del tema hijo y no en el tema padre o principal.
La edición del archivo se hace desde la administración de WordPress, en la pestaña "Apariencia > Editor".
1 2 3 4 5 | function ivw_custom_excerpt_more( $output ) { return $output . '<a href="'. esc_url( get_permalink() ) . '" class="roll-button">' . esc_html__( 'Leer Más', 'Sydney' ) . '</a>'; } add_filter( 'the_excerpt', 'ivw_custom_excerpt_more' ); |
El texto "Leer más" del botón podemos cambiarlo y colocar el que nosotros queramos, siempre respetando las comillas que preceden y cierran el texto.
Cuando abramos la parte frontal, y accedamos a la lista de artículos, podremos ver el botón activo y con las propiedades del tema.
Modificar el código para otros temas
El código anterior no es único de Sydney, se puede utilizar para otros temas que hayan eliminado el botón "Leer Más" de su configuración.
En el vídeo muestro cómo localizar la etiqueta que necesitamos para cambiar el estilo CSS y adaptarlo al aspecto del tema en concreto. Sustituyendo el nombre que aparece entrecomillado en la propiedad class="nombre de la etiqueta", y colocando el que tiene el tema asignado, conseguiremos nuestro propósito.
WordPress tiene asignado un nombre por defecto a esta clase CSS, en el caso de que sólo esté oculto el botón y no hayan eliminado la configuración del código, podemos colocar el nombre "read-more".
Pero la parte más importante es asignar el cambio de la función al tema que estamos utilizando. Para averiguar el nombre exacto que tiene asignado el tema, podemos editar el archivo "style.css" y mirar en la cabecera del código el apartado donde pone "Theme Name:". Ese nombre lo colocamos entre las comillas que hay después del texto del botón.
Aplicar un estilo diferente al botón "Leer Más"
Qué pasa si queremos modificar el aspecto del botón de una forma más personal. Para esto tenemos que añadir un nombre más al apartado de la clase de la etiqueta HTML. Dejaremos un espacio entre los nombres de las clases, para que pueda recuperar el aspecto inicial, en el caso que queramos dejar de utilizar el estilo personalizado en algún momento.
El nombre puede ser cualquiera que nos inventemos, pero tiene que ser una palabra seguida, sin espacios ni caracteres especiales. En la parte final del vídeo podéis ver qué nombre he utilizado y cómo lo he añadido al código anterior.
El aspecto del botón lo cambiaremos en la pestaña "CSS adicional" del personalizador de WordPress. Donde colocaremos el código que más se adapte a lo que queremos conseguir.
No voy a entrar en explicar cómo funciona o se aplica el código CSS, pero os dejo el que muestro en el vídeo para el que lo quiera utilizar. Suponiendo que el nombre que asigno al nuevo estilo fuese "aspectoboton", el código sería este:
1 2 3 4 5 | .aspectoboton { padding: 5px 10px; width: 100%; text-align: center; } |
Este sería el aspecto conseguido con este código.
Tutoriales del tema SYDNEY con Page Builder- Cambiar las fuentes tipográficas de Sydney
- Resetear WordPress a los valores de inicio de instalación
- Activar los puntos suspensivos de los extractos del blog
- Personalizar el menú de WordPress usando Extra de ejemplo
- Configuracion de los widgets del pie de página
Hola,
Muy buen articulo.
En mi caso necesito incluir un "leer mas" en las descripciones de las categorías de producto de Woocommerce y no se que código debo añadir. Mi tema es: Online Shop
Puedes ayudarme?
Gracias de antemano por tus colaboración desinteresada.