Como colocar os Artigos em duas Colunas no WordPress.

- - Wordpress

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.

Subscreva DinheiroPT

Subscreva o DinheiroPT e descubra como os Prós Ganham Dinheiro com Blogs.

Blogger desde 2007. Um entusiasta por tópicos como marketing, empreendedorismo, personalização, wordpress, finanças e produtos financeiros.

  • http://bmxgoias.com(cliente) adeneir

    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.

  • http://www.dinheiropt.com João

    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

    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 ]

  • http://www.dinheiropt.com João

    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…

  • http://www.trabalhoemcasalucrativo.com Ricardo

    Preciso colocar duas colunas em apenas uma página do meu site http://www.trabalhoemcasalucrativo.com
    teria como colocar apenas dentro da página ou em uma postagem apenas?

  • http://www.dinheiropt.com João

    Olá Ricardo,
    Este post no forum wordpress vai ajudá-lo no que precisa…
    http://br.forums.wordpress.org/topic/como-dividir-o-conteudo-do-post-duas-colunas
    Abraço,