TutorielModification des phrases du QEEL - version phpbb2
Difficulté : ♦ ♦ ♦ ♦
Durée : ♦ ♦ ♦ ♦
Aperçu
Comment obtenir ce résultat ?
Les prérequis
Afin de pouvoir utiliser ou installer ce code sans accroche, il faut :
- être fondateur du forum
- être en version phpBB2 ou punBB
Par ailleurs, je précise que ce code est assez complexe. Il ne suffit donc pas de prendre les codes et de les mettre bêtement sur son forum pour que ça marche. Ces codes requièrent de la curiosité et un minimum d'analyse pour être compris et donc utilisés correctement.
Le QEEL, où ça se passe ?
Pour modifier le QEEL, il faut modifier le template
index_body, qui se trouve ici :
Panneau d'administration > Affichage > Templates : Général > index_body > Nous voici dans le template index_body, mais comme vous devez vous en doutez, le travail ne fait que commencer. Voici la partie du template index_body qui correspond à la partie du Qui est en ligne.
Le début du QEEL commence par cette ligne :
- Code:
-
<! -- BEGIN disable_viewonline -->
et se termine par celle-ci :
- Code:
-
<! -- END disable_viewonline -->
Et plus encore, la partie concernant les
phrases du QEEL est celle-ci :
- Code:
-
<tr><td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
{TOTAL_USERS}<br />
{NEWEST_USER}</span></td>
</tr>
<tr>
<td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}<br />
<br />
{LOGGED_IN_USER_LIST}</span></td>
</tr>
{L_CONNECTED_MEMBERS}
{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}
soient les variables :
- {TOTAL_POSTS}
- {TOTAL_USERS}
- {NEWEST_USER}
- {TOTAL_USERS_ONLINE}
- {RECORD_USERS}
- {LOGGED_IN_USER_LIST}
- {L_CONNECTED_MEMBERS}
- {L_WHOSBIRTHDAY_TODAY}
- {L_WHOSBIRTHDAY_WEEK}
Les variables
Alors, avant de commencer à comprendre comment les variables du QEEL fonctionnent, voici une définition assez simple pour expliquer ce qu'est une variable :
« Dans un langage de programmation, une variable est un espace de stockage pour un résultat. »
Cette définition signifie qu'à chaque variable est associée une phrase contenant une valeur, et qu'à chaque variable postée sera affichée la phrase qui lui correspond.
Dans un premier temps, nous allons voir à quelle variable correspond quelle phrase, avec
XXX la valeur renvoyée inhérente au forum.
- {TOTAL_POSTS}
Nos membres ont posté un total de XXX messages
- {TOTAL_USERS}
Nous avons XXX membres enregistrés
- {NEWEST_USER}
L'utilisateur enregistré le plus récent est XXX
- {TOTAL_USERS_ONLINE}
Il y a en tout XXX utilisateur en ligne :: XXX Enregistré, XXX Invisible et XXX Invité
- {RECORD_USERS}
Le record du nombre d'utilisateurs en ligne est de XXX le XXX XXX XXX - XXX:XXX
- {LOGGED_IN_USER_LIST}
Utilisateurs enregistrés : XXX
- {L_CONNECTED_MEMBERS}
Membres connectés au cours des XXX dernières heures : XXX
- {L_WHOSBIRTHDAY_TODAY}
- Aucun membre ne fête son anniversaire aujourd'hui
- Membres fêtant leur anniversaire aujourd'hui : XXX (XXX)
- {L_WHOSBIRTHDAY_WEEK}
- Aucun membre ne fête son anniversaire dans les XXX prochains jours
- Membres fêtant leur anniversaire dans les XXX prochains jours: XXX (XXX)
Modification des variables - JavaScript de base
Ce serait trop simple de dire que toutes les variables sont modifiées de la même manière, mais le code JavaScript, lui, est toujours le même, et ressemble à ceci :
- Code:
-
<span id="ID CHOISIE"> {VARIABLE}
<script type="text/javascript">document.getElementById('MEME ID CAR C'EST LE MEME CODE').innerHTML=document.getElementById ('MME ID CAR C EST LE MEME CODE').innerHTML.replace(/BOUT DE PHRASE DE DEBUT/,"BOUT DE PHRASE QUI REMPLACE");</script></span>
Décortiquons le code :
- Code:
-
<span id="ID CHOISIE"> {VARIABLE}
→ ici,
ID CHOISIE correspond à l'idée choisie pour la variable &
VARIABLE correspond au nom de la variable. Pour l'avoir il suffit de copier-coller ce qui est déjà dans le QEEL.
- Code:
-
<script type="text/javascript">document.getElementById('MEME ID CAR C'EST LE MEME CODE').innerHTML=document.getElementById ('MME ID CAR C EST LE MEME CODE').innerHTML.replace(/BOUT DE PHRASE DE DEBUT/,"BOUT DE PHRASE QUI REMPLACE");</script>
→
MEME ID CAR C'EST LE MEME CODE indique qu'il faut ici mettre la même ID choisie dans le
span→
BOUT DE PHRASE DE DEBUT c'est le bout de phrase correspond à la phrase de base que vous voulez changer
→
BOUT DE PHRASE QUI REMPLACE c'est le phrase que vous voulez obtenir.
Attention, comme les valeurs renvoyées changent au fur et à mesure de l'évolution du forum, elles ne peuvent pas être présente dans le code JavaScript.Je vais donc tenter de donner des codes simplifiés qui prennent en compte ce changement de valeurs.
- Code:
-
</span>
→ fermeture du span
L'idée principale, c'est d'entourer la variable d'une balise
span, qui permet la modification rapide d'un mot ou d'une entité un peu plus grande comme un bout de phrase. On associe à cette variable un identifiant, qui sera réutilisé dans le code JavaScript afin d'associer cette variable au JavaScript qui la modifiera.
Globalement :
→ le
span ne doit pas obligatoirement entourer tout le code globale, il peut aussi n'entourer que la variable. Tant que la variable a un identifiant d'attribué, la place de la balise de fermeture
span n'a pas de réelle importance.
- Code:
-
<span id="ID CHOISIE"> {VARIABLE}</span>
<script type="text/javascript">document.getElementById('MEME ID CAR C'EST LE MEME CODE').innerHTML=document.getElementById ('MME ID CAR C EST LE MEME CODE').innerHTML.replace(/BOUT DE PHRASE DE DEBUT/,"BOUT DE PHRASE QUI REMPLACE");</script>
Quelques points à respecter sur le choix de l'identifiant :Afin de ne pas être soumis à des boggs, il est important de
- ne pas mettre d'apostrophe dans l'identifiant, car l'apostrophe a déjà une signification propre dans un code JavaScript et si on ne connait pas la manière de l'utiliser, le code ne fonctionnera pas.
- ne pas mettre d'espace. Lorsqu'on veut démarquer deux mots, il est préférable de mettre un underscore ("_"). L'espace est possible, mais son utilisation devient alors différente lors du CSS. C'est donc fortement déconseillé si on ne sait pas se servir des espaces dans les classes et les identifiants.
Pour que ce tutoriel soit simple, j'utiliserai le nom des variables en minuscule pour mes identifiants.
Modification des variables - variables simples
Ici, nous allons voir comment modifier les variables les plus simples :
- {TOTAL_POSTS}
- {TOTAL_USERS}
- {NEWEST_USER}
- {TOTAL_USERS_ONLINE}
Notre but à présent est d'obtenir ces phrases :
Les forumactiviens, qui sont au total XXX ont laissé XXX messages derrière eux, et le tout dernier d'entre eux s'appelle XXX.
En ce moment, XXX forumactiviens parcourent le forum (XXX sont déjà enregistrés, XXX se cachent et XXX se tâtent encore).
Pour l'instant, c'est assez simple, il ne s'agit que d'un vulgaire copié-collé du code donné précédemment, rempli correctement. On obtient donc pour chaque variable :
- Code:
-
<span id="total_users">{TOTAL_USERS}
<script type="text/javascript">document.getElementById('total_users').innerHTML=document.getElementById ('total_users').innerHTML.replace(/Nous avons/,"Les forumactiviens, qui sont au total");</script>
<script type="text/javascript">document.getElementById('total_users').innerHTML=document.getElementById ('total_users').innerHTML.replace(/membres enregistrés/,"");</script>
</span>
- Code:
-
<span id="total_posts">{TOTAL_POSTS}
<script type="text/javascript">document.getElementById('total_posts').innerHTML=document.getElementById ('total_posts').innerHTML.replace(/Nos membres ont posté un total de/,"ont laissé");</script>
<script type="text/javascript">document.getElementById('total_posts').innerHTML=document.getElementById ('total_posts').innerHTML.replace(/messages/,"messages derrière eux,");</script>
</span>
- Code:
-
<span id="newest_user">{NEWEST_USER}
<script type="text/javascript">document.getElementById('newest_user').innerHTML=document.getElementById ('newest_user').innerHTML.replace(/L\'utilisateur enregistré le plus récent est/," et le tout dernier d'entre eux s'appelle ");</script>
</span>
- Code:
-
<span id="total_users_online">{TOTAL_USERS_ONLINE}
<script type="text/javascript">document.getElementById('total_users_online').innerHTML=document.getElementById ('total_users_online').innerHTML.replace(/Il y a en tout/,"En ce moment,");</script>
<script type="text/javascript">document.getElementById('total_users_online').innerHTML=document.getElementById ('total_users_online').innerHTML.replace(/utilisateur en ligne /,"forumactivien parcourt le forum");</script>
<script type="text/javascript">document.getElementById('total_users_online').innerHTML=document.getElementById ('total_users_online').innerHTML.replace(/utilisateurs en ligne /,"forumactiviens parcourent le forum");</script>
<script type="text/javascript">document.getElementById('total_users_online').innerHTML=document.getElementById ('total_users_online').innerHTML.replace(/:: /," (");</script>
<script type="text/javascript">document.getElementById('total_users_online').innerHTML=document.getElementById ('total_users_online').innerHTML.replace(/Enregistré,/,"est déjà enregistré,");</script>
<script type="text/javascript">document.getElementById('total_users_online').innerHTML=document.getElementById ('total_users_online').innerHTML.replace(/Enregistrés,/,"sont déjà enregistrés,");</script>
<script type="text/javascript">document.getElementById('total_users_online').innerHTML=document.getElementById ('total_users_online').innerHTML.replace(/Invisible et/,"se cache et");</script>
<script type="text/javascript">document.getElementById('total_users_online').innerHTML=document.getElementById ('total_users_online').innerHTML.replace(/Invisibles et/,"se cachent et");</script>
<script type="text/javascript">document.getElementById('total_users_online').innerHTML=document.getElementById ('total_users_online').innerHTML.replace(/Invité/,"se tâte encore).");</script>
<script type="text/javascript">document.getElementById('total_users_online').innerHTML=document.getElementById ('total_users_online').innerHTML.replace(/Invités/,"se tâtent encore).");</script>
</span>
Pour éviter de répéter plusieurs fois les balises script :Il est possible de fusionner les codes JavaScript entre eux pour ne pas avoir à répéter à chaque fois
< script type>...Il suffit de supprimer cette partie à chaque fois :
< script type="text/javascript">document.getElementById('total_users_online').innerHTML=document.getElementById ('total_users_online').innerHTML et ;
pour ne conserver qu'une chaine de
.replace().replace() - Code:
-
<span id="total_users_online">{TOTAL_USERS_ONLINE}
<script type="text/javascript">document.getElementById('total_users_online').innerHTML=document.getElementById ('total_users_online').innerHTML.replace(/Il y a en tout/,"En ce moment,").replace(/utilisateur en ligne /,"forumactivien parcourt le forum").replace(/utilisateurs en ligne /,"forumactiviens parcourent le forum").replace(/:: /," (").replace(/Enregistré,/,"est déjà enregistré,").replace(/Enregistrés,/,"sont déjà enregistrés,").replace(/Invisible et/,"se cache et").replace(/Invisibles et/,"se cachent et").replace(/Invité/,"se tâte encore).").replace(/Invités/,"se tâtent encore).");</script>
</span>
Modification des variables - variables un peu plus compliquées
Maintenant, nous allons voir comment modifier les variables un peu plus compliquée :
- {RECORD_USERS}
- {LOGGED_IN_USER_LIST}
Notre but à présent est d'obtenir ces phrases :
D'ailleurs, le super annuaire du chat-qui-fait-non-de-la-tête a effectué un record de XXX membres en ligne. C'était le XXX XXX XXX à XXX:XXX
Forumactiviens en ligne en ce moment : XXX
- Code:
-
<span id="record_users">{RECORD_USERS}
<script type="text/javascript">document.getElementById('record_users').innerHTML=document.getElementById ('record_users').innerHTML.replace(/le/,"membres en ligne. C'était le");</script>
<script type="text/javascript">document.getElementById('record_users').innerHTML=document.getElementById ('record_users').innerHTML.replace(/-/,"à");</script>
<script type="text/javascript">document.getElementById('record_users').innerHTML=document.getElementById ('record_users').innerHTML.replace(/Le record du nombre d\'utilisateurs en ligne est de/,"D'ailleurs, le super annuaire du chat-qui-fait-non-de-la-tête a effectué un record de");</script>
</span>
Attention, ici, pour modifier le petit morceau "le" qui se trouve avant la date ("18 le Mer 28") correctement, sans que ça n'ait d'impact sur la phrase entière, il faut procéder à cette modification en premier, car s'il s'avérait qu'il existe un mot quelconque contenant la syllabe "le" (comme "belle" par exemple, ou dans mon exemple "d'ailleurs"), cette syllabe serait modifiée par la modification voulue. Une petite astuce ?Pour modifier la date, et passer d'une date partielle à une date complète (Mer > Mercredi), il faudrait modifier toutes les possibilités, en premier également pour ne pas faire bogguer le tout, soit modifier :
- les jours de la semaine
- les mois
c'est-à-dire 16 codes à rajouter (car "Mai" est déjà affiché en entier, et "Juin" et "Juillet" ont la même abréviation et ne sont donc pas distincts) :
- Code:
-
.replace(/Lun/,"Lundi").replace(/Mar/,"Mardi").replace(/Mer/,"Mercredi").replace(/Jeu/,"Jeudi").replace(/Ven/,"Vendredi").replace(/Sam/,"Samedi").replace(/Dim/,"Dimanche").replace(/Jan/,"Janvier").replace(/Fév/,"Février").replace(/Mar/,"Mars").replace(/Avr/,"Avril").replace(/Aou/,"Aout").replace(/Sep/,"Septembre").replace(/Oct/,"Octobre").replace(/Nov/,"Novembre").replace(/Déc/,"Décembre")
- Code:
-
<span id="logged_in_user_list">{LOGGED_IN_USER_LIST}
<script type="text/javascript">document.getElementById('logged_in_user_list').innerHTML=document.getElementById ('logged_in_user_list').innerHTML.replace(/Utilisateurs enregistrés/,"Forumactiviens en ligne en ce moment");</script>
</span>
Si on veut ici avoir le texte au dessus d'un bloc contenant tous les membres, il faut procéder autrement : - Code:
-
Forumactiviens en ligne en ce moment : <br /><span id="logged_in_user_list">{LOGGED_IN_USER_LIST}
<script type="text/javascript">document.getElementById('logged_in_user_list').innerHTML=document.getElementById ('logged_in_user_list').innerHTML.replace(/Utilisateurs enregistrés/,"");</script>
</span>
→ il faut mettre le texte avant la variable
→ supprimer la phrase affichée par la variable
(cette astuce est valable pour toutes les variables pour lesquelles on souhaiterait afficher la valeur en dessous de la phrase)
Modification des variables - les variables les plus compliquées
Et enfin, nous allons voir comment modifier les variables les plus compliquées du QEEL :
- {L_CONNECTED_MEMBERS}
- {L_WHOSBIRTHDAY_TODAY}
- {L_WHOSBIRTHDAY_WEEK}
notre but étant d'obtenir ces phrases :
Et ces derniers jours, nous avons croisé : XXX
Personne ne soufflera de bougie aujourd'hui. Et personne ne soufflera de bougie prochainement.
ou
Et ces derniers jours, nous avons croisé : XXX
Ô mais c'est l'anniversaire de forumactiviens aujourd'hui ! Voyez donc : XXX.
Et dans la semaine, ces autres personnes grandiront d'un an : XXX
Comme vous pouvez le remarquer, si vous regarder le template, ces variables ne sont pas intégrées dans une cellule, elles sont même en dehors d'une ligne. Afin de les modifier, il faut les entourer d'une table, pour la simple et bonne raison que ces variables intègrent une cellule.
- Code:
-
<table id="l_connected_members">
{L_CONNECTED_MEMBERS}
<script type="text/javascript">document.getElementById('l_connected_members').innerHTML=document.getElementById ('l_connected_members').innerHTML.replace(/Membres connectés au cours des ([0-9]+[0-9]*) dernières heures :/,"Et ces derniers jours, nous avons croisé :");</script>
</table>
→ on n'entoure pas la variable d'une balise
span pour indiquer l'identifiant, mais d'une balise
table.
→ ainsi, la balise
table doit
obligatoirement entourer tout le code pour prendre effet, elle ne fonctionne pas comme la balise
span→ maintenant que la balise
table est installée, le tout peu être incorporé dans une cellule ou directement à la suite des autres variables.
→ mettre une balise
div à la place d'une balise
table ne fonctionne pas.
→
([0-9]+[0-9]*) est une expression régulière qui permet de signifier qu'on a ici un nombre composé d'un ou deux chiffres. Cette chaîne renvoie au chiffre spécifié dans
panneau d'administration > affichage > page d'accueil : généralités > durée de la période en heure→ il ne faut pas oublier de mettre les deux points (":") sinon le code JavaScript ne fonctionne pas.
Si on voulait garder la valeur, il faudrait sectionner le code en deux, comme pour les autres codes :
- Code:
-
<table id="l_connected_members">
{L_CONNECTED_MEMBERS}
<script type="text/javascript">document.getElementById('l_connected_members').innerHTML=document.getElementById ('l_connected_members').innerHTML.replace(/Membres connectés au cours des/,"Et ces derniers jours, nous avons croisé :");</script>
<script type="text/javascript">document.getElementById('l_connected_members').innerHTML=document.getElementById ('l_connected_members').innerHTML.replace(/dernières heures :/,"forumactiviens :");</script>
</table>
- Code:
-
<table id="l_whosbirthday_today">
{L_WHOSBIRTHDAY_TODAY}
<script type="text/javascript">document.getElementById('l_whosbirthday_today').innerHTML=document.getElementById ('l_whosbirthday_today').innerHTML.replace(/Aucun membre ne fête son anniversaire aujourd'hui/,"Personne ne soufflera de bougie aujourd'hui.");</script>
</table>
→ là aussi, la variable doit être entourée d'une balise
table dans laquelle est rattaché l'identifiant
→ ce code est valable pour la phrase
Aucun membre ne fête son anniversaire aujourd'hui - Code:
-
<table id="l_whosbirthday_today">
{L_WHOSBIRTHDAY_TODAY}
<script type="text/javascript">document.getElementById('l_whosbirthday_today').innerHTML=document.getElementById ('l_whosbirthday_today').innerHTML.replace(/Membres fêtant leur anniversaire aujourd'hui :/,"Ô mais c'est l'anniversaire de forumactiviens aujourd'hui ! Voyez donc :");</script>
</table>
→ ce code est valable pour la phrase
Membres fêtant leur anniversaire aujourd'hui : - Code:
-
<table>
<span id="l_whosbirthday_week">{L_WHOSBIRTHDAY_WEEK}</span>
<script type="text/javascript">document.getElementById('l_whosbirthday_week').innerHTML=document.getElementById ('l_whosbirthday_week').innerHTML.replace(/Aucun membre ne fête son anniversaire dans les ([0-9]+[0-9]*) prochains jours/,"Et personne ne soufflera de bougie prochainement.");</script>
</table>
→ là, par contre, l'identifiant ne s'indique pas dans la balise
table mais dans une balise
span comme les autres variables, à l'exception que la balise
table est obligatoire si on veut pouvoir modifier la variable, pour les raisons évoquées antérieurement, mais aussi parce que s'il s'avère qu'il y a besoin de modifier autre chose que le texte (nous parlons maintenant d'apparence, comme la couleur de fond etc) il faudra associer une classe à cette balise
table.
→ ce code est valable pour la phrase
Aucun membre ne fête son anniversaire dans les XXX prochains jours - Code:
-
<table>
<span id="l_whosbirthday_week">{L_WHOSBIRTHDAY_WEEK}</span>
<script type="text/javascript">document.getElementById('l_whosbirthday_week').innerHTML=document.getElementById ('l_whosbirthday_week').innerHTML.replace(/Membres fêtant leur anniversaire dans les ([0-9]+[0-9]*) prochains jours:/,"Et dans la semaine, ces autres personnes grandiront d'un an :");</script>
</table>
→ ce code est valable pour la phrase
Membres fêtant leur anniversaire dans les XXX prochains jours:Bien évidemment, il faut mettre les deux codes pour que ça fonctionne, et comme pour les autres codes JavaScript, ils peuvent être fusionnés.
Une petite astuce avant de partie ?J'ai déjà proposé cette solution sur le FDF, mais je vous la donne à tous ici. Cette astuce consiste à supprimer les âges des utilisateurs fêtant leur anniversaire dans la journée ou dans la semaine.
Pour ce faire, il faut utiliser ce qu'on appelle une regex, qui permet d'utiliser une expression regulière dans un code JavaScript. Vous allez me dire "mais n'était-ce pas déjà le cas quand on avait voulu modifier une phrase contenant une valeur ?". Si mais là ce n'est pas exactement la même chose, car cette expression régulière ne fonctionne pas si on l'incorpore directement dans le code JavaScript. Il faut un code JS un peu plus poussé.
Après la balise
< script type="text/javascript"> il faut rajouter un petit code que voici :
- Code:
-
var expression = new RegExp("\\\([0-9][0-9]*[0-9]*\\\)", "g");
→ on créé une nouvelle variable nommée
expression dans laquelle on enregistre l'expression régulière
Enfin, on peut supprimer cette expression régulière en utilisant la nouvelle variable dans le code JavaScript :
- Code:
-
.replace(expression,'')
→ on remplace ce qui est contenu dans la variable
expression par rien.
Ce qui donne par exemple pour le code "Personne ne fête son anniversaire dans les
XXX prochains jours :
- Code:
-
<table>
<span id="l_whosbirthday_week">{L_WHOSBIRTHDAY_WEEK}</span>
<script type="text/javascript">
var expression = new RegExp("\\\([0-9][0-9]*[0-9]*\\\)", "g");
document.getElementById('l_whosbirthday_week').innerHTML=document.getElementById ('l_whosbirthday_week').innerHTML.replace(/Aucun membre ne fête son anniversaire dans les ([0-9]+[0-9]*) prochains jours/,"Et personne ne soufflera de bougie prochainement.").replace(/Membres fêtant leur anniversaire dans les ([0-9]+[0-9]*) prochains jours:/,"Et dans la semaine, ces autres personnes grandiront d'un an :").replace(expression,'');</script>
</table>
Ce tutoriel est assez complexe mais bien assez complet pour que la modification des phrases du
Qui est en ligne se passe correctement. Cependant, s'il existe encore des problèmes après application de ce tutoriel, il est possible de demander de l'aide dans le studio prévu à cet effet.
Ce tutoriel a été réalisé pour l'Annuaire uniquement. Aucune reproduction totale ou partielle sans notre accord préalable.