En este tutorial, utilizaremos la API del widget de WordPress y la API de Flickr para crear un widget básico de Flickr. El widget será un widget de uso múltiple; le pide al usuario un nombre de usuario y la cantidad de imágenes para mostrar, y utiliza esa información para mostrar las fotos de Flickr. Hay muchos complementos pre-construidos por ahí que funcionan con Flickr, pero no hay nada mejor que hacerlo usted mismo si está buscando dar otro paso en su educación de WordPress.!
Introducción
Flickr es uno de los sitios para compartir fotos más populares del mundo: alberga más de 5 mil millones de imágenes, y al crear un widget de Flickr, aprenderá cómo usar la API de Flickr y cómo crear widgets de WordPress que se pueden usar fácilmente. Adaptado a su propio tema o sitio web. Antes de comenzar a escribir cualquier código, debe prepararse para el proyecto. Para crear un widget dentro de un tema, primero necesita un archivo para tener el código del widget. Usaré el predeterminado Dosmil once tema que viene con WordPress, por supuesto, puede utilizar cualquier tema de su elección. Siga estos pasos:
Crea una nueva carpeta en el tema llamado widgets.
Hacer un espacio en blanco php archivo llamado widget.php y guárdalo en la carpeta.
Descargue la excelente biblioteca de phpFlickr desde aquí y pegue los archivos en widgets / phpFlickr
Regístrese para obtener una clave API de Flickr. Debería necesitar una clave no comercial, a menos que esté creando un producto comercial.
Paso 1 Preparando el código de tu widget
Desde WordPress 2.8, ha habido una API de widget conveniente que puedes usar para crear tus widgets. Copia y pega este código de esqueleto en tu widgets.php expediente:
'flickr_widget', 'description' => '¡Muestra tus fotos favoritas de Flickr!' ); $ this-> WP_Widget ('flickr_widget', 'Flickr Posts', $ widget_ops); formulario de función ($ instancia) actualización de función ($ nueva_instancia, $ antigua_instalación) widget de función ($ args, $ instancia) add_action ('widgets_init', 'rm_load_widgets'); función rm_load_widgets () register_widget ('RM_Flickr'); ?>
Cada una de las funciones anteriores tiene un propósito específico:
RM_FLickr es tanto el nombre de la clase como el nombre de la primera función (el constructor). El constructor contiene el código para configurar el widget, se llama Flickr Posts.
formar() genera el formulario que ves en la página de administración de widgets en WordPress.
actualizar() actualiza las opciones que ingresa en el formulario cuando se guarda la configuración del widget.
widget () Muestra la salida real del widget en el sitio principal..
La última parte del código se engancha en la inicialización del widget de WordPress y le indica que registre su widget
Solo queda una cosa: su archivo de widget existe, pero hasta el momento no hace nada. Para que WordPress lo use, debe incluir el archivo de su funciones.php expediente. Asi que abre funciones.php y pegue en esta línea: (Lo puse en TwentyEleven's twentyeleven_setup () método)
Si enciendes WordPress, deberías ver el widget aparecer en la página de administración de Widgets:
Por supuesto, ya que no se ha agregado ningún otro código, el widget no tiene ninguna opción o salida. Ahora, nos aseguraremos de que el widget tenga entradas de formulario
Paso 2 Creando el formulario
Antes de crear el formulario para un widget, debe averiguar qué tipo de entradas necesita. Para este widget en particular, necesitamos tres entradas que debe dar el usuario: un título para el widget, el nombre de usuario de FLickr y la cantidad de fotos que se mostrarán. Si echa un vistazo al código de esqueleto de arriba, notará que hay un parámetro $ instancia en el formar() función. Básicamente, contiene los valores actuales de todas las entradas en el formulario (por ejemplo, cuando guarda el formulario con ciertos valores). Por lo tanto, necesitamos extraer los valores actuales del widget y rellenar los campos de entrada del widget con ellos. Pega este fragmento de código en la función:
Primero, usamos el wp_parse_args () función para asegurarnos de que hay ciertos valores predeterminados en el widget, y luego extraemos los valores en variables como $ titulo. Ahora que tenemos los valores, necesitamos compilar el html de la función:
?>
Esto parece una buena porción de código, pero en realidad es bastante simple. Simplemente está creando un formulario HTML regular, con algunos cambios. Primero, en lugar de usar tu ID y nombre es, tienes que usar get_field_id (). Esto se debe a que si hay varias instancias de un widget y solo una ID única, obviamente habrá errores. WordPress se encarga de ello por usted si utiliza dicha función. La otra cosa es que la valor de los campos de entrada se genera utilizando PHP. Guarde el archivo y eche un vistazo en WordPress:
Notará que si intenta cambiar los valores y hace clic en Guardar, no se guardarán. Eso es porque todavía no hemos escrito el actualizar() función. Hagamos eso siguiente
Paso 3 Asegurándose de que las actualizaciones de su formulario
Para asegurarse de que su formulario se actualice, debe configurar su actualizar() función. Esto es en realidad bastante simple. Por defecto, WordPress le envía dos parámetros: la instancia anterior y la nueva instancia. Básicamente, no necesitamos realmente la instancia anterior porque la instancia anterior solo se usa si hay valores que no desee cambiar. Pega este código en el actualizar() función:
Bastante simple - copia la nueva instancia en una variable $ instancia, realice los cambios que desee (como eliminar cualquier etiqueta html) y regreso La variable para garantizar cambios de actualización. Ahora si vas a WordPress, los cambios se guardarán!
Paso 4 Habilitando el Widget HTML
Este es el último paso, y se asegura de que el widget muestre HTML en el extremo delantero. Ahora que hemos configurado las entradas del usuario, podemos usarlas para interactuar con la API de Flickr y mostrar imágenes. El primer paso en el widget () La función es recuperar los valores de las entradas del usuario. Pega en este código:
extracto ($ args); $ title = apply_filters ('widget_title', $ instance ['title']); if (vacío ($ título)) $ título = falso; $ flickr_id = $ instance ['flickr_id']; $ number = absint ($ instance ['number']);
Se explica por sí mismo: las entradas se obtienen y almacenan en variables. A continuación, necesitas exigir la biblioteca de phpFlickr y configúrela usando su clave API:
require_once (TEMPLATEPATH. "/widgets/phpFlickr/phpFlickr.php"); $ f = new phpFlickr ("[CLAVE API]");
Una vez que esté configurado, pegue este código:
if (! empty ($ flickr_id)) echo $ before_widget; if ($ title) echo $ before_title; echo $ titulo; echo $ after_title; $ person = $ f-> people_findByUsername ($ flickr_id); $ photos_url = $ f-> urls_getUserPhotos ($ person ['id']); $ photos = $ f-> people_getPublicPhotos ($ person ['id'], NULL, NULL, $ number); foreach ((array) $ photos ['photos'] ['photo'] as $ photo) echo " \ n "; echo" "; echo""; eco ""; eco " \ n "; echo $ after_widget;
Vayamos a través de este paso a paso. Primero, necesitamos ver si el nombre de usuario de Flickr ha sido especificado. Si no es así, no podemos mostrar imágenes. Las variables $ before_widget, $ before_title & $ after_title, Los cuales son automáticamente dados por WordPress, deben ser mostrados. Luego, usamos la biblioteca phpFlickr para obtener las fotos del usuario especificado. El número de fotos está definido por la variable. $ numero. Finalmente, recorramos las imágenes utilizando un bucle foreach y creamos el HTML para mostrar la foto, y luego mostramos el contenido del widget posterior. Ahora, según el tema con el que esté trabajando y el aspecto que desea que tengan las imágenes, puede modificar el HTML. La única parte que debe permanecer constante es el enlace a la imagen, que puede ser de varios tamaños, como Cuadrado, pequeño, mediano, grande, etc. Ahora que se ha hecho esto, puede intentar configurar el widget y ver el resultado. Usé un usuario popular de Flickr, Me olvides nudo fotografia como el nombre de usuario. Echar un vistazo:
Conclusión
Para cualquiera que disfrute de su fotografía, un widget de Flickr es una excelente adición al sitio web de WordPress. Con este tutorial, es fácil crear un widget de Flickr personalizable. Puede agregar o eliminar opciones, cambiar el tamaño de las imágenes, alterar el aspecto del widget y mucho más. Ahora sabes cómo crear widgets de WordPress fácilmente!
¡Un widget de Flickr personalizado podría verse así!
Share
Accentsconagua
