Personalizando o theme Twenty Eleven 1.2 do Wordpress

nentab · 26/07/2011

¡Buenos días!

Pues verán, tengo instalada la nueva versión 3.2.1 de Wordpress. Y pretendo ir editando el theme que trae por defecto (Twenty Eleven 1.2) para que quede a mi gusto antes de empezar a usar el blog.

Bien, pues me gustaría que me explicarais cómo conseguir dos cosas:

1º Resumir las entradas en la página de inicio. De manera que corte la noticia a las X palabras, y añada puntos suspensivos (...) al final.
2º Añadir una imagen a la izquierda de la noticia.

Y una última duda, ¿cómo hago para que cuando veo una sola entrada, también salga la barra lateral?

Edito: Otra duda más, ¿cómo hago para que después de "Publicado elEnlace eliminado <fecha>" salga el nombre del autor de la entrada? Porque además en el código fuente sale escrito el autor, pero no se ve en la página.

Santiago · 26/07/2011

1) En el archivo content.php, busca:

Inserir CODE, HTML ou PHP:

		<?php if ( is_search() ) : // Only display Excerpts for Search ?>
		<div class="entry-summary">
			<?php the_excerpt(); ?>
		</div><!-- .entry-summary -->
		<?php else : ?>
		<div class="entry-content">
			<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?>
			<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
		</div><!-- .entry-content -->
		<?php endif; ?>

Reemplaza por:

Inserir CODE, HTML ou PHP:

		<div class="entry-summary">
			<?php the_excerpt(); ?>
		</div><!-- .entry-summary -->

2) Debes agregar algo como esto en el content.php y en el content-single.php:

Inserir CODE, HTML ou PHP:

		<?php if(has_post_thumbnail()) : ?>
			<div class="post_image">
				<?php echo get_the_post_thumbnail(null, 'thumbnail'); ?>
			</div>
		<?php endif; ?>

Tu te encargas del CSS 😛

3) A mi se me ve correctamente...

nentab · 26/07/2011

Antes de nada, muchas gracias Santiago!

1) Me fue perfecto, pero... ¿Cómo configuro cuantas palabras quiero que haya en el resumen?

2) Perfecto, pero... ¿Cómo podría hacer para que al hacer click en la miniatura, lleve a la imagen original? ¿Sería algo así, qué pondría en el lugar de las XXX?

Inserir CODE, HTML ou PHP:

<a href="XXX"><?php echo get_the_post_thumbnail(null, 'thumbnail'); ?></a>

3) ¿Se te ve la barra lateral cuando ves las entradas solas?

4) ¿Por qué puede ser que a mi no se me vea el autor? Porque probé por si acaso a instalar de nuevo WP de cero y tampoco se ve. :S

Santiago · 26/07/2011

No hay problema 😉

1) En el functions.php, linea 312 a 320:

Inserir CODE, HTML ou PHP:

/**
 * Sets the post excerpt length to 40 words.
 *
 * To override this length in a child theme, remove the filter and add your own
 * function tied to the excerpt_length filter hook.
 */
function twentyeleven_excerpt_length( $length ) {
	return 40;
}
add_filter( 'excerpt_length', 'twentyeleven_excerpt_length' );

2) Extraido del codex de wordpress:

Inserir CODE, HTML ou PHP:

<?php if ( has_post_thumbnail()) {
   $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large');
   echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >';
   echo get_the_post_thumbnail($post->ID, 'thumbnail'); 
   echo '</a>';
 } ?>

Emm... aca me saltee una preg...

3) Functions.php, linea 587:

Inserir CODE, HTML ou PHP:

if ( is_singular() && ! is_home() && ! is_page_template( 'showcase.php' ) && ! is_page_template( 'sidebar-page.php' ) )

Reemplazalo por:

Inserir CODE, HTML ou PHP:

if ( ! is_singular() && ! is_home() && ! is_page_template( 'showcase.php' ) && ! is_page_template( 'sidebar-page.php' ) )

4) Donde querés ver al autor? En el index o en el single?

nentab · 27/07/2011

Antes de nada, muchas gracias otra vez Santiago! Me estás ayudando mucho! ^^

1) Perfecto. Se me ocurre una cosa... ¿En vez de palabras, podría delimitarse con número de líneas? Quiero decir, que complete X líneas, hasta el final. Porque usando palabras, a veces puede que haya una línea más o una línea menos.

