Estructura posts wordpress

[adrianmugnoz]

Buenas,

Quería preguntar una duda que tengo sobre la estructura de los post en el index.

Quiero que en el index aparezcan los post con un thumbnail, un extracto del contenido y el enlace de la categoría remarcado, similar a este blog http://www.crazybloggers.net/

¿Me podríais indicar más o menos lo que tengo que hacer?

Supongo que lo primero tendré que activar en mi theme los thumbnails y el extracto que creo que no lo tengo activados, agradecería que me guiárais un poco.

Un saludo

[carlos_belisario]

para las imágenes al lado del blog puedes utilizar http://wordpress.org/extend/plugins/wp-smart-image-ii/, un plugin muy sencillo de configurar y trabaja de forma sencilla, para los extractos debes utilizar http://codex.wordpress.org/Function_...ce/the_excerpt y colocar esto en tu function.php

Código PHP:

//para indicar la cantidad de carácteres que deseas que se vean 
function new_excerpt_length($length) {
    return 50; //o la cantidad que vayas a colocar;
}
add_filter('excerpt_length', 'new_excerpt_length');
//para indicar que deseas que salga en el link a cada uno de tus post, en el ejemplo sale leer mas
function new_excerpt_more($more) {
       global $post;
    return '[...] <a href="'. get_permalink($post->ID) .'"> Leer más</a> ';
}
add_filter('excerpt_more', 'new_excerpt_more');
 

la categoría si ya deberías de revisar tu archivo y agregarle estilos CSS, saludos

[adrianmugnoz]

Hola Carlos,

Muchas gracias por tu respuesta

Ya he añadido el código al functions.php, esto lo que hace es generar un excerpt automatico con los x primeros caracteres no?

Entonces para que en el index aparezcan estos "resúmenes" lo que tengo que hacer es modificar el loop cambiando el the_content por the_excerpt?


Un saludo y gracias de nuevo

[adrianmugnoz]

Ya lo tengo más o menos, pero ocurre un problema.

El "resumen" me sale debajo del thumbnail en lugar de a la derecha, he probado modificando el content p en el css con float:right, text-align:right, también con justify, pero nada. Alguna solución?

Ilustro:




Un saludo y gracias

[AlZuwaga]

Más que una ilustración, necesitamos ver el código html generado del post. Igual, este ya es un tema de CSS más que de wordpress.

[adrianmugnoz]

Este es el css que se encarga del contenido

Código:

#content {
	width: 1100px;
	margin: 0px auto 0px;
	padding: 0px 0px 0px 0px;
	line-height: 24px;
	
}
#content p {
	
}
#content a, #content a:visited {
	color: #003F7F;
	text-decoration: none;
}
#content a:hover {
	text-decoration: underline;
	background-color: #E3EDF4;
	
}
#content h1 {
	color: #003F7F;
	font-size: 50px;
	font-family: 'Rokkitt', serif;
	font-weight: normal;
	margin: 4px 0px 10px 0px;
	padding: 0px 0px 7px 0px;
	border-bottom: 1px  #C0C0C0;
	line-height: 102%;
}
#content h1 a, #content h1 a:visited {
	color: #FFF;
	text-decoration: none;
}
#content h1 a:hover {
	color: #FFF;
	text-decoration: none;
}
#contentleft h2.title {
	color: #003F7F;
	font-size: 33px;
	font-family: 'Rokkitt', serif;
	font-weight: normal;
	margin: 4px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	line-height: 102%;

	
	
}
#contentleft h2.title a, #contentleft h2.title a:visited {
	color: #003F7F;
	text-decoration: none;
}
#contentleft h2.title a:hover {
	color: #003F7F;
	text-decoration: none;
}
#content p img {
	border: none;
	margin: 0px;
}
#content h2 {
	color: #0075A4;
	font-size: 16px;
	font-family: 'Droid Sans', sans-serif;
	font-weight: normal;
	padding: 0px 0px 4px 0px;
	margin: 0 0 4px 0;
	

}

#content h2.widgettitle {
	border-bottom: 5px solid #0075A4;
	font-size: 20px;
}
	
