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

Comenzando con el WordPress Media Uploader

by
Read Time:14 minsLanguages:
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 honeymmmm (you can also view the original English article)

Cuando se lanzó WordPress 3.5, uno de los cambios más importantes que se introdujo fue el de Media Uploader. Tal vez una descripción más precisa del cambio sería referirse a como una adición de un nuevo Cargador de medios.

Después de todo, la versión anterior del Cargador de medios todavía existe y puede ejecutarse en paralelo con la Biblioteca de medios actual, pero es algo que debe hacerse a través de la adición y el uso adecuados de los scripts, el estilo y todas las demás funciones dependientes.

Al igual que con cualquier cosa en el software, las características y funcionalidades que existen por una cantidad significativa de tiempo están sujetas a la desaprobación en favor de nuevas funcionalidades o características. En nuestro caso, la biblioteca de medios no es una excepción. Aunque ya no está siendo utilizado por el núcleo de WordPress, hay muchos complementos y otras utilidades de terceros que aún utilizan la versión anterior de la Biblioteca de medios

El desafío que conlleva tener tantas copias del código de la funcionalidad anterior es que, cuando llegue el momento de utilizar la Biblioteca de medios, es probable que terminemos encontrando ejemplos de la funcionalidad anterior.

Ya que la nueva biblioteca de medios es el nuevo estándar en WordPress, y como no hay mucha documentación disponible sobre cómo usarla, vamos a echar un vistazo a la funcionalidad de los próximos artículos para entender cómo se muestran los nuevos medios. La biblioteca está construida, cómo podemos implementarla en nuestro propio trabajo y cómo podemos aprovechar las diversas funciones que ya están incluidas en el núcleo de WordPress.

El WordPress Media Uploader

El nuevo WordPress Media Uploader tiene una serie de ventajas sobre la iteración anterior:

  • Soporte para arrastrar y soltar
  • Interfaz más limpia
  • Gestión más sencilla de las galerías.
  • …y más

Sin embargo, es importante tener en cuenta que la versión más reciente del cargador se construye utilizando un conjunto de tecnologías completamente diferentes a las anteriores. Esto significa que el código que escribió una vez para implementar la administración de medios personalizada aún puede funcionar (hasta que el código Thickbox principal esté en desuso), pero se verá y se sentirá anticuado en comparación con lo que los usuarios están experimentando cada vez que administran sus medios dentro de WordPress.

Una palabra sobre los guiones bajos y la columna vertebral

Antes de echar un vistazo a cómo comenzar a incorporar esto en nuestro propio código y crear nuestra propia implementación, es importante comprender la base subyacente de la nueva biblioteca de medios.

Como se mencionó anteriormente, la edición anterior del cargador de medios usó una biblioteca que se conocía como Thickbox para crear las cosas que hemos visto, pero en la última implementación, WordPress usa ambos guiones bajos (no debe confundirse con el guión bajo). Tema) y Backbone: dos tecnologías de JavaScript que trabajan juntas para impulsar la interfaz de usuario y administrar los eventos del cargador de medios.

Aunque no haremos una inmersión profunda en ninguna de estas bibliotecas, es importante entender el papel que desempeña cada uno en el Cargador de medios.

Primero, Backbone:

Backbone.js proporciona estructura a las aplicaciones web al proporcionar modelos con enlace de valor-clave y eventos personalizados, colecciones con una API enriquecida de funciones enumerables, vistas con manejo de eventos declarativo, y lo conecta todo a su API existente a través de una interfaz RESTful JSON.

Y subrayar:

Underscore es una biblioteca de JavaScript que proporciona una gran cantidad de ayudantes útiles de programación funcional sin extender ningún objeto incorporado. Es la respuesta a la pregunta: "Si me siento frente a una página HTML en blanco y quiero comenzar a ser productivo de inmediato, ¿qué necesito?" ... y el vínculo para ir junto con el esmoquin de jQuery y los tirantes Backbone.

