Discussion :

[sebgac]

Bonjour,

Je suis en train de réaliser un site sur Wordpress.

Je pars d'un thème premium dont je ne peux pas modifier le code php (ce sont les thèmes Qode, ils passent par un plugin pour définir la structure de leurs pages, du coup impossible de passer par un thème enfant). Je dois donc customiser la page en javascript/jquery

Sur une page, j'ai un petit problème sur les vignettes: je voudrais effectuer un retour à la ligne et décider où le faire (il y a le nom de l'expo, puis la date)



Voici la page concernée : http://arnaudlebecq.com/expos/ : on voit le titre en faisant un hover.

Ce texte est récupéré dans le titre de la page Wordpress :



Du coup, même si je mets une balise </br> dans le titre, cela me récupère du texte et affiche </br> en texte (logique je dirai)



--

Du coup, je me posais la question, si je mets des repères [] et {} dans mon texte, je pourrais être en mesure de récupérer le texte à partir de [], puis ensuite de remplacer {saut} par la balise </br> désirée. Vous pensez que c'est possible ?

Pour le moment, j'en suis à récupérer le contenu de ma balise par la console :



D'après mes recherches, les fonctions qui permettent de remplacer le contenu d'une balise, c'est pour remplacer le contenu intégral, pas une partie du contenu.

Pour le moment je sèche sur la manière de m'y prendre, si vous aviez quelques pistes SVP, ça serait top !

Merci d'avance

[Invité]

Bonjour,

...si je mets des repères [] et {} dans mon texte, je pourrais être en mesure de récupérer le texte à partir de [], puis ensuite de remplacer {saut} par la balise </br> désirée

1- Les [] sont inutiles
2- remplace {saut} par | (barre verticale -> "Alt Gr"+"6" au clavier) : c'est quand même plus "discret", et "propre" au niveau du TITRE de l'article !

Code html :

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

Facets of Thailand | du 11 au 20 octobre 2019

Code html :

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

1
2
<h4 itemprop="name" class="edgtf-pli-title entry-title" style="text-transform: uppercase">
        Facets of Thailand | du 11 au 20 octobre 2019</h4>

Puis :

Code JavaScript :

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

1
2
3
4
5
6
7
<script>
jQuery(function(){
	jQuery('h4.edgtf-pli-title.entry-title').each(function(){
		jQuery(this).html( jQuery(this).html().replace('|', '<br/>') ); // on remplace la barre verticale par un passage à la ligne
	});
});
</script>

[sebgac]

Merci beaucoup pour ta réponse. Cela fonctionne parfaitement !!!

Juste quelques explications stp, si tu as le temps :

l'utilisation de each() : ce serait pour le faire sur chacun des élements appelés 'h4.edgtf-pli-title.entry-title' c'est bien ça ?

concernant la fonction .replace() : je comprends bien la logique et la combinaison avec la fonction .html() (on aurait pu mettre text() aussi n'est-ce-pas ?)

mais pourquoi en essayant sur la console, cela m'indique que replace() n'est pas une fonction ?

[Invité]

l'utilisation de each() : ce serait pour le faire sur chacun des élements appelés 'h4.edgtf-pli-title.entry-title' c'est bien ça ?

Exact.

• jQuery each()

concernant la fonction .replace() : je comprends bien la logique et la combinaison avec la fonction .html() (on aurait pu mettre text() aussi n'est-ce-pas ?)

NON, car <br/> est du HTML.

Cela dit, on aurait pu écrire (vu que le texte initial est... effectivement du texte (!)) :

Code :

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

		jQuery(this).html( jQuery(this).text().replace('|', '<br/>') ); // on remplace la barre verticale par un passage à la ligne

3- et c'est .html().replace ou .text().replace, pas .html.replace (il manque les () ).
Normalement, il te suffit de faire un copier-coller de mon code :

Code :

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

1
2
3
4
5
6
7
<script>
jQuery(function(){
	jQuery('h4.edgtf-pli-title.entry-title').each(function(){ // each : pour chaque ... (titre)
		jQuery(this).html( jQuery(this).text().replace('|', '<br/>') ); // on remplace la barre verticale par un passage à la ligne
	});
});
</script>

Quand tu définis le TITRE de l'article, tu peux ajouter plusieurs "passages à la ligne" (à ta convenance) :

Code :

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

Facets of Thailand | du 11 au 20 | octobre 2019

donnera (à l'écran) :

Code :

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

1
2
3
Facets of Thailand
du 11 au 20
octobre 2019

[EDIT] C'est bizarre...
Quand on est sur l'article lui-même, le <title> indique :

Code :

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

		<title>Facets of Thailand % du 11 au 20 octobre 2019 – Galerie Arnaud Lebecq</title>

Le "|" s'est transformé en '%'...
Pourquoi ?

[sebgac]

c'est super, ça fonctionne nickel !

Le "|" s'est transformé en '%'...
Pourquoi ?

Peut-être parce que au départ j'avais utilisé % à la place de | ...

J'ai écrit deux autres lignes sur le même modèle, pour rajouter des balises avec class custom pour régler la font-size, ça marche génial, je suis content merci encore