web-dev-qa-db-fra.com

Comment diviser une colonne de plusieurs colonnes sur une page d'archive de catégorie?

Je crée un modèle de page personnalisé avec plusieurs boucles comme celle-ci http://demos.gabfirethemes.com/advanced/category/football/

Vous pouvez voir qu'il y a des publications divisées en plusieurs colonnes: une publication en vedette, puis 2 publications, puis 4 publications à droite.

Je ne pouvais que recevoir des articles dans 2 colonnes.

Pouvez-vous s'il vous plaît expliquer comment diviser une boucle en plusieurs colonnes comme this ?

looparchives
2
Nisha_at_Behance

Les bases

Les colonnes sont gérées par CSS. Donc, si vous utilisez un framework css, comme Bootstrap, Blueprint CSS ou tout autre type de classe, certaines classes que vous pouvez ajouter à un article/post container, afin qu’ils flottent dans le nombre de colonnes souhaité.

Blueprint CSS

Dans le cas de Blueprint Css, il peut s'agir de span-8 (mise en page à 3 colonnes sur une grille de 24 colonnes) avec une classe de last attachée à votre dernier message d'affilée.

Twitter Bootstrap

Dans le cas de Twitters Bootstrap, il s'agit de span4 (disposition sur 3 colonnes sur une grille de 12 colonnes) avec un conteneur, qui enveloppe chaque ligne et a la classe row.

Comment ça marche

Vous devez donc déterminer sur quel poste vous êtes (dans votre requête, n'oubliez pas que le comptage commence dans la plupart des langages de programmation avec 0 pour le 1st item) puis ajoutez la classe (ou insérez le MarkUp) à la publication spécifique. Pour tous les autres messages, vous ajoutez simplement une classe par défaut ou MarkUp.

Explication de l'exemple

Dans l'exemple ci-dessous, nous utilisons le $wpdb global, qui contient l'instance des fonctions de base de données. De cette façon, nous pouvons vérifier les instances var current_post pour obtenir le compteur. Ensuite, nous utilisons ++ pour incrémenter le compteur.

Comment appliquer des classes à l'aide de l'API principale

Tout se passe ensuite dans post_class() , qui renvoie un ensemble standard de classes internes de WPs - ainsi que les classes personnalisées (spécifiques au framework CSS) que nous avons ajoutées - et ajoute le class="wp-internal-classes and custom-classes" au conteneur (div ou article).

Un exemple (peut-être) de bonne pratique

global $wpdb;
if ( have_posts() )
{
    while ( have_posts() )
    {
        the_post();

        $class  = get_post_format();
        // Current post: starts with index 1 - fixing the fact, that PHP starts with 0 else.
        // [A] HER YOU CAN ADD ANY CLASSES THAT YOU NEED FOR EVERY 3rd POST
        $class .= 0 === ( ++$wpdb->current_post % 3 ) ? ' special-class' : '';

        ?>
        <!-- Open Post Container -->
        <article <?php post_class( "span4 post{$class}" ); ?> id="post-<?php the_ID(); ?>">

            <!-- [B] HERE YOU CAN ADD YOUR ACTUAL POST -->

        <!-- // Close Post Container -->
        </article>
    }
}
2
kaiser

Le code basé sur cette réponse , nécessite d'autres adaptations mais démontre le concept:

$count = 0;
while ( have_posts() ) : the_post();

if ( $count < 1 ) {
  // first post
  echo '<div id="left-column">';
  the_title();
} elseif ( $count <= 2 ) {
  // next 2 posts
  the_title();
  if( $count == 2) echo '</div><!-- end left-column -->';
} else {
  // rest of the posts
  if( $count == 3) echo '<div id="right-column">';
  the_title();
}

$count++;
endwhile;
echo '</div><!-- end right-column -->';
1
brasofilo