Cómo crear un complemento de widget de WordPress

Si eres fanático de WordPress, probablemente estés familiarizado con los widgets. Los widgets son esos pequeños cuadros que puede agregar a su barra lateral u otras áreas listas para widgets de su tema. Por lo general, contienen información como las publicaciones recientes de su blog, su feed de Twitter o un calendario. Pero, ¿sabías que puedes crear tus propios widgets? En realidad es bastante fácil de hacer. En este artículo, le mostraremos cómo crear un complemento de widget de WordPress. Comenzaremos creando un archivo de complemento básico y luego agregando una clase de widget . Luego registraremos nuestro widget para que aparezca en el administrador de WordPress. Finalmente, agregaremos un código para mostrar nuestro widget en el front-end de nuestro sitio. ¡Empecemos!

Recientemente desarrollé un complemento llamado Freelancer Widgets Bundle. Cuando me preguntaron qué debería escribir para un complemento, pensé que era hora de escribir esta publicación porque la gente había preguntado al respecto. Cuando instala un complemento de WordPress, debe agregarle un código adicional. Necesitará un editor como Coda (Mac) o Dreamweaver (PC) para desarrollar su complemento. El constructor es la función que define el nombre del widget y los argumentos principales; Este es un ejemplo de cómo podría verse. Al realizar cambios en los campos del formulario, asegúrese de usar esc_attr(), ya que esto se hace por razones de seguridad. El parámetro 'customize_selective_refresh' permite actualizar el widget en Apariencia y al editarlo.

En otras palabras, no es necesario actualizar los cambios en el widget para que aparezca en la lista. Todas las etiquetas, excepto el texto básico, se eliminan con WP_strip_all_tags. WP_kses_post_string() es la misma función que la cadena de contenido de la publicación. Esta función generará contenido para un sitio web utilizando la función widget(). Esta función se puede personalizar para incluir una etiqueta o clase específica. GitHub es el lugar ideal para ver el código completo.

Cuando desee agregar el widget a un sitio web, vaya a la página donde desea hacerlo y pegue el código antes de que se cierre la etiqueta HTML “/cuerpo”. Es necesario incluir el código en cada página web en la que se desee mostrar el widget. Verifique su firewall para ver si el Web Widget (clásico) está habilitado.

Ambos son criaturas visuales, pero los dos tienen características distintas, como la visibilidad y la interacción. Si su página se ejecuta sin problemas y correctamente en segundo plano, este es un complemento. Para que un usuario interactúe con él en la página, debe ser visible para el usuario.

¿Cómo creo un complemento de widget personalizado para WordPress?

