18 Noviembre, 2009

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):

PHP:
  1. function my_multi_col($content){
  2. $columns = explode('<h2>', $content);
  3.  
  4. $i = 0;
  5.  
  6.     foreach ($columns as $column){
  7.     if (($i % 2) == 0){
  8.         $return .= '<div class="content_left">' . "\n";
  9.         if ($i> 1){
  10.         $return .= "<h2>";
  11.     } else{
  12.         $return .= '<div class="content_right">' . "\n <h2>";
  13.     }
  14.         $return .= $column;
  15.         $return .= '</p></div>';
  16.         $i++;
  17.     }
  18.  
  19.     if(isset($columns[1])){
  20.         $content = wpautop($return);
  21.     }else{
  22.         $content = wpautop($content);
  23.     }
  24.     echo $content;
  25. }
  26. add_filter('the_content', 'my_multi_col');

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

CSS:
  1. .content_right, .content_left{
  2.     float:left;
  3.     width:45%;
  4. }
  5.  
  6. .content_left{
  7.     padding-right:5%;
  8. }

¿Te gustó este post? ¡Compártelo!
  • Bitacoras.com
  • TwitThis
  • Facebook
  • Meneame
  • Google Bookmarks
  • del.icio.us
  • Live
  • Technorati
  • Ping.fm
  • Wikio
  • Turn this article into a PDF!
  • E-mail this story to a friend!
  • Print this article!

También te puede interesar:

cursos formación continua

    14 comentarios en “Contenido en dos columnas”

  1. Información Bitacoras.com...

    Valora en Bitacoras.com: 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 cambio.....

  2. Iker (1 comentarios) dijo:

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

    • Marc (9 comentarios) dijo:

      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

  3. jose (60 comentarios) dijo:

    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:

  4. luchosar (5 comentarios) dijo:

    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.

  5. RC (24 comentarios) dijo:

    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.

  6. RC (24 comentarios) dijo:

    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...

    • 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.

  7. Jordi (9 comentarios) dijo:

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

  8. luchosar (5 comentarios) dijo:

    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.

  9. luchosar (5 comentarios) dijo:

    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

Escribe un Comentario

XHTML: Puedes usar estos códigos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Comentarios adicionales gracias BackType

Subir

Anúnciese aquí
Expertos en WordPress
Evolución Euribor
Consigue 28 themes premium por menos de 14 euros
Participa en el Debate
  • Macgrafic: @Jose esta aplicación es para el iPhone y Puedes gestionar tu blog de tu dominio o de...
  • fff:
  • Abundancia33: Actualicé en algunos blogs y si hay un problema, con esta versión desaparece el...
  • Hugo Alfaro: Wow!… esta utilidad me ha sido de gran utilidad… ideal para los sitios...
  • Jose: P.D. Enhorabuena por la web! Sois magnificos!
Noticias Breves
  • BuddyPress 1.2 está prácticamente lista para lanzarse salvo que las pruebas de los usuarios digan lo contrario. Ya puedes descargarla y empezar a comprobarla (enlace al svn). En esta nueva versión se han cerrado más de 125 tickets desde la última beta.

    [#3]

  • Ya está disponible WordPress MU 2.9.1 y José Conti me avisa que en unas horas tendrá lista la traducción para poder tener actualizado y listo tu sitio multiusuario.

    [#6]

  • ¿Sabías que Kubrick, el tema que va a ser sustituido en 2010 lo creó un desarrollador danés?. Toda la historia de este tema, ya mítico, la tienes en este artículo (traducido con Google).

    [#26]


  • Ahora mismo en los FOROS ...
    Usuarios Registrados
  • Acceder

  • Translate this Blog
    Spanish flagItalian flagChinese (Simplified) flagPortuguese flagEnglish flagGerman flagFrench flagJapanese flagRussian flagSwedish flagCatalan flagHebrew flag                              
    By N2H