¿Desea crear sus propios widgets personalizados en WordPress? Los widgets te permiten arrastrar y soltar elementos en cualquier barra lateral o área preparada para widgets de tu sitio web. En este artículo, le mostraremos cómo crear fácilmente un widget de WordPress personalizado.
¿Qué es un widget de WordPress?
Los widgets de WordPress contienen fragmentos de código que puede agregar a las barras laterales de su sitio web o áreas listas para widgets. Piense en ellos como módulos que puede usar para agregar diferentes elementos mediante el uso de una simple interfaz de arrastrar y soltar.
Por defecto, WordPress viene con un conjunto estándar de widgets que puede usar con cualquier tema de WordPress.
WordPress también permite a los desarrolladores crear sus propios widgets personalizados. Muchos de los temas y complementos de WordPress vienen con sus propios widgets personalizados que puedes agregar a tus barras laterales.
Por ejemplo, puede agregar un formulario de contacto, un formulario de inicio de sesión personalizado o una galería de fotos a una barra lateral sin escribir ningún código.
Habiendo dicho eso, veamos cómo crear fácilmente tus propios widgets personalizados en WordPress.
Crear un widget personalizado en WordPress
Antes de comenzar, lo mejor sería crear un complemento específico del sitio donde pegará el código del widget de este tutorial.
También puede pegar el código en el archivo functions.php de su tema. Sin embargo, solo estará disponible cuando ese tema en particular esté activo.
En este tutorial, crearemos un widget simple que solo saluda a los visitantes. Eche un vistazo a este código y luego péguelo en su complemento específico del sitio para verlo en acción.
// Registrarse y cargar el widget
función wpb_load_widget () {
register_widget ('wpb_widget');
}
add_action ('widgets_init', 'wpb_load_widget');
// Creando el widget
clase wpb_widget extends WP_Widget {
function __construct () {
parent :: __ construct (
// Base de ID de tu widget
'wpb_widget',
// El nombre del widget aparecerá en la interfaz de usuario
__ ('site Widget', 'wpb_widget_domain'),
// Descripción del widget
array ('description' => __ ('Widget de muestra basado en el sitio Tutorial', 'wpb_widget_domain'),)
);
}
// Creando widget front-end
widget de función pública ($ args, $ instance) {
$ title = apply_filters ('widget_title', $ instancia ['title']);
// antes y después de que los argumentos del widget estén definidos por temas
echo $ args ['before_widget'];
if (! empty ($ title))
echo $ args ['before_title']. $ título. $ args ['after_title'];
// Aquí es donde ejecuta el código y muestra la salida
echo __ ('¡Hola, Mundo!', 'wpb_widget_domain');
echo $ args ['after_widget'];
}
// Widget Backend
forma de función pública ($ instancia) {
if (isset ($ instancia ['título'])) {
$ title = $ instance ['title'];
}
else {
$ title = __ ('Nuevo título', 'wpb_widget_domain');
}
// Formulario de administrador de widget
?>
sitio
Ahora puede visitar su sitio web para verlo en acción.
Ahora estudiemos el código nuevamente.
Primero registramos el 'wpb_widget' y cargamos nuestro widget personalizado. Después de eso, definimos qué hace ese widget y cómo mostrar el widget back-end.
Por último, definimos cómo manejar los cambios realizados en el widget.
Ahora hay algunas cosas que tal vez quiera preguntar. Por ejemplo, ¿cuál es el propósito? wpb_text_domain ?
WordPress usa gettext para manejar la traducción y la localización. Esta wpb_text_domain y __mi le dice a gettext que una cadena esté disponible para la traducción. Vea cómo puede encontrar temas de traducción de WordPress listos.
Si está creando un widget personalizado para su tema, puede reemplazarlo wpb_text_domain con el dominio de texto de su tema.
