Añade miniaturas a la portada de tu Theme

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.

theme-con-miniaturas

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 &raquo;'); ?>

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:

  1. 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.
  2. Sube tu imagen, la que quieras colocar como miniatura, y copia la URL absoluta de la misma
  3. 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.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(0 votos, promedio: 0)

¿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.

35 comentarios en “Añade miniaturas a la portada de tu Theme”

  1. Pingback: Bitacoras.com

  2. en todo caso, el timthumb me ha ahorrado bastante trabajo. Usarlo me libró del problema de hacer varias imagenes para la portada.

  3. 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

  4. 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.

  5. 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

  6. Una pregunta que se me plantea, como hago para que me muestre una parte de la noticia, y no me la muestre completa?

  7. 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??

  8. Pingback: Actualizar tu tema a WordPress 2.9 | Ayuda WordPress

  9. 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!

  10. 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.

    1. 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.

  11. 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 )

  12. 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?

    1. 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

    2. 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 😉

  13. @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.

      1. Christian Gallego

        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?

  14. 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’ => » ) ); ?>
               

  15. 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) { ?>
                   
                   
               
           
       

  16. 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…

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido