Cómo codificar su propio widget WordPress Custom

¿Alguna vez ha querido crear un widget personalizado para su sitio de WordPress? Aunque WordPress incluye un widget de texto construido, que puede usar para mostrar HTML con CSS y JavaScript, si desea hacer algo más que eso, el widget de texto simplemente no lo cortará. ¿Qué sucede si desea tomar un poco de contenido de la base de datos de su sitio y mostrarlo en un widget? La solución es codificar un widget personalizado de la barra lateral. Aunque puede parecer una tarea desalentadora, siempre que tenga habilidades básicas de PHP, está a la mano.
Así que siga este tutorial y aprenderá a crear dos widgets diferentes:
Un widget simple que muestra el título del widget, el título del sitio y el eslogan del sitio.
Un widget ligeramente más complejo que muestra una lista de todas las categorías ordenadas alfabéticamente y dividida en dos columnas.
¿Estás listo para aprender los conceptos básicos de la creación de widgets de WordPress personalizados? Vamos a eso. Nociones básicas para crear un widget wordpress necesitará tres cosas para seguir este tutorial:
Un entorno de desarrollo de WordPress
Conocimiento básico de la codificación de PHP
Experiencia básica de desarrollo de WordPress
Todo lo que se necesita es una sola coma errante o faltante para bloquear un sitio web de WordPress, y si es relativamente nuevo en la programación, su sitio puede detenerse durante unos minutos o más mientras intenta encontrar el código ofensivo. Por esta razón, necesariamente debe hacer que su widget funcione utilizando un medio de desarrollo local antes de tratar de usarlo en un sitio web en vivo.
Escribí sobre muchos entornos de desarrollo local en el pasado. Personalmente, uso XAMPP, pero cualquier servidor de localidad servirá. Elija uno y póngalo a trabajar. Si nunca ha escrito una línea PHP o codificó un complemento básico de WordPress, entonces este tutorial puede ser un poco fuera de nuestro desarrollo de WordPress para principiantes, ya sea formalmente registrando un curso futuro en la Academia. Si cumple con estos tres requisitos básicos, está listo para comenzar a distribuir el código. Vamos a esto. Los widgets de WordPress
Encontrará más información sobre la API de widget en el códice de WordPress.

Cree un nuevo widget WordPress agregando código a uno de los dos lugares:
Un complemento personalizado, que debe usar si desea usar el widget con varios o más sitios web.
El archivo Functions.php del tema activo, que debería ser un niño o un tema totalmente personalizado.
Solo en aras del ejemplo, puede encontrar el código completo para el widget simple en la barra lateral descrita en este tutorial disponible en GitHub. Si no está seguro de dónde escribir el código o solo desea ver el código completo a la vez, descargue una copia de ese complemento.
Los widgets de WordPress se crean con un poco de programación orientada a objetos. La clase WP_Widget se extiende para crear cada widget. La clase WP_Widget incluye casi 20 métodos diferentes. Sin embargo, para los widgets básicos, debe usar solo cuatro de ellos:
__Construct () : registra la información básica del widget.
Widget () : contiene el resultado de widget-qué ves realmente en tu sitio frontal cuando el widget se agrega a un widget.form () : defina la configuración del widget que se muestra en la administración de WordPress de área.
Update () : Actualizar la configuración del widget Cuando se guarda una nueva configuración en el área de administración de WordPress.
Además de estos cuatro métodos, la función Add_action se utiliza para vincular la función de widget widget widgets_init.
Ejemplo de widget no. 1: Muestra el título del widget, el título del sitio y el eslogan. Lo primero que debe hacer es expandir la clase WP_Widget de la siguiente manera:
Cargue la idea 3807314FB047BC77970E6CE59ED08F68
En este caso, el nombre de la nueva función de widget es jpen_example_widget. Tenga en cuenta que JPEN es simplemente un prefijo que agrego a todas las funciones personalizadas para evitar conflictos con cualquier función en otros complementos, temas o WordPress Core. Puede usar cualquier nombre que sea adecuado para su widget y puede agregar un prefijo si desea seguir las mejores prácticas. Escribiremos funciones utilizando los cuatro métodos mencionados en la lista anterior y las pondremos las cuatro dentro de nuestra función de widget. Luego, en el último paso, escribiremos una función para grabar el widget.
Comencemos el proceso de escribir el método con el método __construct (). Wp_widget :: __ construct () El método __construct () se utiliza para asignar una identificación, un título, un nombre de clase y una descripción de un widget. Así es como parece la función de constructor para crear nuestro primer ejemplo de widget:
La idea se carga 9D87DE61356585FEB664814BABD6995
Para comprender esta función, comience con la línea que comienza con la construcción de los padres :: __ (). Lo que sucede es que esta línea crea un nuevo widget con el ID de ‘Ejemplo de Widget’, el nombre ‘Widget de ejemplo’ y dos opciones de widget: una clase y una descripción breve. Todo este código entra en el jpen_example_widget y se usa para grabar el registro de la grabación de la clase. WordPress Widget y luego muestre el título y la descripción del widget en el área de administración.
Wp_widget :: widget () El siguiente paso es usar el método widget () para definir el resultado del widget que se mostrará en el frente del sitio. Lo que widget () hace para contener el código que genera el contenido real que muestra su widget. El contenido widget () puede ser casi cualquier cosa, pero generalmente incluirá algo PHP. De lo contrario, solo usaría el widget de texto incorporado en WordPress. En nuestro caso, daremos a los usuarios la opción de mostrar un título de widget personalizado. Por lo tanto, tendremos que tomar ese título y luego usar get_bloginfo () para mostrar el título del blog y el eslogan. Aquí está el código que usaremos para hacer esto:
Cargue el CDCE8F0D9F85F24A6585D5965A6E8B89
En esta función hay algunas cosas que querrá hacer tiempo para comprender:

