Gestión de medios

Este plugin también permite seleccionar imágenes o archivos PDF directamente desde la biblioteca de medios de WordPress, lo que facilita al administrador asociar contenido visual o documentación técnica a cada producto.

La selección de medios se realiza desde el backend, utilizando JavaScript para invocar el selector de medios de WordPress (wp.media).

Activar la biblioteca de medios

Primero es necesario asegurarse de que WordPress cargue los scripts necesarios para trabajar con el selector de medios:

wp_enqueue_media();

Esto debe llamarse dentro del hook admin_enqueue_scripts, y solo cuando se está editando un producto, para evitar cargar recursos innecesarios en otras páginas del admin.

HTML en el backend

El campo del backend se construye con un input de texto y un botón asociado:

$url_ficha = get_post_meta($post->ID, 'url_ficha', true);
echo '<p class="form-field url_ficha_field">
  <label for="url_ficha">' . esc_html__('URL de la ficha PDF', 'mi-plugin') . '</label>
  <input type="text" class="short" name="url_ficha" id="url_ficha" value="' . esc_attr($url_ficha) . '" />
  <button class="button scp-subir-archivo" data-target="url_ficha">' . esc_html__('Seleccionar PDF', 'mi-plugin') . '</button>
</p>';

🔎 Nota: data-target contiene el ID del input que se actualizará con la URL del archivo.

JavaScript para invocar el selector de medios

jQuery(document).ready(function($) {
  $('.scp-subir-archivo').on('click', function(e) {
    e.preventDefault();
    var target = $(this).data('target');

    var uploader = wp.media({
      title: 'Seleccionar archivo',
      button: { text: 'Usar este archivo' },
      multiple: false
    });

    uploader.on('select', function() {
      var attachment = uploader.state().get('selection').first().toJSON();
      $('#' + target).val(attachment.url);
    });

    uploader.open();
  });
});

Este script debe incluirse en el backend. El plugin actual lo hace usando admin_enqueue_scripts y un archivo JS separado (select-image.js).

¿Qué se puede seleccionar?

Aunque el nombre del script original es select-image.js, el mismo patrón funciona para cualquier tipo de archivo, incluidos documentos PDF. WordPress no impone restricciones por tipo MIME a menos que se especifique.

Consejos

Siempre sanitiza la URL antes de guardarla usando esc_url_raw().
Puedes mostrar una miniatura, icono o enlace en el frontend con un shortcode o función condicional.
Si el archivo no existe o el campo está vacío, evita mostrar enlaces rotos.

Ejemplo de guardado seguro en PHP:

if (!empty($_POST['url_ficha'])) {
  update_post_meta($post_id, 'url_ficha', esc_url_raw($_POST['url_ficha']));
} else {
  delete_post_meta($post_id, 'url_ficha');
}

Enlaces útiles

→ 06 Compatibilidad con WPML