Como colocar os Artigos em duas Colunas no WordPress.

by João on Fevereiro 11, 2010

Independentemente do assunto que o seu blog se refere, uma das necessidades que poderão surgir em termos de personalização do conteúdo adaptando-o ao layout do seu blog poderá ser possuir uma apresentação tipo Jornal de parte do conteúdo do artigo. Assim, para que possua o conteúdo em duas colunas irá necessitar de criar uma função que chame o artigo e efectue a adaptação para duas colunas. O código pode parecer um pouco complexo, mas na sua essência, o que ele faz é identificar a tag, neste caso a <h2> e fornecer instruções para iniciar a personalização em duas colunas até terminar o próximo parágrafo, </p>.

É claro que pode configurar a tag para qualquer outra que considere pertinente, todavia, aconselho à verificação do resultado dessa alteração. Coloquem o seguinte código no functions.php do vosso blog:

function my_multi_col($content){
$columns = explode('<h2>', $content);

$i = 0;

	foreach ($columns as $column){
	if (($i % 2) == 0){
		$return .= '<div class="content_left">' . "\n";
		if ($i > 1){
		$return .= "<h2&ht;";
	} else{
		$return .= '<div class="content_right">' . "\n <h2>";
	}
		$return .= $column;
		$return .= '</p></div>';
		$i++;
	}

	if(isset($columns[1])){
	    $content = wpautop($return);
	}else{
	    $content = wpautop($content);
	}
	echo $content;
}
}
add_filter('the_content', 'my_multi_col');

Agora necessita de um pouco e css para posicionar as colunas de acordo com o desejado. Assim, coloquem as seguintes linhas no style.css do vosso blog:

.content_right, .content_left{
    float:left;
    width:45%;
}

.content_left{
    padding-right:5%;
}

É óbvio que podem igualmente configurar o código css, criando por exemplo, um fundo personalizado (background: #CCC;) ou um efeito arredondado (-moz-border-radius: 4px). Enfim as possibilidades são imensas.
Até já…

Se quiser aprofundar mais o assunto pode consultar o artigo original da Kriesi.

{ 4 comments… read them below or add one }

adeneir Maio 4, 2011 às 5:48 pm

Olá amigo.
sou novo no wordpress, e pouco entendo de php, mas colquei os codigos no function´php (como não sei o lugar ideal coloquei bem nas primeiras linhas abaixo de: <?php.

O outro codigo do css coloquei abaixo de: .post p e acima de .tile
Bem. Terminando de colocar os codigos eu coloquei um pequeno post no home e nao aconteceu nada, o texto continuou em uma unica coluna.

Vc falou sobre um tal de h2, eu vi isso no codigo que peguei no seu site, mas realmente nao sei o que fazer,

Eu gostaria de dividir alguns posts em colunas somente no home

Se for possivel poderia me mandar um passo a passo ainda mais facil do que este?
Se puder ficarei grato.

João Maio 10, 2011 às 9:27 am

Olá Adeneir,

Quando escrever o artigo, especifique a partir de que ponto pretende duas colunas. Para isso no painel de escrita do artigo no wordpress clique no separado HTML e acrescente as tag onde pretende dividir em duas colunas. Não se esqueça de fechar as tags com .

Cumprimentos,
João

Pedro Setembro 26, 2011 às 8:31 pm

Olá, amigo fiz do jeito que está acima.
mas não deu certo, ficou foi tudo embolado e não aparece nem os textos do post…

[ MIM AJUDE ]

João Novembro 1, 2011 às 7:41 am

Olá Pedro,

Penso que este artigo já estará desactualizado para o novo wordpress… Pesquisa por custom post types no google que encontrarás diversas informação sobre o tema.

Abraço…

Leave a Comment