Mostrando una imagen usando custom fields
El primer ejemplo que haremos será el mostrar una imagen usando nuestros campos personalizados, imaginen que a cada post le quieren poner una imagen que ustedes decidan.
Utilizaré esta imagen como ejemplo de 150x150
Entonces definimos en la etiqueta Name y asignamos preview y en value ponemos la url completa de la imagen que queremos mostrar... nos quedaría algo así
Le damos en el botón Add custom field y automáticamente debemos ver cómo se agrega en la parte de arriba
Ok, ya tenemos definido el custom field, ya le hemos asignado nombre y valor... ahora viene la parte interesante ¿cómo lo muestro en WordPress? bien, vamos a abrir nuestro archivo index.php de nuestro theme y agregamos la siguiente línea después del while...
-
<?php
-
while (have_posts()) : the_post(); //Loop de WordPress
-
$preview = get_post_meta($post->ID, "preview", $single = true); //Mandamos a llamar el CF llamado "Preview"
-
?>
Lo que hacemos aquí es asignarle a la variable $preview el valor del "meta" ó custom field llamado "preview" es más simple de lo que parece 
Para comprobar el valor del custom field pueden poner en alguna parte de su index.php (yo lo puse justo arriba del h2) lo siguiente:
Veremos que nos devuelve el valor de nuestro custom field que en mi caso sería este:
http://infectedfx.net/wp-content/uploads/2009/09/custom_fields_preview.pngAhora simplemente vamos a asignarle la etiqueta img para que en lugar de que nos muestre la ruta nos muestre la imagen.
Volvemos a nuestro index.php y donde pusieron el $preview vamos a acompletarlo de la siguiente manera:
-
<img class="alignright" src="<?php echo $preview; ?>" width="150" height="150" alt="<?php the_title_attribute(); ?>" />
Recordemos que la imagen de muestra que usé mide 150x150 aquí es variable el tamaño que deseen ó incluso pueden dejarlo sin width y height en caso de que sus imágenes vayan a ser de diferentes tamaños. La clase alignright pueden asignársela a la CSS de su theme ó quizás ustedes ya tengan una definida.
Ok, ahora si, vean cómo se ve su theme hasta el momento...
Casi ¿no? ya vimos que si se está mostrando nuestra imagen, pero en la entrada anterior como no le hemos definido el campo personalizado "preview" no sabe qué mostrar... así es que nos toca condicionar esto... para esto tenemos 2 opciones:
- No mostrar nada
- Mostrar una imagen por default en caso de que no exista el custom field
La primer opción no me convence tanto, pero vamos... quizás para alguno de ustedes sea el caso. Volvemos a nuestro index y ponemos la siguiente condicional:
-
<?php if($preview !== '') { // SI PREVIEW TIENE VALOR ?>
-
<img class="alignright" src="<?php echo $preview; ?>" width="150" height="150" alt="<?php the_title_attribute(); ?>" />
-
<?php } else { // SI ESTA VACIO O NO EXISTE ?>
-
-
<?php } // CERRAMOS CONDICIONAL?>
¿Que hicimos? ... bueno, estamos comparando el valor que tiene $preview, entonces si $preview tiene algún valor lo imprimimos, de ahí todo lo de img etc... peeero, si $preview está vació ó no existe entonces no se mostrará nada y nos quedaría algo así.
Ahora la segunda opción de mostrar una imagen predeterminada en caso de que no exista tal me parece desde mi punto de vista una mejor idea... bien, no varía mucho el asunto, para eso utilizaremos esta imagen como default y la ponemos dentro de nuestra carpeta images en nuestro theme.
-
<?php if($preview !== '') { // SI PREVIEW TIENE VALOR ?>
-
<img class="alignright" src="<?php echo $preview; ?>" width="150" height="150" alt="<?php the_title_attribute(); ?>" />
-
<?php } else { // SI ESTA VACIO O NO EXISTE ?>
-
<img class="alignright" src="<?php bloginfo('template_url'); ?>/images/nopreview.png" width="150" height="150" alt="<?php the_title_attribute(); ?>" />
-
<?php } // CERRAMOS CONDICIONAL?>
Prácticamente es lo mismo que hicimos anteriormente, solo añadimos la imagen por default, y para no tener que poner la ruta completa de la imagen utilizamos bloginfo('template_url') que nos devuelve la carpeta de donde se encuentra nuestro theme. Ahora si, probemos nuestro theme y nos debe quedar algo como esto:
¿Fácil no?... pero aún no terminamos.
Es posible optimizar el código sin usar tanto < ? php ? >, pero me pareció más práctico para que no se complicaran más, aunque si ya tienen estos conocimientos sabrán como hacerlo más corto
26 comentarios para Cómo usar los custom fields en WordPress
Primis…
Excelente tutorial, muy bien explicado y por lo tanto totalmente entendible para los mortales.
Lo interesante del tutorial es que te explica el uso que le puedes dar a los cutom_fields en mi caso Mauricio ha hecho uso de esto en dos de mis sitios: malditoweekend.com y antesdelafama.com
Muy bueno el tutorial,
mientras lo leía, me preguntaba si esto puede hacerse aún más interactivo al permitir modificar los valores del CF a partir de factores externos; por ejemplo: supongamos que la variable mood va variando dependiendo de la cantidad de lecturas o comentarios que tiene el post.
¿Existe alguna funcionalidad en WP que permita modificar el valor de un CF para un post determinado?
Saludos.
Very nice!
Muy buen post, al estilo de los que a mi me gustan. Te felicito y que bueno que estás de regreso.
Creo que lo que acabo de leer acá me va a ayudar mucho.
un saludo desde Guatemala.
Los espero en mi blog: http://attakinsky.com/
El tutorial es bastante simple, y muy util para aquellos que recien estan empezando con wordpress. Buen trabajo.
terrible el post… ja.. me encanto… estaria bueno que pongan mas ejemplos.. para gente que no entiende nada de php y demas… entonce spodrian tener mas chances de usar estos ejemplos y modificarlos un poco a conveniencia de cada uno.. si lo pondrias en taringa.. +10 jejej
Excelente post, muchas gracias, me alegro de que estés de vuelta!
Exelente!! , No me había tomado mi tiempo para revisar los Custom Fields, y la verdad, me gustó la manera en como lo explicas.
Felicidades por tu Blog!
WoW, es cierto de esta forma puedo solucionar algo q estoy desarrollando, gracias por el blog, por la info, por estar
hey Infected, que bueno que volviste, siempre me daba una vuelta por acá, hasta q hace poco vi contenido nuevo, que bueno !
Buen tutorial, pense que incluiria eso si algo que no he podido encontrar ni en plugon ni codigo, que es como almacenar info en los custom fields, para no tener que agregarla cada vez, tienes conocimiento de algo como esto?
Saludos
Hola, me ha encantado en tutorial… y lo he puesto en practica…
Ahora hay un problema, en mi blog somos varios los que escribimos, yo soy el Administrador y las demas cuentas de usuarios tienen el rol de AUTOR…… y wordpress dice que NO TIENEN AUTORIZACION PARA HACER ESO.
¿Como se soluciona?
Te la rifaste con el tuto… Creo que es el mejor tuto que he leído, Felicidades, sigue así.
Muy útil, hace tiempo que buscaba un post como este.
Saludos!
Un post muy interesante. Gracias por el tutorial!
espectacular ahora lo voy a usar
Muy bueno!
Esta estupendop el post.. la verdad no sabia como usar eso de custom fileds… y ya me has dado un gran panoramo y muchas a las para empezar a desarollar algo… ya vere que cos… gracias..
y como podemos modificar el valor del field desde la entrada… osea me refiero se puede realizar alguna consulta sql…??
gracias por aportar cosas de wordpress. Realmente uso el campo pero con plugins o temas que lo tienen ya implementado. Pero me ayudará a crear mis propias composiciones.
además de mostrar imágenes, ¿qué otra cosa útil podríamos hacer con los custom fields?
Sos un verdadero maestro Infectedfx
idolo !!!
Cool… Esta super este tuto, y yo que andaba buscando más info sobre los custom fields…
Muy bueno el artículo, sobre todo porque me ha ayudado a entender el uso de los custom fields, pero quisiera saber si me pueden ayudar con algo que estoy desarrollando.
Estoy desarrollando un formulario para publicación de contenido, el cual he implementado un campo para agregar imágenes que luego se insertarán en el artículo por medio de custom fields, el hecho es que el usuario puede agregar hasta 4 imágenes, es decir puede ser menos, pero no más, y lo que quiero es una funcion que si el usuario sube una o más imágenes, esta se muestre.
El resumen de lo que quiero hacer lo pueden encontrar en el siguiente post que he publicado para pedir ayuda: http://ayudawordpress.com/foro/topic/necesito-ayuda-para-terminar-de-elaborar-formulario-de-publicacion-de-entradas
Excelente, muchas gracias me sirvio de gran ayuda para una idea que tenia en mente para mis blogs.
Un saludo y felicitaciones por tu sitio!
Muy bueno tu tutorial
me sirvió de mucho!! pero tengo un pequeño problema… es posible poder ocultar el customfield de la imagen? porque a mi me sale la imagen tal cual explicas en el tutorial, pero también me aparece el campo con el link de la imagen,… eso se puede ocultar de alguna manera?? me sería de gran ayuda saberlo.. 
Saludos!
Estupendo tutorial. Muy útil, claro y conciso.
Estaba pensando en utilizar algo así para mostrar un contenido externo mediante un iframe en cada post. Supongo que el procedimiento será similar al de mostrar una imagen, pero variándole el contenido de la URL del iframe. Voy a probar a ver qué tal sale la cosa
Saludos.