Cómo alinear la miniatura con el título y extracto en la portada

  • Autor Autor Tvgerardo
  • Fecha de inicio Fecha de inicio
T

Tvgerardo

Curioso
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola, creo que en el título lo especifiqué todo, pero igual lo explico.

Quisiera que la miniatura de la portada de este tema Enlace eliminado no me quede a un lado del título, sino debajo de él y en la misma línea del extracto. He intentado hacerlo pero no logro dar con el resultado 🙁.

Agradecido si me pueden prestar su ayuda.
 
puedes poner el index o home y el css, o en otra pagina que se pueda mirar, que en la que has puesto de muestra no me deja
 
En el index.php busca algo como esto ...<?php the_title(); ?>... ese es el código que trae el título del post, tendrás que cortarlo y pegarlo encima de algo como <img src="http://forobeta.com/wordpress/<?php.... y lo demás será modificar el style.css para que lo acomodes a tu gusto.
 
Hola, muchas gracias por intentar ayudarme.

Te dejo el CSS (descarga desde dropbox que lo vi muy largo para ponerlo acá) Enlace eliminado

En el Index tengo lo siguiente

PHP: 
<?php include( TEMPLATEPATH . '/admin/admin-init.php' ); ?>

<?php get_header() ?>

	<?php if ($vectors_display_featured): ?>
		<?php
		// If this is the homepage then get the featured posts section 
		if ( !$paged ) include ( TEMPLATEPATH . '/includes/featured-posts.php' );
		?>
	<?php endif ?>

	<div class="wrapper">
		<div id="content" class="grid8 first">
				<?php // Include the WordPress loop file
				include ( TEMPLATEPATH . '/includes/loop.php' );
				?>
		</div>
		<?php get_sidebar(); ?>
		<div class="clear"></div>
	</div><!--.wrapper-->
	
<?php get_footer(); ?>
 
en el index no viene esa parte, loop.php y featured-posts.php, deve de andar en alguno de estos archivos, si puedes ponerlos para verlos.
el enlace a dropbox da error
 
Vale, los dejo completos entonces

Loop.php


PHP: 
<?php include( TEMPLATEPATH . '/admin/admin-init.php' ); ?>

<?php // Display this loop for pages
if (is_page()) { ?>

		
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		
			<div class="post page-content" id="post-<?php the_ID(); ?>">
				
				
				<div class="clear"></div>
				
				<div class="border"></div>
				<h2><?php the_title(); ?></h2>
				<div class="entry-content">
					<?php the_content(); ?>
				</div>
			</div><!--post-->
			
		<?php endwhile; endif; ?>


<?php // Display this loop for single blog posts
} elseif (is_single()) { ?>


		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		
			<div class="post">
				<div class="post-image">
					<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute() ?>"><?php the_post_thumbnail() ?></a>
				</div>
				
				<p class="metadata">
					<?php the_author_posts_link() ?>
					<span>&middot;</span>
					<?php the_category(', ') ?>
					<span>&middot;</span>
					<?php comments_popup_link('0 comentarios', '1 comentario', '% comentarios') ?>
				</p>
				<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
				
				<div class="clear"></div>
				<div class="border"></div>

				<div class="entry-content">
					<?php the_content(); ?>
				</div>
			</div><!--.post-->
			
			<?php dynamic_sidebar('banner-post') ?>

		<?php endwhile; endif; ?>
		
		<?php if ($vectors_author_info): ?>
		
			<?php // Include the author info file
			include ( TEMPLATEPATH . '/includes/author-info.php' );
			?>
		
		<?php endif ?>
		
		<?php if ($vectors_related_posts): ?>
		
			<?php // Include the related posts file
			include ( TEMPLATEPATH . '/includes/related-posts.php' );
			?>
		
		<?php endif ?>
		
		<?php comments_template(); ?>
		

<?php // Display this loop for search results
} elseif (is_search()) { ?>
				

		<?php if (have_posts()) : ?>
		
			<?php while (have_posts()) : the_post(); ?>
						
				<div class="post" id="post-<?php the_ID(); ?>">
					<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
					
					<div class="clear"></div>
					<div class="border"></div>

					<div class="entry-content">
						<?php the_excerpt(); ?>
					</div>
				</div><!--post-->
							
			<?php endwhile;?>
			
			<?php else : ?>
			
			<p><?php _e( 'No results were found. Please try again using a different keyword.', 'vectors' ); ?></p>
		
		<?php endif; ?>

		<?php // Include Pagination feature
		include ( TEMPLATEPATH . '/includes/pagination.php' );
		?>

		
<?php // Display this loop for the blog
} else { ?>

		
		<?php $count = 0; ?>
		
    	<?php if (have_posts()) : ?>
    	
			<?php while (have_posts()) : the_post(); $count++; ?>
			
				<div class="post">
					<div class="grid3 first">
						<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute() ?>"><?php the_post_thumbnail() ?></a>
					</div>
					<div class="grid5">
						<p class="metadata">
							<?php the_author_posts_link() ?>
							<span>&middot;</span>
							<?php the_category(', ') ?>
							<span>&middot;</span>
							<?php comments_popup_link('0 comentarios', '1 comentario', '% comentarios') ?>
						</p>
						<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
						<div class="entry-content">
						<?php if ($vectors_post_display == 'excerpts') { ?>
							<p class="post-excerpt"><?php the_excerpt(); ?></p>
							<p class="read-more"><a href="<?php the_permalink(); ?>"><span><?php _e('Quiero leerlo', 'vectors') ?> &rarr;</span></a></p>
						<?php } else { ?>
							<p class="post-excerpt"><?php the_content(); ?></p>
						<?php } ?>
						</div>
					</div>
				</div><!--.post-->
				
				<?php if($count % 4 == 0) dynamic_sidebar('banner-content') ?>
				
			<?php endwhile; ?>
    	
		<?php endif ?>

		<?php // Include Pagination feature
		include ( TEMPLATEPATH . '/includes/pagination.php' );
		?>


<?php // Close the main pages/blog 'if' statement
} ?>

