colorer les blocs d'articles par catégorie.

Statut : non résolu

Ce sujet contient 32 réponses, 3 participants et a été mis à jour pour la dernière fois par njaka41, le il y a 12 années et 1 mois.

15 sujets de 16 à 30 (sur un total de 33)

← 1 2 3 →

Auteur

Messages
4 août 2011 à 8 h 51 min #781496

Guy
Participant

Maître WordPress
14817 contributions

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

4 août 2011 à 11 h 09 min #781497

njaka41
Participant

Chevalier WordPress
212 contributions

oui, merci a toi.

4 août 2011 à 12 h 25 min #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:
```
            
            <div id="primary" class="hfeed">
            
             ‘portfolio’,
                            ‘posts_per_page’ => -1
                )
            );
           add_filter(‘post_class’, ‘portfolio_njaka_addskills_class’);

            ?>
                
                <div id="masonry-portfolio">
                
                
                    
                    <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>
                        
                      
                    </div>

                
                </div>
                

             

            
            </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 🙂
4 août 2011 à 13 h 41 min #781499

njaka41
Participant

Chevalier WordPress
212 contributions

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

4 août 2011 à 14 h 08 min #781500

njaka41
Participant

Chevalier WordPress
212 contributions

ça marche!! Merci ! 🍺

4 août 2011 à 14 h 11 min #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..

4 août 2011 à 14 h 23 min #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.

5 août 2011 à 6 h 05 min #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-« >
```
5 août 2011 à 6 h 57 min #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?

5 août 2011 à 7 h 03 min #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+ 🙂
5 août 2011 à 7 h 09 min #781506

Guy
Participant

Maître WordPress
14817 contributions

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

5 août 2011 à 7 h 18 min #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-« >
```
5 août 2011 à 7 h 24 min #781508

njaka41
Participant

Chevalier WordPress
212 contributions

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

5 août 2011 à 7 h 31 min #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 »?

5 août 2011 à 7 h 40 min #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+
Auteur

Messages