Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Guardar imágenes con el cargador de medios de WordPress

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Getting Started with the WordPress Media Uploader.
Adding and Removing Images with the WordPress Media Uploader

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En esta serie, vamos a echar un vistazo a cómo implementar el cargador de medios de WordPress en un plugin real. La idea detrás de esta serie y su código asociado es proporcionar una clara comprensión sobre cómo funciona, cómo podemos usarlo en el futuro, y cómo podemos incorporarlo a nuestro trabajo.

Hasta este punto, hemos cubierto lo siguiente:

  1. Introducción al cargador de medios de WordPress
  2. Añadir y eliminar imágenes con el cargador de medios de WordPress

Y a lo largo de estos artículos, hemos recorrido el proceso de creación de un plugin que utiliza el cargador de medios de WordPress para incluir una imagen destacada en el pie de página de las entradas de nuestro blog y de nuestras páginas.

Pero hay un problema: la imagen no se guarda ni se muestra en el contenido de su entrada de blog o su página asociadas.

En este artículo, vamos a retomar las cosas allí donde las dejamos y terminaremos de implementar el resto de este plugin. Ten en cuenta que asumo que has leído las dos entradas anteriores y que entiendes el código fuente que hemos visto hasta ahora.

Dicho esto, reanudemos.

Guardar la imagen destacada

La clave para asegurarse de que la imagen se puede mostrar en el front-end de WordPress es guardar la información de imagen proporcionada por WordPress.

En el artículo anterior, usamos parte de esta información para mostrar la imagen en el meta box que creamos, pero ninguna de esa información se guardó realmente. Por tanto, la imagen no se puede mostrar en el escritorio o en el front-end del sitio debido a que WordPress verdaderamente no la recuerda.

Vamos a arreglar esto. En concreto, vamos a guardar campos para:

  • La URL de la imagen de manera que podamos establecer el atributo src de la imagen
  • El título de la imagen para que podamos establecerlo como el atributo alt de la imagen y como el atributo title

Introducir los metadatos

Lo primero que tenemos que hacer es añadir otro contenedor con tres campos de entrada en la vista admin.php de nuestro plugin. Cada uno de estos campos corresponderá a cada uno de los anteriores valores.

Echa un vistazo al siguiente código el cual elaboraré a continuación:

En principio, debería ser lo suficientemente fácil de entender:

  • Hemos introducido un contenedor que se identifica mediante featured-footer-image-meta
  • Contiene tres campos de entrada de texto, cada uno de los cuales se corresponden a atributos de elemento de imagen que vamos a guardar

En este punto, necesitamos saltar de nuevo a nuestro archivo JavaScript para que podamos recopilar la información que nos sea devuelta a través del cargador de medios y rellenar los campos de entrada con esta información.

Abre admin.js y, a continuación, añade las tres siguientes líneas a la parte inferior de la función del controlador para el evento (event) de inserción (para file_frame):

A partir de aquí, navega a tu escritorio de WordPress, añade una nueva entrada o edita una existente, deberías ver algo similar a la siguiente imagen:

Suponiendo que hayas escrito directamente todo el JavaScript, deberías ver algo como esto basado en los datos que proporcionaste en el cargador de medios al seleccionar una imagen.

Sin embargo, ten en cuenta, que al hacer clic en "Eliminar imagen destacada" el texto permanece. Antes de ver realmente cómo guardar esta información, vamos a terminar el JavaScript para que este borre los campos de entrada cada vez que el usuario elimine la imagen.

Aunque hay un par de formas de hacerlo, yo he optado por usar el siguiente código:

Recuerda que esto debe colocarse en el controlador de eventos para el ancla "Eliminar imagen destacada". En el artículo anterior, denominamos a esta función resetUploadForm.

En este punto, deberías ser capaz de hacer clic en "Eliminar imagen destacada" y ver que la imagen y los campos de entrada se restablecen. Si tiene problemas, revisa el código fuente en el repositorio de GitHub asociado a esta entrada (estará en la rama maestra y también estará etiquetado como 1.0.0).

Guardar los metadatos

Ahora necesitamos introducir algún código en el plugin que desinfecte los valores de los campos de entrada, asociarlos con la entrada, y guardarlos en la base de datos para poder mostrar la información en el pie de página de cada entrada.

