Bienvenido a bloggertrucos.com un espacio para el blogger moderno donde buscar soluciones a nuestros problemas de cada día.

1

Como usar miniaturas con campos personalizados (custom fields)

Un sitio no es nada elegante sin mostrar miniaturas de las imágenes de los artículos en su pagina de inicio, y aunque muchos themes no traen las funciones para hacerlo, siempre existen otras formas de lograrlo. Anteriormente les explicaba como crear miniaturas de imágenes  sin plugins, ahora les diré como se logra usando los campos personalizados, otra forma de hacerlo sin plugins.

Lo primero que debemos de hacer es marcar la opción de “Campos personalizados” en las entradas de nuestro blog, haciendo clic en “opciones de pantalla“, como se muestra a continuación.

campos personalizados

Lo que haremos es redactar un articulo normalmente y cuando agreguemos una imagen al post, vamos a copiar la URL de la imagen que queremos que se muestre como miniatura en nuestro index. Aunque usemos varias imagenes adjuntas en un articulo, podremos seleccionar la que queramos.

Para esto hacemos clic en la imagen que hemos subido al post, ahí se activaran dos opciones en la parte superior izquierda de la imagen, una para editar opciones y otra para borrar la imagen.

opcion imagenes

Ahora tendremos que crear el enlace de la imagen, como se muestra en la captura. La url del enlace de la imagen que se genere, es la que debemos copiar y la que usaremos para mostrarla en la pagina de inicio del blog.

enlazar imagen pos

clic para hacer mas grande

Creando el campo personalizado

Ahora nos vamos a la opción de campos personalizados en la edición del post, agregamos un campo llamado “miniatura”  y en la opción de Valor pegamos la url de la imagen. Ahora este campo personalizado se ha agregado para las futuras entradas que publiques. Lo que haremos a continuación es ir a edición de nuestro index.php y donde queremos que aparezca la imagen en miniatura pegamos este código:

<?php

$miniatura = get_post_meta($post->ID, “miniatura”, true);
if ($miniatura == ”)
{
echo “”;
?>
<?php } else { ?>
<a href=”<?php the_permalink() ?>” title=”<?php the_title(); ?>”>
<img src=”<?php echo $miniatura; ?>” alt=”<?php the_title(); ?>” width=”180px” height=”160px” style=”float:left;margin-left:5px; margin-right:5px;border:3px solid #f1f1f1;” />
</a>
<?php } ?>

 

Como puedes ver, lo que hace es llamar a la url de la imagen del post a través del campo personalizado y alinearla al lado izquierdo, enlazando la entrada del post. Si decides usar otro nombre para el campo personalizado, debes de cambiar el texto marcado en rojo en este código.

Si el valor del campo personalizado esta vacío, o sea que no pegas la url de la imagen, no se mostrara nada en tu index. También puedes cambia el tamaño de la imagen a mostrar modificando los valores de Width y height en el estilo que hice para la imagen.

Te ha gustado? Dime que piensas dejando tu comentario!

Referencia: http://codex.wordpress.org/Custom_Fields

Show Comments

No Responses Yet

Leave a Reply