Como mostrar miniaturas en nuestro blog de WordPress
Para un diseñador web (en este caso de WordPress) es imprescindible con distintas formas de mostrar el contenido en la página principal, y por tal razón se deben buscar distintas formas de visualizarlo. Para eso en este tutorial se explicará como mostrar miniaturas en el index.
Lo que haremos será tratar de colocar una miniatura que representa el contenido de lo que hay escrito en el artículo y para eso tomaremos la primera imagen anexada del artículo y así poder acceder a ella fácilmente a través de los distintos formatos de visualización. Básicamente haremos lo que se muestra en la siguiente imagen.
Para lograr lo anterior haremos uso de un código que utilizará varias funciones propias de WordPress, para ello usaremos una función que tome los archivos adjuntos, tome una de las imágenes agregadas al post y por último le daremos un tamaño para mostrarla. Solo necesitaremos esto:
";
}else{
print "";
}
?>
Explicación del código
- get_children() – Esta función tomará todos los archivos adjuntos al artículo.
- wp_get_attachment_thumb_url – Con esto vamos a recuperar una url que pertenecerá a la imagen seleccionada.
Por último tenemos el código que muestra la imagen, al cual le pasamos los parámetros de ancho y alto para que la miniatura se muestre correctamente.
print "";
Después de esto ya lo único que queda por hacer es agregar el resto del contenido, por ejemplo, si quiero un código que haga lo que se muestra en la imagen anterior que visualiza un título con la fecha y el autor del artículo podemos hacer lo siguiente:
Luego de eso podemos añadir estilos CSS para que la imagen quede al lado izquierdo y los extractos del artículo rodeen la imagen. A continuación colo un código que servirá para tal fin y puede ser aplicado al código anterior.
.post-title {font-family: Helvetica, Arial, sans-serif;font-size:24px;line-height:20px;}
.post-title a {text-decoration:none;text-shadow:#f5f5f5 1px 0px 1px;color:#1780C6;}
.post-title a:hover {text-decoration:underline;color:#21a2f8;}
.miniatura-index {
width:150px;
height:120px;
float:left;
padding:5px;
}
.post-content {
width:650px;
height:150px;
font-family: Helvetica, Arial, sans-serif;
font-size:14px;
line-height:22px;
color:#333;
border-bottom:1px solid #d9d9d9;
margin-bottom:10px;
}
.post-content a {text-decoration:none;color:#1780C6;}
.post-content a:hover {text-decoration:underline;}
.meta-top {
margin-top:5px;
font-family: Helvetica, Arial, sans-serif;
font-size:11px;
margin-bottom:8px;
}
.meta-top a {text-decoration:none;color:#1780C6;}
.meta-top a:hover {text-decoration:underline;}
.compartir-index {float:right;padding:3px;}
El siguiente vídeo que se encuentra en inglés, nos explica como añadir miniaturas a los artículos del index a través de campos personalizados. De igual forma explican el procedimiento.
muy bueno, pero si quiero mostrar un una imagen desde una url, como seria?? osea sin necesidad de subir una imagen a mi host!
saludos!