Cacher des liens selon l'url de la page

**Luzagale** · 12/02/2019, 16h48

Bonjour,

J'ai un site à faire et terminer dans deux jours (le même que celui dont je parlais ici (modifier style d'un mot). Mon précédent problème s'est résolu via le css mais je crains que pour celui-ci, ce soit différent avec utilisation obligatoire de Javascript.

Voici le code que j'ai fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var page = window.location.href;
    if (page === "http://page_listant_les_piscines.fr") {
        document.querySelectorAll("a[href^='http://lesite/listing-category/associations/']").style.display = 'none';
    }

Je ne sais pas exactement ce qui cloche. Je suppose que c'est en dessous, quand je lui demande de prendre tous les liens "associations" et de les cacher de cette page.

J'espérais réussir seule pour la suite mais j'ai vraiment du mal

**ProgElecT** · 12/02/2019, 17h21

Salut

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.querySelectorAll("a[href^='http://lesite/listing-category/associations/']").style.display = 'none';

document.querySelectorAll("a[href^='http://lesite/listing-category/associations/']").style.display = 'none';
Des fois

**Luzagale** · 12/02/2019, 17h37

En enlevant le guillemet, ça ne fonctionne pas non plus.

J'avais pris ce bout de code ici, dans la réponse de 2016 : Stack Overflow javascript get element by href

**danielhagnoul** · 12/02/2019, 21h18

Il faut appliquer un changement de style sur chaque élément du DOM individuellement.

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
const elemsSpan = Array.from(document.querySelectorAll('span'));
 
for (const elem of elemsSpan){
    elem.style.display = 'none';
}

**Luzagale** · 13/02/2019, 11h12

J'ai essayé d'adapter ton code en mettant ça, sachant qu'il n'est pas possible d'assigner directement des span puisque c'est un plugin wordpress qui crée automatiquement ces entrées :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
if (window.location.href === "http://site/Partie1/") {
   const elemsSpan = Array.from(document.querySelectorAll("a[href='http://site/Partie1/listing-category/associations/']"));
 
   for (const elem of elemsSpan){
        elem.style.display = 'none';
        }
}

Alors si j'essaie ce code dans l'ardoise javascript de Firefox, ça fonctionne. Par contre, quand je mets le fichier en ligne, sachant que j'ai bien mis la ligne pour l'appeler dans header.php, ça ne le lance pas

Bon, au moins la partie code est sûrement résolue, il me reste la partie "trouver comment faire pour que Wordpress utilise mon script".

Merci de l'aide pour cette partie en tout cas

Invité · 13/02/2019, 12h19

Bonjour,

mets-le dans footer.php.

**Luzagale** · 13/02/2019, 14h24

J'ai cherché comment faire et ai suivi les instructions de ce site : http://www.thibautsoufflet.fr/charge...ans-wordpress/

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function theme_js(){
 
wp_enqueue_script( 'monscript',
get_template_directory_uri() . '/js/monscript.js',
array() );
 
}
 
add_action( 'wp_footer', 'theme_js' );

Voici ce qui ressort dans la console :

Échec du chargement pour l’élément <script> dont la source est "http://site/wp-content/themes/THEME_PARENT/js/monscript.js?ver=5.0.3".

Il va chercher le script dans le thème parent... Alors qu'il est dans le thème enfant et que, comme marqué sur le site, il est censé aller le chercher dans le thème enfant

EDITION : C'est bon, j'ai trouvé, il faut remplacer get_template_directory_uri() par get_stylesheet_directory_uri()

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function theme_js(){
 
wp_enqueue_script( 'monscript',
get_stylesheet_directory_uri() . '/js/monscript.js',
array() );
 
}
 
add_action( 'wp_footer', 'theme_js' )

Enfin résolu, merci

Invité · 13/02/2019, 14h34

Remplace par get_stylesheet_directory_uri().

[edit] Oups. Trop tard...

**Luzagale** · 13/02/2019, 17h26