$ Args []: Esta variable carga una serie de argumentos que se pueden usar para construir la salida de widgets. Los valores contenidos en $ Args están establecidos por el tema activo cuando se registra la región de la barra lateral.
$ instancia []: esta variable carga valores asociados con el tribunal actual del widget. Si ha agregado un widget a la barra lateral dos veces, cada instancia de $ mantendrá los valores específicos de cada tribunal de widget.widget_title filtro: devuelve el título del widget actual.
Get_bloginfo (): una función que se puede usar para devolver todo tipo de metadatos sobre un sitio web de WordPress, incluido el nombre y el eslogan del sitio.
Después de definir algunas variables utilizando la información en la lista anterior, el código continúa produciendo el resultado real, que consiste en información de $ args, título y nombre y eslogan.
Tenga en cuenta que, básicamente, cada widget debe incluir ‘before_widget’, ‘after_widget’, ‘antes_itle’ y ‘after_itle’. Son necesarios para asegurarse de que cada widget esté vestido con las etiquetas HTML específicas del tema. Todo el método widget () debe vestirse dentro de jpen_example_widget. Wp_widget :: form (form () form () se usa para agregar campos de configuración de widgets para mostrar en el área de administración de WordPress. Los widgets que incluyen muchas opciones serán bastante complejos en este departamento. Sin embargo, en el caso de nuestro ejemplo de widget, todo lo que queremos hacer es permitir a los usuarios atribuir a widget un título personalizado. Entonces las cosas son bastante simples.
Cargue la idea E4F10B6E30C6F2E3F70A25F521F61D90
Esta función devuelve los valores actuales de esta instancia particular del widget llamando al parámetro de instancia $. Luego verificamos la información actual del tribunal para ver si el título está vacío. Si no es así, mostramos el título actual. Luego, la etiqueta y los elementos de entrada vestidos dentro de las etiquetas del párrafo crean un campo de entrada etiquetado para que el usuario agregue un nuevo título. Con esto JPEN_EXAMPLE_WIDGET agregado a jpen_example_widget, la configuración del widget se verá así: wp_widget :: update () El siguiente paso es actualizar la información de la base de datos de WordPress usando el método de actualización (). Este método toma dos parámetros: $ new_instance y $ Old_Instance. El primero contiene los valores agregados en el formulario de configuración del widget. El segundo contiene la configuración existente: si existen. El método Update () debe validar la nueva configuración según sea el caso y luego asignarlos a la variable de instancia $ y devolver esa variable actualizada. Si eso suena un poco complejo, el siguiente ejemplo debería aclarar las cosas.
El esencial D2EC67ED152A8F448C099F7B91AFDFDD está cargado
En el caso de nuestro ejemplo de widget, todo lo que hacemos es actualizar el título. Entonces, todo lo que tenemos que hacer es:

Tome el título de la nueva instancia,
Elimine las etiquetas HTML o PHP que podrían haberse agregado al título del widget,

Asignar ese título a la corte y
Devuelve el tribunal actualizado.
Registre el último paso del proceso es grabar el widget utilizando la función add_action y el widget_init. Aquí le explica cómo hacerlo:
La idea se carga 471F590A1F8F5D3E4CBFCBB9A999D184
Primero, creamos una función para grabar el widget y usar el nombre del objeto widget para identificarlo. Luego vinculamos la función de grabación a WordPress usando el gancho Widgets_init y el nombre de nuestra función de registro. Este bit de código se agrega fuera de jpen_example_widget. Cuando se lo llame, tirará del widget con el nombre apropiado, jpen_example_widget en este caso y ejecutará todo el código contenido en el widget. Con este último fragmento de código, podemos agregar nuestro widget a una barra lateral, podemos configurarlo como nos gusta y mostrar el título y el eslogan de nuestro sitio en la barra lateral, como: Ejemplo del widget #2: Muestra categorías en dos columnas A Hace poco tiempo, escribí un tutorial que explica cómo puedes convertir cualquier plantilla HTML5 en un tema de WordPress. Sin embargo, lo que no hice en ese tutorial fue recrear cualquiera de los widgets en la barra lateral incluida en la plantilla. Por lo tanto, el segundo ejemplo de widget será el widget en la barra lateral de la lista de categorías en la plantilla de blog HTML5 en el arranque de inicio. Así es como se ve el widget en la barra lateral en la plantilla HTML5 original:
La recreación de este widget requiere un poco más de código que nuestro simple ejemplo de widget, pero en realidad no es muy complejo. De hecho, las funciones _construct (), form () y update () prácticamente no cambian. La única diferencia real entre este widget y nuestro ejemplo anterior es que el método de salida widget () incluye más código. La razón de esto es que para crear el contenido del widget debemos generar una lista de todas las categorías, ordenar la lista en orden alfabético y luego organizar las categorías en dos columnas. Aunque hay una variedad de formas en que esto se puede lograr, aquí hay una forma de hacer el trabajo. Para empezar, creamos la función widget (): la idea 4E7EE87646BD6DC5927F2E00BB870591 está cargada
Luego creamos algunas variables:
La idea se carga 4517AA5DE74A09F02838F3904F5C6016
Las variables del título y la categoría son bastante explícitas. Mantienen el título del widget y una lista de todas las categorías. La variable $ Cat_Count se utilizará para realizar un seguimiento del número total de categorías, para que podamos clasificarlas en dos listas. Las dos variables de columna, $ cat_col_one y $ cat_col_two se utilizarán para dividir las categorías en dos columnas. La siguiente es la función que itera a través de todas las categorías y las divide en dos columnas.
La idea se carga 1F9042C4F40A91805EFC6DB84324FBBB

Para cada categoría, se crea la variable $ Cat_Count ItsRates y A $ Category_Link. Luego, según el $ CAT_COUNT actual, independientemente de si es uniforme o impar – $ Category_Variable se agrega a la columna variable una o a la segunda columna. Además, este código también incluye cada categoría en un elemento de lista con una clase de “lista de listas” para que coincida con las clases y HTML utilizados en la plantilla original. Finalmente, tiene que hacer $ cat_col_one $ cat_col_one y $ cat_col_two para reproducir la lista de categorías: cargue la idea 95ddd558cc527bdd89bca7b0abb82864

Este código itera a través de cada una de las variables de la columna de categoría e imprime cada lista de categorías en un div. Las clases y la estructura HTML atribuidos al widget reflejan las clases y la estructura incluida en la plantilla original para garantizar que el estilo incluido en los recursos CSS de la plantilla original se aplique correctamente al nuevo widget. Así es como se mostró el widget de la barra lateral. Si echas un vistazo a la versión original de la plantilla en la imagen de arriba, ¡verás que es una combinación perfecta!
Si desea ver el código completo que crea esta barra lateral del widget, aparición para la instancia jpen_category_widget de la clase wp_widget en las funciones.php del blog simple en GitHub. Crear su propio widget personalizado La creación de un widget personalizado de la barra lateral implica trabajar con la clase WP_Widget bastante compleja. Aunque puede parecer un poco desalentador, la buena noticia es que puede reducir el proceso a cinco pasos:
Use __construct () para definir la información básica del widget.
Use widget () para definir el resultado del widget.
Use Form () para crear el menú Configuración de administración. Usilizar Update () para actualizar la configuración del widget.
Use add_action () para atar el objeto widget al gancho correspondiente.
Aunque crear un widget personalizado puede ser un poco complejo, existe un conocimiento relativamente pequeño que debe dominar para crear fuertes widgets personalizados.Envuelva su cabeza alrededor de estas cinco funciones y podrá convertir casi cualquier idea que pueda imaginar en un widget WordPress.
¿Tiene alguna pregunta sobre la creación de widgets personalizados?¡Dispara en la sección de comentarios a continuación!
Etiquetas:

desarrollo
las barras laterales
widgets