Cómo crear tus propios widgets básicos de WordPress

Cómo crear tus propios widgets básicos de WordPress / Wordpress y desarrollo web

Muchos bloggers buscarán el widget de WordPress perfecto que hará exactamente lo que quieran, pero con un poco de experiencia en programación puede encontrar que es más fácil escribir su widget personalizado.

Esta semana me gustaría mostrar cómo hacer exactamente eso, y el widget que estaremos escribiendo es simple y selecciona una única publicación aleatoria de su sitio, extrae la imagen mostrada y la muestra en la barra lateral: una imagen visual. “mira esto” Widget que ayudará a los usuarios a encontrar más contenido en su sitio..

Esta es también una extensión de una serie continua en la que te muestro lo fácil que es personalizar tu plantilla de WordPress. 2 Nuevos complementos geniales de Wordpress y comprensión de la estructura del tema de Wordpress Eche un vistazo a una alternativa superior al SEO All-In-One elogiado a menudo; un complemento que le da el poder de un sistema de publicación de Wordpress pero le permite generar ... Leer más .

También te complacerá saber que hemos agregado una nueva categoría de Tutoriales de WordPress a MakeUseOf, así que asegúrate de revisar para ver un archivo cada vez mayor de consejos actualizados y guías de la plataforma de blogs favorita del mundo..

Conceptos clave: las consultas de WordPress y el bucle

Cada página de tu blog consiste en una consulta a tu base de datos de publicaciones. Dependiendo de la página que esté viendo, la consulta cambiará. La página de inicio de tu blog, por ejemplo, puede usar la consulta. “obtén las últimas 10 publicaciones de blog“. Cuando ve los archivos de categorías, la consulta puede cambiar a “obtenga las últimas 20 publicaciones solo para la categoría fotos familiares, ordene los resultados por fecha de publicación“. Cada consulta devolverá un conjunto de resultados y, dependiendo de la plantilla de página que se utilice, cada resultado se ejecutará a través de la página principal. “lazo” de la plantilla.

Sin embargo, cada página puede constar de más de una consulta, e incluso puede crear sus propias consultas para agregar funcionalidad a varios lugares en su plantilla. Puede ver un ejemplo de esto en uso al final de este artículo: tenemos algunas consultas adicionales que se ejecutan en cada página que tienen como objetivo mostrarle artículos relacionados en los que pueda estar interesado, o artículos que tienen tendencia esta semana..

Sin embargo, para hacer nuestro widget personalizado, simplemente tendremos que crear una consulta adicional que capture X números de publicaciones aleatorias más sus imágenes, y las muestre de alguna manera en la barra lateral. La semana pasada ya te mostré el código para tomar la imagen destacada Cómo mejorar tu Wordpress agregando imágenes destacadas Cómo mejorar tu Wordpress agregando imágenes destacadas Las imágenes destacadas se introdujeron en Wordpress en la versión 2.9, y te permite mostrarlas una imagen que está asociada con su publicación de blog en varias partes de su tema. Hoy me gustaría mostrar ... Leer más, así que solo necesitamos saber cómo crear un nuevo widget de WordPress y colocarlo en la barra lateral..

Código de widget básico

Comience por crear un nuevo archivo .php en su wp-content / plugins directorio. También puede seguir el tutorial fuera de línea y luego cargarlo mediante la interfaz de WordPress, pero me parece que es más fácil escribir en el futuro en caso de que necesite una depuración. Llama a tu archivo como quieras, pero voy con random-post-widget.php

