Si tienes un theme que muestra extractos, o incluso si estás creando uno desde cero, una opción que está muy de moda últimamente es añadir miniaturas a la portada, para mostrarlo con un aspecto de diario digital, de theme premium. Pues bien, si tu theme no incluye esta opción puedes añadirla tu mismo, tendrás que seguir esta pequeña guía.
Índice de contenidos
Editando index.php
Lo primero es localizar donde empieza la «llamada» a los posts, que en el theme ‘Default’ de WordPress sería aquí:
<div class="entry">
Justo después de ese código, y antes del siguiente:
<?php the_content('Sigue leyendo »'); ?>tienes que añadir esto otro:
<?php $thumbnail = get_post_meta($post->ID, "miniatura", true);
if ($thumb = "") { } else {?>
<div class="miniatura">
" alt="<?php the_title(); ?>" />
</div>
<?php } ?>Lo que le estás diciendo es que si en los campos personalizados de un post encuentra el valor «miniatura», usando la clase «miniatura», introduzca esa imagen en un tamaño de 90 pixels.
Dando estilo
Como has visto antes llamábamos a la clase «miniatura», pero claro … hay que crearla. Añadiremos estas líneas al fichero 'style.css' de tu plantilla activa:
.miniatura {
float:left;
padding-left:6px;
padding-bottom:6px;
}En este caso estamos poniendo la miniatura a la izquierda del texto y con una separación del mismo de 6 pixels que, por supuesto, puedes modificar a tu gusto.
¡A jugarrrrr!
Pues ya lo tienes, la estructura de tu theme ya está preparada para insertar miniaturas desde los campos personalizados, y aplicarles el estilo que hayas definido. Ahora solo queda que cuando crees un nuevo post hagas lo siguiente:
- Tras crear tu post (o antes, a gusto del consumidor) ve al área llamada «Campos personalizados» y añade una nueva clave llamada – ¿lo adivinas? – «miniatura». Esto es solo la primera vez, a partir de este primer posts con miniaturas verás la clave ya disponible en el desplegable.
- Sube tu imagen, la que quieras colocar como miniatura, y copia la URL absoluta de la misma
- Pega la URL de la imagen en el campo llamado «Valor»
Guarda tu post y verás la miniatura a la izquierda del texto en tu portada, ya sea en extractos o post completo.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
los < están saliendo como <
rayos, me cambió el html
Ya lo arreglé, gracias por avisar 😉
en todo caso, el timthumb me ha ahorrado bastante trabajo. Usarlo me libró del problema de hacer varias imagenes para la portada.
Si, yo también uso timthumb, es perfecto para no tener que hacer otra imagen para thumbs, ahora estaba buscando la manera de reescribir las url de las imagenes para que no lleven parámetros php
Yo utilizo esta linea que toma la imagen directamente de la galeria del post en cuestion y muestra el thumb de 150px que por defecto se crea con cada imagen que subimos:
Espero salga bien:
<code>ID, 'thumbnail', 'alt="' . $post->post_title . '" class="thumbnail"'); ?></code>
Salu2.
@Hernan, puedes colgar el código completo que utilizas?
muchisimas gracias estaba esperando esto para adaptarlo a mi theme
Gracias!!! muchísimas… 😛
Muy interesante, saludos.
Hola, no si alguno de estedes me podrá ayudar.
estoy desarrollando el tema scarlett, spuestamnete para los campos perzonalizados se utiliza "screen" y "ruta de la img" , por cierto esta debe estar en CMD #777 … Pero aún así no me aparece la img, me imagino que debe ser algo sencillo pero ya llevo bastante tiempo tratando de resolverlo y aún no he encontrado la solución
Gracias
Supongo que te refieres a "source" (src img) ¿no?. Si eso pásate por el foro que allí se puede poner código mas fácilmente 😉
Una pregunta que se me plantea, como hago para que me muestre una parte de la noticia, y no me la muestre completa?
Tienes que buscar the_content y sustituirlo por the_excerpt
A mí me gustaria hacer algo más ¿se pueden poner varios custom fields para rotar diferentes imágenes cada vez que se actualice la página??
Hola. Me gustaria que me ayuden, ya sean los usuarios o el admin, tengo mi pagina http://www.perfilcristiano.com y si ven en la portada no se muestran las imagenes miniaturas de los post. Me estoy volviendo loco probando de todo para que aparesca, me gustaria que me ayuden. Los felicito por el blog, esta muy bueno. SaludoS!
Vendría muy bien un post sobre como arreglar nuestros themes para que muestren miniaturas automáticamente en WP 3.0
Seguid trabajando tan bien.
Hola chico,
Necesito de ayuda, en mi blog quiero que se muestre solo un fragmento y la foto de mis articulos en las primera página. Como le puedo hacer para cambiar esta opción, ni que me tenga que meter con el codigo.
mi sitio es http://comogastar.wordpress.com
De antemano muchas gracias por su ayuda.
Saludos.
Hola Fernando,
Estoy empezando en esto, he contratado con factoriadigital el tema del alojamiento Wordpress, he adquirido plantillas en elegant themes y hasta ahora bastante satisfecho. El problema es que la plantilla de mi Blog (Grungemag) tiene miniaturas de imágenes en la entrada y no se ven. En el post publicado si se ve la imagen pero pero en el resumen de la home no aparecen. He cambiado los permisos del wp-content, de los archivos en "upload" a 777, además de añadir campo personalizado con la descripción y ubicación de la imagen pero nada. No sé que puede pasar.
Muchas gracias por tu ayuda )
¿has subido las imágenes a tu servidor o haces hotlinking?. Revisa el readme.html del tema 😉
Muchas gracias Fernando, era un tema de permisos que los he dejado en 755.
Me estoy volviendo loco, tengo varios blogs con WP 3.0.1. y en uno (alojado en Dreamhost con su instalación automática) me sale la posibilidad de hacer que una imagen se use como miniatura, mostrandola una vez seleccionada debajo de lo de añadir tag a tu post, abajo a la derecha de la pantalla (featured image) En otros blogs no me aparece esa función y no tengo ni idea de porqué no sale, siendo WP 3.0.1 tambien.
¿Alguien tiene alguna idea de porqué pasa esto y cómo conseguir que la función featured image salga en todos?
Hola, Paco esto capaz que te sirva. Cuando Añadis una nueva entrada, busca Insertar Campo, en el identificador busca "THUMB" y en el valor pega la URL de la imagen. Saludos
Tienes que añadirla al tema como ya hemos explicado en más de una ocasión. WP lo reconoce pero tienes que añadir la función al fichero functions.php del tema 😉
@Leandro, gracias por el consejo pero se trataba de hacerlo sin campos.
@Fernado, perdona por repetir preguntas. Antes de preguntar busqué mucho por tu web pero no supe encontrar lo de las miniaturas y la versión 3.0. Pensaba que esa función debía salir independientemente del tema que tuviera y hasta que descubrí que no era así no sabía bién que pasaba. Al final encontré la solución que tú me dices, la de implementar esa función en nuestra plantilla (la nueva por defecto, twenty, la lleva y eso me despistaba)
La solución es añadir al theme que quieres actualizar esto <code>add_theme_support( 'post-thumbnails' );</code> en funtions.php. Luego para llamar a la miniatura pones esto <code></code> donde quieras llamarla.
Gracias por todo.
<code></code> esto es lo que hay que poner para llamar a la miniatura, no sé porqué no ha salido escrito
Bien, yo he activado el soporte para miniaturas y bueno, a pesar de tener seleccionado un tamaño de 150 px por 150px me carga las supuestas miniaturas al tamaño real, es decir, no al tamaño que he seleccionado. Tambien uso la version 3.0.1 pero o no acabo de entender o me como un paso. Alguna sugerencia?
mi theme no me muestra las imgenes en el index. Al parecer la orden esta en el loop. y sinceramente no hallo el problema. ¿Puedes ayudarme?
ID )) :
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘full’ );
?>
<img class="post-thumbnail" src="/library/functions/timthumb.php?src=&w=608&h=220&zc=1″ border=»0″ />
<?php
endif;
the_excerpt( __( 'Continue reading →’, ‘monochrome’ ) ); ?>
<?php the_content( __( 'Continue reading →’, ‘monochrome’ ) ); ?>
» . __( ‘Pages:’, ‘monochrome’ ), ‘after’ => » ) ); ?>
¿Se puede hacer que se muestren las leyendas de la imagen en las miniaturas? ¿Cómo?
nose que pasa antes usaba esto siempre en themes pero ahora lo pongo y me sale mal el codigo de mi index es
como lo edito para que salga bien
<div id=»post-«>
<a href="» rel=»bookmark» title=»Enlace permanente a «>
Escrito el: por en
‘Paginas: ‘, ‘after’ => », ‘next_or_number’ => ‘number’)); ?>
found_posts;
$endvar = $postsppage – $remainder;
?>
1) { ?>
Mi theme no trae campos personalizados, como los puedo agregar?
Muy buenas!
Estoy siguiendo unos tutoriales que explican este custom field. Estoy usando la versión del condicional, pero me gustaría que en vez de que busque un thumb predeterminado, la siguiente frase del condicional quisiera que se quedara la entrada del post sin imagen ninguna, ya que actualmente al contener el custom field en un div llamado "foto" y darle a ese div estilo, me aparece una imagen no encontrada… y lo que me gustaría es que no apareciera ninguna, ni siquiera una de sustitución…
Espero me haya explicado bien… que estoy buscando y no encuentro solución al problema de momento…
Muchas gracias lo he implementado y me funciono te lo agradesco.. saludos..