#content img.wp-smiley {
	float: none;
	border: none;
	padding: 0px;
	margin: 0px;
}
#content img.wp-wink {
	float: none;
	border: none;
	padding: 0px;
	margin: 0px;
}
#contentleft {
	float: left;
	width: 670px;
	margin: 0px 0px 0px 0px;
	padding: 20px 30px 20px 35px;
	border-right: 1px solid #F2F2F2;
}
#contentleft img.aligncenter {
	margin: 0 10px 0 10px;
}
#contentleft ol {
	margin: 0px 0px 0px 20px;
	padding: 0px 0px 15px 0px;
}
#contentleft ol li {
	margin: 0px 0px 0px 20px;
	padding: 0px 0px 0px 0px;
}
#contentleft ul {
	list-style-type: square;
	margin: 0px 0px 0px 20px;
	padding: 0px 0px 15px 0px;
}
#contentleft ul li {
	list-style-type: square;
	margin: 0px 0px 0px 20px;
	padding: 0px 0px 0px 0px;
}
blockquote {
	background: #FFFFFF url(images/blockquote.gif) no-repeat top left;
	margin: 0px 25px 15px 25px;
	padding: 0px 25px 0px 20px;
}
#content blockquote p {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
#contentleft .post {
	margin-bottom: 20px;
}
.about {
	width: 470px;
	font-weight: bold;
	padding: 0px;
	margin: 0px;
	text-align: right;
}
.about a, .about a:visited {
	color: #003F7F;
	font-weight: bold;
	text-decoration: none;
}
.about a:hover {
	text-decoration: underline;
}
.ipostmeta {
	width: 670px;
	font-size: 12px;
	font-weight: bold;
	padding: 0px 0px 20px 0px;
	margin: 0px;
	border-top: 1px solid #C0C0C0;
}
.postmeta {
	width: 670px;
	font-size: 12px;
	font-weight: bold;
	padding: 0px 0px 10px 0px;
	margin: 0px;
}


.newer-older a, .newer-older a:visited {
	background-color: #F1F1F1;
	color: #A1A1A1;
	font-weight: bold;
	padding: 2px 10px 3px;
	text-shadow: 1px 1px 0 #FFFFFF;
	font-size: 13px;
	font-family: Arial,sans-serif;
}
.newer-older a:hover {
	background-color: #e7e7e7;
	border: 0;
}

Y este es el código que tengo en el index encargado de mostrar las miniaturas y el excerpt:

Código:

<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(150,150), array("class" => "alignleft post_thumbnail")); } ?>
	<?php the_excerpt(__('...leer mas'));?>

Podéis verlo en funcionamiento aquí: http://www.pezeta.net

Un saludo y gracias

[AlZuwaga]

No veo la clase alignleft. Probá así:

Código:

.alignleft{
    align: left;
    float: left;
    margin: 5px;
}

div.post p{
    margin: 0;
}

[adrianmugnoz]

Muchas gracias, ya funciona correctamente

Una pregunta, ¿habría álguna manera de que la longitud del excerpt fuese automática para que no sobrepase nunca los 150 px de altura del thumb?

Por cierto, para poner la categoría antes de empezar el excerpt en la misma línea -como en crazybloggers.net-, cómo tendría que colocar el the_category? antes lo he puesto delante de la línea de the_excerpt, pero aparecía en la primera línea solo y ya el resumen en la línea siguiente.

EDIT: SOLUCIONADO PROBLEMA SEPARADOR, he cambiado una parte del codigo del archives.php por una parte del index y arreglado.

Un saludo

[adrianmugnoz]

Ya he conseguido poner las categorías a la izquierda con el siguiente codigo css:

Código:

.aligncategory a{
	color: #19B4C3;
	text-decoration: none;
}

.aligncategory {
    align: left;
    float: left;
    margin-right: 5px;
    text-transform:uppercase;
    font-weight: bold;
    color: #19B4C3;
}

Pero tengo un problema, las categorías aparecen como links, y esos links cogen el siguiente CSS

Código:

#content a, #content a:visited {
color: #003F7F;
text-decoration: none;
}

¿a qué es debido? si he declarado el color de los links de la clase align category no?

Un saludo

[AlZuwaga]

Iniciado por AlZuwaga

[...] Igual, este ya es un tema de CSS más que de wordpress.

Te invito a que continúes planteando tus problemas con los estilos en el foro de CSS.
Gracias.