Los widgets de WordPress son increíblemente útiles. Le permiten añadir todo tipo de contenido extra a su sitio web fuera del cuerpo del mensaje o de la página misma, animando a los usuarios a obtener información, seguir los enlaces o tomar medidas.
En este post, voy a mostrarles todo lo que necesitan saber sobre los widgets de WordPress. ¿Cómo añadirlos a su sitio, cómo crear áreas de widgets para colocarlos, cómo instalar plugins que le proporcionen más, cómo codificar sus propios widgets y mucho más?
Primero, empecemos por identificar qué son los widgets de WordPress.
¿Qué son los widgets de WordPress?
En WordPress, los widgets son fragmentos de contenido que viven fuera del flujo de la página o del contenido de la publicación.
Los widgets contienen información, navegación o medios de comunicación que están separados de una entrada o página individual. En la mayoría de los casos, cada widget se mostrará en todas las páginas del sitio, pero también se pueden registrar áreas de widgets para páginas específicas, como la página de inicio.
Para añadir un widget a su sitio, debe agregarlo a un área de widgets. Los áreas de widgets son creadas por su tema porque se relacionan con el diseño y la disposición de su sitio y no con la funcionalidad.
La mayoría de los temas de WordPress tienen áreas de widgets en la barra lateral y en el pie de página, aunque algunos tendrán múltiples áreas de widgets en muchos lugares, como debajo o encima del contenido o en el encabezado.
La siguiente captura de pantalla, de uno de mis propios sitios, muestra los widgets en la barra lateral y el pie de página.
WordPress viene con un montón de widgets precargados para que pueda usarlos sin tener que instalar ningún plugin o escribir ningún código. Pero también puede añadir muchos más widgets instalando plugins o codificando los suyos.
Estos pueden abarcar una amplia gama de tipos de contenido, tales como medios de comunicación, fuentes de medios sociales, navegación, búsqueda, mapas y mucho más. Hay muy pocas cosas que quiera en su sitio web para las que no pueda encontrar un widget De hecho sin exagerar, el mayor desafío es a menudo elegir entre todas las opciones .
¿Cuándo usar los widgets de WordPress?
Debería usar un widget siempre que quiera añadir contenido extra a una o más páginas de su sitio (y cuando digo página, incluyo posts, archivos, etc.), pero eso no es parte del contenido de esa página. Son particularmente útiles para el contenido que quiere mostrar en cada página del sitio, como una lista de sus últimas publicaciones, un carrito de compras o un botón de llamada a la acción.
Piense en cuántos usuarios necesitarán acceder a cada widget y cuán importante es cuando decida dónde colocarlo. Los widgets en la barra lateral serán más prominentes que los del pie de página, que algunos usuarios pueden incluso no ver.
Por lo tanto, un widget de últimas publicaciones o un widget de llamada a la acción podría estar mejor en la barra lateral donde la gente tiene más posibilidades de interactuar con ellos, mientras que un feed de medios sociales podría ir en el pie de página.
Si su tema también tiene áreas de widgets especiales para la página de inicio, puede que quiera usarlas para navegar por los departamentos de su sitio, listas de contenido relevante o medios como un vídeo de bienvenida a la gente del sitio.
11 Ejemplos de widgets en WordPress
La mejor manera de entender las posibilidades que ofrecen los widgets de WordPress es mirando algunos ejemplos de ellos. Echemos un vistazo a los once tipos de widgets que verá con frecuencia en los sitios de WordPress.
1. Widget de mensajes recientes
El widget de Mensajes Recientes es posiblemente el más utilizado en los blogs.
Le permite mostrar una lista de sus publicaciones más recientes en la barra lateral o en el pie de cada página de su sitio, lo que aumenta la posibilidad de que la gente navegue por el sitio y lea una serie de publicaciones.
El widget Recent Posts viene preinstalado con WordPress. Le permite establecer cuántos mensajes quiere mostrar y qué encabezamiento quiere darle al widget.
Si quiere añadir una funcionalidad extra, puede instalar un plugin para un widget alternativo como WordPress Popular Posts, que muestra el contenido más popular. Alternativamente, el widget Advanced Random Posts se actualiza cada vez que el usuario visita una nueva pantalla.
2. Widget de Comentarios recientes
¿Quiere mostrar a los visitantes lo vibrante que es su sitio y lo mucho que su público se compromete con su contenido?
El widget Comentarios recientes muestra los últimos comentarios en su sitio, dando a los visitantes la oportunidad de navegar directamente a esos comentarios y unirse a la discusión.
El widget Comentarios recientes viene con WordPress. De nuevo, si quieres añadir funcionalidad extra puedes instalar un plugin de comentarios de terceros como el widget WP Social Comments que permite a la gente comentar usando su cuenta de Facebook: bueno para la participación en los medios sociales.
3. Widgets de llamada a la acción
Un gran uso de un widget es animar a la gente a actuar, y puede hacerlo con un widget de llamada a la acción.
Su widget puede ser un simple botón, o puede crear algo más personalizado usando un widget de texto o un widget de HTML, o incluso un widget de imagen, todos los cuales vienen preinstalados con WordPress.
En uno de mis propios sitios, he creado un widget de llamada a la acción que anima a la gente a inscribirse en mi lista de correo. Esto utiliza el widget HTML incorporado en el que he incluido una imagen, algo de texto y un botón que he codificado en HTML.
4. Widgets de navegación
También puede usar widgets para animar a la gente a navegar por su sitio.
Hay algunas opciones para esto: los widgets de Categorías o Nube de Etiquetas y el widget del Menú de Navegación.
El widget Menú de navegación le permite crear un menú de navegación personalizado, así como el menú de navegación principal de su sitio, y luego agregarlo a un área de widgets.
Incluso puede añadir su menú de navegación principal a un área de widgets, aunque esto sólo funcionará si tiene un menú de navegación pequeño.
Añadir un menú de navegación al pie de su sitio animará a la gente que llegue al final de un post a navegar por su sitio. Es particularmente útil para los usuarios de móviles que pueden tener que desplazarse mucho para volver al menú principal de navegación después de llegar al final de un mensaje.
Alternativamente, puede usar el widget incorporado de Categorías para mostrar una lista de las categorías de su sitio, o el widget de Nube de etiquetas para facilitar a la gente el acceso a los archivos de etiquetas.
5. Widgets de los medios de comunicación
Añadir medios de comunicación a su barra lateral o pie de página le dará vida a su sitio y proporcionará a los usuarios algo que ver o interactuar.
Puede usar el widget Imagen incorporado para mostrar cualquier imagen en la barra lateral o en el pie de página, y le permite convertir esa imagen en un enlace también.
Alternativamente, el widget de vídeo le permite transmitir vídeo de YouTube o Vimeo directamente en el área del widget de su sitio. Esto es particularmente útil si su sitio tiene áreas de widgets especiales para la página de inicio, pero también puede ser bueno en el pie de página como una forma de captar la atención de la gente cuando llega al final de un post.
6. Widgets de medios sociales
Si desea relacionarse con las personas que visitan su sitio web a través de los medios sociales, al agregar la alimentación de los medios sociales a la barra lateral o al pie de su sitio, mostrará a la gente que usted es activo en los medios sociales y los alentará a que le gusten o le sigan.
Una forma de acceder a los widgets de medios sociales para las plataformas más grandes (Facebook, Twitter, Instagram) es instalar el plugin Jetpack, que incluye todo esto y mucho más.
Alternativamente, todas las plataformas de medios sociales tienen sus propios plugins, disponibles gratuitamente a través del directorio de plugins. O puedes encontrar plugins de terceros que te permitirán personalizar la forma de mostrar tu feed de medios sociales.
7. Widget de la cesta de la compra
Si tiene una tienda de comercio electrónico en su sitio usando un plugin como WooCommerce, es una buena idea incluir un widget de carrito para que los usuarios puedan navegar fácilmente a su carrito dondequiera que estén en la tienda.
Podría poner esto en la barra lateral donde la gente pueda verlo fácilmente, o en el encabezado para una mayor visibilidad si su tema incluye un área de widgets allí.
Los plugins de comercio electrónico como WooCommerce incluyen widgets de carrito de compras y otros widgets de comercio electrónico como parte del plugin, por lo que una vez que haya añadido el comercio electrónico a su sitio, los encontrarás añadidos a su pantalla de Widgets.
8. Widget de formulario
Si quiere que la gente se ponga en contacto con usted, haga preguntas o se inscriba en una lista de correo, puede añadir un formulario a su barra lateral.
No se incluye un widget de formulario con WordPress, pero puedes añadir plugins para proporcionarlos, como el gratuito Contact Form 7 o el premium pero muy potente Gravity Forms.
9. Widget de Google Maps
Si su negocio está basado en un lugar físico y quiere que la gente pueda encontrarlo fácilmente, añadir un widget de mapa a su sitio le ayudará.
Hay varios plugins gratuitos de Google Maps que puede usar, como el plugin WP Google Maps.
Alternativamente, si no quiere instalar un plugin, puede tomar el código de incrustación de Google Maps y añadirlo a un widget HTML.
10. Widget de acceso
Si tiene un sitio de miembros, un widget de inicio de sesión facilitará a la gente el acceso a su sitio sin tener que ir a una página de inicio de sesión separada.
El Meta widget que viene con WordPress incluye un enlace de acceso pero también incluye otras cosas que puede que no quiera, así que le recomendaría usar un plugin separado para esto del directorio de plugins.
El widget Iniciar sesión con el widget de Ajax le da un formulario de inicio de sesión en su widget, lo que significa que la gente puede iniciar sesión en su sitio desde cualquier página.
11. Widget de búsqueda
Un widget muy simple pero increíblemente útil es el widget de Búsqueda, que viene precargado con WordPress.
Añada esto a su barra lateral o al encabezado y facilitará que la gente encuentre cosas en su sitio.
Si quiere aumentar la potencia de su widget de búsqueda, puede instalar el widget gratuito WP Google Search, que utiliza la búsqueda de Google.
¿Cómo añadir widgets a su sitio de WordPress?
Una vez que haya decidido qué tipo de widgets necesita para su sitio de WordPress, es hora de instalarlos.
No esté tentado de añadir demasiados. Cuantos más haya, menos probable es que los usuarios los noten. En su lugar, enfóquese en dos o tres widgets clave para la barra lateral. Puede añadir más al pie de página, donde son menos importantes de todos modos.
Y si tiene algún área extra de widgets en su tema, decida qué widgets poner en ella. Asegúrese de que encajan con la disposición y el diseño de su sitio.
Hay tres formas de añadir widgets:
- Use los widgets que ya vienen con WordPress.
- Añada un widget de terceros desde el directorio de plugins.
- Compre un plugin premium que incluya un widget.
Encontrar Widgets para su sitio de WordPress
Hay una gran variedad de widgets disponibles, por lo que puede ser difícil elegir cuál instalar. Echemos un vistazo a las opciones y luego examinemos cómo podría elegir la mejor para usted.
Los widgets que vienen con WordPress
Si uno de los widgets preinstalados es lo que usted necesita, entonces use eso. Le ahorrará tiempo y significará menos código ejecutándose en su sitio.
Los widgets preinstalados son:
- Archivos: enlace a los archivos por mes, diseñado para los blogs pero bastante anticuado ahora.
- Calendario: un calendario de sus entradas, también adecuado para blogs, especialmente si el suyo es sensible al tiempo (pero no tan común en estos días).
- HTML personalizado: lo último en flexibilidad, añada el contenido que quiera escribiendo o pegando en el HTML (como los formularios de Google). Evite si no se siente cómodo con la codificación.
- Imagen: muestra una imagen de su biblioteca multimedia.
- Menú de navegación: muestra el menú de navegación principal o uno separado que crea.
- Comentarios recientes: una lista de comentarios recientes con enlaces a ellos.
- Nube de etiquetas: una lista de etiquetas en formato de nube, con enlaces a los archivos relevantes.
- Video: incrustar un video de YouTube o cualquier otro servicio de streaming.
- Audio: incrustar un podcast, un reproductor, una canción u otros clips de audio (sugerido: ¿Cómo iniciar un podcast usando WordPress?).
- Categorías: una lista de las categorías de su blog, con enlaces a las páginas de los archivos.
- Galería: más avanzada que el widget de imágenes, muestra una galería de imágenes.
- Meta: metadatos como enlaces de acceso y fuentes RSS. Una resaca de los primeros días de WordPress y no muy útil ahora.
- Páginas: muestra una lista de las páginas de su sitio con enlaces.
- Mensajes recientes: muestra una lista de sus mensajes más recientes para animar a la gente a leerlos.
- Búsqueda: un simple cuadro de búsqueda.
- Texto: cualquier texto que quieras añadir, como información sobre el sitio.
Añadir Widgets con un Plugin
El directorio de plugins de WordPress tiene miles de plugins de widgets gratuitos que le permitirán elegir entre más widgets.
Además de eso, muchos otros plugins también incluyen widgets, como un plugin de comercio electrónico que le da un widget de carrito y más.
Si el directorio de plugins no tiene el plugin que necesita, puede decidir añadir un plugin premium. A veces estos ofrecerán más funciones o una interfaz más intuitiva. Pero a veces encontrará las mismas características en un plugin gratuito, así que haga una buena búsqueda en el directorio de plugins antes de pagar por ellos.
¿Cómo encontrar el widget adecuado para su sitio?
Para encontrar el widget de WordPress adecuado, sigua estos consejos:
- Identifique exactamente lo que necesita del widget. ¿Qué funcionalidad necesita tener y cómo quiere que se vea? ¿Necesita enlazar con alguna API de terceros?
- Revis los widgets incorporados para ver si hay alguno que se ajuste a sus necesidades. Pruebe las que sean relevantes, si encuentra una adecuada, eso es genial. Si no…
- Revise el directorio de plugins, al que puede acceder a través de Plugins > Add New. Intente buscar más de un término para encontrar el plugin adecuado, y busque con y sin la palabra ‘widget’. A veces un plugin que no se centra en los widgets incluirá un widget como parte de un conjunto más amplio de características.
- Si no encuentra nada adecuado entre los plugins gratuitos, busque un premium plugin. Pídale a otros usuarios de WordPress recomendaciones y mire las reseñas antes de elegir una.
Sea cual sea el widget que elija, tendrá que probarlo para comprobar que funciona como usted quiera. Si está comprando plugins premium, le recomiendo que compre uno con garantía de devolución de dinero o un periodo de prueba gratuito en caso de que no sea el adecuado.
¿Cómo añadir widgets a la barra lateral y al pie de página en WordPress?
Ahora que ha elegido su widget, es hora de añadirlo a su sitio.
Puede añadir widgets a cualquier área de widgets activa proporcionada por su tema. Si su tema no tiene un área de widgets en el lugar donde quiere, intente buscar un tema alternativo.
Más tarde en este post le mostraré cómo codificar su propio área de widgets.
Hay dos formas de añadir widgets a su sitio:
- Usando el Personalizador. Vaya a Apariencia > Personalizar > Widgets en el menú de administración, o a Personalizar > Widgets en la barra de administración en la parte superior de la pantalla.
- A través de la pantalla de administración de Widgets. Vaya a Apariencia > Widgets en el menú de administración, o en la barra de administración, haga clic en Personalizar > Widgets.
Le mostraré cómo usar ambos métodos en breve, pero primero echemos un vistazo a las áreas de los widgets y por qué hace los que hace con Su tema.
Los widgets no son sólo para la barra lateral
Dependiendo del tema de WordPress, puede que tenga áreas de widgets en varios lugares.
La mayoría de los temas tienen áreas de widgets en la barra lateral y en el pie de página. Pero algunos también los tienen en otros lugares, como debajo o encima del contenido o en el encabezado.
Si va a la pantalla de configuración de los widgets en el administrador de WordPress, podrá ver todas las áreas de los widgets de su tema.
Utilizo un tema con múltiples áreas de widgets en muchos lugares. En la captura de pantalla que aparece a continuación se puede ver que hay áreas de widgets por encima y por debajo del contenido, en el encabezado, debajo del pie de página principal.
Si quiere añadir widgets a otros lugares de su sitio, tiene sentido encontrar un tema que tenga varias áreas de widgets. La mejor manera de hacerlo es utilizar un tema marco.
Un buen ejemplo de un widget en un lugar de su tema que no es la barra lateral o el pie de página es añadir una barra de búsqueda en el encabezado como la que tengo en uno de mis sitios web.
Áreas y temas de los widgets
Las áreas de los widgets se codifican en los archivos de plantillas de temas, así como en el archivo de funciones de temas.
Aquí puede ver el código que he usado en mi archivo de funciones temáticas para añadir un área de widgets que irá en el encabezado.
register_sidebar( array(
'name' => __( 'In Header Widget Area', 'rmccollin' ),
'id' => 'in-header-widget-area',
'description' => __( 'A widget area located to the right hand side of the header, next to the site title and description.', 'rmccollin' ),
'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );Y aquí está el código en mi archivo header.php que añade esa área de widgets en el lugar correcto del tema.
if ( is_active_sidebar( 'in-header-widget-area' ) ) { ?>
<aside class="in-header widget-area right" role="complementary">
<?php dynamic_sidebar( 'in-header-widget-area' ); ?>
</aside>
<?php }Si quiere añadir áreas de widgets adicionales en su tema, necesita añadir el mismo tipo de código. Le mostraré cómo hacer esto más tarde en este post.
No olvide que si su tema no tiene tantas áreas de widgets como le gustaría, siempre puede hacer una de dos cosas:
- Encuentre un tema que tenga áreas de widgets donde quiera.
- Codifique la nueva área del widget en su tema o en un tema hijode su tema.
Una vez que tenga áreas de widgets en todos los lugares de su tema, puede empezar a añadirles widgets.
¿Cómo usar la pantalla de Widgets para añadir Widgets?
Hay dos maneras de añadir widgets a su sitio de WordPress. La primera es usar la pantalla de Widgets en el administrador de WordPress.
Haga clic en Apariencia > Widgets. Esto hace que aparezca la pantalla de widgets.
Para añadir un widget puede hacer una de dos cosas:
- Arrástralo desde la lista de widgets de la izquierda al área de widgets correspondiente.
- Haga clic en el widget que quieras añadir y verá una lista de los lugares donde podría añadirlo. Seleccione el área del widget que desee y haga clic en el botón Añadir Widget.
Es posible que tenga que editar la posición del widget dentro del área del mismo.
Puede añadir tantos widgets como quiera a cada área de widgets, pero no se pase de la raya. Puede arrastrarlos dentro del área del widget para ponerlos en el orden correcto. También puede arrastrarlos de un área de widgets a otra si decide que no le gusta su aspecto.
También puede usar el teclado para añadir widgets mediante la pantalla de Widgets, de modo que si no tiene acceso a un ratón, puede seguir añadiendo widgets.
Añadir y editar widgets en modo de accesibilidad
Si no puede usar un ratón, puede usar la pantalla de Widgets con un teclado.
En primer lugar, ponga la pantalla en modo de accesibilidad haciendo clic en (o pulsando y seleccionando) el enlace Activar el modo de accesibilidad en la parte superior derecha de la pantalla.
La pantalla cambiará entonces para reflejar el hecho de que estás en modo de accesibilidad.
A continuación, puede navegar entre los elementos de la pantalla utilizando la tecla Tab del teclado y pulsar Intro para seleccionar un elemento y actuar sobre él. Puede tabular a un widget, pulsar Return en el enlace Añadir y luego elegir dónde quiere añadirlo, o bien tabular al área del widget y pulsar Return en el enlace Editar.
¿Cómo usar el personalizador de WordPress para añadir widgets?
El uso del Personalizador para agregar widgets en lugar de la pantalla de widgets significa que puede ver sus widgets a medida que los agrega. Esto hace que sea más fácil ver cómo se verán sus widgets y moverlos entre las áreas de los mismos si quiere.
En el menú de administración, haga clic en Apariencia > Personalizar. Alternativamente, desde la barra de administración en la parte superior de la pantalla del sitio en vivo (suponiendo que estés conectado), sólo tiene que hacer clic en Personalizar. Esto abrirá el Personalizador.
Ahora haga clic en la opción Widgets y verá una lista de todas las áreas de widgets de su tema. Haga clic en el área de la aplicación en la que desea añadir un widget y haga clic en el botón Añadir un widget.
Esto le da una lista de todos los widgets disponibles para su sitio. Eso incluye todos los widgets incorporados que vienen con WordPress más cualquier widget que haya añadido mediante plugins.
Elija el widget que quiera añadir a esa zona de widgets y lo verá en la pantalla de vista previa del lado derecho.
Puede reordenar los widgets arrastrándolos hacia arriba y hacia abajo en el lado izquierdo o haciendo clic en el enlace Reordenar debajo de la lista de widgets y luego haciendo clic en las flechas para moverlos hacia arriba y hacia abajo.
Una vez que haya terminado de añadir widgets a través del Personalizador, no olvide de hacer clic en el botón Publicar en la parte superior izquierda para que se guarden los cambios. Si deja el Personalizador sin hacer esto, ninguno de sus cambios se reflejará en el sitio en vivo.
Una vez que haya añadido sus widgets, por favor, écheles un vistazo y compruebe cómo encajan en el diseño de su página. Si ha añadido demasiadas áreas de widgets, las cosas pueden parecer un poco desordenadas. Necesitará quitar algunos de ellos o puedes moverlos de un área de los widgets a otra.
Es muy fácil hacerlo en la pantalla de Widgets, donde puede arrastrar los widgets entre las áreas de los mismos.
¿Cómo añadir un widget a una página específica?
Algunos temas incluyen áreas de widgets que son sólo para páginas específicas, como la página de inicio. ¿Pero qué pasa si quiere añadir un widget a una sola página de su sitio?
Puede hacer esto en el editor de publicaciones y páginas de Gutenberg.
Añada un nuevo bloque de la forma habitual y luego seleccione el tipo de bloque Widgets.
A continuación, puede elegir entre muchos de los widgets que has habilitado para su sitio y añadirlos al contenido de su publicación o página. Es realmente útil si quiere añadir un widget de formulario, un widget de llamada a la acción o una lista de sus últimas publicaciones.
¿Cómo editar los widgets?
Una vez que haya añadido los widgets a su sitio, puede hacer cambios en ellos. Los widgets individuales tendrán ajustes a los que podrá acceder a través de la pantalla de Widgets o del Personalizador (no importa cuál de ellos hayas usado para añadir el widget).
Algunos widgets no incluyen ninguna configuración, pero otros tienen ajustes para el título del widget, por ejemplo, o el número de mensajes que se muestran. Algunos son más complicados y requieren que configures el widget en una página de configuración separada. Revise la documentación del desarrollador de su plugin.
Las opciones que tiene para editar los plugins de los widgets incluyen:
- Editar la configuración del plugin.
- Mover el widget de un área de widgets a otra.
- Eliminar el widget. Tiene dos opciones para esto, que se verán en breve.
Para editar la configuración del widget, encuentre ese widget en la pantalla de widgets o en el personalizador, y simplemente edita cualquier opción que se le ofrezca.
Para mover el widget de un área a otra, abra la pantalla de widgets y arrástrelo de un área de widgets a otra. En el modo de accesibilidad, navega hasta la flecha a la derecha del widget y selecciona una de las opciones.
Borrar Widgets
Para eliminar un widget en la pantalla de Widgets, busque ese widget y haga clic en el enlace de eliminación que se encuentra en la parte inferior izquierda del cuadro de configuración del widget.
Para eliminar un widget en el Personalizador, encuentre el widget en su área de widgets. Haga clic en la flecha que aparece a la derecha del nombre del widget y, a continuación, haga clic en el enlace Eliminar que aparece en la parte inferior izquierda de la configuración del widget.
También puede eliminar un widget de un área de widgets pero aún así ponerlo a disposición para su uso posterior a través de la pantalla de Widgets.
Desplácese hacia abajo al área de Widgets Inactivos hacia la parte inferior de la pantalla. Arrastre los widgets a esta área para eliminarlos del área de los mismos pero mantengalos como borradores con su configuración actual. Siempre puede arrastrarlos de nuevo a un área de widgets si quiere en el futuro.
Si cambia de tema y el nuevo tema tiene áreas de widgets diferentes, cualquier widget que no encaje en las áreas de widgets del nuevo tema se moverá automáticamente a la lista de Widgets Inactivos de WordPress.
¿Cómo añadir una nueva área de widgets a su tema?
Si su tema no tiene áreas de widgets donde quiere, siempre puede añadir las suyas propias. Lo hace añadiendo dos piezas de código.
Añadamos un área de widgets debajo del contenido.
Creación del área de widgets en el archivo de funciones temáticas
El primer paso es configurar el área de los widgets con la función register_widget().
Si utiliza un tema de WordPress de terceros (aquí tiene una selección de los mejores), necesita crear un tema hijo para hacerlo. La razón es que si actualiza el tema en el futuro, todos sus cambios se perderán.
Si está trabajando con su propio tema, puede simplemente editar el tema.
Empiece abriendo el archivo functions.php de su tema. En la parte inferior del archivo, agregue este código.
function kinsta_register_widgets() {
register_sidebar( array(
'name' => __( 'After Content Widget Area', 'kinsta' ),
'id' => 'after-content-widget-area',
'description' => __( 'Widget area after the content', 'kinsta' ),
'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'kinsta_register_widgets' );Ahora guarde su archivo functions.php. Si va a la pantalla de Widgets o al Personalizador, encontrará la nueva área de widgets disponible para que pueda añadirlos.
Pero si hace esto, no aparecerán en la página. Esto se debe a que necesitas añadir algo de código a su archivo de plantilla de temas.
Agregar el widget a un archivo de plantilla de temas
Lo primero es averiguar qué archivo de plantilla de temas necesita usar.
- Si está agregando una barra lateral extra, entonces necesitará agregar este código a su archivo sidebar.php.
- Si añade el área de su widget antes o después del contenido, deberá añadirlo a los archivos de plantilla de temas que estén produciendo el contenido.
- Si está añadiendo un área de widgets a su cabecera, tendrá que añadir el código a su archivo header.php.
- Si su nueva área de widgets es sólo para una página de su sitio o para un tipo de contenido, tendrá que usar la jerarquía de plantillas de WordPress para saber exactamente qué archivo de plantilla tiene que usar/crear y luego editarlo. Así, por ejemplo, si quiere añadir áreas de widgets a su página de inicio, tendrá que crear un archivo front-page.php y añadir su área de widgets allí.
Una vez que haya identificado el archivo de plantilla que necesita editar y exactamente donde necesita tener el código para el área del widget, añada el siguiente código. En el caso de un área de widgets después del contenido, lo añadimos al archivo post.php y page.php de nuestro tema:
if ( is_active_sidebar( 'after-content-widget-area' ) ) { ?>
aside class="after-content widget-area full-width" role="complementary">
<?php dynamic_sidebar( 'after-content-widget-area' ); ?>
</aside>
<?php }Ahora guarde su(s) archivo(s) de plantilla.
Tenga en cuenta que su código será diferente del mío dependiendo de cómo haya llamado a su área de widgets y de los elementos en los que quieras colocarlo. Generalmente utilizo un elemento aparte porque a mi juicio están diseñados para las barras laterales y las áreas de los widgets.
Consejo ninja: Si mueve el final del elemento contenedor del contenido al principio de la barra lateral y/o al pie de página, entonces puedes añadirlo allí y sólo necesitas añadirlo una vez.
Ahora, si echa un vistazo a su sitio, verá que cualquier widget que haya añadido a sus áreas de widgets se mostrará en el lugar correcto. Si no están en el lugar correcto, vuelva y edita sus archivos de plantillas, asegurándose de que el código está en el lugar donde lo quiere. También puede que tenga que editar su CSS para que se vea como lo quiere.
¿Cómo codificar widgets usando la API de widgets?
Así que ahora sabe cómo elegir los widgets para su sitio, cómo añadirlos a su sitio y cómo registrar nuevas barras laterales o áreas de widgets. El siguiente paso es aprender a crear un widget de WordPress.
A veces, puede que descubra que no hay un plugin disponible para crear el widget exacto que quiere. Eso significa que tendrá que codificarlo.
En este ejemplo, voy a mostrarte cómo codificar un simple widget de llamada a la acción.
Resumen de la API de Widgets
La API de Widgets en WordPress incluye todo el código que necesita para registrar, crear y codificar widgets. La API de Widgets incluye:
- Clases para construir nuevos widgets.
- Funciones para registrar los widgets y atenuarlos en su sitio.
- Funciones para desregistrar los widgets, por ejemplo de un tema padre.
Aquí usaremos una clase para construir un widget. El primer paso es crear un plugin que contenga el widget.
Crear un plugin para su widget de WordPress
Para crear su propio widget, necesitará codificar un plugin. No añada el código de un nuevo widget a su tema, porque los widgets tienen que ver con la funcionalidad y no con la visualización. Si cambia de tema en el futuro, querrá seguir teniendo acceso a ese widget.
Empiece por crear un plugin vacío. Cree una carpeta de plugins en su directorio wp-content/plugins y añada un archivo vacío a eso. Dele un nombre apropiado. Abra ese archivo y añada este código.
<?php
/**
* Plugin Name: Kinsta Call to Action Widget
* Plugin URI: https://rachelmccollin.com
* Description: A simple call to action widget.
* Version: 1.0
* Author: Rachel McCollin
* Author URI: https://rachelmccollin.co.uk
*/Tendrá que editar la URI del autor y conectar la URI a la suya. Eso creará un plugin para usted que puede activar a través de la pantalla Plugins.
Pero si lo activa, no pasará nada. Va a tener que añadir algún código a su plugin.
Crear una clase para el Widget
El código del widget va dentro de una clase. Así que añada eso a continuación.
class kinsta_Cta_Widget extends WP_Widget {
}Crear la función de constructor
Lo primero que hay que hacer dentro de la clase es la función de constructor para crear el widget. Añada esto dentro de los aparatos de la clase.
//widget constructor function
function __construct() {
$widget_options = array (
'classname' => 'kinsta_cta_widget',
'description' => 'Add a call to action box with your own text and link.'
);
parent::__construct( 'kinsta_cta_widget', 'Call to Action', $widget_options );
}Esto comienza a construir el widget.
Crear el formulario para dar salida al Widget
A continuación, necesitamos un formulario que será utilizado por la pantalla de Widgets y el Personalizador para crear el widget. Añada esto, todavía dentro de los frenos.
//function to output the widget form
function form( $instance ) {
$title = ! empty( $instance['title'] ) ? $instance['title'] : '';
$link = ! empty( $instance['link'] ) ? $instance['link'] : 'Your link here';
$text = ! empty( $instance['text'] ) ? $instance['text'] : 'Your text here';
?>
<p>
<label for="<?php echo $this->get_field_id( 'title'); ?>">Title:</label>
<input class="widefat" type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $title ); ?>" /></p>
<p>
<label for="<?php echo $this->get_field_id( 'text'); ?>">Text in the call to action box:</label>
<input class="widefat" type="text" id="<?php echo $this->get_field_id( 'text' ); ?>" name="<?php echo $this->get_field_name( 'text' ); ?>" value="<?php echo esc_attr( $text ); ?>" /></p>
<p>
<label for="<?php echo $this->get_field_id( 'link'); ?>">Your link:</label>
<input class="widefat" type="text" id="<?php echo $this->get_field_id( 'link' ); ?>" name="<?php echo $this->get_field_name( 'link' ); ?>" value="<?php echo esc_attr( $link ); ?>" /></p>
<?php }Esto le da a los usuarios un formulario que pueden usar para agregar texto y un enlace al cuadro de llamada a la acción.
Crear la función para guardar el widget
Ahora tiene que guardar todo lo que se introduzca en ese formulario. Añada esto.
//function to define the data saved by the widget
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['text'] = strip_tags( $new_instance['text'] );
$instance['link'] = strip_tags( $new_instance['link'] );
return $instance;
}Esto guardará los datos introducidos por los usuarios en la configuración del widget.
Crear la función para dar salida al Widget
Ahora tiene que añadir el código que mostrará el widget en el sitio. De nuevo, agregue esto dentro de los frenos:
//function to display the widget in the site
function widget( $args, $instance ) {
//define variables
$title = apply_filters( 'widget_title', $instance['title'] );
$text = $instance['text'];
$link = $instance['link'];
//output code
echo $args['before_widget'];
?>
<div class="cta">
<?php if ( ! empty( $title ) ) {
echo $args['before_title'] . $title . $args['after_title'];
};
echo '<a href="' . $link . '">' . $text . '</a>';
?>
</div>
<?php
echo $args['after_widget'];
}Registrar el Widget
Ahora que tiene su clase escrita, es hora de registrar el widget de WordPress para que funcione. Añada este código fuera de la clase.
//function to register the widget
function kinsta_register_cta_widget() {
register_widget( 'kinsta_Cta_Widget' );
}
add_action( 'widgets_init', 'kinsta_register_cta_widget' );Ahora guarde el archivo del plugin. Vaya a la pantalla de Widgets y verá el widget para usar.
Si lo agrega a un área de widgets y añade texto y un enlace a él, se emitirá en el sitio en vivo.
Puede que no se vea tan bien ahora mismo. Necesita añadir algo de CSS para darle estilo.
Añadiendo CSS al Widget
Para añadir CSS a su plugin, tiene que crear una hoja de estilos y ponerla en cola en su plugin. Añada esto a su archivo de plugins antes de la clase.
function kinsta_widget_enqueue_styles() {
wp_register_style( 'widget_cta_css', plugins_url( 'css/style.css', __FILE__ ) );
wp_enqueue_style( 'widget_cta_css' );
}
add_action( 'wp_enqueue_scripts', 'kinsta_widget_enqueue_styles' );Ahora necesita añadir un archivo style.css dentro de la carpeta del plugin y añadir cualquier estilo a eso. ¡Se lo dejo a usted!
Ahora tiene un simple botón de llamada a la acción que puede añadir a cualquier área de widgets en su sitio. Si lo añade a su barra lateral, por ejemplo, la gente podrá usarlo para llegar a su página de registro desde cualquier lugar del sitio.
Puedes crear widgets más complejos con ajustes y opciones adicionales, pero esto te da una idea de cómo empezar a crear tu propio widget.
Si quiere ver mi código para este plugin, incluyendo el estilo, puedes encontrarlo en Github. Si está empezando con el código, aquí tiene una guía detallada sobre git vs GitHub y cómo empezar con ambos.
Resumen
Los widgets son una de mis características favoritas de WordPress. Pueden darle vida a su sitio web y ayudarle a conseguir más registros o convertir más visitantes en clientes. Puede añadir widgets de WordPress a cualquier área de widgets existente en su tema, o puede añadir áreas de widgets adicionales para poder añadir más widgets en más lugares.
También hay muchos lugares para encontrar widgets. WordPress viene con varios de ellos preinstalados, y también puede instalar más de ellos a través de plugins. Pero eso no es todo, si se siente cómodo, también puede codificar sus propios widgets usando la API de Widgets.
Ahora le toca: ¿cómo usa los widgets de WordPress en su sitio? ¿Cuántos está usando?
Rachel McCollin has been helping people build websites with WordPress since 2010. She's a huge fan of self-hosted WordPress and wants to help as many people as possible create an awesome website with it.
Deja una respuesta