colorer les blocs d’articles par catégorie. (Créer un compte)

  • Statut : non résolu
15 sujets de 16 à 30 (sur un total de 33)
  • Auteur
    Messages
  • #781496
    Guy
    Participant
    Maître WordPress
    14817 contributions

    pour y voir plus clair, je vais charger le thème, suite au prochain épisode 🙂

    #781497
    njaka41
    Participant
    Chevalier WordPress
    212 contributions

    oui, merci a toi.

    #781498
    Guy
    Participant
    Maître WordPress
    14817 contributions

    bon… je te propose ceci. Cela demande un ajout dans functions.php et une modification du telmplate portfolio. Comme toujours, une modification du thème doit (devrait) provoquer le réflexe theme enfant 🙂 pour pouvoir bénéficier des mises à jour et ne pas risquer de tout casser dans le thème original.

    Le principe, c’est d’ajouter à chaque post de type portfolio, le ou les skills à qui ils appartiennent dans une classe css du post.

    dans le fichier functions.php, ajouter:

    function portfolio_njaka_addskills_class($classes) 
    {
        global $post;
    	if (get_post_type($post) == ‘portfolio’)
    	{
    		$classes[] = ‘njaka-default-skill’;
    		$terms = get_the_terms($post->ID, ‘skill-type’ ); 
    		foreach ($terms as $term)
    			$classes[] = ‘njaka-skill-‘ . $term->slug;
    	}
    	return $classes;
    }

    Il y a deux façons de faire, soit ajouter ces classes à tous les articles de type portfolio, mais en ce cas, que ce soit un affichage d’un portfolio seul ou en mode « portfolio », le style sera appliqué tout le temps.

    Pour cela, il faut ajouter après la fonction précédente, dans le fichier functions.php la ligne :
    add_filter(‘post_class’, ‘portfolio_njaka_addskills_class’);

    La deuxième façon, c’est de n’appliquer la fonction que dans le template portfolio et cela donne ça:

    
    
    
    
                <!--BEGIN #primary .hfeed-->
                <div id="primary" class="hfeed">
                
                 ‘portfolio’,
                                ‘posts_per_page’ => -1
                    )
                );
               add_filter(‘post_class’, ‘portfolio_njaka_addskills_class’);
    
                ?>
                    <!--BEGIN #masonry-->
                    <div id="masonry-portfolio">
                    
                    
                        <!--BEGIN .hentry -->
                        <div  id= »post-« >
                            
                            
                            
                            <div class="post-thumb clearfix">
                            
                                
                                    <a class="lightbox" title=" » href= » »>
                                        <span class="overlay">
                                            <span class="icon"></span>
                                        </span>
                                        
                                        
                                        <img src=" » alt= » » />
                                        
                                        
                                        
                                    </a>
                                
                                
                                    <a title=" » href= » »>
                                    
                                        <img src=" » alt= » » />
                                    
                                    
                                    
                                    </a>
                                    
                                
                                
                            </div>
                            
                            <div class="arrow"></div>    
                            
                            <h2 class="entry-title"><a href=" »></a></h2>
                            
                            <div class="entry-excerpt">
                            
                            </div>
                            
                        <!--END .hentry-->  
                        </div>
    
                    
                    </div>
                    <!--END #masonry-->
    
                 
    
                <!--END #primary .hfeed-->
                </div>
                

    Explication de ce que la fonction « portfolio_njaka_addskills_class » fait:

    Elle ajoute aux classes css d’un portfolio, une classe ‘njaka-default-skill’ qui permet de définir un style pour les portfolio sans skill ou dont le style du skilll n’est pas défini, plus des classes ‘njaka-skill-idskill’, où idskill est l’identifiant du skill.

    Pour appliquer les styles, il te suffira d’aller dans les options du thèmes, dans styling options et d’ajouter des lignes de ce genre dans custom CSS (remplace portfolio2 par l’identifiant d’un de tes skills)

    .njaka-default-skill {
    	background-color: #036; 
    }
    
    .njaka-skill-portfolio2{
    	background-color: #033; 
    }

    Bon courage 🙂

    #781499
    njaka41
    Participant
    Chevalier WordPress
    212 contributions

    ok, merci je vais voir ça et je te fait part. 🙂

    #781500
    njaka41
    Participant
    Chevalier WordPress
    212 contributions

    ça marche!! Merci ! 🍺

    #781501
    njaka41
    Participant
    Chevalier WordPress
    212 contributions

    Une dernière chose! Quel fonction utilise-t-on pour choisir une portfolio qu’on met au plus haut a gauche, et qu’on double sa dimension par/rapport au autre..

    #781502
    Guy
    Participant
    Maître WordPress
    14817 contributions

    C’est possible avec ce thème?

    Si ce n’est pas possible par défaut, cela demande du codage dans le template portfolio, un moyen de dire tel portfolio sera affiché en avant, plus tout ce à quoi je ne pense pas sur le moment.

    #781503
    njaka41
    Participant
    Chevalier WordPress
    212 contributions

    ok Guy, J’ai fouiller dans le thème mais, il n’y a pas cette fonction là. Je pense que c’est le post-id qu’on test dans le portfolio et lui placer en dessus à gauche… je vais essayer quand même mais j’suis pas sur d’y arriver. a+

    <div  id= »post-« >

    #781504
    Guy
    Participant
    Maître WordPress
    14817 contributions

    c’est effectivement un test sur l’ID du post qu’il faut faire, mais tu le compares avec quoi? comment détermines tu le portfolio qui doit être affiché en grand? c’est le premier, le plus récent, au hasard, un ID spécifique?

    #781505
    njaka41
    Participant
    Chevalier WordPress
    212 contributions

    en fait même si on doit tester avec un ID du post c’est pas grave. J’ai essayer mais ça ne marche pas

    <?php	if(the_ID() == "21"){
    					echo ("<div class="primary1">« );
    						else {
    					echo(« <div> « );
    			} ?>

    Le 21 dans le test est l’ID d’un post et primary1 c’est la nouvelle classe… a+ 🙂

    #781506
    Guy
    Participant
    Maître WordPress
    14817 contributions

    the_ID() envoie vers l’écran, il faut mettre get_the_ID()

    #781507
    Guy
    Participant
    Maître WordPress
    14817 contributions

    rhooo j’avais pas regardé la construction du div,

    il faut mettre pour une syntaxe correcte:

    echo ‘<div class="primary1" id="post-' . get_the_ID(); . '">‘;

    mais de toute façon, il vaudrait mieux mettre autre chose, en faisant cela tu supprimes toutes les classes CSS associées au post.

    je ferai plutot:

    
                    <div  id= »post-« >

    #781508
    njaka41
    Participant
    Chevalier WordPress
    212 contributions

    ou est-ce que tu trouve un moyen plus conviviale de faire… 💡

    #781509
    Guy
    Participant
    Maître WordPress
    14817 contributions

    Ca me parait bien mais le problème reste entier, comment veux tu déterminer ton « 21 »?

    #781510
    njaka41
    Participant
    Chevalier WordPress
    212 contributions

    le vrai souci je pense que c’est dans le javascipt ou jQuerry, car les blocs sont déterminé par position absolute, left, right. Et c’est pas l’attribution de classe d’un bloc qui vas changer ça… a+

15 sujets de 16 à 30 (sur un total de 33)
  • Vous devez être connecté pour répondre à ce sujet.