Para los post en css.php tengo esto:

PHP: 
#content {
	
	margin-top: 50px;
	}

.post {
	border-bottom: 1px solid #27A3C5;
	overflow: hidden;
	padding-bottom: 50px;
	margin-bottom: 50px;
	background: 
	margin-right: 500px;
	}

.post .post-image {
	display: none;
	float: left;
	margin-right: 30px;
	}

.post img {
	box-shadow: 0 1px 2px #fff;
	-moz-box-shadow: 0 1px 2px #fff;
	-webkit-box-shadow: 0 1px 2px #fff;
	}

.post h2 {
	margin-bottom: 20px;
	text-transform: 
	color: #404040 !important;
	font-size: 40px;
	font-family: arial;
	}

.post h2 a {
	color:#404040 !important;
	}
	
.post .entry-content h1,
.post .entry-content h2,
.post .entry-content h3,
.post .entry-content h4,
.post .entry-content h5,
.post .entry-content h6 {
	margin-bottom: 25px;
	text-transform:
	color: #404040 !important;
	font-size: 35px;
	font-family: LeagueGothicRegular;
	line-height: 1.1em;
	}
	
.post .entry-content h1 a,
.post .entry-content h2 a,
.post .entry-content h3 a,
.post .entry-content h4 a,
.post .entry-content h5 a,
.post .entry-content h6 a {
	color: #404040 !important;
	}

.post .entry-content h1{
	font-size: 48px;
	}

.post .entry-content h2 {
	font-size: 44px;
	}

.post .entry-content h3 {
	font-size: 40px;
	}

.post .entry-content h4 {
	font-size: 36px;
	}

.post .entry-content h5 {
	font-size: 32px;
	}

.post .entry-content h6 {
	font-size: 28px;
	}

.post .border {
	height: 18px;
	background: url(images/bg_post_shadow.png) no-repeat center bottom;
	border-bottom: 1px solid #27A3C5;
	margin-top: 10px;
	margin-bottom: 50px;
	}
 
Hola,
lo que tienes que hacer es en el archivo loop.php

en la linea 128 tienes

PHP: 
<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

la cortas y la pegas debajo de
PHP: 
<div class="post">
que esta en la linea 116

y ya esta, te pongo el archivo modificado por si te lias


PHP: 
<?php include( TEMPLATEPATH . '/admin/admin-init.php' ); ?>
<?php // Display this loop for pagesif (is_page()) { ?>
				<?php if (have_posts()) : while (have_posts()) : the_post(); ?>					<div class="post page-content" id="post-<?php the_ID(); ?>">				<h2><?php the_title(); ?></h2>								<div class="clear"></div>				<div class="border"></div>
				<div class="entry-content">					<?php the_content(); ?>				</div>			</div><!--post-->					<?php endwhile; endif; ?>

