[Resolvido] "Separar" posts em Wordpress

natimarinho · Fevereiro 24, 2012

Acho que minha dúvida é bem simples, mas não sei como explicá-la direito. Bom, vou tentar...

Queria saber como deixar cada post separado um do outro no Wordpress. Sempre pegava templates que já vinham dessa forma, mas dessa vez o que peguei deixa todos os posts "juntos". Como se fosse uma folha de papel e não tem divisão (mostrando o background) entre um post e outro. Não estou sabendo onde devo modificar algo para que haja uma margem entre cada post.

Espero que tenha dado pra entender.

Thiago Vianna /+/ · Fevereiro 24, 2012

Deve ter uma div que engloba todos os posts, tente tirar o background dela e adicionar um background na div que é criada para cada post :D

Diéssica · Fevereiro 25, 2012

Ou melhor ainda:

Faz uma div pra cada post e adiciona margin-bottom nela.

Se não souber, passa o código dessa parte dos posts. :)

natimarinho · Fevereiro 25, 2012

Em 25/02/2012 at 00:07, Diéssica disse:

Ou melhor ainda:

Faz uma div pra cada post e adiciona margin-bottom nela.

Se não souber, passa o código dessa parte dos posts. :)

É isso mesmo! A parte de margin-botton eu até sei, mas não sei como fazer uma div pra cada post. Devo colar aqui o código do arquivo Single Post (single.php)?

<?php
/**
* @package Scrappy
*/

get_header();
?>

<div id="content" class="content">

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

	<div class="navigation">
		<div class="alignleft"><?php previous_post_link('« %link') ?></div>
		<div class="alignright"><?php next_post_link('%link »') ?></div>
	</div>



