Recibe el boletín informativo, todos los lunes, y descarga nuestros ebooks exclusivos.

Cómo crear un área de widgets «after entry» en un tema clásico de WordPress

You can also read this post In English
CREAR-AREAS-WIDGETS-AFTER-ENTRY-PRINCIPAL-1024x576 Cómo crear un área de widgets "after entry" en un tema clásico de WordPress

En este post aprenderás a crear un nuevo área de widgets «after entry» (al final del contenido de la entrada individual) en un tema clásico de WordPress.

Esto resuelve el problema que se podrá dar si quieres añadir a tu blog un botón para compartir en Mastodon y tienes un tema clásico activo que no posee dicho área de widgets «after entry».

¿Cómo creo un nuevo área de widgets en WordPress, para ubicarla al final de cada entrada del blog?

Este apartado (y solo este, en este artículo) ha sido generado automáticamente utilizando ChatGPT. Esto tiene un propósito meramente experimental con el fin de probar el alcance de una herramienta de IA tan sorprendente como ChatGPT. Teniendo en cuenta que ChatGPT puede ocasionalmente generar información incorrecta, producir instrucciones dañinas o contenido sesgado y posee un conocimiento limitado del mundo y los eventos después de 2021, se ha revisado el texto obtenido con el fin de que se ciña técnicamente al funcionamiento de WordPress. Tras este apartado, puedes ver cómo se aplica en la práctica este proceso para añadir un nuevo área de widgets en WordPress.

[Inicio de la respuesta de ChatGPT]

Para crear un nuevo área de widgets en WordPress que se muestre al final de cada entrada del blog, deberás seguir estos pasos:

  1. Abre el archivo functions.php de tu tema de WordPress y agrega una nueva función para registrar el área de widgets. Esta función debería utilizar la función register_sidebar() de WordPress, que toma un conjunto de parámetros para personalizar el área de widgets.
  2. Utiliza la función dynamic_sidebar() de WordPress en el archivo de plantilla de la entrada del blog para mostrar el área de widgets al final de cada entrada.
  3. Personaliza la ubicación y el diseño del área de widgets utilizando la hoja de estilos de tu tema de WordPress.

Aquí hay un ejemplo de cómo podría verse la función para registrar el área de widgets:

function crear_area_widget() {
  register_sidebar( array(
    'name'          => __( 'Mi Área de Widget', 'textdomain' ),
    'id'            => 'mi-area-widget',
    'description'   => __( 'Una descripción de mi área de widget.', 'textdomain' ),
    'before_widget' => '<section id="%1$s" class="widget %2$s">',
    'after_widget'  => '</section>',
    'before_title'  => '<h2 class="widget-title">',
    'after_title'   => '</h2>',
  ) );
}
add_action( 'widgets_init', 'crear_area_widget' );

En este ejemplo, la función crear_area_widget() se utiliza para registrar un área de widget con la función register_sidebar(). Esta función toma una serie de parámetros para personalizar el área de widget, como su nombre, ID y descripción. También se utilizan algunos valores predeterminados para el contenido que se mostrará antes y después del widget, y antes y después del título del widget.

Luego, en el archivo de plantilla de la entrada del blog, utiliza la función dynamic_sidebar() de WordPress para mostrar el área de widgets al final de cada entrada:

if ( is_active_sidebar( 'mi-area-widget' ) ) {
  dynamic_sidebar( 'mi-area-widget' );
}

En este ejemplo, se comprueba si el área de widget está activa en el sitio utilizando la función is_active_sidebar(). Si el área de widget está activa, se utiliza la función dynamic_sidebar() para mostrar el área de widget en la ubicación en la que se llama a la función en el archivo de plantilla.

[Fin de la respuesta de ChatGPT]

Implementación práctica

Hemos instalado el tema clásico Twenty Twenty One en una instalación de WordPress 6.1.1 y utilizando la aplicación Local.

En un tema de bloques (como Twenty Twenty Two o Twenty Twenty Three), que no posee área de widgets, únicamente hay que editar la plantilla correspondiente al post individual e insertar el elemento que se desee. Puede ser un diseño hecho con bloques, un bloque reutilizable, un patrón o, incluso un shortcode asociado a un código HTML o PHP (ver Cómo añadir en tu WordPress un botón de compartir en Mastodon).

Lo primero que hicimos es instalar y activar el plugin Widget Classic. Este plugin, una vez activado, y cuando uses un tema clásico (no de bloques), restaura las pantallas anteriores de ajustes de widgets y desactiva el editor de bloques para la gestión de widgets. No hay ninguna otra configuración, las pantallas clásicas de ajustes de widgets se activan o desactivan activando o desactivando este plugin. Classic Widgets es un plugin oficial mantenido por el equipo de WordPress que restaura las anteriores («clásicas») pantallas de widgets de WordPress. Recibirá soporte y mantenimiento hasta, al menos, 2024 o tanto como sea necesario.

Después, fuimos a «Go to site folder», desde el panel principal de la app Local, y nos dirigimos a «app > public», la carpeta en la que se encuentra la instalación de WordPress en nuestro ordenador.

Después entramos en la carpeta «wp-content > themes» para llegar al contenido del directorio «twentytwentyone». Ahí se abrió el archivo functions.php y pegamos el código para crear el nuevo área de widget after entry:

register_sidebar( array(
	'id'            => 'after-entry',
	'name'          => __( 'After entry', '<textdomain>' ),
	'description'   => __( 'Este área de widgets aparece solo después del contenido en la página individual de los posts', '<textdomain>' ),
	'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
    'after_widget' => '</div>',
) );

(No olvides sustituir <textdomain> por tu propio texto de dominio.)

Una vez realizada la definición dentro de functions.php, el siguiente paso fue incluir la llamada a la función dentro del archivo con la programación del archivo individual. En el caso del tema Twenty-Twenty One, hay que editar el archivo «template-parts > content > content-single» y añadir lo siguiente justo detrás de la instrucción «the_content();» [recuerda añadir un punto y coma después de the_content()]

if ( is_active_sidebar( 'after-entry' ) ) {
  dynamic_sidebar( 'after-entry' );
}

Conclusiones

apariencia-widgets-1024x551 Cómo crear un área de widgets "after entry" en un tema clásico de WordPress

Has aprendido a crear un nuevo área de widgets a tu tema clásico (si es que el desarrollador del tema no lo preparó).

Hemos incluido la explicación teórica automatizada de ChatGPT con el fin de experimentar la experiencia de esta herramienta de inteligencia artificial o máquina de aprendizaje.

Espero tus comentarios.

Comparte en Mastodon:

mastodon Cómo crear un área de widgets "after entry" en un tema clásico de WordPress

Y aún hay más…

Cómo se hace un sitio web

Una revisión a vista de pájaro de todo lo necesario para crear un sitio web de WordPress.

Recursos

La lista de recursos recomendada en Blogpocket.

Mi lista de plugins

La lista de plugins de WordPress recomendada en Blogpocket

UN-BLOG-DE-21-MAS-1-COVER-3D-1024x944 Cómo crear un área de widgets "after entry" en un tema clásico de WordPress

Suscríbete a la newsletter

En la newsletter «WP al día» recopilamos las ideas, trucos y noticias de actualidad acerca de WordPress, Gutenberg y la Edición completa del sitio. Recíbela todos los lunes a primera hora.

Suscríbete ahora y descarga, entre otros, nuestro último ebook «Un blog de 21 años (la historia jamás contada)!.

Deja una respuesta

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

Información básica sobre protección de datos Ver más

  • Responsable: Antonio Cambronero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento: No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a GreenGeeks que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

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

Ir al contenido