<?php // Display this loop for single blog posts} elseif (is_single()) { ?>

		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>					<div class="post">				<div class="post-image">					<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute() ?>"><?php the_post_thumbnail() ?></a>				</div>								<p class="metadata">					<?php the_author_posts_link() ?>					<span>&middot;</span>					<?php the_category(', ') ?>					<span>&middot;</span>					<?php comments_popup_link('0 Comments', '1 Comment', '% Comments') ?>				</p>				<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>								<div class="clear"></div>				<div class="border"></div>
				<div class="entry-content">					<?php the_content(); ?>				</div>			</div><!--.post-->						<?php dynamic_sidebar('banner-post') ?>
		<?php endwhile; endif; ?>				<?php if ($vectors_author_info): ?>					<?php // Include the author info file			include ( TEMPLATEPATH . '/includes/author-info.php' );			?>				<?php endif ?>				<?php if ($vectors_related_posts): ?>					<?php // Include the related posts file			include ( TEMPLATEPATH . '/includes/related-posts.php' );			?>				<?php endif ?>				<?php comments_template(); ?>		
<?php // Display this loop for search results} elseif (is_search()) { ?>				
		<?php if (have_posts()) : ?>					<?php while (have_posts()) : the_post(); ?>										<div class="post" id="post-<?php the_ID(); ?>">					<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>										<div class="clear"></div>					<div class="border"></div>
					<div class="entry-content">						<?php the_excerpt(); ?>					</div>				</div><!--post-->										<?php endwhile;?>						<?php else : ?>						<p><?php _e( 'No results were found. Please try again using a different keyword.', 'vectors' ); ?></p>				<?php endif; ?>
		<?php // Include Pagination feature		include ( TEMPLATEPATH . '/includes/pagination.php' );		?>
		<?php // Display this loop for the blog} else { ?>
				<?php $count = 0; ?>		    	<?php if (have_posts()) : ?>    				<?php while (have_posts()) : the_post(); $count++; ?>							<div class="post">				<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>					<div class="grid3 first">						<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute() ?>"><?php the_post_thumbnail() ?></a>					</div>					<div class="grid5">						<p class="metadata">							<?php the_author_posts_link() ?>							<span>&middot;</span>							<?php the_category(', ') ?>							<span>&middot;</span>							<?php comments_popup_link('0 Comments', '1 Comment', '% Comments') ?>						</p>						<div class="entry-content">						<?php if ($vectors_post_display == 'excerpts') { ?>							<p class="post-excerpt"><?php the_excerpt(); ?></p>							<p class="read-more"><a href="<?php the_permalink(); ?>"><span><?php _e('Continue Reading', 'vectors') ?> &rarr;</span></a></p>						<?php } else { ?>							<p class="post-excerpt"><?php the_content(); ?></p>						<?php } ?>						</div>					</div>				</div><!--.post-->								<?php if($count % 4 == 0) dynamic_sidebar('banner-content') ?>							<?php endwhile; ?>    			<?php endif ?>
		<?php // Include Pagination feature		include ( TEMPLATEPATH . '/includes/pagination.php' );		?>

<?php // Close the main pages/blog 'if' statement} ?>
 
Rai, muchas gracias por seguir ayudándome.

Te cuento que efectivamente el título quedó por encima, pero ya no aparecen miniaturas, sino la imagen en grande y el texto completo.

Te pongo una imagen, el tema lo tengo como el ejemplo de abajo y quisiera tenerlo como el de arriba, ¿será posible?

Quisiera que me quedase algo así:

Enlace eliminado
 
Hola, no se porque pero si copias y pegas el archivo entero que puse, se jode todo, pero si el cambio se hace manual todo va bien, asi me queda ami cuando lo hago
titulo.webp


prueba a modificar las lineas que te digo nada mas, sin modificar el archivo completo,
o descargalo de aqui Enlace eliminado,
 
Exacto! eso es lo que quiero 🙂. Voy a probar a ver qué me sale.

Muchas gracias por tu ayuda, pude resolver cómo situar mejor el contenido en la portada.

Para seguir abusando te hago una última consulta a ver si me puedes ayudar. En los posts individuales o "Singles", como creo que le llaman, me gustaría que el título abarcara todo el ancho de la plantilla, lo he intendado también pero no logro ubircarlo. El mejor ejemplo que podría dar es como lo tiene implementado The Verge, ¿sería posible?

De nuevo, ¡muchas gracias!
 
Bueno, pues para hacer eso, para que no tengas que estar creando archivos nuevos, que si tienes poca experiencia te pueden liar mas, puedes usar esta solucion, que aunque no es la mas profesional, te va ha servir igual, (no he teteado todo el theme, pero si te surge algun fallo, comentalo)

1 val al archivo loop.php y en la linea 41 tienes
PHP: 
<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

lo cortas y guardas ese archivo

2 abre el archivo sigle.php y en la linea 1 y 2 tienes esto

PHP: 
<?php get_header(); ?>
    <div class="wrapper">

