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.

Se gostou deste artigo irá definitivamente adorar os que virão.
Não perca todas as novidades e Subscreva o nosso Feed.

Comprar Thesis Theme

Leave a Comment

João no TwitterJoão no FacebookRSS FeedRSS Email