18nov
17

Contenido en dos columnas

columnas

Seguro que este truco es algo que muchos apreciarán, pues permite mostrar el contenido de los posts en dos columnas, dando un aspecto de diario digital a tu sitio creado con WordPress.

Solo tienes que aplicar estos dos cambios:

En el fichero functions.php de tu plantilla (theme):

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>";
	} 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');

En el fichero style.css de tu plantilla (theme):

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

.content_left{
    padding-right:5%;
}

Para saber más:

por en Programación, Tutoriales / Trucos, Wordpress.org CSS, functions, PHP

  • Pingback: Bitacoras.com

  • Iker

    Una pregunta ¿Cuál es el plugin que utilizáis para que aparezca esa barra de enlaces sociales al final del post? Gracias!

    • http://www.ilercolor.net/blog/ Marc

      El plugin es sociable.

      Otra cosa, para dividir en dos columnas, pero la barra lateral que muchos blogs tenemos, que se tendria que modificar? o algun plugin que lo hace?

      Gracias,

      Saludos

  • http://jose.gs jose

    Buenas;

    Hay unos cuantos scripts en php para separar el contenido en dos o más columnas pero el dilema es que con CSS3 haces lo mismo simplemente metiendo el bloque en un div y aplicándole esto;


    -moz-column-count: 2;
    -moz-column-gap: 8px;
    -moz-column-rule: none;
    -webkit-column-count: 2;
    -webkit-column-gap: 8px;
    -webkit-column-rule: none;

    Cambiando el column-count puedes poner todas las columnas que quieras y el texto siempre queda distribuido uniformemente entre ellas :wink:

    • http://fernandotellado.com/ Fernando Tellado

      Que buen apunte Jose ;)

    • http://luchosarmiento.com luchosar

      PERO DONDE COLOCO ESTE SCRIPT? ME AYUDAS PORFA…ME INTERESA ESTO MUSCHISIMO

      • http://luchosarmiento.com luchosar

        Podrias colocar el script completo con los div y todo eso? se coloca en function.php ? en que parte?…gracias.

        Por otro lado…existe algun plugin o scripts que permita colocar una categoria especifica de forma horizontal? es decir que salgan por ejemplo 3 noticias una añl lado de la otra con sus respectivas miniaturas?

  • http://luchosarmiento.com luchosar

    ANDO COMO LOCO BUSCANDO LA FORM QUE UNA CATEGORIA ESPECIFICA SALGA EN HORIZONTAL Y NO VERTICAL, CLARO HABRIA QUE DISMINUIR EL TAMAÑO DE LAS FOTOS A LA MINIMA EXPRESION PERO SERAS FANTASTICO LOGRARLO.

  • http://www.entrebits.cl RC

    creo que deberias poner la fuente de donde sacaste el articulo:

    http://www.wprecipes.com/wordpress-hack-automatically-output-the-content-in-two-columns

    hasta la fotografia es casi ugual y el comentario del tal josè tambien es copiado de la misma fuente, por lo que deduzco jose eres tu mismo .

    ademas varios de tus otros post salen de ese mismo sitio
    ahora se el porque de tus opiniones tan desacertadas.

  • http://www.entrebits.cl RC

    Fernando, por favor edita mi comentario anterior , el comentario fué un poco apresurado y me di cuenta que jose es el mismo usuario que posteo en la fuente de la noticia, creo que deberias dejarlo solo hasta el link de la fuente ya que lo posterior a eso fué producto del mal entendido… no te lo tomes a mal, es solo una critica constructiva…

    • http://fernandotellado.com/ Fernando Tellado

      Se quedó en la cola de spam por llevar enlace pero no pasa nada, se aprueba y así se entiende también este. Y, bueno, que ya lo has visto, cito a la fuente original, del comentario de Jose ni idea, es un lector de ambos blogs, y en ambos aporta, suma, lo que se agradece. Lo de la imagen, casualidades, busqué en Google algo curioso sobre 2 columna y salió ese galimatías, ya sabes que me gusta ilustrar los posts con cosas raras ;)

      Si no te gustan mis opiniones, pues bueno, que se le va a hacer, son mías, tu tendrás las tuyas.

  • Jordi

    Hola,
    el código que has puesto no funciona. Hay algunos errores que he subsanado.
    El código arreglado es éste:
    function my_multi_col($content){

    $columns = explode(”, $content);
    $i = 0;
    $return = ”;

    foreach ($columns as $column){
    if(($i % 2) == 0){
    $return .= ” . ‘\n’;
    if ($i > 1){
    $return .= “”;
    } else{
    $return .= ” . ‘\n ‘;
    }
    }

    $return .= $column;
    $return .= ”;
    $i++;
    }

    if(isset($columns[1])){
    $content = wpautop($return);
    }else{
    $content = wpautop($content);
    }
    echo $content;

    }
    add_filter(‘the_content’, ‘my_multi_col’);

  • http://luchosarmiento.com luchosar

    HAY ALGO QUE NO ENTIENDO…EL CODIGO ES PARA QUE LOS ARTICULOS DE LOS POST SALGAN A DOS COLUMNAS O PARA QUE LAS GATEGORIAS SALGAN A DOS COLUMNAS, ES DECIR QUE LA CATEGORIA A, SALGA AL LADO DE LA CATEGORIA B.
    GRACIAS.

  • http://luchosarmiento.com luchosar

    ENCONTRE ESTE PLUGIN PARA MANEJO DE LAS COLUMNAS, PERO NO LOGRO MANEJARLO..SI ALGUIEN LOGRA HACERLO CHEVERE QUE LO PUBLIQUE AQUI: http://www.code-styling.de/english/development/wordpress-plugin-page-columnist-en

  • http://- xavier

    he probado tanto con el codigo original como con el que remarcaba Jordi. Y sigue sin funccionar.
    Mi plantilla está realizada con Artisteer,hay algun codigo especial para este tipo de plantillas.
    Por favor hechadme una mano. Gracias de antemano.

  • http://www.pachakamaq.com Fliberty

    Hola, a mi aun no me funciona, me salen algunos errores en unas líneas…

  • http://www.smcorrientes.com.ar Guillermo

    Hola camaradas, buscando algo parecido me tope con este plugin que dice hacer de lo que se trata el artículo, no lo he probado pero le podría ser util a alguno, el que lo prueba que luego cuente como le fue =).

    http://epicalex.com/newspaper-style-posts/

    Saludos
    “the force be with you” =)