Hay ocasiones en las que tenemos que crear una plantilla para páginas, entradas o entradas personalizadas en las que es necesario asignar una o varias imágenes.
Podemos hacerlo subiendo las imágenes mediante el apartado “Multimedia” y luego copiando la URL de la imagen en un Campo Personalizado:
Si la web es para nosotros mismos puede ser que no nos importe este sistema tan rudimentario, pero si es para un tercero quizás no sea esta la mejor opción.
Lo mejor es usar la función que WordPress nos ofrece y que hemos visto en artículos anteriores. Se trata de add_meta_box().
Ya vimos en un artículo anterior cómo crear un plugin que añade meta boxes para subir imágenes. Pero aprovechando este artículo de wp-tuts+ y basándome en él, vamos a crear una serie de funciones que nos permitan nó sólo crear un meta box para subir imágenes, sino incluso añadir todos los que queramos en función de las imágenes que queramos subir en cada página.
Esto es lo que vamos a conseguir:
Hay un texto explicativo abajo de todo, donde podéis poner lo que queráis, por ejemplo unas breves instrucciones con el tamaño que tienen que tener las imágenes, etc.
Para crear esto abrimos el archivo functions.php de nuestro tema. Vamos a ver el código.
Lo primero que hacemos es crear el meta box con la función add_meta_box:
|
1 2 3 4 5 6 7 8 9 10 |
function add_custom_meta_box() { add_meta_box( 'custom_meta_box', // id 'Fotos de la web XYZ', // título 'show_custom_meta_box', // función a la que llamamos 'page', // sólo para páginas 'normal', // contexto 'high'); // prioridad } add_action('add_meta_boxes', 'add_custom_meta_box'); |
Como vemos estos nuevos campos personalizados van a aparecer sólo en las páginas. Si quieres que aparezcan en las entradas, pon “posts” y si quieres que aparezcan en entradas personalizadas, pon el nombre de la misma. Si queremos que salgan en las páginas y en las entradas, haríamos:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function add_custom_meta_box() { add_meta_box( 'custom_meta_box', // id 'Fotos de la web XYZ', // título 'show_custom_meta_box', // función a la que llamamos 'page', // sólo para páginas 'normal', // contexto 'high'); // prioridad add_meta_box( 'custom_meta_box', // id 'Fotos de la web XYZ', // título 'show_custom_meta_box', // función a la que llamamos 'post', // sólo para entradas 'normal', // contexto 'high'); // prioridad } add_action('add_meta_boxes', 'add_custom_meta_box'); |
Seguimos. Necesitaremos un poco de jQuery para cargar el editor multimedia. Para añadir un archivo de Javascript la manera adecuada de hacerlo es mediante wp_enqueue_script. A continuación escribimos:
|
1 2 3 4 5 6 7 8 9 10 11 |
// Para imágenes cargamos el script sólo si estamos en páginas. function add_admin_scripts( $hook ) { global $post; if ( $hook == 'post-new.php' || $hook == 'post.php' ) { wp_enqueue_script('custom-js', get_template_directory_uri().'/js/custom-js.js'); } } add_action( 'admin_enqueue_scripts', 'add_admin_scripts', 10, 1 ); |
Como vemos, en este caso cargaremos el archivo sólo si estamos en una página. El archivo está ubicado en la carpeta “js” de nuestro tema.
¿Qué tiene este archivo custom-js.js?
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
jQuery(function(jQuery) { jQuery('.custom_upload_image_button').click(function() { formfield = jQuery(this).siblings('.custom_upload_image'); preview = jQuery(this).siblings('.custom_preview_image'); tb_show('', 'media-upload.php?type=image&TB_iframe=true'); window.send_to_editor = function(html) { imgurl = jQuery('img',html).attr('src'); classes = jQuery('img', html).attr('class'); id = classes.replace(/(.*?)wp-image-/, ''); formfield.val(id); preview.attr('src', imgurl); tb_remove(); } return false; }); jQuery('.custom_clear_image_button').click(function() { var defaultImage = jQuery('.custom_default_image').text(); jQuery(this).parent().parent().find('.custom_upload_image').val(''); jQuery(this).parent().parent().find('.custom_preview_image').attr('src', defaultImage); return false; }); jQuery('.repeatable-add').click(function() { var defaultImage = jQuery('.custom_default_image').text(); field = jQuery(this).closest('td').find('.custom_repeatable li:last').clone(true); fieldLocation = jQuery(this).closest('td').find('.custom_repeatable li:last'); jQuery('img.custom_preview_image', field).attr('src', defaultImage); jQuery('input.custom_upload_image', field).val('').attr('name', function(index, name) { return name.replace(/(\d+)/, function(fullMatch, n) { return Number(n) + 1; }); }) field.insertAfter(fieldLocation, jQuery(this).closest('td')) return false; }); jQuery('.repeatable-remove').click(function(){ jQuery(this).parent().remove(); return false; }); jQuery('.custom_repeatable').sortable({ opacity: 0.6, revert: true, cursor: 'move', handle: '.sort' }); }); |
Como veis hay varios eventos importantes. El primero se activa al hacer click en el botón de “Seleccionar imagen”, lanzando el cargador multimedia de WordPress y sustituyendo la imagen por defecto por la que hemos elegido para poder verla una vez subida en el administrador. A continuación tenemos el botón de Quitar imagen.
Luego viene el botón para añadir un nuevo campo donde subir una imagen, para lo que usamos la función clone() de jQuery. Nos aseguramos también de que el campo “name” de este nuevo campo sea diferente del anterior. Buscamos el último introducido ye incluimos el clonado a continuación.
A continuación está el botón para quitar una fila (usamos simplemente remove() de jQuery) y por último, gracias a sortable() de jQuery tenemos la función para mover el orden de cada fila.
Bueno, después de este paréntesis volvemos a nuestro archivo functions.php. Vamos a definir el campo personalizado. Como sólo tenemos un tipo (la imagen repetible) escribimos:
|
1 2 3 4 5 6 7 8 9 |
$prefix = 'custom_'; $custom_meta_fields = array( // Dentro de este array podemos incluir más tipos array( 'label' => 'Fotos', 'desc' => 'Aquí va la descripción o instrucciones que consideremos oportunas', 'id' => $prefix.'imagenrepetible', 'type' => 'imagenrepetible' ) ); |
Podríamos haber incluido más tipos dentro del array. Os aconsejo que leáis el artículo que os enlacé más arriba para ver otras opciones.
A continuación escribiremos la función a la que se llama desde add_meta_box. Si veis más arriba veréis que se llama show_custom_meta_box(). Como es muy largo el código he intentado comentarlo todo lo posible:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
function show_custom_meta_box() { global $custom_meta_fields, $post; // Usamos nonce para verificación echo '<input type="hidden" name="custom_meta_box_nonce" value="'.wp_create_nonce(basename(__FILE__)).'" />'; // Creamos la tabla de campos personalizados y empezamos un loop con todos ellos echo '<table class="form-table">'; foreach ($custom_meta_fields as $field) { // Hacemos un loop con todos los campos personalizados // obtenemos el valor del campo personalizado si existe para este $post->ID $meta = get_post_meta($post->ID, $field['id'], true); // comenzamos una fila de la tabla echo '<tr> <th><label for="'.$field['id'].'">'.$field['label'].'</label></th> <td>'; switch($field['type']) { // Si tenemos varios tipos de campos aquí se seleccionan // En nuestro caso tenemos solo uno: Imagen repetible case 'imagenrepetible': // Lo que pone en "type" más arriba $image = get_template_directory_uri().'/images/no-hay-imagen.png'; // Ponemos una imagen por defecto echo '<span class="custom_default_image" style="display:none">'.$image.'</span>'; // Al principio no la mostramos echo '<ul id="'.$field['id'].'-repeatable" class="custom_repeatable">'; $i = 0; if ($meta) { // Si get_post_meta nos ha dado valores, hacemos un foreach foreach($meta as $row) { // Obtenemos la imagen en su tamaño máximo. Podéis poner en su lugar // thumbnail, medium o large $image = wp_get_attachment_image_src($row, 'full'); // la primera parte de wp_get_attachment_image_src nos da su url. $image = $image[0]; ?> <li> <!-- Añadimos la imagen que se arrastra para cambiar posición, dentro de tu tema --> <span class="sort hndle" style="float:left;"><img src="<?php echo get_template_directory_uri().'/images/move.png';?>" /> </span> <!-- El input con el valor del meta. Su attributo "name" tiene un número que se irá incrementando a medida que creamos nuevos campos --> <input name="<?php echo $field['id'] . '['.$i.']'; ?>" id="<?php echo $field['id']; ?>" type="hidden" class="custom_upload_image" value="<?php echo $row; ?>" /> <!-- mostramos la imagen con 200px de ancho para ver lo que hemos subido --> <img src="<?php echo $image; ?>" class="custom_preview_image" alt="" width="200"/><br /> <!-- El botón de Seleccionar Imagen --> <input class="custom_upload_image_button button" type="button" value="Seleccionar imagen" /> <!-- Los botones de eliminar imagen y de quitar fila--> <small> <a href="#" class="custom_clear_image_button">Eliminar imagen</a></small> <a class="repeatable-remove button" href="#">- Quitar fila</a> </li> <?php $i++; // Incrementamos el contador para que no se repita el atributo "name" } // Fin del foreach } else { // Si no hay datos ?> <li><span class="sort hndle" style="float:left;"><img src="<?php echo get_template_directory_uri().'/images/move.png';?>" /> </span> <input name="<?php echo $field['id'] . '['.$i.']'; ?>" id="<?php echo $field['id']; ?>" type="hidden" class="custom_upload_image" value="<?php echo $row; ?>" /> <img src="<?php echo $image; ?>" class="custom_preview_image" alt="" width="200" /><br /> <input class="custom_upload_image_button button" type="button" value="Seleccionar imagen" /> <small> <a href="#" class="custom_clear_image_button">Eliminar imagen</a></small> <a class="repeatable-remove button" href="#">- Quitar fila</a> </li> <?php } ?> </ul> <br /> <!-- Botón para añadir una nueva fila --> <a class="repeatable-add button-primary" href="#">+ Añadir</a> <!-- Aquí va la descripción --> <br clear="all" /><br /><p class="description"><?php echo $field['desc']; ?></p> <?php break; } // fin del switch echo '</td></tr>'; } // fin del foreach echo '</table>'; // fin de la tabla } // Fin de la función |
Ya nos falta una sola función, la de grabar los datos. A continuación (y seguimos en functions.php) escribimos:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
// Grabar los datos function save_custom_meta($post_id) { global $custom_meta_fields; // verificamos usando nonce if (!wp_verify_nonce($_POST['custom_meta_box_nonce'], basename(__FILE__))) return $post_id; // comprobamos si se ha realizado una grabación automática, para no tenerla en cuenta if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id; // comprobamos que el usuario puede editar if ('page' == $_POST['post_type']) { if (!current_user_can('edit_page', $post_id)) return $post_id; } elseif (!current_user_can('edit_post', $post_id)) { return $post_id; } // hacemos un loop por todos los campos y guardamos los datos foreach ($custom_meta_fields as $field) { $old = get_post_meta($post_id, $field['id'], true); $new = $_POST[$field['id']]; if ($new && $new != $old) { update_post_meta($post_id, $field['id'], $new); } elseif ('' == $new && $old) { delete_post_meta($post_id, $field['id'], $old); } } // final del foreach } add_action('save_post', 'save_custom_meta'); |
¿Y ahora cómo obtenemos las imágenes?
Una vez tenemos ya creados los campos personalizados toca ir subiendo imágenes en cada página/entrada o entrada personalizada de nuestro tema.
Para luego obtener las imágenes para la web usaremos la función de WordPress get_post_meta.
En este caso lo que obtendremos es un array con todos los ID de las imágenes que pertenecen al $post->ID actual:
|
1 |
<?php $attachID = (get_post_meta( $post->ID, 'custom_imagenrepetible', true ));?> |
Si hacéis un:
|
1 |
<?php print_r($attachID); ?> |
veréis que tenéis en el array los ID de las imágenes. ¿Como podemos ahora verlas? Si las imágenes tienen que estar todas seguidas, una detrás de otra, podéis hacer:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php foreach($attachID as $item){ $imagen = wp_get_attachment_image_src($item, 'full'); // Obtenemos la imagen "full". En vez de full podemos poner otro que dispongamos en nuestro tema $alt = get_post_meta($item, '_wp_attachment_image_alt', true); // Si queremos obtener el alt de la imagen $descripcion = get_post_field('post_content', $item); // Si queremos obtener la descripción de la imagen echo '<img src="' . $imagen[0] . '" width="' . $imagen[1] . '" height="' . $imagen[2] . '"'; if(count($alt)) { echo ' alt="' . $alt . '"';} echo ' />'; echo '<p>' . $descripcion . '</p>'; } ?> |
Fijaros que vamos recorriendo imagen a imagen a través del bucle que crea el foreach. Obtenemos la url, el ancho y el alto de la imagen gracias a la función de WordPress wp_get_attachment_image_src y lo almacenamos en el array $imagen. Por ello $imagen[0] será la url, $imagen[1] será el ancho y $imagen[2] será el alto de la imagen.
Luego obtenemos el valor del atributo alt de la imagen con get_post_meta y lo grabamos en la variable $alt. Comprobamos si existe y si es así lo ponemos.
Si no queremos poner una imagen tras otra, al hacer print_r veremos en qué posición está la imagen que queremos recuperar en cada momento, por lo que en vez de $item tendríamos por ejemplo $attachID[1] etc..
Como veis en el código hemos usado la imagen “full”, que es la de mayor tamaño al subir la imagen. Podemos poner otra que hayamos creado en nuestro archivo functions.php de nuestro tema, por ejemplo:
|
1 2 3 4 5 6 7 8 |
////////////////////////////////////////////////////////////////////////////////////////// // Añadimos nuevos tamaños de imagen if ( function_exists( 'add_image_size' ) ) { add_image_size('muy-grande', 654, 905, true); // foto grande entrada add_image_size('portada', 330, 457, true); // foto destacado en portada add_image_size('galeria', 150, 207, true); // foto pequeña galerias } |
Para este ejemplo podríamos poner en vez de “full”, “portada” (por ejemplo).
Y con esto hemos acabado! Os dejo a continuación las dos imágenes que he usado en el código, por si os fueran útiles:
Hola Juan! Un placer saludarte desde Argentina. La verdad son muy buenos las articulos que publicas, he visto varios… muy bien explicados!
Con respecto a este caso, te hago una consulta, lo revise mil veces y no lo pude hacer funcionar… O sea, el código está bien, el campo me aparece en el editor de articulos… Cuando me abre el multimedia probe con todas las opciones para poder ingresar la imagen y nunca me la mostro en la “preview” del editor… y tampoco en el template (pensando que quizás el campo hubiese estado bien cargado pero que no se veia en el editor) El resto de las funcionalidad creo que funcionan bien…
Sabes que puede estar ocurriendo?
Muchas gracias! Un saludo!
Hola Juan Pablo,
Desde Multimedia (en el menú lateral) las puedes subir bien?
Hola! Gracias por la respuesta…
Las imágenes me las carga el sistema, las carga en “uploads” como todas. El problema es que no me lo carga en el campo personalizado que he generado con tus funciones. O sea, yo le doy click a “seleccionar imágen” me abre el Multimedia, selecciono el archivo… lo carga; le doy click a “insertar en la entrada” y no me aparece la preview como vos mostras a comienzos en el articulo. Actualizo la entrada y veo si se carga en el theme, pero tampoco…
Probablemente algo no este funcionando correctamente… o yo le erre en algo…
Hola Juan Pablo,
No sé que puede estarte fallando… Acabo de hacer un copia-pega rápido de todo el código (menos la parte inicial que se repite para seleccionar entradas y páginas) y funciona bien….
Hola Juan! Gracias nuevamente…
Hice una copy/Paste rápido, por si había errado en algo, pero nada… no se que puede estar fallandome… Tengo que dar click en “Insertar en la entrada” verdad? digo, en Multimedia…
Bueno, después me pongo con más tiempo, a ver si lo soluciono… Cualquier cosa vuelvo a preguntar! Muchas Gracias!
Si, en el cargador multimedia en “Insertar en la entrada”. En el copy/paste rápido no habrás copiado la parte inicial dos veces? (está puesto si quieres sólo para posts o si quieres para posts y páginas)
No, revise y lo pegue tal cual al primero, solo para post… y cambie el ‘page’ por ‘post’ dado que yo luego llamo al campo personalizado desde un single.php … La verdad, no sé, lo revise mil veces… Tendrá algo que ver con la integración del jquery? no, no?
Tienes Chrome o Firebug para ver errores de Javascript que se puedan estar produciendo?
Tengo Firebug en Mozilla y Chrome… el tema es que no se leer los problemas de Javascript ni el DOM… solo HTML y CSS…
El script (custom-js.js) lo carga bien… cuando pongo print_r($attachID); me tira en el theme: Array ( [0] =>; [1] =>; [2] =&>; ). Habiendo intentado cargar 3 imágenes. Quizás debería probar las funciones en otra instalación de WP más limpia.
Me habia olvidado de comentarte que encontre un “}” que tira ERROR antes del segundo add_meta_box en el ejemplo para ‘post’ y ‘page’.
Gracias por la ayuda Juan!
Gracias Juan Pablo,
No sé a qué se puede deber…. Yo lo tengo sobre la última versión de WordPress, no sé si dependerá de eso…
Ya quite el “}”, muchas gracias!
Hola Juan!
Lo probé en la última versión (3.3.1) y anda perfectamente! Era ese el problema… estaba usando la versión 3.2.1 asi que para los que tengan este problema… fijarse la versión que usan!
Muchas gracias Juan por compartir! Un abrazo!
Genial, gracias Juan Pablo. Está bien saberlo.
Hola Juan, volvi… es para decirte que descubri finalmente el problema que tenia. no se si tiene relación directa con la versión de WP (por que no lo intente aun)… es más bien el pluggin “Custom Field Template” evidentemente algo sucede cuando ese pluggin está activo… y es lo que NO me permitia usar correctamente tu “pluggin” que a decir verdad es excelente. Tienes idea que puede ser? Un abrazo, y nuevamente… gracias!
Gracias Juan Pablo, ¿quizás el problema sea que haya conflicto con el nombre de alguna de las variables? Prueba a poner un prefijo a todas las variables del tutorial, por ejemplo em_. No sé si con eso se arreglaría.
Excelente post!, era lo que estaba buscando en galerías wordpress desde hace tiempo.
muchas gracias por ayudarnos.
Hola Juan, primero que todo muchísimas gracias por este aporte que ha sido de gran utilidad poder encontrarlo, pero tengo un problema al implementarlo, tengo todo listo pero cuando quiero ver el sitio me aparece: Warning: Invalid argument supplied for foreach() in C:\wamp\www\wordpress\wp-content\themes\BLANK-Theme\single-portafolio.php on line 23 y la verdad es que no sé mucho de programación y no sé cual podría ser el error ya que he copiado y pegado el código tal como lo entregas. Estoy implementando este campo personalizado para subir imagenes y el post de Campos personalizados para las Entradas personalizadas en WordPress. Muchas gracias desde ya por cualquier ayuda.
Gracias Claudio,
El error veo que te lo da ya dentro de tu tema. Las imágenes se han subido y guardado bien? Podrías poner el código que tienes en single-portafolio.php?
Muchas gracias por responder, disculpa la demora en contestar, pero estuve un tiempo fuera. No me funcionaba porque no habia subido ninguna imagen, luego de algunos cambios logré que funcionara y de nuevo muchas gracias porque me ha sido muy útil.
Me alegro, gracias Claudio.
Hola he implementado este tutorial en mi sitio de wordpress y funciona perfectamente. Muchísimas gracias por tu aporte.
Solo tengo una duda, quisiera poder mostrar todas estas imagenes que he subido a mi post coo un slideshow al principio del mismo, cree que se podría hacer, soy algo nuevo en esto del php y no me aclaro muy bien. Te agradecería si me ayudaras a mirar en la buena dirección.
Gracias de antemano !!
Si, claro, una vez que tienes las imágenes las puedes usar como quieras. Si no tienes mucha experiencia con PHP y Javascript busca alguna solución ya existente, algún plugin de jQuery para crear un Slideshow, y aplícalo en tu tema.
Hola Juan
Muuuy Bueno y funciona de 10 lo estoy implementando en una galería junto a bxslider cuando lo termine lo paso a la comunidad, tengo una consulta si quisiera agregar a cada imagen una descripción por donnde debería iniciar mi busqueda? intente agregarlo un campo de texto a cada imagen pero no logro guardarlo. la otra opción sería colocarle descripción a la imagen mediante wp pero no logro obtener esa descripción.
saludos y espero puedas ayudarme.
Gracias. Puedes añadir la descripción de cada imagen en el campo de “Descripción” que aparece en el cargador multimedia. Puedes acceder a todos los campos ahí existentes (Título, texto alternativo, descripción, los diferentes tamaños…)
Por ejemplo:
Juan Sos lo Maximo lo pruebo y te comento, una vez terminado te paso el codigo para que lo puedas compartir.
Hola, fantastico el tutorial me ha sido de gran utilidad.
Pero tengo una duda, intente seguir el post en el que te basaste, pero mi ingles es pesimo, y el traductor de google deja bastante que desear.
Como podria aplicar este mismo proceso, pero a una textarea, y como aplicarle diferentes estilos.
Muchas gracias
Muchas gracias lo provare d einmediato tengo un proyecto que necesita esto, gracias por tua yuda, cualqueir duda igual te dejo un comment
Hola, soy nueva en wordpress copie tu código en el functions.php, pero no me funciona subo la imagen y no se ve como la de tu ejemplo, cambie todos los nombre de las variables porque utilizo custom_field_template pero lo único que se guarda es esto:
Meta_id post_id meta_key meta_value
508 70 custom_ximagenrepetible a:2:{i:0;s:0:”";i:1;s:0:”";}
No sé si es correcto porque no veo ninguna ruta de la imagen ni la imagen pequeña, como en su ejemplo.
Le agradecería su ayuda.
Hola,
Puedes poner el código para ver si hay algo que falla?
Que tal, me sirvió de maravillas este tutorial, muchas gracias. Quiero hacerte una consulta, estoy trabajando con un Custom Post Types, llamado Fotos y solo quiero que me cargue en el editor, el titulo, el Excerpt, y este meta_box creado por vos. Pero nosé como cargar esto ultimo. Solo me carga el titulo y el Excerpt.
Si me podrias ayudar, te estaré agradecido eternamente!
Saludos
Solucionado, despues de buscar por todos lados, y hacer deducciones sobre el codigo, me dí cuenta que en la primer linea de tu tutorial aclarás como hacer esto!!!. Solo tenia que poner el nombre de mi entrada personalizada. En fin, la vista en la lectura y las ganas de terminar un trabajo aveces no van de la mano.
hola juan, primero q nada muchas gracias por este tutorial.
me anda muy bien, pero tengo un problema… no me deja añadir imagenes externas, por ejemplo tengo un plugin de imgur que sube las imagenes a dicho host y luego se pueden usar en el post, pero cuando hago click en insertar en entrada no hace nada… pasa lo mismo cuando intento poner la imagen desde la pestaña “añadir imagen desde url” hago click en insertar imagen y no hace nada
alguna solucion? o solo a mi me pasa?
gracias!
Hola Juan, he implementado tu “plugin” en un tema para wordpress que estoy desarrollando y funciona a las mil maravillas, enhorabuena por tu estupendo trabajo. Por otro lado me gustaría poder utilizarlo tanto con imagenes como con videos ya que se pueden subir perfectamente con el media uploader de wordpress. Estoy rompien´´éndome la cabeza y me pregunto si será tan sencillo como creo o será imposible. Por favor ¿me podrías echar una mano o decirme como puedo hacerlo ?
Muchas gracias de antemano y fgracias por tu atención.
Un saludo!
I also have a problem with sortable, eworking ok but wordpress Quick Edit buttons for post a pages don´t work.
Could you help me, someone has had this problem?
Thank you!
No sería mejor crear un campo personalizado y pegar la URL del video alli y en html configurarlo para youtube o vimeo,
te dejo un ejemplo de un sitio que realize carga de video con vimeo http://lasmoreriascollection.com/caballo/cisne-mor/ y tambien utilize el plugin de galería de emenia.
Hola Juan, son fatásticos estos tutoriales, en solo un par de días he avanzado mucho!
Me funciona todo perfecto en WP 3.4 con twentyeleven, excepto la parte final! la de obtener las imagenes y verlas en el post.
a partir de
los últimos 3 bloques me fallan.
Cree el post type Videojuegos, pero dentro de este tipo no sale el campo personalizado, me sale en los post genericos, pero al incluir este código para mostrar las imágenes me da error. Te agradecería algún consejo a ver si consigo terminarlo. Mucchas gracias!
hola, conseguí hacerlo, te estoy muy agradecido por toda esta información.
Hola Juan,
primero agradecerte el tutorial, me esta sirviendo mucho, el caso es que no soy muy bueno en php, llevo dias intentando añadir campo descripcion personalizado para que además de poder subir una imagen pueda incluir un título y descripción he leido la solución que muestras mas arriba incluyendo la Descripción” que aparece en el cargador de la imagen, funciona perfectamente, pero mis necesidades van mas allá me gustaría que el campo repetible estuviera formado por titulo descripción e imagen, cualquier pista o ayuda sería de gran utilidad.
Mil gracias por tu esfuerzo. Es un gran tutorial
Hola Juan, gusto saludarte.
Gracias por este aporte funciona perfecto, he estado tratando de agregar 2 campos a cada imagen, veras, tengo una web en lenguaje Español e Ingles y ademas es multiusuario, por lo que quiero tener 2 campos extras, uno para la descripción en español de la imagen y el otro para la descripción en ingles, para luego en el sitio web hacer una condicional del lenguaje en uso y en consecuencia mostrar la descripción correspondiente, pero no he tenido suerte con los campos. Espero puedas apoyarme en ese sentido.
Gracias y saludos desde Nicaragua.
Hola Juan, espero estés bien.
He estado tratando, sin éxito, el poner un condicionante para que en caso de que ninguna imagen esté subida, el ciclo no se lleve a cabo.
Sucede, que al no subir ninguna imagen, marca el siguiente error: “Warning: Invalid argument supplied for foreach() ”
La idea sería que con alguna función de WP (o creando alguna) compruebe si hay imágenes y de no haberlas no correr el ciclo y dejar vacío (como un isset).
No he podido, se te ocurre algo?
Cuando borras las fotos, no se borran ni de la base de datos ni de la carpeta uploads,,,
Asi se queda la DB cada vez mas llena de basura y la carpeta uploads tambien.
Tampoco me guarda el orden de las fotos. Las cambio de lugar, y al guardar, todo vuelve como estaba….
Si, tienes que borrarlas desde multimedia…
Pues un plugin como “Types”, es mucho mejor…..
Esta modificación funciona en WordPress 3.5 ?? es que no consigo hacerla funcionar…. una vez selecciono la imagen a subir desde la librería multimedia por ejemplo, le doy a insertar en la entrada y se queda en blanco la ventana pop-up, aún asi cierro por si acaso y la imagen no aparece en el campo personalizado y po rlo tanto no la añade a la entrada.
Saludos !
Hola,
Es importante que esté la URL de la imagen en el pop up para subir la imagen antes de insertarla. Mira a ver si es eso.
Gracias por responder Juan.
No tengo claro donde hay que poner las últimas líneas que hacen referencia a la función de WordPress get_post_meta.
Me refiro a los tres bloques de líneas de código
Saludos
Perdón, he escrito código y se ha comido parte de mi mensaje….
Me refiero al apartado: ¿Y ahora cómo obtenemos las imágenes?
los tres bloques anteriores al tamaño de imagen y el bloque del tamaño de imagen, donde hay que pegarlos ??? en funtions.php también ?
Ya he conseguido que me salga la imagen seleccionada, pero no aparece en la entrada….
Hola,
No, la parte de cómo obtenemos las imágenes va en tu plantilla, donde quieres que salgan las imágenes. Con esas líneas obtienes la información sobre la imagen de la base de datos.
Vale… ya he conseguido hacerlo funcionar, pero pensaba que esto se podía utilizar para añadir fotos a las entradas, entiendo que es para añadir imágenes fijas en cualquier parte del theme, como publicidad, etc.
Gracias, un saludo !!
Lo puedes utilizar donde quieras: Entradas, Páginas, Entradas personalizadas…
Hola Juan! La verdad que solo puedo agradecerte el código que has puesto en tu web!! Mil gracias!! La verdad que llevaba bastante tiempo buscando una solución a este problema. GRACIAS!! Eres un crack!!
Muy bueno, lo hice andar en el archivo functions, pero ahora estoy tratando de meterlo como plugin (junto con un post_type) me aparece el campo pero como que no me carga el jquery pareciera, me sale esto:
para que apunte a la carpeta de plugins y no al theme. Sera eso?
Estimado! Me sirvió mucho el tutorial. Logré adaptarlo para mi web para mostrar información de los integrantes de conjuntos folcloricos de Argentina. Con la foto y demas información en title, descripcion y alt de la foto y luego imprimiendo eso datos.
Ahora bien, necesito crear un plugin similar para la discrografia en donde muestre la imagen de la tapa del disco y la lista de temas al lado. Para eso necesito que me repita en conjunto un meta qu contenga la imagen y otro que sea para introducir texto.
Empeze a hacerlo como pude, lo primero qu hice fue poner todo el mismo codigo repetido dentro del functions.php pero al cargar la pagina ya me tira un error en una linea de php y no carga. Quizas no tenga q poner el codigo y si empezar desde otro lado? Ademas este campo debe ser mostrado en otros custom post types. Algun consejo para orientarme sobre esto y sobre de como agregar un campo meta de texto que se repita en conjutno?
Muchas Gracias desde ya.
Saludos!
Hola Antonio,
Para simplificar puedes meter esos datos en la ventana que sale con la info de la imagen? Ahí puedes meter el título y la descripción de la imagen.
Un Saludo,
Dale! Voy a intentar a ver si le puedo dar forma y hacer funcionar de esa manera. saludos y gracias por todo el material!
Genial artículo, llevaba tiempo buscando algo así, hasta el momento lo hacía mediante el plugin Advanced Custom Fields, pero con este código es mucho mas rápido de generar y la interfaz no tiene nada que envidar.
Gracias!
Hola Juan, ayer de repente empezaron a fallar los campos personalizados, resulta que al subir una imagen e insertarla o seleccionarla de la librería para subirla la ventana emergente se queda en blanco y no llega a insertar la imagen. He mirado en la consola y me da un error en el custom-js.js.
¿Sabes que puede ser? ¡Gracias!
Hola,
Tienes cargado jQuery? Te da problemas en otras áreas del administrador que necesiten jQuery?
Por otro lado tienes que tener cuidado que el campo de la URL de la imagen del cargador multimedia no esté vacío.
Hola Juan, Gracias por tu respuesta, cierto, era porque tenía el campo de URL de imagen vacío.
¿Existe alguna forma para que no sea necesario rellenar este campo? Es que ya sabes los clientes normalmente no quieren este tipo de complicaciones.
Tal y como está el código lo necesita.. Lo único que se me ocurre es que ocultes ese campo asegurándote que siempre tenga el valor de la url.
Hola Juan, como te comentaba en el anterior articulo, muchas gracias por tu fantástico trabajo, gracias por compartirlo con nosotros.
He seguido tus pasos, y me funciona a la perfección en mi instalación en local. Pero ahora, cuando lo he puesto en mi servidor, no funciona la opción de reordenar las imágenes. Las puedo mover, pero al guardar la entrada, vuelven a aparecer en el orden inicial.
¿Puede ser algún problema con jquery?
Mira a ver con las Dev Tools de Chrome (Inspeccionar elemento) o la herramienta que uses si te da algún error de Javascript.
Cuando los muevo, no me salta ningún error. Sí que me muestras este error, pero sino me equivoco es por los autoguardados de wordpress:
Error: Exponer objetos JS del chrome al contenido sin __exposedProps__ es inseguro y desaprobado. javascript:self.on(“click”, function (node, data) { self.postMessage(node.src);});
Línea: 1
Hola Alfredo,
Pues lo único que se me ocurre es que no estén en el fichero de jQuery las líneas que consiguen el cambio de posición? Otra razón no se me ocurre, que no sea que la copia que tienes en local no sea exactamente igual que la que tienes en remoto.
El fichero del ejemplo es completamente igual. A mi lo único que se me ocurre es que cargue alguna otra librera jquery, desde otro plugin