Plugin para subir imágenes en un campo personalizado de WordPress

Es sencillo crear en WordPress campos personalizados para entradas y páginas usando la función add_metabox. Esta función te permite añadir nuevas secciones a las páginas de creación y edición de Entradas y de Páginas. Ya hemos hablado sobre esta función en este artículo sobre Campos personalizados para las Entradas personalizadas en WordPress. Un buen artículo no tan enfocado a las estradas personalizadas es este de Wptuts+.

Pero ¿qué hacer cuando queremos que se pueda subir una imagen desde el campo personalizado? Supongamos que las entradas de nuestra página de WordPress son “Productos”, y que cada producto tiene tres imágenes. Podemos subir las imágenes desde el apartado “Multimedia” y luego crear tres campos personalizados de texto y escribir en ellos el nombre de cada archivo. Puede ser que para nosotros sea más que suficiente. Pero, ¿y si le estás haciendo la página a un cliente no experto en WordPress? La primera vez que le explicas el proceso de subir la imagen del producto puede ser que veas que no se está enterando de nada…

En estos casos es mejor que el campo personalizado sea directamente un botón para subir la imagen. Al hacer click en crear o editar una entrada queremos que nos salga esto:

Campos personalizados en WordPress para subir imágenes

Y una vez subimos una imagen queremos que esta se vea para ser más sencillo saber qué es lo que hemos subido (por cierto, una pulsera de Teresa Aldama)

Campos personalizados en WordPress para subir imágenes

Vamos a crear un sencillo plugin que nos va a crear tres campos personalizados para subir tres imágenes diferentes (siguiendo el ejemplo del “Producto”). Hay muchos plugins de WordPress que nos permiten hacer esto, pero muchas veces son tan completos y complejos que lo que queremos es una solución simple y propia, que podamos editar sin problemas según nuestras necesidades y a nuestro antojo.

Para crear este plugin hay muchos artículos y discusiones que me han servido de fuente, como estos:
- Using the WordPress Uploader in Your Plugin or Theme
- Multiple Media Uploads in WordPress’ Functions.php
- Y sobre todo la ayuda del gran libro Professional WordPress Plugin Development

Vamos a crear dos archivos, uno al que llamaremos imagenes-meta-box.php, donde estará toda la lógica del plugin, y otro al que llamaremos imagenes-meta-box.js, donde estará el código javascript para que salga el cargador de medios de WordPress. Creamos una carpeta en wp-content/plugins que se llame “imagenes-meta-box” y guardamos ahí los dos archivos.

Vamos con el primer archivo, imagenes-meta-box.php. Vamos a verlo poco a poco, sólo tendréis que unir las partes que vayamos viendo en el mismo orden ( bajaros el plugin completo al final del artículo).

La primera parte, como veis, utiliza la función de WordPress add_metabox para crear el meta-box personalizado. Aqui hay varias opciones que podéis personalizar según vuestras necesidades, como el tipo de entrada donde van a salir (‘post’, ‘page’, ‘link’, o ‘custom_post_type’, en este último caso poned el nombre de la entrada personalizada), la parte de la pantalla donde aparecerá y en qué posición.
Como veis se llama a la función em_mtbx_img_function que es la que mostrará los campos en la pantalla agregando el código HTML

Seguimos con la siguiente parte, que será precisamente esa función:

Empezamos en la línea 3 con el título, que lo podéis cambiar al título que queráis y al tamaño que queráis (yo he puesto como etiqueta h2 por lo que sale bastante grande).

En la línea 5 obtenemos el valor del primer campo, es decir, la URL completa de la primera imagen (en el caso de que ya la hubiéramos subido, claro).

En las líneas 7 a 10 creamos el campo donde se podrá escribir la URL de una imagen o hacer click sobre el botón que abre la ventana característica de WordPress para cargar medios. El funcionamiento de este botón lo gestionaremos mediante el archivo imagenes-meta-box.js, como ya dijimos antes y veremos más tarde. Vemos que si existe ya algún valor previo este se mostrará en su campo respectivo. Podemos además añadir campos de texto explicativos, como en este caso el tamaño que deben tener las imágenes (en ocasiones muy importante si es un tercero el que las va a subir). La clase “button-secondary” del botón es propia de la hoja de estilos de WordPress.

En las líneas 11 a 13 comprobamos si existe el valor previo y mostramos la imagen.

Lo que viene a continuación es una simple repetición para las imágenes dos y tres. Aquí podéis quitar o añadir en función de las necesidades, cuidando también de añadir o quitar en la última función en la que se graban los campos.