Obviamente, puede leer más acerca de cada uno de estos en sus respectivas páginas, pero quería mencionarlos ahora para que cuando empecemos a analizar la administración de la interfaz de usuario y los eventos para nuestra implementación personalizada de la Biblioteca de medios, tengamos un entendimiento más claro sobre Lo que realmente está haciendo el código.

Por último, tenga en cuenta que esto no es jQuery. Si estás acostumbrado a trabajar con esa biblioteca, y muchos de nosotros lo estamos, estas dos bibliotecas están completamente separadas. Puede, y nosotros, usaremos jQuery junto con la funcionalidad agregada por Backbone y Underscore.

Incorporando el cargador de medios

Ahora, vamos a escribir algo de código.

Para los propósitos de nuestro ejemplo, vamos a echar un vistazo a la forma en que integramos una versión básica de la Biblioteca de medios en un tema de WordPress existente. Para los propósitos de nuestro ejemplo, estaremos creando esto como un complemento; Sin embargo, el entorno que vamos a utilizar consiste en lo siguiente:

  • Una instalación base de WordPress 3.9.2
  • El tema de los veinte veinte

Y eso es. El resto del código estará contenido en nuestro complemento. Por supuesto, esto todavía plantea la cuestión de lo que realmente va a hacer nuestro complemento.

En resumen, vamos a trabajar para imitar la funcionalidad de 'Imagen destacada' de WordPress, pero en lugar de agregar una imagen en la parte superior de la publicación (o cerca de la parte superior de la publicación), presentaremos una Imagen de pie de página destacada 'que agrega la imagen al final de la publicación.

Obviamente, la funcionalidad es trivial: el énfasis está en la implementación de la nueva biblioteca multimedia.

Todo el código fuente estará disponible para su revisión en un repositorio de GitHub asociado con este artículo, siéntase libre de seguir el código a medida que avanza el artículo y luego descargue el código para estudiar más después de cada artículo para una revisión adicional.

1. Configurar el directorio de proyectos

En el directorio wp-content/plugins, cree un nuevo directorio llamado acme-footer-image. Aquí es donde guardaremos nuestros archivos de proyecto. Después de eso, siga adelante y cree los archivos vacíos de la siguiente manera;

  • README.txt
  • LICENSE
  • acme-footer-image.php

Los tres primeros archivos deben ser autoexplicativos. El archivo acme-footer-image.php es donde definiremos el encabezado del complemento y comenzaremos a ejecutar el complemento. Tenga en cuenta que class-acme-footer-image.php es la clase que definirá algunas de las funciones iniciales de nuestro complemento.

A continuación, cree un directorio dentro del directorio de complementos llamado admin, ya que aquí se guardará toda nuestra funcionalidad de administración. Este directorio debe contener:

  • admin/class-admin-footer-image.php
  • admin/js/admin.js

Finalmente, cree un directorio de views dentro del subdirectorio admin ya que aquí es donde colocaremos el marcado para nuestro meta box. Veremos esto en más detalle más adelante en este artículo.

En un intento por asegurarnos de que estamos creando un conjunto de archivos bien organizado, cada uno de los cuales mantiene su propio conjunto de responsabilidades, analizaremos cada uno de estos archivos con mayor profundidad y trabajaremos en el tutorial. Por ahora, sin embargo, esto debe incluir todo lo que necesitamos para comenzar.

2. Configura el README

Antes de escribir el código real, avancemos y completemos parte de la información predeterminada que comienza con README.

Tenga en cuenta que esto también contiene el registro de cambios.

3. Configurar la clase de plugin

A continuación, debemos definir el código para la clase del complemento principal. Esta clase será responsable de lo siguiente:

  • Definiendo el número de versión.
  • Definiendo la babosa que se usa en toda la clase.
  • Registro y puesta en cola del JavaScript necesario.
  • Renderizando la meta caja

