Añadir el botón «Leer más» a la lista de artículos de Sydney

por | 1 Comentario

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.

Suscríbete:

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

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.

Botón leer más en Sydney
Botón «Leer Más» en el tema Sydney

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:

Este sería el aspecto conseguido con este código.

CSS para el botón leer más
Botón con código CSS personalizado

[su_button url=»https://www.ingresosviaweb.com/configurar-tema-sydney-de-wordpress/» style=»flat» background=»#6ab446″ size=»4″ wide=»yes» center=»yes» radius=»0″ icon=»icon: caret-right» rel=»Tutoriales del tema Sydney» title=»Más tutoriales del tema SYDNEY»]Ver más tutoriales del tema SYDNEY[/su_button]


VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

1 Comentario

  1. Fran

    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.

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Más de lo mío en Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Hosting WordPress de SiteGround

¿Quieres estar informado de lo que pasa en IVW?

Suscríbete y te aviso de las novedades

verificarprivacidad

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción. ¡Gracias por suscribirte!

Pin It on Pinterest

Share This
Ir al contenido