Alors c'était résolu et la plupart de mes pages s'affichent correctement mais une partie de mon script ne veut pas fonctionner. En fait, quand je l'active, ça fait planter tout le script et plus rien (du script) ne fonctionne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
function hide_restauration(){ 
 
   const elemsRestau = Array.from(document.querySelectorAll("a[href='http://site/listing-category/restaurant/']"));
   for (const elem of elemsRestau){
        elem.style.display = 'none';
        }
                // SOUS CATEGORIES DE RESTAURANT : va / vb / vc //
           const elemsVa = Array.from(document.querySelectorAll("a[href='http://site/listing-category/va/']"));
           for (const elem of elemsVa){
                elem.style.display = 'none';
                }
 
           const elemsVb = Array.from(document.querySelectorAll("a[href='http://site/listing-category/vb/']"));
           for (const elem of elemsVb){
                elem.style.display = 'none';
                }
 
           const elemsVc = Array.from(document.querySelectorAll("a[href='http://site/listing-category/vc/']"));
           for (const elem of elemsVc){
                elem.style.display = 'none';
                }
 
   const elemsPatis = Array.from(document.querySelectorAll("a[href='http://site/listing-category/patissier/']"));
   for (const elem of elemsPatis){
        elem.style.display = 'none';
        }
 
   const elemsTraiteur = Array.from(document.querySelectorAll("a[href='http://site/listing-category/traiteur/']"));
   for (const elem of elemsTraiteur){
        elem.style.display = 'none';
        }
}
//Si la page est SERVICES alors FONCTION cache les catégories "restaurants", "traiteurs", "patissier"
if (window.location.href === "http://site/services/") {
    function hide_restauration();
}
// Si la page est COMMERCES, alors FONCTION cache les catégories "restaurants", "traiteurs", "patissier"
if (window.location.href === "http://site/commerces/") {
    function hide_restauration();
}
// Si la page est ASSOCIATIONS, alors FONCTION cache les catégories "restaurants", "traiteurs", "patissier"
if (window.location.href === "http://site/associations/") {
    function hide_restauration();
}

J'avais aussi essayé avec des OU || au départ mais ça ne fonctionnait pas non plus.

**NoSmoking** · 13/02/2019, 18h17

Bonjour,
quelques remarques :

• La méthode document.querySelectorAll accepte plusieurs sélecteurs, il suffit de les séparer par une virgule.

• Ton sélecteur est surement simplifiable

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
document.querySelectorAll("a[href='http://site/listing-category/restaurant/']"))
document.querySelectorAll("a[href='http://site/listing-category/va/']"))

• Tu peux passer en paramètre les sélecteurs à ta fonction hide_restauration.

• Tu peux également le faire en CSS directement, comme vu précédemment, en joutant des fichier CSS ciblés.

• (sûrement) ...

**Luzagale** · 13/02/2019, 18h41

J'ai simplifié la partie concernée comme tu me l'as recommandé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
function hide_restauration(){
 
       const elemsRestau = Array.from(
           document.querySelectorAll("a[href='http://site/listing-category/restaurant/']"),
           document.querySelectorAll("a[href='http://site/listing-category/va/']"),
           document.querySelectorAll("a[href='http://site/listing-category/vb/']"),
           document.querySelectorAll("a[href='http://site/listing-category/vc/']"),
           document.querySelectorAll("a[href='http://site/listing-category/patissier/']"),
           document.querySelectorAll("a[href='http://site/listing-category/traiteur/']"));
 
       for (const elem of elemsRestau){
        elem.style.display = 'none';
        }
}
//  Si la page est SERVICES alors FONCTION cache les catégories "restauration"
if (window.location.href === "http://site/services/") {
    function hide_restauration();
}
// Si la page est COMMERCES, alors FONCTION cache les catégories "restauration"
if (window.location.href === "http://site/commerces/") {
    function hide_restauration();
}
// Si la page est ASSOCIATIONS, alors FONCTION cache les catégories "restauration"
if (window.location.href === "http://site/associations/") {
    function hide_restauration();
}

Et pour le css, j'avoue que vois mal comment faire ça puisque dans ce cas-là, il ne faut pas juste modifier le style ou demander à ce qu'il cache puisqu'on veut que ça se montre sur certaines pages et pas sur d'autres. Le reste de mon code a fonctionné, je ne vois plus certaines catégories en dehors des pages qui leur sont assignées mais pour celles-ci c'est plus compliqué étant donné qu'il y a plusieurs pages où ces catégories doivent s'afficher.

**NoSmoking** · 13/02/2019, 19h05

J'ai simplifié la partie concernée comme tu me l'as recommandé :

Encore aurait-il fallu que tu lises la documentation

• Element.querySelectorAll().

• Là de ce que l'on voit, tu vas exécuter 3 fois ta fonction sans rien changer de son fonctionnement.

**Luzagale** · 13/02/2019, 21h37

J'ai retenté de simplifier en espérant avoir compris cette fois. Lorsque je le mets en ligne, la console ne m'indique pas d'erreurs mais ça ne fait pas ce que c'est censé faire : ça cache uniquement la première url de chaque document.querySelectorAll et laisse les autres.

