Cacher des liens selon l'url de la page

Version imprimable

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:

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 :no:

12/02/2019, 17h21
ProgElecT

Salut

Code:

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 :aie:
12/02/2019, 17h37
Luzagale

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

:salut:

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

Exemple :
Code:

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

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:

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 :D

13/02/2019, 12h19
Invité

Bonjour,

mets-le dans footer.php.
13/02/2019, 14h24
Luzagale
J'ai cherché comment faire et ai suivi les instructions de ce site : http://www.thibautsoufflet.fr/charge...ans-wordpress/
Code:

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 :

Citation:

É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 :calim2:

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

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 :D
13/02/2019, 14h34
Invité

Remplace par get_stylesheet_directory_uri().

[edit] Oups. Trop tard... ;)

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:

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.

13/02/2019, 18h17
NoSmoking
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:

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) ...

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

Code:

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.

13/02/2019, 19h05
NoSmoking

Citation:

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

Encore aurait-il fallu que tu lises la documentation :weird:

• Element.querySelectorAll().

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

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:

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:

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 ?

Citation:

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:

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:

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:

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