<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
		<div class="post-date">
			<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e( 'Permanent Link to' , 'scrappy' ) ?> <?php the_title_attribute(); ?>">

				<span class="post-day"><?php the_time('j'); ?></span>
				<span class="post-month"><?php the_time('M'); ?></span>
				<span class="post-year"><?php the_time('Y'); ?></span>				<?php the_time('j M Y'); ?>
			</a>
		</div>

		<?php edit_post_link( __( 'Edit', 'scrappy' ), '<div class="edit-post-link">', '</div>') ?>
		<?php if ( has_post_thumbnail() ) { 
			echo "<div class='post-thumbnail'>";
				echo "<a href=\"" . get_permalink() . "\">";
				the_post_thumbnail();
				echo "</a>";
			echo "</div>";
		} ?>
		<h2 class="page_title">
			<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e( 'Permanent Link to' , 'scrappy' ) ?> <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
		</h2>
		<small><?php _e( 'by' , 'scrappy' ) ?> <?php the_author() ?></small>
		<div class="entry">
			<?php the_content('<p>' . __( 'Read the rest of this entry' , 'scrappy' ) . ' »</p>'); ?>

			<?php wp_link_pages(array('before' => '<p class="clear">' . __( 'Pages:' , 'scrappy' ) . ' ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

			<?php the_tags( '<p class="postmetadata clear">' . __( 'Tags:', 'scrappy' ) . ' ', ', ', '</p>'); ?>

			<p class="postmetadata clear">
				<?php _e( 'Categorias:' , 'scrappy' ) ?> <?php the_category(', ') ?> | 
				<?php comments_popup_link( __( 'Sem comentários' , 'scrappy' ) . ' »', '1 ' . __( 'comentário' , 'scrappy' ) . ' »', '% ' . __( 'comentários' , 'scrappy' ) . ' »'); ?>
			</p>

		</div>
		<?php comments_template(); ?>
	</div>

<?php endwhile; else: ?>

	<h2 class="page_title"><?php _e( 'Not Found' , 'scrappy' ) ?></h2>
	<p><?php _e( 'Sorry, no posts matched your criteria.', 'scrappy' ) ?></p>
	<?php get_search_form(); ?>

<?php endif; ?>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Se for pra colar algum outro código é só me avisar!

natimarinho · Fevereiro 26, 2012

Como ninguem ainda respondeu e eu estava em duvida se deveria mandar o index.php, aqui vai ele também pra agilizar:

<?php
/**
* @package Scrappy
*/

get_header();

?>

<div id="content" class="content">
<?php if ( is_day() ) : ?>
	<?php printf( '<span class="archives-title">' . __( 'Daily Archives: %s', 'scrappy' ), get_the_date() . '</span><hr class="divider"/>' ); ?>
<?php elseif ( is_month() ) : ?>
	<?php printf( '<span class="archives-title">' . __( 'Monthly Archives: %s', 'scrappy' ), get_the_date( 'F Y' ) . '</span><hr class="divider"/>' ); ?>
<?php elseif ( is_year() ) : ?>
	<?php printf( '<span class="archives-title">' . __( 'Yearly Archives: %s', 'scrappy' ), get_the_date( 'Y' ) . '</span><hr class="divider"/>' ); ?>
<?php elseif ( is_category() ) : ?>
	<?php printf( '<span class="archives-title">' . __( 'Category Archives: %s', 'scrappy' ), single_cat_title( '', false ) . '</span><hr class="divider"/>' ); ?>
<?php elseif ( is_search() ) : ?>
	<?php printf( '<span class="archives-title">' . __( 'You searched for: %s', 'scrappy' ), get_search_query() . '</span>' ); echo "<div class='alignright'>"; get_search_form(); echo '</div><hr class="divider"/>'; ?>
<?php elseif ( is_tag() ) : ?>
	<?php printf( '<span class="archives-title">' . __( 'Tag Archives: %s', 'scrappy' ), single_tag_title( '', false ) . '</span><hr class="divider"/>' ); ?>
<?php endif; ?>
<?php if (have_posts()) : ?>

	<?php while (have_posts()) : the_post(); ?>

		<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
			<div class="post-date">
				<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e( 'Permanent Link to' , 'scrappy' ) ?> <?php the_title_attribute(); ?>">
				<span class="post-month"><?php the_time('M'); ?></span>
				<span class="post-day"><?php the_time('j'); ?></span>
				<span class="post-year"><?php the_time('Y'); ?></span>
				</a>
			</div>
			<?php edit_post_link( __( 'Edit', 'scrappy' ), '<div class="edit-post-link">', '</div>') ?>	
			<?php if ( has_post_thumbnail() ) { 
				echo "<div class='post-thumbnail'>";
					echo "<a href=\"" . get_permalink() . "\">";
					the_post_thumbnail();
					echo "</a>";
				echo "</div>";
			} ?>
			<h2 class="page_title">
				<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e( 'Permanent Link to' , 'scrappy' ) ?> <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
			</h2>




			<div class="entry">
				<?php the_content( __( 'Read the rest of this entry' , 'scrappy' ) . ' »'); ?>
				<?php wp_link_pages(array('before' => '<p class="clear">' . __( 'Pages:' , 'scrappy' ) . ' ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

				<p class="postmetadata clear">
					<?php _e( 'Categorias:' , 'scrappy' ) ?> <?php the_category(', ') ?> | 
					<?php comments_popup_link( __( 'Sem comentários' , 'scrappy' ) . ' »', '1 ' . __( 'comentário' , 'scrappy' ) . ' »', '% ' . __( 'comentários' , 'scrappy' ) . ' »'); ?>
				</p>

			</div>
		</div>

           		<?php endwhile; ?>

	<div class="navigation">
		<div class="alignleft"><?php next_posts_link('«' . __( 'Anterior' , 'scrappy' ) ) ?></div>
		<div class="alignright"><?php previous_posts_link( __( 'Próximo' , 'scrappy' ) . ' »') ?></div>
	</div>

<?php else : ?>

	<h2 class="page_title"><?php _e( 'Not Found' , 'scrappy' ) ?></h2>
	<p><?php _e( 'Sorry, no posts matched your criteria.', 'scrappy' ) ?></p>
	<?php get_search_form(); ?>

<?php endif; ?>
</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Diéssica · Fevereiro 26, 2012

O single.php é o post único. Tu quer separar todos os posts, logo não faz sentido postar o single.php.

A div é essa aqui:

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">

[...]

</div>

natimarinho · Fevereiro 26, 2012

Em 26/02/2012 at 01:36, Diéssica disse:
O single.php é o post único. Tu quer separar todos os posts, logo não faz sentido postar o single.php.

A div é essa aqui:
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">

[...]

</div>

Ah, tá. Achei onde ela fica. Mas como faço para criar uma div que os divida?

Diéssica · Fevereiro 26, 2012

Em 26/02/2012 at 03:50, natimarinho disse:

Ah, tá. Achei onde ela fica. Mas como faço para criar uma div que os divida?

Aí cria no final dela. (?)

Mostrar conteúdo oculto

               <?php while (have_posts()) : the_post(); ?>

                       <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
                               <div class="post-date">
                                       <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e( 'Permanent Link to' , 'scrappy' ) ?> <?php the_title_attribute(); ?>">
                                       <span class="post-month"><?php the_time('M'); ?></span>
                                       <span class="post-day"><?php the_time('j'); ?></span>
                                       <span class="post-year"><?php the_time('Y'); ?></span>
                                       </a>
                               </div>
                               <?php edit_post_link( __( 'Edit', 'scrappy' ), '<div class="edit-post-link">', '</div>') ?>     
                               <?php if ( has_post_thumbnail() ) { 
                                       echo "<div class='post-thumbnail'>";
                                               echo "<a href=\"" . get_permalink() . "\">";
                                               the_post_thumbnail();
                                               echo "</a>";
                                       echo "</div>";
                               } ?>
                               <h2 class="page_title">
                                       <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e( 'Permanent Link to' , 'scrappy' ) ?> <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
                               </h2>




                               <div class="entry">
                                       <?php the_content( __( 'Read the rest of this entry' , 'scrappy' ) . ' »'); ?>
                                       <?php wp_link_pages(array('before' => '<p class="clear">' . __( 'Pages:' , 'scrappy' ) . ' ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

                                       <p class="postmetadata clear">
                                               <?php _e( 'Categorias:' , 'scrappy' ) ?> <?php the_category(', ') ?> | 
                                               <?php comments_popup_link( __( 'Sem comentários' , 'scrappy' ) . ' »', '1 ' . __( 'comentário' , 'scrappy' ) . ' »', '% ' . __( 'comentários' , 'scrappy' ) . ' »'); ?>
                                       </p>

                               </div>
                       </div>

                       <?php endwhile; ?>

Esse código faz um loop para que, para cada post, esses elementos e formatações se repitam.

O final que eu te falei seria antes dessa última div do loop, que fica responsável pelo post:

</div> <!-- Essa é do <div class="entry"> -->
</div> <!-- Essa é a div de cada post -->
<?php endwhile; ?> <!-- Fim do loop -->

Tu pode fazer de 3 jeitos:

Determinar margin-bottom nessa mesma div do loop
Criar mais uma div que pegue todos os posts e determinar margin-bottom nela
Criar uma div que divida cada post, trabalhando com height ou margin

natimarinho · Fevereiro 26, 2012

Tentei fazer dos dois primeiros jeitos e não consegui. :( (Não tentei a terceira forma porque não sei como fazer)

1. A div do loop é a post, né? Coloquei margin-bottom nela e não aconteceu nada.

2. Criei uma nova div e coloquei margin-bottom nela e também não aconteceu nada. Não sei se fiz certo, vou colar ela aqui pra você ver:

<div class="separar">

		<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
			<div class="post-date">
				<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e( 'Permanent Link to' , 'scrappy' ) ?> <?php the_title_attribute(); ?>">
				<span class="post-month"><?php the_time('M'); ?></span>
				<span class="post-day"><?php the_time('j'); ?></span>
				<span class="post-year"><?php the_time('Y'); ?></span>
				</a>
			</div>
			<?php edit_post_link( __( 'Edit', 'scrappy' ), '<div class="edit-post-link">', '</div>') ?>	
			<?php if ( has_post_thumbnail() ) { 
				echo "<div class='post-thumbnail'>";
					echo "<a href=\"" . get_permalink() . "\">";
					the_post_thumbnail();
					echo "</a>";
				echo "</div>";
			} ?>
			<h2 class="page_title">
				<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e( 'Permanent Link to' , 'scrappy' ) ?> <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
			</h2>




			<div class="entry">
				<?php the_content( __( 'Read the rest of this entry' , 'scrappy' ) . ' »'); ?>
				<?php wp_link_pages(array('before' => '<p class="clear">' . __( 'Pages:' , 'scrappy' ) . ' ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

				<p class="postmetadata clear">
					<?php _e( 'Categorias:' , 'scrappy' ) ?> <?php the_category(', ') ?> | 
					<?php comments_popup_link( __( 'Sem comentários' , 'scrappy' ) . ' »', '1 ' . __( 'comentário' , 'scrappy' ) . ' »', '% ' . __( 'comentários' , 'scrappy' ) . ' »'); ?>
				</p>

			</div>
		</div>

           		<?php endwhile; ?>

</div>

E acrescentei isso no style.css:

.separar {

margin-bottom:20px;

}

Diéssica · Fevereiro 26, 2012

Põe dentro do loop né....

Se ficar fora do loop, como tu fez, não vai fazer parte :)

natimarinho · Fevereiro 26, 2012

Então, tinha colocado a div nova depois do:

<?php while (have_posts()) : the_post(); ?>

Coloquei agora depois do <div <?php post_class() ?> id="post-<?php the_ID(); ?>"> e deu em nada também...

William Bruno · Fevereiro 27, 2012

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">

uma das classes q o wp adiciona, se chama post

basta fazer:

.post { margin-bottom: 70px; }

sem necessidade de marcação extra.

natimarinho · Fevereiro 27, 2012

Em 27/02/2012 at 03:21, William Bruno disse:
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
uma das classes q o wp adiciona, se chama post

basta fazer:
.post { margin-bottom: 70px; }
sem necessidade de marcação extra.

Então, essa foi a primeira coisa que tentei, até antes de vir aqui, mas não deu certo... :( Só deixa um post mais separado do outro, mas continuam "grudados" pela mesma div.

William Bruno · Fevereiro 27, 2012

poste um link para o site, só assim podemos analisar oq de fato ocorre com o layout.

natimarinho · Fevereiro 27, 2012

Beleza!

O site é esse http://diannaagronbrasil.com/

William Bruno · Fevereiro 27, 2012

Ok, e tem como você postar uma imagem de como você quer que fique ?

natimarinho · Fevereiro 27, 2012

Bom, os posts estão todos "grudados" na mesma div, não é? Em cima do primeiro post tem uma foto dentro de um círculo a direita. A ideia era que cada post ficasse numa div para que essa foto ficasse no topo de cada post, não só do primeiro! Para que os posts ficassem em "blocos"

Um monte de blog é assim, peguei um exemplo aqui http://www.garotasestupidas.com/

Depois de cada post tem um espacinho em que aparece o fundo do blog.

William Bruno · Fevereiro 27, 2012

perfeito, entendi oq você quis dizer, apesar de você estar falando errado oq está acontecendo.

primeira coisa básica para chegar onde você quer, tirar:

background: url("http://diannaagronbrasil.com/imagens/post.png") no-repeat scroll right top #A39278

da classe .content e colocar na .post:

.content { background: none; }
.post { background: url("http://diannaagronbrasil.com/imagens/post.png") no-repeat scroll right top #A39278; }

assim, você terá a separação que pediu, aparecendo o fundo do blog entre cada post.

Ajuste os paddings agora.

natimarinho · Fevereiro 27, 2012

bom, achei que estava dando pra entender... de qualquer forma, agora deu certo! ;) muito obrigada!

Arquivado

[Resolvido] "Separar" posts em Wordpress

Recommended Posts

natimarinho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Vianna /+/ 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

natimarinho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

natimarinho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

natimarinho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

natimarinho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

natimarinho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

natimarinho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

natimarinho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

natimarinho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

natimarinho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

php + mysql - where do select em campo varchar com dados numéricos com zeros a direita