Cómo introducir en wordpress un nuevo campo en la instancia de una imagen

Como sabemos, por una parte podemos introducir un campo adicional en una imagen que esté subida a wordpress, y ese campo estará disponible siempre que introduzcamos esa imagen en un post, pero hoy hablaremos que cómo añadir un nuevo campo en una instancia de un post (esa pantalla que aparece cuando insertas una imagen en un post y posteriormente clicas en ella y la editas).

Los pasos a seguir son los siguientes:

En el functions.php es necesario incluir el siguiente código:

/**
 * Include in Image Details of a photo the possibility of having another param called
 * @return string
 */
function add_my_settings() {
 ob_start();
 wp_print_media_templates();
 $tpl = ob_get_clean();
 if ( ( $idx = strpos( $tpl, 'tmpl-image-details' ) ) !== false
	&& ( $before_idx = strpos( $tpl, '

Es necesario crear un nuevo archivo llamado imageDetailsModification.js (o el nombre que sea, recordar modificarlo entonces también en el código anterior)

// When Image is Edited
wp.media.events.on('editor:image-edit', function(data) {
	data.metadata.my_setting_know_more = data.editor.dom.getAttrib( data.image, 'data-know-more' );
});

// When Image is Updated
wp.media.events.on('editor:image-update', function(data) {
	data.editor.dom.setAttrib( data.image, 'data-know-more', data.metadata.my_setting_know_more );
});

Eso sería todo lo referente a la parte de administración. En la parte de front tendremos que usar dicho valor que ya estaría almacenado. Yo lo tengo hecho por ejemplo habiendo realizado un add_filter de img_caption_shortcode

add_filter('img_caption_shortcode', function ($empty, $attr, $content) { .... } , 10, 3);

Y ya lo último es en el punto que queramos usar

preg_match_all('/data-know-more=([\'"]?)(.+?)\1[ >]/', $content, $matches);
$knowMore = $matches[2];

Urls que me han ayudado:

  • Añadir más opciones a la instancia de una imagen (link)
  • Guardar opciones como atributos data-* (link)
  • Incluir un nuevo tag html (link)