pues justo debajo de <?php get_header(); ?> y arriba de <div class="wrapper">, vamos lo que viene siendo en medio XDD, pegas el codigo que cortaste de loop.php y te debe de quedar algo asi

PHP: 
<?php get_header(); ?>    
<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>    
<div class="wrapper">

y guardas el archivo, si vas ha al interior de algun post, veras que te sale el tituo arriba del todo y ha desaparecido donde estaba originalmente,

Para darle estilo, yo lo he echo de forma rapida, no me he parado en dejarlo "bonito",

le he creado una div con una classe post1, quedando asi

PHP: 
<?php get_header(); ?>
<div class="post1"><h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2></div>
<div class="wrapper">

y luego le he dado estilo, (lo he copiado del style css algunas class de post y la he renombrado a post1 y añadido margenes)

PHP: 
    .post1 {    border-bottom: 1px solid #f1f1f1;    overflow: hidden;    padding-bottom: 50px;    margin-bottom: 50px;    background: url(images/bg_post_shadow.png) no-repeat center bottom;    width: 960px;    margin: 0 auto;    }
.post1 h2 {    margin-bottom: 30px;    text-transform: uppercase;    color: #404040 !important;    font-size: 48px;    font-family: LeagueGothicRegular;    }
.post1 h2 a {    color:#404040 !important;    }

y deberia de quedar asi

Enlace eliminado

queda ajustarlo a tu gusto con css y ya esta listo.


y como me imagino que no querras que se vea la miniatura y las palabras que aparecen al lado, quedando solo la imagen que introduzcas en el post, no en destacados.

borra del archivo loop.php desde la linea 30 a la 44, ambas inclusive

PHP: 
<div class="post-image">                    <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute() ?>"><?php the_post_thumbnail() ?></a>                </div>                                <p class="metadata">                    <?php the_author_posts_link() ?>                    <span>&middot;</span>                    <?php the_category(', ') ?>                    <span>&middot;</span>                    <?php comments_popup_link('0 Comments', '1 Comment', '% Comments') ?>                </p>                                <div class="clear"></div>                <div class="border"></div>

y te deberia de quedar algo asi

Enlace eliminado

 

Adjuntos

  • titulo1.webp
    titulo1.webp
    32,1 KB · Visitas: 17
Última edición:
Atinas a lo que digo y es realmente lo que quiero hacer, pero no logro obtener el mismo resultado que tú.

Te cuento lo que estoy haciendo:

1- Corto el código del Loop y lo pego en el single como de dices en medio de <?php get_header(); ?> y arriba de <div class="wrapper">, el código del sigle me queda así:

PHP: 
<?php get_header(); ?>
<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
	<div class="wrapper">
		<div id="content" class="grid8 first">
				<?php // Include the WordPress loop file
				include ( TEMPLATEPATH . '/includes/loop.php' );
				?>
		</div>
		<?php get_sidebar(); ?>
		<div class="clear"></div>
	</div><!--.wrapper-->

<?php get_footer(); ?>

Esa modificación sólo me duplica el título del post como lo muestro en la siguiente foto:

Modelo 1.webp

2- Ahora, más abajo veo que el código Php a ti queda diferente porque incluiste, además del código que me dices que corte en el Loop, el siguiente del grid8:

PHP: 
<div id="content" class="grid8 first">

En vista de eso lo hice tal como lo pones, o cual me deja el código del Single así:

HTML: 
<?php get_header(); ?>
<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>    <div id="content" class="grid8 first">
	<div class="wrapper">
		<div id="content" class="grid8 first">
				<?php // Include the WordPress loop file
				include ( TEMPLATEPATH . '/includes/loop.php' );
				?>
		</div>
		<?php get_sidebar(); ?>
		<div class="clear"></div>
	</div><!--.wrapper-->

<?php get_footer(); ?>

Sin embargo, el resultado sigue siendo que duplica el título. Traté, como novato, de eliminar el grid8 debajo del class=wrapper, pero me mantiene igual el título duplicado aunque este vez sí abarca toda la plantilla pero me manda el sidebar debajo del post 🙁. Así me queda

Modelo 2.webp
 
Última edición:
en el punto 2 tienes razon, se me colo
PHP: 
<div id="content" class="grid8 first">
eso es para mas abajo y no hay que tocarlo, ya lo he editado para que no aparzca.

1 cuando cortas el texto, debe de desaparecer del archivo, y debes guardar ese cambio, sino te diria que copiaras en vez de cortar.

2 lo que muestras en las imagenes con el titulo arriba, es el titulo sin estilo ninguno.

3 en el post anterior te lo explico todo, leelo entero antes de hacer nada.
 
Última edición:
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba