Los Widgets hacen que WordPress sea realmente flexible. Al agregar áreas de widgets a los temas, permite a los usuarios insertar su propio contenido personalizado sin tener que escribir una línea de código.
Son más comunes en barras laterales y pies de página, donde a menudo se usan para contener widgets como el widget de búsqueda, el widget de publicaciones más recientes o tal vez un menú personalizado. Pero si los agregas a tu página y plantillas de post, las haces aún más poderosas.
Puede agregar áreas de widget a cualquier archivo de plantilla que desee. Me gusta agregar muchos de ellos a mis temas, en lugares como el encabezado, antes y después de la navegación principal, y antes y después del contenido. Puedes agregarlos a una parte de plantilla (como el encabezado) que está siendo utilizada por cada página de tu sitio, o puedes ser más específico y simplemente agregarlos a archivos de plantilla para un tipo de contenido determinado.
En este post, voy a mostrarte cómo hacer eso. Crearé un tema secundario del tema predeterminado Twenty Seventeen y luego dentro de ese tema secundario, crearé algunos archivos de plantilla nuevos: un archivo de plantilla de página personalizado, un archivo de categoría y un archivo de plantilla de publicación única.
En cada una de ellas, voy a agregar un área de widget específica para ese tipo de contenido, para que los usuarios solo lo vean cuando estén viendo una página usando la plantilla de página, un archivo de categoría o una sola publicación, respectivamente.
¡Así que comencemos!
Nota: He añadido el código de esta publicación a GitHub para que puedas comprobarlo si estás trabajando junto con este tutorial.
Configurando el tema Secundario
Voy a usar un tema secundario del twenty seventeen: si está trabajando con su propio tema, puede editarlo directamente en lugar de crear un tema secundario. Pero si está utilizando un tema de terceros, debe crear un tema secundario. Esto se debe a que cuando actualice el tema, se perderán los cambios que realice en él.
Así que, en tu carpeta wp-content/themes, crea una nueva carpeta con el nombre de tu tema. A mí me llamo wpmu-template-widgets. Dentro de eso, agrega un estilo.archivo css y agrégale esto:
Recuerda, si estás trabajando con tu propio tema, puedes omitir este paso. Y si está utilizando un tema principal diferente, tendrá que editar la hoja de estilo para reflejarlo. Si no estás seguro, echa un vistazo a nuestra publicación sobre creación de temas secundarios.
Registrar las áreas de widget
Antes de poder agregar las áreas de widget a nuestros archivos de plantilla, necesitamos registrarlas en el archivo de funciones del tema. Abra el archivo de funciones si su tema ya tiene uno, o si se trata de un tema secundario nuevo, cree un archivo llamado funciones.php.
Comencemos agregando la función vacía para registrar los widgets y conectándola al gancho widgets_init. Agregue esto a su archivo de funciones:
Dentro de esa función, vamos a registrar cuatro áreas de widgets: una para cada una de las plantillas de archivo de publicación única y categoría, y dos para la plantilla de página personalizada.
Comience registrando el primer widget:
Este utiliza la función register_sidebar(), con una matriz de parámetros de la siguiente manera:
- El nombre del área de widgets, que aparecerá en la pantalla de administración de Widgets y en el Personalizador. He hecho esto traducible.
- Un ID único para el área del widget.
- Marcado para antes del widget, que utiliza marcadores de posición para la internacionalización.
- Marcado para después del widget.
- Marcado para antes y después del título del widget, que está encerrado en un elemento
h3.
Así que ese es el primero. Ahora, aún dentro de su función, agregue los otros tres:
, por lo que ahora tenemos cuatro widgets:
- Uno después del contenido en publicaciones individuales.
- Uno antes del contenido de un archivo de categorías.
- Uno antes y uno después del contenido en nuestra plantilla de página de tamaño ancho.
Si desea mover las áreas de los widgets (por ejemplo, colocar el archivo de categoría una después del contenido o la publicación individual una antes del contenido), debe cambiarles el nombre apropiadamente. Esto es para que sepa qué está pasando cuando edite su código en el futuro, y sus usuarios sepan dónde se generarán las áreas de widgets cuando les agreguen widgets a través de la pantalla de administración de widgets. Recuerde que si altera esto, necesitará colocar el código para generar los widgets en el lugar correcto en sus archivos de plantilla en el siguiente paso, que podría ser diferente de donde estoy poniendo el mío.
Ahora, si abres la página de administración de widgets, verás las áreas de widgets listas para widgets:
Pero si agregas widgets a tus nuevas áreas de widgets, no aparecerán en la interfaz de tu sitio. Todavía necesitan ser codificados en los archivos de plantilla.
Agregar sus Áreas de Widget a Archivos de plantilla
Ahora agregamos el código para generar las áreas de widget. Si está trabajando con su propio tema, es posible que solo necesite editar los archivos de plantilla de tema existentes. Si estás trabajando con un tema hijo (o tu tema no tiene ya los archivos de plantilla relevantes), necesitarás crear nuevos archivos.
Comencemos con el archivo de plantilla de página widgetized, ya que su tema no tendrá eso de ninguna manera.
En la carpeta de temas, crea un archivo nuevo. Voy a llamar a la mía por todo el ancho de la página.php. Abre ese archivo y agrégale esto:
Esto le dice a WordPress que es una plantilla de página personalizada. Si quieres saber más sobre ellos, consulta nuestra guía detallada.
Nota:No utilice el nombre de archivo con ancho de página. Esto se debe a que page-es un sufijo reservado en WordPress. Use un guion bajo en lugar de un guion, o simplemente evite usar página al principio por completo si lo prefiere.
Ahora, debajo de ese texto comentado, copia todo de la página de tu tema (o del tema principal).archivo php. Una alternativa es hacer una copia del archivo y agregar el texto comentado, depende de usted.
Ahora podrá seleccionar esta plantilla al editar una página en su sitio:
Selecciónalo para una de tus páginas para que puedas probar los widgets. Aquí está mi página:
No se ve muy emocionante en este momento, ya que no he agregado las áreas de widgets al archivo de plantilla. Hagámoslo.
En su archivo de plantilla, agregue este código inmediatamente encima del contenido de la página, para el área del widget de contenido anterior:
Esto comprueba si el área del widget se ha rellenado, utilizando el ID único que creó para el área del widget cuando lo registró en su archivo de funciones. Si se ha rellenado, muestra el contenido del área de widgets.
Ahora agregue el área de widgets debajo del contenido. Después de tu contenido (y dentro de cualquier elemento adjunto), agrega esto:
Guarda el archivo de plantilla de página.
Aquí está el código completo del archivo de plantilla de mi página, para que pueda ver dónde se encuentran las áreas del widget antes y después del bucle:
Ahora para probarlo. He añadido un widget a cada una de las nuevas áreas de widgets:
Y así es como se ven en mi página:
Así que esa es la plantilla de página personalizada configurada. Ahora necesita editar los otros dos archivos de plantilla de página (o crearlos si es necesario). Siga estos pasos:
- Si está trabajando con un tema secundario, cree un archivo llamado categoría.php. Copia el contenido de la categoría.archivo php de su tema padre (si tiene uno) o del archivo.archivo php (o índice.php si no tiene eso).
- Si no está trabajando con un tema hijo, pero su tema no tiene una categoría.archivo php, haga uno copiando el archivo.archivo php (o si no tiene uno de esos, el índice.archivo php).
- Agregue el área de widgets sobre el contenido de su archivo de categoría, de nuevo, inmediatamente antes del bucle.
Aquí está el código para el área del widget:
Ahora repita esto para la plantilla única:
- Crea una publicación única.archivo php si tu tema no tiene uno (o estás usando un tema hijo). Copia el contenido de la publicación única de tu tema principal.archivo php en él, o desde el siguiente archivo de plantilla hacia arriba en la jerarquía de plantillas (single.php, singular.php o índice.php).
- De nuevo, agregue el área de widget, esta vez después del contenido.
Aquí está el código:
Ahora, si agregas widgets, aparecerán en tu sitio. Aquí está la mía mostrando una lista de publicaciones recientes después de una sola publicación:
Agregar áreas de widget a las Plantillas Le da flexibilidad
Las áreas de widget permiten que los usuarios de su tema agreguen contenido adicional sin tener que escribir código. Pero no son solo para la barra lateral. Agregar áreas de widgets adicionales a tus archivos de plantilla te da áreas específicas en tu sitio a las que puedes agregar widgets, con un control preciso sobre dónde se mostrarán.
Puede llevar estos ejemplos más lejos si lo desea, agregando áreas de widgets a todos sus archivos o incluso usando diferentes versiones de la barra lateral.archivo php para diferentes tipos de contenido. ¡El mundo es tu ostra!