Mettre les billets sur deux colonnes (Créer un compte)

Accueil › Forums › WordPress › Mettre les billets sur deux colonnes
  • Statut : non résolu
15 sujets de 1 à 15 (sur un total de 24)
1 2
  • Auteur
    Messages
  • 17 octobre 2010 à 10 h 47 min #487234
    Cainzer
    Participant
    Chevalier WordPress
    113 contributions

    Bonjour,

    – Nom de l’hebergeur : OVH
    – Adresse du site : http://4-games.fr

    Problème(s) rencontré(s) : Bonjour ! Cela fait au moins 2 mois que je recherche sur divers sujets et diverses pages web de google mais je ne trouve aucune solution.
    En bref j’aimerais que mon site ait 2 colonnes d’articles au lieu d’une. En gros j’aimerais ça :

    Article # / Article #
    Article 10 / Article 9
    Article 8 / Article 7
    Article 6 / Article 5
    Article # / Article #
    …

    Je sais qu’il faut faire une modification sur la « loop » mais comme je ne suis pas un pro du PHP j’aimerais que vous m’expliquiez précisément les étapes à suivre. Après pour ce qui est de la personnalisation niveau CSS, je devrais me débrouiller puisque que je m’y connais un peu mieux la dedans.

    Merci d’avance.

    Je doute qu’il serve à quelque chose, mais voici le code actuel :

    <?php
    /**
     * @package WordPress
     * @subpackage hanaqpacha
     */
    get_header(); ?>

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <div <?php post_class() ?> id= »post-<?php the_ID(); ?>« >
        <div class="toppost">
        <div class="storytitle"><h3><a href="<?php the_permalink() ?> » rel= »bookmark »><?php the_title(); ?></a></h3></div>
        <div class="metainfo">
            <img src="<?php bloginfo('stylesheet_directory'); ?>/images/login.png » width= »15″ height= »16″ alt= »login » /><div><?php the_author() ?></div> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/calendar.png » width= »15″ height= »15″ alt= »login » /><div> Le <?php the_time(__('j F Y')) ?> à <?php the_time(__('G h i min')) ?>   <?php edit_post_link(__('Edit This')); ?></div>
        </div>
        </div>
        <div class="storycontent">
            <?php $postimageurl = get_post_meta($post->ID, ‘post-img’, true); if ($postimageurl) { ?>
                <div class="postimg">
                    <a href="<?php the_permalink(); ?> » rel= »bookmark » title= »Permanent Link to <?php the_title_attribute(); ?>« ><img src="<?php echo $postimageurl; ?> » alt= »Post Pic » width= »150″ height= »150″ /></a>
                </div>
            <?php } ?>

    <div class="extrait_image"> <img class="alignnone" src="<?php echo catch_that_image() ?> » alt= » » width= »200″ height= »150″ /> </div>

    <?php the_excerpt(); ?><a href="<?php the_permalink() ?> » rel= »bookmark » title= »Lien Permanent vers <?php the_title(); ?>« ><b>Lire la suite</b></a>


        <div class="feedback">
            <?php wp_link_pages(); ?>
            <?php comments_popup_link(__('Commentaire <strong>(0)</strong> postez le votre !’), __(‘Commentaire <strong>(1)</strong> postez le votre !’), __(‘Commentaires <strong>(%)</strong> postez le votre !’)); ?>
               <?php _e("classé dans : "); ?> <?php the_category(',') ?> <br /> <?php the_tags(__('Mots clés : '), ', ', ''); ?>
        </div>
        </div>
        <div class="bottomstory">


    17 octobre 2010 à 10 h 52 min #742959
    kosaid
    Participant
    Chevalier WordPress
    130 contributions

    bonjour

    avec firefox tu inspect la boite qui encadre to article puis tu la vise en css en lui appliquant un float ; left mais ca demandera d’autre changement au niveau de la structure( je pense ) pas besoin de toucher la loop

    bonne chance

    17 octobre 2010 à 16 h 52 min #742960
    Li-An
    Participant
    Maître WordPress
    29246 contributions

    Il y a même un plugin qui gère ça: http://www.li-an.fr/wpplugins/plugins/post-theming/

    18 octobre 2010 à 16 h 48 min #742961
    Cainzer
    Participant
    Chevalier WordPress
    113 contributions

    Bonjour.

    Pourriez vous m’indiquer quelles sont les changements à faire s’il vous plait ? Je ne vois pas très bien comment faire 😕 Pour ce qui est du décors après je me débrouillerais, mais je ne comprend pas comment faire pour séparer mes articles en deux colonnes rien qu’avec le CSS 😋 Merci d’avance !

    Li-An : Merci pour ton plugin mais je préfère le faire avec le CSS.

    18 octobre 2010 à 18 h 31 min #742962
    kosaid
    Participant
    Chevalier WordPress
    130 contributions

    bonsoir
    supposant que le div container ait une boite dedans qui encadre les articles se nomme article-box
    a savoir la largeur du container est 600px par ex et article-box de 500 alors pour mettre article-box deux par ligne tu modifie la largeur par ex 270 et dans container tu met float:left
    voila j’espere que ca va t’aider

    18 octobre 2010 à 19 h 04 min #742963
    Cainzer
    Participant
    Chevalier WordPress
    113 contributions

    Bonsoir.
    J’ai fais… mais voila ce que ça me donne : http://s2.noelshack.com/uploads/images/1466652620070_test_2_colonnes_1.jpg
    Le résultat ne me surprend pas vraiment. Si je fais comme tu m’as dit en mettant un float:left ‘qui était déjà présent) les articles se collent tous vers la gauche.
    En gros je pense qu’il va falloir toucher à la boucle « the loop ». Pour le CSS je n’ai cas mettre renommer mes attributs, et je suppose qu’il faudra cette fois faire un float:right mais je ne sais pas quoi mettre dans la boucle.
    Auriez vous des idées s’il vous plait ?

    18 octobre 2010 à 22 h 05 min #742964
    kosaid
    Participant
    Chevalier WordPress
    130 contributions

    slaut
    s’il se collent fait un margin : )
    mais je pense que tu doit readapter les images du design : ]

    19 octobre 2010 à 11 h 11 min #742965
    Cainzer
    Participant
    Chevalier WordPress
    113 contributions

    Je ne comprend pas trop l’utilité du margin. Puisque si je les fais s’éloigner de la gauche par exemple tous les billets vont s’éloigner en même temps.
    Et il faudra en effet refaire le design, ça c’était déjà prévu puisque je voudrais que le design des articles changent complètement.

    Vu que tous les articles répondent au même attribut « content » je pense que si je fais des changements sur le CSS ça va appliquer la même chose pour chaque billet.
    Le moyen qui me semble le plus probable est de séparer la loop en deux parties avec chacun un CSS différent mais je ne vois pas comment faire.
    Pourriez vous m’aider s’il vous plait ?

    19 octobre 2010 à 11 h 47 min #742966
    kosaid
    Participant
    Chevalier WordPress
    130 contributions

    salut
    pour etre plus precis tu fais un margin-left pour la gauche ou bien margin-right pour la droite sinon je pense que la margin tu doit l’appliquer a la boite qui englobe tous les articles dans l’exemple donne precedement ca doit etre container
    le blem que tu as c’est que ta des images au niveau de ton designe alors quand tu modifie la largeur ca affect l’image(
    la seul solution qui est logic c’est de readapter les images de ton design selon la nouveau largeur )

    NB: si tu desactive l’image sur les articles ils vont se flote l’un acote du l’autre
    bonne chance

    19 octobre 2010 à 15 h 39 min #742967
    Cainzer
    Participant
    Chevalier WordPress
    113 contributions

    Bonjour.
    J’ai donc enlevé toutes les images susceptibles d’être présente de gêner mes posts. J’ai fais beaucoup de test avec des margin-left et des margin-right mais rien n’y fait. Les articles restent toujours sur une colonne. Que faire ?
    En tous cas merci beaucoup pour toutes ces réponses rapides !

    19 octobre 2010 à 16 h 23 min #742968
    Li-An
    Participant
    Maître WordPress
    29246 contributions

    Il y a la possibilité de faire ça dans un tableau (c’est maaaaal disent les puristes).
    Sur le forum du thème Atahualpa ils proposent ça:



         Style & edit the Center column */
        bfa_center_content($bfa_ata[‘content_above_loop’]); ?>

    <table cellpadding="0" cellspacing="0" border="0">
        
         

            <?php if ($column == 1) echo "<tr>« ; ?>

            <td class="column » style= »vertical-align: top »>
        
             

             Style & edit the Center column */
            bfa_center_content($bfa_ata[‘content_inside_loop’]); ?>
                            
    </td>
            
            <?php if ($column == 2) echo "</tr>« ; (($column==1) ? $column=2 : $column=1); ?>
            
         
    </table>

    19 octobre 2010 à 16 h 38 min #742969
    Cainzer
    Participant
    Chevalier WordPress
    113 contributions

    Ta solution me donne un parse-error Li-An. Mais merci pour ta réponse !
    Ca me semble quand même bizarre. D’après un témoignage : http://www.wordpress-fr.net/support/viewtopic.php?id=4970
    La solution en manipulant seulement le CSS devrait fonctionner. Donc donc enlever toute forme de CSS dans mes articles afin de voir ce que cela donnait mais tous mes articles sont encore collés à gauche :(
    Je comprend pas d’où vient le problème.

    23 octobre 2010 à 8 h 25 min #742970
    Cainzer
    Participant
    Chevalier WordPress
    113 contributions

    Personne n’a de solution à me proposer s’il vous plait ?

    23 octobre 2010 à 11 h 06 min #742971
    Li-An
    Participant
    Maître WordPress
    29246 contributions

    Euh, il faut nettoyer mon code. J’ai collé direct le code donné par le forum Atahualpa avec dedans des fonctions spécifiques au thème. Pour l’avoir appliqué, le code fonctionne bien (sous Atahualpa, ah ah).

    Tu peux aussi jeter un oeil sur ce thème là: http://www.siiimple.com/milan-a-wordpress-theme

    23 octobre 2010 à 11 h 53 min #742972
    kosaid
    Participant
    Chevalier WordPress
    130 contributions

    salut
    si tu veux jai un child theme basee sur twety ten que jai fait mais il tres basic qui affiche les articles en deux colonnes fais signe
    voila une screenshot http://i52.tinypic.com/30tqe04.png

  • Auteur
    Messages
15 sujets de 1 à 15 (sur un total de 24)
1 2
  • Vous devez être connecté pour répondre à ce sujet.