2) En el content.php funciona perfecto, justo como quería. Pero en el content-single.php no... Pone la imagen pero le cambia el tamaño. En vez de ponerlo en 150x150, como en el content.php, sale a 150x146. Puedes comprobarlo ahora mismo, que acabo de abrir el blog para que puedas hacerlo: http://nentab.com/

3) Ahora en las noticias sale el espacio de la sidebar, pero no salen los widgets. Es decir, sale el espacio del sidebar, pero completamente vacío. ¿A qué se debe? :S
También acabo de ver que si por ejemplo entro en el archivo de una categoría, salen todas las entradas de las categorías arriba de todo, ocupando todo el ancho, y debajo de todas ellas, la sidebar. Si uso el buscador, cuando muestra los resultados pasa exactamente igual. En resumen, mi idea es la de mantener la sidebar fija en todas las páginas.

4) En el index, en el single ya sale.

Santiago · 27/07/2011

1) No, ya que el espacio es acomodado por CSS.

2) Reemplaza el código por este:

Inserir CODE, HTML ou PHP:

<?php if ( has_post_thumbnail()) {
   $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large');
   echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" class="thumbnail-image" >';
   echo get_the_post_thumbnail($post->ID, 'thumbnail'); 
   echo '</a>';
 } ?>

Y luego agrega en el style.css, abajo de todo:

Inserir CODE, HTML ou PHP:

.thumbnail-image img {
	width: auto;
}


3) Ah, si, me olvide. En el single.php, agrega esto:
[code]<?php get_sidebar(); ?>

Arriba de:

Inserir CODE, HTML ou PHP:

<?php get_footer(); ?>

4) Emmm..... a mi me va... WordPress Local Test site | Just another WordPress site | Diigo

nentab · 27/07/2011

1) Vale, con palabras entonces.

2) Perfecto. :smile:

3) Ya se ve, pero sigue habiendo el mismo problema si entro en el archivo de una categoría o con los resultados del buscador. ¿Sabes cómo solucionarlo?

4) Mira el mio nentab.com. No sale. ¿Por qué puede ser? Porque si miras el código fuente sí sale. :S

Santiago · 27/07/2011

3) Cuando llegue a mi casa lo veo...

4) Parece que el theme esconde el autor cuando solo hay un usuario registrado... o algo así, no tengo el código para verlo 😛

En el style.css, linea 734 a 737, elimina esto:

Inserir CODE, HTML ou PHP:

.single-author .entry-meta .by-author {
    display: none;
}

estebanape · 27/07/2011

No te sigue saliendo el sidebar? Hay un post en el que se explica lo que pasa: Enlace eliminado

Es un poco complicado de entender pero te recomiendan crear un child theme, meterle los archivos que ponen en descarga y listo. Yo lo probé y se solucionó.

Y para hacer un child theme: Child Themes – Plantillas Hijas | Ayuda WordPress Aunque básicamente consiste en crear una nueva carpeta con un nuevo style.css donde indicas cual es el theme padre. Esa nueva carpeta tiene sólo en css y nada más, pero debes tener el twenty eleven original también. Mejor lee el post y saca tus conclusiones.

nentab · 27/07/2011

@Santiago,

3) Vale, esperaré. Todo lo que digo lo puedes comprobar en mi blog, que sigue activo.

4) Hecho. :smile:

@estebanape,

Gracias, pero haciendo lo que dijo Santiago ya consigo hacer lo de ahí. Solo que en los archivos y en los resultados de búsquedas sale descuadrada.

Santiago · 28/07/2011

Edita el functions.php y elimina la ultima linea (Nº 592):

Inserir CODE, HTML ou PHP:

add_filter( 'body_class', 'twentyeleven_body_classes' );

Ta' quedando lindo el theme 🙂

nentab · 28/07/2011

Santiago disse:
Edita el functions.php y elimina la ultima linea (Nº 592):

Inserir CODE, HTML ou PHP:

add_filter( 'body_class', 'twentyeleven_body_classes' );

Ta' quedando lindo el theme 🙂

¡Gracias, creo que funcionó a la perfección!

Y me alegra que te guste como va quedando. :smile:

Añado otras dudas:

1) En el content-single.php añadí una cajita verde que pone "Etiquetas". Ahí me gustaría que fuesen las etiquetas de la manera que puse dentro de la caja (XXX, XXX, XXX). ¿Cómo podría hacerlo?

2) Donde pone "Publicado el <fecha> por <autor>" querría poner "Publicado el <fecha> por <autor> en <categoría>".

3) Donde pone "Esta entrada fue publicada en General y etiquetada nentab, presentacion por nentab. Guarda enlace permanente." querría poner "Guarda enlace permanente.".