En general, no encuentro que esta sea la mejor manera de desarrollar complementos orientados a objetos porque, como puede ver, esta clase ya está haciendo más de una cosa. Esa es una mala práctica; sin embargo, debido a que la cantidad de código es muy corta y el énfasis de esta serie se centrará principalmente en el JavaScript que controla la biblioteca de medios, este es un sacrificio que estoy dispuesto a hacer.

Así que echemos un vistazo a la clase en su totalidad y luego echaremos un vistazo a algunos de los componentes individuales:

La mayor parte del código debe explicarse por sí mismo a través de los comentarios. Si no, no dudes en dejar un comentario, pero mientras tanto, echemos un vistazo a las siguientes dos áreas:

Primero, la definición de la meta box.

Tenga en cuenta que estamos incluyendo el soporte para el cuadro de meta en ambas páginas y tipos de publicaciones. Esta función también se refiere a una función de devolución de llamada display_featured_footer_image que es responsable de representar el HTML de la caja meta

El marcado para este archivo es muy simple. Es un ancla con una ID a la que podemos acceder a través de nuestro JavaScript, que analizaremos momentáneamente.

Y pondremos en cola el JavaScript necesario para cargar la biblioteca de medios.

Tenga en cuenta que antes de registrar nuestro propio JavaScript, estamos haciendo un llamado a wp_enqueue_media. Según el Codex, esta función:

Encola todos los scripts, estilos, configuraciones y plantillas necesarios para usar todas las API de JavaScript de medios.

Y esto es necesario para asegurarnos de que tenemos las dependencias necesarias para cargar el nuevo Media Uploader.

4. El JavaScript

A continuación, echemos un vistazo al JavaScript que debemos escribir para asegurarnos de que aprovechamos la funcionalidad necesaria para configurar la Biblioteca de medios y para asegurarnos de que se muestra cuando el usuario hace clic en el enlace apropiado .

El código está muy comentado, por lo que debería ser fácil de seguir. Si no, ¡no dudes en dejar un comentario en el feed debajo de la publicación!

Tenga en cuenta que esto solo muestra la biblioteca de medios. En realidad, no hace nada después de que hayamos subido y / o seleccionado una imagen.

5. Configurar el archivo del complemento Core

Finalmente, el último paso es definir nuestro archivo de arranque básico para iniciar el complemento:

Aquí, todo debería ser relativamente familiar: nos aseguramos de que tenemos permiso para cargar el complemento, incluimos la dependencia para el panel de control, creamos una instancia del widget y lo activamos.

6. Ponerlo en marcha

En este punto, estamos leyendo para activar el complemento. Hágalo desde el panel del complemento de su instalación de WordPress y luego navegue a cualquier pantalla de Publicación o Página. Debería notar una "Imagen destacada del pie de página". Luego, cuando haga clic en el ancla, aparecerá la Biblioteca de medios.

De lo contrario, vuelva a verificar las rutas que ha asociado con su archivo JavaScript y asegúrese de que estén cargando correctamente.

Desde aquí, eres libre de seleccionar imágenes y subir imágenes, aunque nada más viene de eso. En el siguiente artículo, veremos cómo aprovechar los datos recuperados del cargador de medios.

Conclusión

Aquí, echamos un vistazo a la última versión de WordPress 'Media Uploader, cómo funciona y cómo podemos sentar las bases para aprovecharla en nuestro código. En el siguiente artículo, veremos cómo usar JavaScript para capturar los datos agregados al Media Uploader para que, a su vez, podamos hacer lo que queramos con ellos.

Además, vamos a echar un vistazo a cómo podemos introducir campos adicionales en el Cargador de medios utilizando las plantillas existentes que vienen con el núcleo de WordPress. Y más adelante, veremos cómo podemos implementar campos adicionales junto al Cargador de medios para guardar aún más información.

Por ahora, juegue con el código provisto en este artículo, vea si puede hacerlo funcionar dentro del contexto de sus propios proyectos, y deje preguntas y / o comentarios que tenga en la fuente de comentarios a continuación.

Finalmente, no olvide que puede verificar este código desde el repositorio asociado de GitHub adjunto a esta publicación.

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.