Code des autres pages, sans la fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// Si la page n'est pas "associations", alors cache les catégories "assos"
if (window.location.href !== "http://site/assos/") {
    const elemsAssos = Array.from(document.querySelectorAll(
                        "a[href='http://site/listing-category/assos/']",
                        "a[href='http://site/listing-category/milit']",
                        "a[href='http://site/listing-category/secours']"));
 
   for (const elem of elemsAssos){
        elem.style.display = "none";
        }
}
 
// Si la page n'est pas "commerces", alors cache les catégories "commerce"
if (window.location.href !== "http://site/commerces/") {
    const elemsCommerce = Array.from(document.querySelectorAll(
                                     "a[href='http://site/listing-category/commerces/']",
                                     "a[href='http://site/listing-category/alim/']",
                                     "a[href='http://site/listing-category/vest/']"));
 
   for (const elem of elemsCommerce){
        elem.style.display = "none";
        }
}
 
// Si la page n'est pas "services", alors cache les catégories "services"
if (window.location.href !== "http://site/services/") {
 
   const elemsSante = Array.from(document.querySelectorAll(
                                 "a[href='http://site/listing-category/sante/']",
                                 "a[href='http://site/listing-category/mas/']",
                                 "a[href='http://site/listing-category/med/']",
                                 "a[href='http://site/listing-category/hom/']",
                                 "a[href='http://site/listing-category/natu/']"));
 
   for (const elem of elemsSante){
        elem.style.display = "none";
        }
}

Code de la fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
function hide_restauration(){
 
       const elemsRestau = Array.from(
           document.querySelectorAll("a[href='http://site/listing-category/restaurant/']",
           "a[href='http://site/listing-category/va/']",
           "a[href='http://site/listing-category/vb/']",
           "a[href='http://site/listing-category/vc/']",
           "a[href='http://site/listing-category/patissier/']",
           "a[href='http://site/listing-category/traiteur/']"));
 
       for (const elem of elemsRestau){
        elem.style.display = "none";
        }
}
 
//  Si la page est SERVICES alors FONCTION cache les catégories "restaurants", "traiteurs", "patissier"
if (window.location.href === "http://site/services/") {function hide_restauration();
}
// Si la page est COMMERCES, alors FONCTION cache les catégories "restaurants", "traiteurs", "patissier"
if (window.location.href === "http://site/commerces/") {function hide_restauration();
}
// Si la page est ASSOCIATIONS, alors FONCTION cache les catégories "restaurants", "traiteurs", "patissier"
if (window.location.href === "http://site/associations/") {function hide_restauration();
}

Pour la fonction, en quoi est-ce un problème de la lancer sans changer son fonctionnement, sachant qu'à chaque fois c'est sur des pages différentes ?

**NoSmoking** · 15/02/2019, 11h38

Code des autres pages, sans la fonction

est ce à dire que celle-ci prend en compte tous les cas possibles ?

Si c'est le cas il me semble préférable d'avoir une autre approche en passant par un objet qui reprend tes différents exigences.

On pourrait, par exemple, avoir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
// définitions des liens à masquer
const dataREP = {
  "assos/": ["assos", "milit", "secours"],
  "commerces/": ["commerces", "alim", "vest"],
  "services/": ["sante", "mas", "med", "hom", "natu"]
};

fichier à compléter suivant le besoin, on se sert des « key » comme référence aux répertoires d'appel et les « value » comme référence aux répertoires liens à masquer.

On pourrait donc exploiter cela dans une fonction qui pourrait ressembler à

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function hideLinks() {
  "use strict";
  // définitions des données traitées
  const origine = "http://site/";         // peut être window.location.origin +"/"
  const dossier = "listing-category/";
  // définitions des liens à masquer
  const dataREP = {
    "assos/": ["assos", "milit", "secours"],
    "commerces/": ["commerces", "alim", "vest"],
    "services/": ["sante", "mas", "med", "hom", "natu"]
  };
 
  // récup. dossier d'appel
  const rep = window.location.href.split("/").pop();  // si pas de fichier après le dernier "/"
 
  let elems;  
  let sel = [];
  // récup. data concernée
  const data = dataREP[rep];
  // si existent des datas
  if (data && data.length) {
    // création du sélecteur CSS
    data.forEach(function(elem) {
      sel.push("a[href=\"" + origine + dossier + elem + "/\"]");
    });
    // on crée un sélecteur global
    sel = sel.join(",");
    // juste pour voir les sélecteurs
    console.log(sel.replace(/,/g,"\n"));
    /// récup. des éléments
    elems = document.querySelectorAll(sel);
    // on les cache
    elems.forEach( function(elem) {
      elem.style.display = "none";
    });
  }
}

Il suffit ensuite d’appeler cette fonction en fin de fichier HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
// appel de la fonction
hideLinks();

Cacher des liens selon l'url de la page

JavaScript

Discussions similaires

Partager

Partager