Pegue lo siguiente en el archivo y guárdelo. Siéntase libre de cambiar la sección en la parte superior con mi nombre, pero no ajuste el resto del código todavía. Esto es básicamente un widget esqueleto vacío, y puedes ver donde dice // EL CÓDIGO WIDGET VA AQUÍ Es donde agregaremos nuestra funcionalidad más adelante..

  'RandomPostWidget', 'description' => 'Muestra una publicación aleatoria con miniatura'); $ this-> WP_Widget ('RandomPostWidget', 'Random Post and Thumbnail', $ widget_ops);  formulario de función ($ instancia) $ instancia = wp_parse_args ((array) $ instancia, matriz ('título' => ")); $ título = $ instancia ['título'];?> 

Este es mi nuevo widget!"; echo $ after_widget; add_action ('widgets_init', create_function (", 'return register_widget ("RandomPostWidget");'));?>

Tal como está, el complemento no hace mucho más que imprimir un título grande con las palabras “Este es mi nuevo widget!“.

Sin embargo, sí le da la opción de cambiar el título, que es algo esencial para cualquier widget. Agregar otras opciones es un poco más allá del alcance de este artículo hoy, así que por ahora avancemos para darle un propósito real.

Una nueva consulta y el bucle

Para realizar una nueva consulta en la base de datos de su blog, debe utilizar el query_posts () Funciona junto con algunos parámetros, luego ejecuta la salida usando un bucle while. Intentemos esto: una consulta muy básica y un bucle para demostrar. Reemplace la línea de código que dice:

Este es mi nuevo widget!

con lo siguiente:

 // WIDGET CODE GOES HERE query_posts ("); if (have_posts ()): while (have_posts ()): the_post (); the_title (); endwhile; endif; wp_reset_query (); 

Esta es una consulta absolutamente básica que utiliza las opciones predeterminadas y el formato cero de la salida. Dependiendo de cómo esté configurado su blog, lo más probable es que el valor predeterminado sea el de capturar las 10 últimas publicaciones, entonces todo lo que hace el código anterior es generar el título de cada publicación. Es bastante feo, pero funciona:

Podemos hacerlo un poco mejor de inmediato simplemente agregando un poco de formato HTML a la salida con el ECO comando, y creando un enlace a la publicación usando get_the_permalink () función:

 query_posts ("); if (have_posts ()): echo"
    "while while (have_posts ()): the_post (); echo"
  • ".get_the_title ()."
  • "; endwhile; echo"
"; endif; wp_reset_query ();

Ya se ve mucho mejor. Pero solo queremos una entrada, elegida al azar. Para ello, especificamos algunos parámetros en la consulta:

 query_posts ('posts_per_page = 1 & orderby = rand'); 

Por supuesto, puede cambiarlo a cualquier cantidad de publicaciones; de hecho, hay una gran variedad de bits adicionales que puede pasar a la consulta para restringir, expandir o cambiar el orden de los resultados, pero sigamos con eso para ahora. Si actualizas, deberías ver solo una publicación aleatoria cada vez que actualizas.

Ahora para la miniatura mostrada. Reemplace el código con esto, esperamos que pueda ver dónde estamos agarrando la miniatura y mostrándola:

 query_posts ('posts_per_page = 1 & orderby = rand'); if (have_posts ()): echo "
    "while while (have_posts ()): the_post (); echo"
  • ".get_the_title (); echo the_post_thumbnail (array (220,200)) echo"
  • "; endwhile; echo"
"; endif; wp_reset_query ();

Puedes ver los resultados finales nuevamente en mi blog de desarrollo Guía de autosuficiencia, aunque podría haber cambiado las cosas cuando leíste esto.

Conclusión:

¿Ves lo fácil que es crear tu propio widget personalizado que puede hacer exactamente lo que quieres? Incluso si no entiendes el 90% del código que te he mostrado hoy, deberías poder personalizarlo un poco cambiando las variables o generando un código HTML diferente. Escribimos un widget completo hoy, pero podría usar fácilmente la nueva consulta y el código de bucle en cualquiera de sus plantillas de página..

¿Problemas? ¿Necesitas ayuda relacionada con WordPress diferente? Siempre estoy disponible para ayudar en las respuestas de MakeUseOf, así que dirígete y publica una nueva pregunta allí..

Explorar más sobre: ​​Blogging, Programación, Wordpress..