Custom metabox para imagenes

Escrito por: Aina Lluna on 22 octubre, 2011 | Leave a comment

Para un proyecto nuevo, necesitaba la forma de tener un lista de todas las imágenes subidas al WordPress para seleccionar la que queria. La idea es subir un pack de imágenes y luego ir escribiendo los post.

Después de Googlear un poco encontré la solución, sólo había que modificar un poco el código para conseguir un menú desplegable debajo del editor de texto donde listará todas las imágenes subidas.

La solución empleada es lo que se llama Meta Box, que es un “bloque” nuevo que se puede añadir a la sección de edición de páginas/post en la pantalla de admistración de WordPress.

Poner el siguiente código en functions.php

add_action("admin_init", "images_init");
add_action('save_post', 'save_images_link');
function images_init(){
	add_meta_box("dibujos-images", "Elegir imagen", "images_link", "post", "normal", "low");
	}
function images_link(){
	global $post;
	$custom  = get_post_custom($post->ID);
	$link    = $custom["link"][0];
	$count   = 0;
	echo '<div class="link_header">';
	$query_images_args = array(
		'post_type' => 'attachment',
		'post_mime_type' =>'image',
		'post_status' => 'inherit',
		'posts_per_page' => -1,
		);
	$query_images = new WP_Query( $query_images_args );
	$images = array();
	echo '<select name="link">';
	echo '<option class="images_select">SELECIONA LA IMAGEN</option>';
	foreach ( $query_images->posts as $file) {
	   if($link == $images[]= $file->guid){
	      echo '<option value="'.$images[]= $file->guid.'" selected="true">'.$images[]= $file->guid.'</option>';
		 }else{
	      echo '<option value="'.$images[]= $file->guid.'">'.$images[]= $file->guid.'</option>';
		 }
		$count++;
	}
	echo '</select><br /></div>';
	echo '<p>Seleciona la imagen de la lista para adjuntarla al post.</p>';
	echo '<div class="images_count"><span>Archivos:</span> <b>'.$count.'</b></div>';
}
function save_images_link(){
	global $post;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE){ return $post->ID; }
	update_post_meta($post->ID, "link", $_POST["link"]);
}
add_action( 'admin_head', 'images_css' );
function images_css() {
	echo '<style type="text/css">
	.images_select{
		font-weight:bold;
		background:#e5e5e5;
		}
	.images_count{
		font-size:9px;
		color:#0066ff;
		text-transform:uppercase;
		background:#f3f3f3;
		border-top:solid 1px #e5e5e5;
		padding:6px 6px 6px 12px;
		margin:0px -6px -8px -6px;
		-moz-border-radius:0px 0px 6px 6px;
		-webkit-border-radius:0px 0px 6px 6px;
		border-radius:0px 0px 6px 6px;
		}
	.images_count span{color:#666;}
		</style>';
}
function images_file_url(){
	global $wp_query;
	$custom = get_post_custom($wp_query->post->ID);
	echo '<a href="'.$custom['link'][0].'"><img src="'.$custom['link'][0].'" /></a>';
}

Os quedará algo así:

Imagenes custom metabox

Para pintar la imágen insertada colocar este fragmento de código donde queraís que se vea

<?php images_file_url() ?>

Esto mismo se puede hacer con otro tipo de archivos, musica, videos, pdf etc….