Para crear un complemento de widget personalizado para WordPress, deberá crear un archivo PHP con el siguiente código: /* Nombre del complemento: [Nombre del complemento] Descripción: [Descripción del complemento] */ // Regístrese y cargue el widget function [nombre_del_complemento]_load_widget() { register_widget( '[nombre_del_complemento]' ); } add_action( 'widgets_init', '[name_of_plugin]_load_widget' ); // La creación de la clase de widget [nombre_del_complemento] extiende WP_Widget { función __construct() { parent::__construct( // ID base de su widget '[nombre_del_complemento]', // El nombre del widget aparecerá en la interfaz de usuario __('[Nombre del complemento] ]', '[nombre_del_complemento]'), // Matriz de descripción del widget( 'descripción' => __( '[Descripción del complemento]', '[nombre_del_complemento]' ), ) ); } // Creando el front-end del widget // Aquí es donde ocurre la acción widget de función pública ($args, $instancia) { $título = apply_filters( 'widget_title', $instancia['título'] ); // los argumentos antes y después del widget están definidos por temas echo $args['before_widget']; if ( ! vacío( $título ) ) echo $args['before_title'] . $título . $argumentos['after_title']; // Aquí es donde ejecuta el código y muestra la salida echo __( '[Nombre del complemento]', '[nombre_del_complemento]' ); echo $argumentos['después_del_widget']; } // Widget Backend formulario de función pública ($ instancia) { if ( isset ($ instancia [ 'título' ] ) ) { $ título = $ instancia [ 'título' ]; } else { $título = __( '[Nombre del complemento]', '[nombre_del_complemento]' ); } // ¿Formulario de administración de widgets? > Cuando los usuarios de WordPress crean un área de widgets, agregan pequeñas piezas de contenido a esa área. Dependiendo del área de widgets donde esté instalado, un widget puede mostrar varios tipos de información en todas las páginas, o puede mostrar solo cierta información. Hay algunos widgets que están disponibles de forma predeterminada, mientras que otros están disponibles mediante la utilización de un complemento o un tema. Los cuatro métodos mencionados anteriormente deben agregarse a su clase para crear un widget personalizado básico. Debe usar la función register_widget() para registrar el widget para usarlo dentro del tablero. Antes de estudiar el ejemplo que presentamos en este artículo, repasaremos rápidamente el propósito de cada sección del código. Uno de los métodos usados ​​en la clase Custom_Widget es un método para asignar caracteres. Creamos el widget con custom_widget como su ID con el método constructor usando el método __construct(). Con el método register_widget(), se crea un nuevo widget después de registrar el existente. Hemos envuelto cada una de las partes con declaraciones if...* para garantizar que solo se muestren esas partes si están incluidas en las opciones del widget. El método widget() incluía la función nl2br() para garantizar que todos los textos de varios párrafos se muestren correctamente. sanitize_text_field() elimina espacios en blanco, tabulaciones y saltos de línea innecesarios del argumento. Además, el valor Sí se establece como valor predeterminado dentro del campo de selección, lo que indica que el destino del enlace se establece en _blank en los dos casos anteriores. Se debe especificar el título, el texto, el enlace debajo del título y si el enlace debe abrirse en una nueva pestaña. Guarde las opciones que ha elegido haciendo clic en el botón Guardar de inmediato. Cuando selecciona un tema predeterminado, el widget producirá una salida diferente. En este caso, su widget podría verse muy similar al que se muestra a continuación si usa el tema Lekker WordPress. ¿Cómo puedo crear un widget de imagen personalizado en WordPress? Para agregar una imagen a una barra lateral de WordPress, seleccione el widget 'Imagen'. Puede realizar cambios en su apariencia yendo a Apariencia. Agregue el widget 'Imagen' a la barra lateral si tiene una página que incluye un widget. Complemento de widget personalizado Crédito: octobercms.com Un complemento de widget personalizado es un complemento que le permite crear su propio widget personalizado. Este complemento es excelente para aquellos que desean crear un widget personalizado para su sitio web o blog. Con este complemento, puede crear fácilmente un widget personalizado sin tener que codificarlo usted mismo. Para proporcionar un widget personalizado que se pueda usar con Qt Designer, debemos proporcionar una implementación independiente, así como una interfaz de complemento. El widget personalizado de este ejemplo, al igual que su contraparte de reloj analógico, no tiene señales ni ranuras personalizadas. Se debe usar la macro Q_PLUGIN_METADATA() para garantizar que el widget se identifique correctamente como un complemento exportando datos desde él. La clase AnalogClock se puede usar como un widget personalizado dentro del cuadro de widgets y es un ejemplo de una clase independiente. Se incluye una clase de complemento para la clase AnalogClock en Qt Designer. El constructor de la clase QObject simplemente llama al constructor de la clase base QObject, que establece la variable inicializada en falso. La función isInitialized() verifica si el complemento está listo para usar al permitir que Qt Designer lo identifique. La función createWidget() puede generar instancias de un widget personalizado. El complemento de widget será visible en el nombre del grupo en la sección de complemento de widget de Qt Designer. Un consejo sobre herramientas y ¿Qué es esto? En el cuadro de widgets, puede proporcionar ayuda para el widget personalizado. La función isContainer() verifica si un widget debe usarse como contenedor para otras imágenes de widgets. Esto evita que el usuario cree widgets en él. Código de WordPress de widget personalizadoCrédito: www.hostpapa.inUn widget personalizado es una excelente manera de agregar funcionalidad a su sitio de WordPress. Hay algunas cosas que debe tener en cuenta al agregar un código de widget personalizado a su sitio. Primero, deberá crear un archivo llamado "widget.php" en el directorio de su tema. A continuación, deberá agregar el siguiente código a su archivo widget.php: class Custom_Widget extends WP_Widget { function __construct() { parent::__construct( 'custom_widget', __('Custom Widget', 'text_domain'), array ( 'descripción' => __( 'Un widget personalizado para su sitio de WordPress.', 'text_domain' ), ) ); } widget de función pública ($argumentos, $instancia) { $título = apply_filters( 'widget_title', $instancia['título'] ); echo $argumentos['antes_del_widget']; if ( ! vacío( $título ) ) echo $args['before_title'] . $título . $argumentos['after_title']; echo __( '¡Hola, mundo!', 'dominio_texto' ); echo $argumentos['después_del_widget']; } formulario de función pública ($instancia) { if (isset ($instancia[ 'título'])) { $título = $instancia[ 'título']; } else { $titulo = __( 'Nuevo titulo', 'texto_dominio' ); }? > } actualizacion de funcion publica ($nueva_instancia, $antigua_instancia) { $instancia = array(); $instancia['título'] = ( ! vacío( $nueva_instancia['título']Wordpress Agregar widget a plantillaAgregar un widget a una plantilla de WordPress es un proceso simple. Deberá acceder a sus archivos de WordPress a través de su cuenta de alojamiento y editar el archivo apropiado. En la mayoría de los casos, este será el archivo header.php. Busque el código que controla el área donde desea agregar el widget. Luego, copie el código para el widget que desea agregar y péguelo en el lugar en el archivo. Guarde el archivo y cárguelo en su servidor. ¡Eso es todo! El widget ahora aparecerá en su sitio de WordPress. En WordPress, hay una etiqueta de plantilla llamada the_widget() que le permite agregar un widget directamente a su archivos de plantilla. Un widget se puede colocar en un archivo que contiene el nombre de la clase del widget que desea usar y dónde desea que aparezca. En otras palabras, si desea enumerar los comentarios recientes, puede escribir esto: $ instancia para cada widget. Usando funciones integradas, puede agregar muchos de sus defa ult WordPress widgets a sus archivos de plantilla en lugar de usarlos. Los widgets personalizados se pueden insertar utilizando el método the_widget() en toda la plantilla. Los widgets personalizados, que se pueden usar en una plataforma diferente a la barra lateral, están disponibles en muchos complementos. ¿Cómo agrego un widget a mi tema de WordPress? Visite las pantallas de administración de WordPress para ver la página Apariencia. Elija un widget arrastrándolo a una barra lateral específica o haciendo clic en el enlace Agregar widget (si su tema tiene más de una barra lateral, elija la barra lateral de destino). ¿Cómo llama a un widget desde una plantilla de página de WordPress? El primer paso es encontrar e inserte el archivo donde debería aparecer su widget. El segundo paso es determinar qué widget desea utilizar. En esta sección, repasaremos los nombres de clase del widget predeterminado de WordPress: WP_Widget_Archives. Cómo crear un widget de imagen personalizado en WordPress Para crear un widget de imagen personalizado en WordPress, primero deberá crear un complemento personalizado o un tema secundario. Una vez que lo haya hecho, puede crear un nuevo archivo llamado "image-widget.php" dentro de su complemento o tema secundario. Dentro de este archivo, deberá incluir el siguiente código: class WP_Widget_Custom_Image extends WP_Widget { function __construct() { $widget_ops = array( 'classname' => 'widget_custom_image', 'description' => __( 'Un widget que le permite para subir una imagen personalizada.', 'text_domain' ), ); parent::__construct( 'imagen_personalizada', __( 'Imagen personalizada', 'dominio_texto' ), $widget_ops ); } widget de función ($args, $instancia) { echo $args['before_widget']; if ( ! vacío( $instancia['título'] ) ) { echo $argumentos['antes_del_título'] . apply_filters('widget_title', $instancia['title'] ). $argumentos['after_title']; } if ( ! vacío( $instancia['imagen'] ) ) { echo ”; } echo $argumentos['después_widget']; } función actualizar ($nueva_instancia, $antigua_instancia) { $instancia = $antigua_instancia; $instancia['título'] = sanitize_text_field ($nueva_instancia['título']); $instancia['imagen'] = esc_url_raw( $nueva_instancia['imagen'] ); devolver $instancia; } formulario de función ($instancia) { $título = ! vacío ($ instancia ['título'])? $instancia['título'] : __( 'Imagen personalizada', 'dominio_texto' ); $imagen = ! vacío ($instancia['imagen'] ) ? $instancia['imagen'] : ”; El complemento Image Widget es un complemento simple que se puede usar para agregar widgets de imagen a su sitio usando el administrador de medios de WordPress. Es común que las plantillas de salida de widgets incluyan una plantilla predeterminada, pero esto puede ser modificado por archivos en su plantilla. En 3.2, también se agregó el filtro sh_template_image_widget_php, lo que le permite anular el comportamiento predeterminado de la plantilla. Para obtener más información sobre la instancia específica del widget, también debe agregar dos argumentos $args y $instance. Puede usar esto en un diseño receptivo si anula esto. ¿Cómo puedo agregar un control deslizante para imágenes aleatorias? Sí, tiene la opción de hacerlo. Por lo general, esto se maneja directamente a través de la pantalla de la barra lateral del complemento Image Widget; la visualización de la barra lateral debe configurarse en una página específica. Háganos saber si tiene alguna pregunta o comentario sobre esta página. Image Widget es un proyecto de software de código abierto. Este complemento ha sido puesto a disposición del público por una variedad de colaboradores. Si desea incluir una imagen, puede agregar un campo, y si desea incluir un enlace, puede agregar una clase. Pasará unos 15 minutos haciéndolo, por lo que es una inversión que vale la pena. ¿Cómo creo un nuevo widget en WordPress? Arrastre el widget al área de widgets correspondiente o arrástrelo desde el lado izquierdo de la página hacia la izquierda. . Una vez que haga clic en el widget que desea agregar, verá una lista de formas de hacerlo. Para agregar nuevos widgets a un área existente, haga clic en el botón Agregar widget.