Primero que nada vamos a aprender un par de conceptos básicos acerca de las imágenes en Wordpress:
Principio 1.- Cuando subimos una imagen desde nuestra computadora en el editor, éste automáticamente crea tres versiones: miniatura, media y tamaño real.
Principio 2.- No es necesario que la imagen aparezca en el artículo para poderla utilizar. Basta con subirla desde el panel de edición para que Wordpress la asocie con el post en cuestión. en otras palabras, una cosa es subirla y otra hacerla aparecer.
Qué vamos a lograr con esta función:
Luego de implementada estaremos capacitados para colocar cualquier imagen o miniatura en cualquier parte de nuestro sitio. Esto por supuesto se logra creando una función para llamar a la imagen.
Pasos
1.- Abre functions.php en el directorio de tu plantilla. Si el archivo no existe créalo. Copia este código:
Código PHP:
<?php
// Función para extraer imagen de artículo. Autor: metacortex. 13/12/2008 - 4:45
// http://www.forosdelweb.com
// Licencia GNU/GPL. Puedes remover estos créditos si quieres.
function mi_imagen($tamano = '') {
if ( $images = get_children( array (
'post_parent' => get_the_ID(),
'post_type' => 'attachment',
'numberposts' => 1,
'post_mime_type' => 'image'
)));
{
foreach( $images as $image ) {
if($tamano == 'mini') {
$imagen = wp_get_attachment_image( $image->ID, 'thumbnail' );
} if($tamano == 'medio') {
$imagen = wp_get_attachment_image( $image->ID, 'medium' );
} if($tamano == 'grande') {
$imagen = wp_get_attachment_image( $image->ID, 'full' );
}
echo $imagen;
}
}
}
?> Código PHP:
<?php mi_imagen($tamano = 'mini') // Para miniaturas ?>
<?php mi_imagen($tamano = 'medio') // Para tamaño medio ?>
<?php mi_imagen($tamano = 'full') // Para tamaño completo ?> Ejemplo 1 con get_posts
Código HTML:
<div class="capa"> <?php $lastposts = get_posts('category=7&numberposts=5'); foreach($lastposts as $post) : setup_postdata($post); ?> <div class="articulo" id="articulo-<?php the_ID(); ?>"> <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3> <div class="texto"> <?php mi_imagen($tamano = 'mini'); ?> <?php the_content(__('Read more'));?> </div> </div> <?php endforeach; ?> </div>
Código HTML:
<div class="capa"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3> <div class="texto"> <?php mi_imagen($tamano = 'mini'); ?> <?php the_content(__('Read more'));?> </div> <?php endwhile; else: ?><?php endif; ?> </div>
Configurar tamaños y estilos:
Tamaños de imagen: Puedes configurar los tamaños de miniatura y medio desde tu panel de control en Opciones > Misceláneas.
Estilos: Es posible que para tus estilos de miniatura desees arrimar la imagen a la izquierda y lograr que el texto se coloque al lado y fuya hacia abajo. Un ejemplo para lograrlo es colocando esto en tu hoja de estilos:
Código:
Ideas:.texto img {
display: block;
float: left;
margin-right: 8px;
}
a) Puedes jugar con los distintos tamaños de imagen para construir una página con aspecto interesante. Alternando distintos tamaños podrás sacar un máximo provecho gráfico sin menoscabo del flujo del contenido de tu index.
b) Igualmente es posible hacer un loop especial en tu widget y llamar las imágenes sin necesidad de traerte el contenido, a manera de una pequeña muestra de fotos aleatorias en determinada(s) categoría(s).
Fin del tutorial.
--------------------------------------
Comparte con honestidad
Si vas a copiar este tutorial en tu sitio, por favor referéncialo a la URL donde fue creado. En el presente existe una abstención por parte de varias personas en construir tutoriales, debido a que webmasters inescrupulosos los plagian sin colocar la fuente y algunos hasta se adjudican la autoría de los mismos. Ayúdanos a enriquecer la web dándole el crédito a quien lo merece, a fin de estimular la creación de nuevos recursos.
En este caso sólo debes colocar una referencia al presente tópico, de esta manera:
Cita:
Eso es todo. No te cuesta nada y contribuyes mucho. 
Este tema le ha gustado a 7 personas