Mostrar posts en dos columnas

Inicio Foros WordPress Themes y Diseño Mostrar posts en dos columnas

Etiquetado: 

Este debate contiene 21 respuestas, tiene 4 mensajes y lo actualizó  LGrusin hace 6 años, 8 meses.

  • Autor
    Publicaciones
  • #23159

    almendron
    Participante

    <p>Ayer pasé un buen rato intentando resolver una pregunta y eso me llevó a probar cómo se podía dividir el index para mostrar los post en dos columnas.</p>
    <p>Dado que el tema usado por la persona que preguntó es un poco particular, dejo aquí el código que con carácter general puede usarse.</p>
    <p>1.- Como siempre, hacemos una copia de seguridad de index.php y style.css</p>
    <p>2.- Funciona igual si ponéis un número par o impar en "Número máximo de entradas a mostrar en el sitio" (Ajustes &gt;&gt; Lectura)</p>
    <p>3.- Editamos style.css y añadimos la siguiente clase:</p>
    <p><code>.columnas {</code><br />
    <code>width:48%;</code><br />
    <code>float:left;</code><br />
    <code>}</code></p>
    <p>Podéis añadir las propiedades margin y padding para ajustar la separación entre las columnas. No pongo ningún valor porque dependerá del espacio para meter las dos columnas y eso es distinto para cada tema. También podéis bajar algo la propiedad anchura.</p>
    <p>4.- Editamos index.php</p>
    <p>4.1.- Buscamos la línea que comienza por <code>&lt;?php if (have_posts()….</code> y justo DEBAJO ponemos</p>
    <p><code>&lt;?php</code><br />
    <code>$mitad = round(get_option(&#39;posts_per_page&#39;) / 2);</code><br />
    <code>$numpost = 0</code><br />
    <code>?&gt;</code><br />
    <code>&lt;div class=&quot;columnas&quot;&gt;</code></p>
    <p>En la primera línea obtenemos el valor de la mitad del número de post por página que hemos establecido en Ajustes &gt; Lectura (redondeado). En la segunda línea ponemos el contador a cero. En la última abrimos la primera columna.</p>
    <p>4.2.- Buscamos la línea <code>&lt;?php endwhile; ?&gt;</code> y añadimos lo siguiente</p>
    <p>Justo ENCIMA ponemos:</p>
    <p><code>&lt;?php</code><br />
    <code>$numpost = $numpost + 1;</code><br />
    <code>if ($numpost == $mitad) {</code><br />
    <code>echo &#39;&lt;/div&gt;&#39; . &#39;&lt;div class=&quot;columnas&quot;&gt;&#39;;</code><br />
    <code>}</code><br />
    <code>?&gt;</code></p>
    <p>El contador va sumando 1 a cada post y cuando es igual a la mitad de los posts cierra la div que hemos abierto para la primera columna y abre la segunda.</p>
    <p>Y justo DEBAJO de <code>&lt;?php endwhile; ?&gt;</code> añadimos</p>
    <p><code>&lt;/div&gt;</code><br />
    <code>&lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;</code></p>
    <p>Ahora cerramos la segunda columna o la primera para el caso de que no haya suficientes post para la segunda.<br />
    La última línea evita que los siguientes elementos se descuadren.
    </p>

  • #57177

    almendron
    Participante

    Nota: se puede usar en otros sitios como archive.php, search.php o category.php.

    Lo importante es colocar el código donde se indica respecto a <?php if (have_posts()... y <?php endwhile; ?>.

  • #57639

    adrdomene
    Participante

    Me sirvió muchisimo, gracias!

  • #57642

    adrdomene
    Participante

    Estoy con un problema que me surgio a partir de este codigo que introduci en las lineas

    Lo que hace ese codigo es ocultar las noticias de dichas categorias, el problema esta en que cuando introduzco el codigo se siguen viendo en dos columnas pero hasta la 4ta fila, después se empiezan a ver en una sola columna. Aqui te copio el codigo para que veas como lo tengo armado

    Sin ese code que he agregado se ve perfecto, supongo que tiene que haber una solucion que no la estoy encontrando

  • #57645

    almendron
    Participante

    Si no lo he entendido mal, cuando el slug está vacío o el slug es igual a uno de los que has puesto (“noticias2arriba”, “idolos”, etc) finaliza el bucle “while” y pasa al siguiente post.

    ¿Es así?

    En cualquier caso, vamos a ver que valor nos devuelve $numpost. Justo DEBAJO de $numpost = $numpost + 1; añade la siguiente línea:

    echo $numpost;

    De esta forma podrás ver en pantalla el número de post que se han contado.

  • #57668

    adrdomene
    Participante

    Como bien dices, cuando el slug esta vacio pasa al siguiente post. Ya he agregado el echo $numpost; y me las numera a las noticias y aqui es donde esta el problema sin insertar el code aparecen 16 noticias y cuando inserto el code aparecen 13 noticias, osea que faltarian justo las 3 que estarian ocultando el slug

  • #57670

    LGrusin
    Miembro

    ¿Tienes el foreach dentro del while? Yo creo que es más fácil que le pases a la consulta las categorías que quieres mostrar y así te evitas tener tantos bucles unos dentro de otros.

    Busca en el Foro por [url=https://ayudawp.com/foro/tags/categorias]categorias[/url], seguro que encuentras lo que quieres. Lo digo para que no se aleje mucho del contenido inicial del hilo.

    Un saludo

  • #57674

    almendron
    Participante

    Creo que sucede lo siguiente:

    1) Número de posts a mostrar = 16. La mitad es 8 y ahí cierra la primera división y abre la segunda.

    2) Solo tienes 13 post que cumplan las condiciones.

    Para comprobar si es así, modifica el número de post por página y pon 12. Debería quedar bien.

    Si tengo razón y es por el motivo que acabo de explicar, ya miraré para corregirlo de forma permanente.

  • #57676

    LGrusin
    Miembro

    almendron volviendo a las columnas, realmente no hace falta calcular la mitad de los posts ni código alguno. Si la clase columna tiene float:left y un ancho de width:48% los posts se irán colocando uno al lado del otro hacia la derecha (sólo caben dos), cuando termine con esa fila se colocará debajo de izquierda a derecha y así el resto.

    De manera que si pones un ancho de 33% por ejemplo caben 3 columnas, si pones 25% caben 4, etc.

    Sólo si quieres personalizar cada columna sería necesario el código aquel que dije de pares e impares.

    Un saludo

  • #57678

    adrdomene
    Participante

    ahi he puesto para que se vean 12 por pagina, pero sigue quedando mal apareciendo 9 por el hecho de que se siguen ocultando esas 3

  • #57680

    adrdomene
    Participante

    he buscado una forma mas facil de ocultar dicha categoria, o categorias..

    <div class=”columnas”>
    <?php query_posts(‘cat=-8’); ?>
    <?php while (have_posts()) : the_post(); ?>

    De este modo salen bien las 2 columnas, en donde 8 es el id de la categoria a ocultar. Después para seguir ocultando categorias <?php query_posts(‘cat=-12,-13,-8’); ?> y asi sucesivamente con los IDs funciona perfecto.

  • #57681

    almendron
    Participante

    almendron volviendo a las columnas, realmente no hace falta calcular la mitad de los posts ni código alguno. Si la clase columna tiene float:left y un ancho de width:48% los posts se irán colocando uno al lado del otro hacia la derecha (sólo caben dos), cuando termine con esa fila se colocará debajo de izquierda a derecha y así el resto.
    De manera que si pones un ancho de 33% por ejemplo caben 3 columnas, si pones 25% caben 4, etc.
    Sólo si quieres personalizar cada columna sería necesario el código aquel que dije de pares e impares.
    Un saludo

    Pero, ¿dónde colocas <div class="columnas"> y </div>?

  • #57687

    LGrusin
    Miembro

    Exactamente en el mismo sitio donde lo has puesto, eso no cambia…

    Un saludo

  • #57698

    almendron
    Participante

    Lo probaré en cuanto pueda y te digo algo.

  • #57706

    adrdomene
    Participante

    Almendron, hay alguna forma de hacer que las columnas de las notiicas se ordenen por filas? me refiero a que en este caso las noticias por fecha aparecen asi:

    1 7
    2 8
    3 9
    4 10
    5 11
    6 12

    y lo ideal seria que aparezca por orden de fecha pero de este modo, osea asi:

    1 2
    3 4
    5 6
    7 8
    9 10
    11 12

  • #57711

    almendron
    Participante

    Según ha puesto LGrusin, debería poderse. El problema es que hasta la semana que viene no podré hacer ninguna prueba porque estoy de viaje y en el portátil no tengo instalado el servidor local.

    De todas formas, puedes probar lo siguiente:

    1.- Copia de seguridad del index.php

    2.- Quita el código que has puesto para mostrar las columnas.

    3.- Justo DEBAJO de la línea que comienza por <?php while (have_posts())... insertas lo siguiente:

    <div class="columnas"> (Nota: columnas o el nombre del estilo que hayas usado)

    y justo ENCIMA de <?php endwhile; ?> añadimos

    </div>

  • #57713

    adrdomene
    Participante

    exactamente es lo que he hecho, y le aumente el width a 100% y quedo como queria, pero hay algunos espacios en blanco, en este momento lo puedes ver, eso me pasaba antes, trate con darle menos padding de todo tipo pero no pude solucionarlo :S

  • #57715

    almendron
    Participante

    No lo has hecho bien. Todos los posts han quedado dentro de la clase “columnas” y tiene que salir que cada post esté contenido dentro de dicha clase

    Debes poner la anchura al 45 % y luego comprueba el código:

    Justo DEBAJO de la línea que comienza por <?php while (have_posts())… insertas lo siguiente:

    <div class=”columnas”> (Nota: columnas o el nombre del estilo que hayas usado)

    y justo [b]ENCIMA de <?php endwhile; ?>[/b] añadimos </div>

  • #57718

    adrdomene
    Participante

    Listo, arreglado, el problema era que los caracteres y renglones demás que salian modificaban el alto y eso hacia que se deformara todo o que quedaran espacios en blanco sin noticia. La solución esta en darle un alto determinado, de esta forma lo termine solucionando:

    .columnas {
    width:50%;
    float:left;
    height:450px;
    }

    Y como bien dice LGrusin de esa forma cumple la misma funcion siempre dandole el width necesario para la cantidad de columnas que quieran.

    Saludos y gracias muchachos!

  • #57720

    almendron
    Participante

    LGrusin no habla sin conocimiento de causa 🙂

  • #57727

    CancionesInfantiles
    Participante

    Muchas gracias muy útil

  • #57729

    LGrusin
    Miembro

    Hombre, a veces suelo equivocarme. Pero siempre intento hacer pruebas antes de responder. Sobre todo si se trata de código en que es más fácil cometer errores.

    El tema de las columnas lo probé en su dia en el [url=https://ayudawp.com/foro/topic/posts-pares-e-impares-get-oddeven-posts]otro hilo[/url] que se abrió sobre esto.

    También reconozco que hay themes más rebeldes pero con paciencia se puede conseguir adaptarlos.

    Un saludo

El foro ‘Themes y Diseño’ está cerrado y no se permiten nuevos debates ni respuestas.

Pin It on Pinterest