En la función de ejecución run para Acme_Footer_Image, añade la siguiente línea de código:

A continuación, tenemos que definir una función que será responsable de guardar realmente los valores de los campos de entrada en la base de datos. Hay dos cosas que debes saber sobre el siguiente código:

  • Estamos desinfectando los datos antes de guardarlos
  • Estamos asociando los campos con las claves que usaremos para mostrar la imagen en el front-end.

Antes de que estemos preparados para probar esto, necesitamos realizar dos cambios más en la vista del escritorio antes de mostrar las imágenes en el front-end.

En primer lugar, tenemos que asegurarnos de que hacemos eco de los metadatos de vuelta a los campos de entrada. Pasa a admin.php y actualízalo una vez más para incluir lo siguiente:

Aquí, estamos realizando una llamada a la función get_post_meta para recuperar los valores que se guardan con la función que hemos declarado antes.

A continuación, tenemos que asegurarnos de que rellenamos el elemento de imagen que creamos anteriormente en esta serie con los mismos valores:

Por supuesto, si los metadatos están vacíos, nada rellenará los atributos y la imagen no se mostrará.

Suponiendo que todo va bien, deberías ver la imagen y sus datos asociados que mostrados en los campos de entrada cuando se guarda la entrada. Del mismo modo, al eliminar la imagen destacada, los campos deben borrarse y ya no deberían mostrarse.

Limpieza

Antes de pasar a mostrar la imagen en el front-end, hay algunas pequeñas cosas que tenemos que hacer para limpiar la visualización del meta box.

En primer lugar, tenemos que asegurarnos de que todos los campos de entrada que antes eran del tipo text sean del tipo hidden.

A continuación, necesitamos escribir una pequeña función de JavaScript que se encargará de mostrar la imagen suponiendo que se haya guardado una. La función comprobará si el campo de entrada de la URL de la imagen no es una cadena vacía.

Si no es así, mostrará la imagen. Así que añadimos esta función a nuestro archivo JavaScript:

A continuación, realiza una llamada a la función JavaScript en el contexto de la función preparada para el DOM:

En resumen, cuando se carga la página, comprueba si existe una dirección URL en nuestro campo de entrada. Si es así, representa la imagen y nos ofrece la opción de eliminarla. De lo contrario, solo muestra vacío el cuadro de imagen destacada.

Una vez más, si tienes problemas para seguir este código, asegúrate de consultar el repositorio de GitHub asociado mediante el enlace de la barra lateral de esta página.

Visualización de la imagen destacada

En este punto, hemos hecho todo lo que debíamos hacer en el escritorio, por tanto, es el momento de mostrar la imagen en el front-end del blog. Para hacerlo, necesitamos configurar un gancho que se conecte a la acción the_content, comprobar si existe una imagen y, si es así, anexarla al contenido de la entrada.

Para ello, agrega primero la siguiente línea al método run de la clase Acme_Footer_Image:

A continuación, necesitamos escribir una función que esté enganchada a esta acción. Esta función será responsable de comprobar si solo estamos en una página única (porque no queremos anexar una imagen al pie de página de una entrada en el caso de que un usuario tenga, por ejemplo, una etiqueta "más" (more) como parte de su contenido).

Hacemos esto usando el siguiente código:

Y con esto, deberíamos tener un plugin completamente funcional que añade una imagen destacada al pie de página que se representa en la página de una entrada individual.

Conclusión

A lo largo de esta serie, hemos cubierto una gran cantidad de material, el menor de los cuales implicaba el uso del cargador de medios. Aunque este artículo en particular pasó más tiempo mostrándonos cómo conectar los datos desde el meta box al front-end, también nos demuestra cómo aplicar un uso práctico del cargador de medios en el contexto de un plugin.

Dicho esto, hay mucho más que aprender sobre el cargador de medios que podríamos cubrir en futuros temas. Si estás interesado, por favor házmelo saber en la sección de comentarios que viene a continuación. Además, si tienes alguna pregunta sobre lo que has leído o sobre esta serie en general, no dudes en hacerlo también.

No olvides consultar el repositorio GitHub de este proyecto, ¡espero que te resulte útil en el futuro cuando trabajes con el cargador de medios!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.