Seguimos con una serie de funciones que permiten que el código javascript y el estilo, thickbox, que es el que usa WordPress, se carguen sólo al crear o editar una entrada:

Y acabamos grabando los campos:

Si tenéis más imágenes tendréis que añadir uno por imagen. Como veis comprueba si existe cada entrada y en su caso la graba en la base de datos, limpiándola antes con esc_url_raw.

Vamos a ver ahora el archivo imagenes-meta-box.js. Este archivo va a permitir que al hacer click en el botón del formulario aparezca el cargador de medios de WordPress.

Cada vez que hacemos click en un botón con la clase .img_boton añadimos a la etiqueta “html” la clase “Image” (línea 6) y guardamos en una variable llamada “formfield” el valor del atributo “name” del elemento anterior con la clase “em_mtbx_img” a aquel sobre el que se haya hecho click ($this) (línea 7). Esta parte es muy importante porque gracias a ese valor vamos a poder seleccionar en la línea 18 el ID de dicho input para establecer el valor del mismo en función de la imagen seleccionada. Por eso es importante que los atributos ID y name de los inputs sean iguales.

Bueno, pues ya tenemos nuestro plugin. Ya sólo hay que ir a la sección de plugins del administrador y activarlo.

Ahora viene la segunda parte. ¿Cómo obtenemos las imágenes dentro de nuestro tema? Pues como si de cualquier otra entrada personalizada se tratara. Supongamos que estamos en single.php de nuestro tema, dentro del loop haríamos:

Lo mismo sería para las otras dos imágenes.

A propósito, el plugin lo he probado con el RC2 de WordPress 3.3 y funciona perfectamente con el nuevo cargador de medios.

¡Espero vuestros comentarios! Seguro que se os ocurren maneras de mejorarlo para que sea más útil para todos.

22 comentarios en “Plugin para subir imágenes en un campo personalizado de WordPress

  1. Buenas tardes

    Excelente articulo pero tengo un problema al implementarlo, con el cargador de medios de wordpress 3.3 me aparece solo la opcion de insertar en la entrada o borrar lo cual no me permite, subir directamente en el campo personalizado.
    Muchas gracias

    • Gracias Gustavo,

      Al hacer click en Insertar en la entrada el nombre de la imagen se debería poner en el campo personalizado. No te sucede eso?

  2. Muy buen plugin, muchas gracias
    Lo que tengo un problema, creé dos plugins distintos, uno para posts y otro para páginas. Y el thickbox de wordpress no me funciona.. Osea solo deja que funcione uno de los dos, cuando das a insert, se queda el thickbox en blanco y no graba el campo.

    Gracias

  3. una pregunta:
    perfecto el plugin pero….. podria hacer que las imagenes que se suban sean de un peso y un tamaño personalizado, por ejemplo 750kb y 800×800.
    o mejor aun que se autodimensionen al subirlas?
    pido mucho?

  4. Hola, muy bueno el articulo. Lo utilice y me sirvió a la perfección.

     

    Estuve tratando de modificar el código para hacer que al subir la imagen se abra una ventana modal y ver esa misma imagen en grande, pero no pude. Hice los mismo pero para utilizar la imagen con zoom image, pero tampoco pude.

     

    Alguna idea con esto, se los agradecería.

     

    Saludos.

  5. Hola Maestro, una consulta después de obtenida la imagen, y usarla con el código este:

    Se podría obtener los meta de la imagen, es decir el titulo que se le dio en el cuadro de multimedia. y otros campos como leyenda etc.?
    Me he roto la cabeza intentando obtener esos datos, agradecería mucho su ayuda.

  6. Holla estoy intentando que al insertar

    Muestre el ALT=”DESCRIPCION DE LA FOTO” para mejorar el seo, pero no logro hacerlo, como podria hacerlo
    Desde ya muchas gracias, tu script va genial

  7. Otras de las cosas que habría que mejorar al plugin es la posibilidad de que muestre todas las imágenes con una sola función o sea
    si cargo una imagen muestre esa imagen con un solo código, y si cargo 10 imágenes muestre con el mismo código las 10 imágenes. Esto haría que no haga  10 consultas a la bd

    Es solo una sugerencia, espero no lo tomes a mal.
    Saludos

    • Claro que no lo tomo a mal! Todo es mejorable y esto más! En el artículo que te he puesto antes puedes obtener de una vez todas las imágenes que subas.

  8. Hola gracias por la información

    tengo varios campos personalizados (20)

    subir imágenes una por una es muy lento. ¿como se puede subir una imagen en todos los campos personalizados de una vez????

    gracias.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">