eldiosdelolimpo · 29/07/2011

Podés probar con el plugin Thumbnail for experts. saludos

nentab · 29/07/2011

eldiosdelolimpo disse:
Podés probar con el plugin Thumbnail for experts. saludos

Gracias pero esa parte ya está solucionada unos mensajes atrás. :smile:

Santiago · 01/08/2011

1) Reemplaza todo el div que agregaste por lo siguiente: (Con esto solo se mostrará el cuadro si es que el post tiene tags asignadas).

Inserir CODE, HTML ou PHP:

<?php the_tags('<div class="caja-titulo">Etiquetas</div><div class="caja-contenido">', ', ', '</div>'); ?>

2) En el content-single.php, busca:

Inserir CODE, HTML ou PHP:

        <div class="entry-meta">            <?php twentyeleven_posted_on(); ?>
        </div><!-- .entry-meta -->

Reemplaza por:

Inserir CODE, HTML ou PHP:

        <div class="entry-meta">
            <?php twentyeleven_posted_on(); ?> en <?php the_categories(', '); ?>.
        </div><!-- .entry-meta -->

3) En el mismo archivo, busca:

Inserir CODE, HTML ou PHP:

        <?php
            /* translators: used between list items, there is a space after the comma */
            $categories_list = get_the_category_list( __( ', ', 'twentyeleven' ) );


            /* translators: used between list items, there is a space after the comma */
            $tag_list = get_the_tag_list( '', __( ', ', 'twentyeleven' ) );
            if ( '' != $tag_list ) {
                $utility_text = __( 'This entry was posted in %1$s and tagged %2$s by <a href="%6$s">%5$s</a>. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>.', 'twentyeleven' );
            } elseif ( '' != $categories_list ) {
                $utility_text = __( 'This entry was posted in %1$s by <a href="%6$s">%5$s</a>. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>.', 'twentyeleven' );
            } else {
                $utility_text = __( 'This entry was posted by <a href="%6$s">%5$s</a>. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>.', 'twentyeleven' );
            }


            printf(
                $utility_text,
                $categories_list,
                $tag_list,
                esc_url( get_permalink() ),
                the_title_attribute( 'echo=0' ),
                get_the_author(),
                esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) )
            );
        ?>

Reemplaza por:

Inserir CODE, HTML ou PHP:

<a href="<?php the_permalink(); ?>" title="Permalink a <?php the_title_attribute(); ?>" rel="bookmark">Guarda enlace permanente</a>

nentab · 01/08/2011

Gracias de nuevo Santiago! Pero el 2º punto no me funcionó... Se me deforma el blog todo.

Santiago · 01/08/2011

Ah, pequeño error. Es the_category, no the_categories.

Inserir CODE, HTML ou PHP:

<div class="entry-meta">	<?php twentyeleven_posted_on(); ?> en <?php the_category(', '); ?>.
</div><!-- .entry-meta -->

nentab · 01/08/2011

Perfecto, ya lo tengo todo puesto en el blog! Y aunque me repita, gracias de nuevo Santiago. Creo que, gracias a ti, ya puedo dar por terminado el diseño del blog. Al menos por ahora. :smile:

DicaModiz · 05/09/2011

Santiago disse:
1) En el archivo content.php, busca:

Inserir CODE, HTML ou PHP:

<?php if ( is_search() ) : // Only display Excerpts for Search ?> <div class="entry-summary"> <?php the_excerpt(); ?> </div> <?php else : ?> <div class="entry-content"> <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?> </div> <?php endif; ?>

Reemplaza por:

Inserir CODE, HTML ou PHP:

<div class="entry-summary"> <?php the_excerpt(); ?> </div>

2) Debes agregar algo como esto en el content.php y en el content-single.php:

Inserir CODE, HTML ou PHP:

<?php if(has_post_thumbnail()) : ?> <div class="post_image"> <?php echo get_the_post_thumbnail(null, 'thumbnail'); ?> </div> <?php endif; ?>

Tu te encargas del CSS 😛

3) A mi se me ve correctamente...[/QUO

Hola, estoy siguiendo los pasos que das para ubicar una imagen en la parte izquierda pero aun no me aparece, Espero me puedas ayudar

Personalizando o theme Twenty Eleven 1.2 do Wordpress

nentab

Santiago

nentab

Santiago

nentab

Santiago

nentab

Santiago

estebanape

nentab

Santiago

nentab

eldiosdelolimpo

nentab

Santiago

nentab

Santiago

nentab

DicaModiz

Tópicos similares