Partagez | 
 

 Liens au hasard dans le profil du posteur

Voir le sujet précédent Voir le sujet suivant Aller en bas 
avatar

Miettes

Doyenne

Bons Points (BP) : 154
MessageSujet: Liens au hasard dans le profil du posteur   Lun 16 Déc - 14:18
Bonjour à tous,

Dans ce tutoriel, nous allons apprendre à mettre un lien au hasard dans le profil du posteur d'un message. Ce lien changera à chaque message (s'il est affiché). Par exemple :
Spoiler:
 

Like a Star @ heavenPré-requis :
  • Avoir accès au template de votre forum

(oui j'avoue, c'est maigre comme "pré-requis", mais c'est tellement simple à mettre en place ^^).

Pour faire cette manip', nous allons utilisé les langages web suivant :
  • HTML, pour afficher notre lien cliquable,
  • CSS, pour faire "du beau",
  • Javascript, pour tirer un lien au hasard et en afficher un différent à chaque message.


C'est parti !

Le code


Les préparatifs


Eh bien oui, il faut commencer quelque part. On va commencer par "le simple" : définir les différents et le texte cliquable. Par exemple, moi j'ai décidé d'avoir 4 liens. Les voici :
Citation :
*** Lien 1 :
Inscris-toi vite aux Miss/Mister SoP
http://www.school-of-progress.fr/t15502-miss-mister-sop-nous-recherchons-un-nouveau-pretendant-au-titre#398220

*** Lien 2 :
Suis les Aventuriers de SoP-Lanta
http://www.school-of-progress.fr/f20-sop-lanta

*** Lien 3 :
Participe aux Olympiades
http://school-of-pub.fr/olympiades_de_sop.html

*** Lien 4 :
On recrute des analystes, intervenants et formateurs.
http://www.school-of-progress.fr/t12523-staff-les-roles-comment-en-faire-partie-les-places-disponibles
Idea Pour gagner du temps, veillez à bien séparer le texte du lien Wink

Le HTML


La partie la plus simple Smile On va juste avoir besoin d'un bloc (donc d'une div) auquel on va donner une classe.

Idea On met une class et non un id car on part du principe que le bloc revient plusieurs fois dans la page.

Code:
<div class="lienProfil"> </div>

Le CSS


Oui ^^ Faisons un peu de beau. Ici, tout dépend de ce que vous voulez. Moi je suis restée sur du simple : mes liens seront dans un bloc qui aura une couleur de fond, une bordure, une largeur et hauteur fixe.

Cependant, attention. Dans ce code, on va faire en sorte que le lien n'apparait pas sur chaque message. Parfois, il n'y aura pas de lien sur le profil.

~~ Exemple
Spoiler:
 

On va donc appliquer le style, non pas sur la div, mais sur le lien lui-même. Par défaut, les liens sont des balises de type "inline", c'est à dire qu'ils se mettent les uns à la suite des autres. Ici, on va devoir le faire passer en type "bloc". En effet, si on le laisse en ligne et que le texte tient sur plusieurs lignes, le fond et la bordure s'appliquera pour chaque ligne...
~~ Pour mieux comprendre
Spoiler:
 

Du coup, j'aurai ce style :
Code:
div.lienProfil a {
   background-color: #f5ddb6;
   border: #e9cea6 1px solid;
   display: block;
   font-size: 10px;
   margin: 10px 0;
   padding: 4px;
   width: 82px;
   text-align: center;
}

Le Javascript


Accrochez-vous Mesdames et Messieurs, c'est là que ça va se compliquer.

Tout d'abord, on va commencer par faire 2 tableaux. En Javascript, un tableau se déclare de cette façon :
Code:
var nomTableau = new Array();

Idea Quelques explications :
var = c'est une variable, une sorte de case mémoire qui va stocker les infos
nomTableau = le nom que je donne à mon tableau
new = je crée un nouvel élément
Array() = type tableau

Je crée donc 2 tableaux : l'un d'eux contiendra les textes et l'autres contiendra les liens
Code:
/* Je crée 2 tableaux */
var texte = new Array();
var lien = new Array();
Chaque lien cliquable sera donc défini par 2 variables, chacune d'elle étant stocké dans une cellule du tableau :
Code:
texte[i] = "le texte";
lien[i] = "http://lelien.fr";
Idea Ici, pas besoin de "var" pour déclarer une nouvelle "case mémoire". On va juste remplir le tableau. texte[i] signifie : la case "i" du tableau ayant pour nom "texte".
Il est aussi à noter qu'en javascript, on commence à compter à partir de 0. La première ligne des tableaux à remplir sera donc texte[0] et lien[0].

On aura donc :
Code:
/* Mes liens */
texte[0] = "Inscris-toi vite aux Miss/Mister SoP";
lien[0] = "http://www.school-of-pub.net/t15502-miss-mister-sop-nous-recherchons-un-nouveau-pretendant-au-titre#398220";

texte[1] = "Suis les Aventuriers de SoP-Lanta";
lien[1] = "http://www.school-of-pub.net/f20-sop-lanta";

texte[2] = "Participe aux Olympiades";
lien[2] = "http://school-of-pub.fr/olympiades_de_sop.html";

texte[3] = "On recrute des analystes, intervenants et formateurs.";
lien[3] = "http://www.school-of-pub.net/t12523-staff-les-roles-comment-en-faire-partie-les-places-disponibles";
Exclamation Attention, au niveau du texte, vous ne pouvez pas mettre de " à moins de le contrer avec un \. Par exemple :
Code:
texte[i] = "blabla me dit \"Hey salut toi !\"";
Si vous voulez ajouter des liens, il vous suffit de créer un nouveau duo et d'augmenter le chiffre qu'il y a entre crochets Wink

Maintenant, on lance le javascript, une fois la page chargée :
Code:
jQuery(document).ready(function(){
   /* Le code sera ici */
});
Ensuite, on va parcourir la page. A chaque fois qu'on croisera la class auteurSjt on appliquera la fonction.
Code:
jQuery(document).ready(function(){
   jQuery('.auteurSjt').each(function (){
      /* Le code sera ici */
   });   
});
Comme je vous l'avez dit un peu plus haut, je ne veux pas qu'un lien apparaissent dans chaque message. J'ai choisi qu'il apparaissent dans 50% des cas. Du coup, je vais dire à la fonction "tu vas tirer au sort un nombre compris entre 0 et 8". Pour cela, on va utiliser la fonction javascript Math.random()
Code:
jQuery(document).ready(function(){
   jQuery('.auteurSjt').each(function (){
      /* On tire un nombre au sort */
      var i = Math.floor(8*Math.random());
      
      /* Le code sera ici */
   });   
});
Idea Si on voulait afficher un lien à chaque message, on aura 4 à la place de 8. Mais ici, on veut une proba' d'un sur 2, voici pourquoi on aura parfois un nombre qui ne correspond à rien.

Idea la fonction Math.floor() permet de retourner l'entier inférieur ou égal le plus proche. En effet, le nombre aléatoire peut etre du type 3,4. Or, nous on veut juste le 3 Wink

Je n'ai que 4 liens. Du coup, si le nombre tiré au sort est supérieur à 4, je ne fais rien.
Code:
jQuery(document).ready(function(){
   jQuery('.auteurSjt').each(function (){
      /* On tire un nombre au sort */
      var i = Math.floor(8*Math.random());
      
      if (i >= 4 ){
         return;
      }
      
      /* Le code sera ici */
   });   
});
Idea Si vous avez plus de 4 liens, n'oubliez pas de modifier ce chiffre Wink

Il nous reste à faire le cas : le nombre tiré au sort possède un duo. A ce moment là, on va créer une variable "contenu" qui contiendra notre lien.
Code:
jQuery(document).ready(function(){
   jQuery('.auteurSjt').each(function (){
      /* On tire un nombre au sort */
      var i = Math.floor(8*Math.random());
      
      if (i >= 4 ){
         return;
      }else{
         /* J'ai un duo pour le nombre tiré au sort */
         var contenu = "<a href='"+lien[i]+"' target=\"_parent\">"+texte[i]+"</a>";   
      }
   });   
});
Si on essaie de comprendre un peu :
"+lien[i]+" correspond au lien de la case i. Par exemple, si i=1, il correspond à ce lien :
Code:
http://www.school-of-pub.net/f20-sop-lanta
"+texte[i]+" correspond au texte de la case i. Par exemple, si i=1, il correspond à ce texte :
Code:
Suis les Aventuriers de SoP-Lanta
On met ses informations entre guillemets afin qu'elles soient interprêtées, non pas comme du texte, mais comme un appel d'une variable javascript. Les "plus" sont obligatoires et signifient "il y a du texte avant ma variable et après ma variable".

Enfin, il reste à dire au javascript : "maintenant, tu affiches cette variable dans le bloc qui a pour class 'lienProfil' qui est dans .auteurSjt", ce qui se traduit par :
Code:
jQuery('.lienProfil',this).html(contenu);
Arrow Voici le javascript final :
Code:
var texte = new Array(); 
texte[0] = "Inscris-toi vite aux Miss/Mister SoP";
texte[1] = "Suis les Aventuriers de SoP-Lanta";
texte[2] = "Participe aux Olympiades";
texte[3] = "On recrute des analystes, intervenants et formateurs.";

var lien = new Array();
lien[0] = "http://www.school-of-pub.net/t15502-miss-mister-sop-nous-recherchons-un-nouveau-pretendant-au-titre#398220";
lien[1] = "http://www.school-of-pub.net/f20-sop-lanta";
lien[2] = "http://school-of-pub.fr/olympiades_de_sop.html";
lien[3] = "http://www.school-of-pub.net/t12523-staff-les-roles-comment-en-faire-partie-les-places-disponibles";

jQuery(document).ready(function(){
  jQuery('.auteurSjt').each(function (){
      var i = Math.floor(8*Math.random());
      if (i >= 4 ){
         return;
      }else{
         var contenu = "<a href='"+lien[i]+"' target=\"_parent\">"+texte[i]+"</a>";
         jQuery('.lienProfil',this).html(contenu);
      }
  });
});

Comment l'installer ?


Votre forum est sous ForumActif


  1. On va commencer par placer notre code html dans le profil. Pour cela, on va ouvrir le template viewtopic_body. Ici, on va l'ajouter sous les infos du membre, donc après :
    Code:
    <span class="postdetails poster-profile">
                {postrow.displayed.POSTER_RANK}<br />
                {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
                <!-- BEGIN profile_field -->
                {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                <!-- END profile_field -->
                {postrow.displayed.POSTER_RPG}
             </span><br />
    ce qui nous donne
    Code:
    <span class="postdetails poster-profile">
       {postrow.displayed.POSTER_RANK}<br />
       {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
       <!-- BEGIN profile_field -->
       {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
       <!-- END profile_field -->
       {postrow.displayed.POSTER_RPG}
    </span><br />
    <div class="lienProfil"> </div>

  2. Toujours dans ce template, on va devoir cibler les profils des posteurs. Pour cela, on va repérer le code qui les affiche. Si vous avez le template par défaut, votre code devrait ressembler à ça :
    Code:
    <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
             <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
                <span class="postdetails poster-profile">
                {postrow.displayed.POSTER_RANK}<br />
                {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
                <!-- BEGIN profile_field -->
                {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                <!-- END profile_field -->
                {postrow.displayed.POSTER_RPG}
             </span><br />
                         <div class="lienProfil"> </div>
             <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
          </td>
    Ici, on va ajouter une class "auteurSjt" au td, ce qui donne :
    Code:
    <td class="{postrow.displayed.ROW_CLASS} auteurSjt"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
    Idea N'oubliez pas de valider votre template Wink

  3. Ensuite, on va aller copier la CSS dans la feuille de style du forum (PA >> Affichage >> couleurs >> feuille de style)

  4. Pour finir, on va mettre le javascript dans une page js du forum (PA >> Modules >> Gestions des codes javascript). On lui donne un nom (par exemple "Lien dans les profils") et on coche "Placement sur les sujets"


Votre forum est sous Xooit


  1. On va commencer par placer notre code html dans le profil. Pour cela, on va ouvrir le template viewtopic_body.tpl. Ici, on va l'ajouter sous les infos du membre, donc après :
    Code:
    <span class="postdetails">{postrow.POSTER_JOINED}<br />{postrow.POSTER_POSTS}<br />{postrow.POSTER_FROM}</span>
    ce qui nous donne
    Code:
    <span class="postdetails">{postrow.POSTER_JOINED}<br />{postrow.POSTER_POSTS}<br />{postrow.POSTER_FROM}</span>
                    <div class="lienProfil"> </div>

  2. Toujours dans ce template, on va devoir cibler les profils des posteurs. Pour cela, on va repérer le code qui les affiche. Si vous avez le template par défaut, votre code devrait ressembler à ça :
    Code:
    <td width="150" align="left" valign="top" class="row3"><span class="name"><a name="{postrow.U_POST_ID}"></a><b>{postrow.POSTER_NAME}</b></span><br /><span class="postdetails">{postrow.POSTER_RANK}<br />{postrow.RANK_IMAGE}{postrow.POSTER_AVATAR}<br /><br />{postrow.POSTER_JOINED}<br />{postrow.POSTER_POSTS}<br />{postrow.POSTER_FROM}</span><br /><div class="lienProfil">&nbsp;</div></td>
    Ici, on va ajouter une class "auteurSjt" au td, ce qui donne :
    Code:
    <td width="150" align="left" valign="top" class="row3 auteurSjt">

  3. Ensuite, on va mettre le javascript tout à la fin de ce même template en l'entourant de ce code
    Code:
    <script language="Javascript" type="text/javascript">
    <!--
    ...
    //-->
    </script>
    ce qui nous donne
    Code:
    <script language="Javascript" type="text/javascript">
    <!--
    var texte = new Array(); 
    texte[0] = "Inscris-toi vite aux Miss/Mister SoP";
    texte[1] = "Suis les Aventuriers de SoP-Lanta";
    texte[2] = "Participe aux Olympiades";
    texte[3] = "On recrute des analystes, intervenants et formateurs.";

    var lien = new Array();
    lien[0] = "http://www.school-of-pub.net/t15502-miss-mister-sop-nous-recherchons-un-nouveau-pretendant-au-titre#398220";
    lien[1] = "http://www.school-of-pub.net/f20-sop-lanta";
    lien[2] = "http://school-of-pub.fr/olympiades_de_sop.html";
    lien[3] = "http://www.school-of-pub.net/t12523-staff-les-roles-comment-en-faire-partie-les-places-disponibles";

    jQuery(document).ready(function(){
      jQuery('.auteurSjt').each(function (){
          var i = Math.floor(8*Math.random());
          if (i >= 4 ){
             return;
          }else{
             var contenu = "<a href='"+lien[i]+"' target=\"_parent\">"+texte[i]+"</a>";
          jQuery('.lienProfil',this).html(contenu);
          }
      });
    });
    //-->
    </script>
    Idea Il faut que la bibliothèque jQuery soit appelé sur votre forum.

  4. Pour finir, on va aller copier la CSS dans le template overall_header juste avant
    Code:
    -->
    </style>






Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].



Je soussignée, Miettes, accepte qu'un directeur reposte le tutoriel "Lien au hasard dans le profil du posteur" tel que je l'ai rédigé.
 

Liens au hasard dans le profil du posteur

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Avatar décalé à l'affichage du profil [résolu]
» mise en page des posts
» Avatar centré dans le profil
» [résolu]Placer la tête de lecture au hasard dans un clip
» Feuille de RPG complète dans le profil des messages

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage-
Sauter vers:  
Espace Admin du site

©2008-2016 - School Of Progress - Toute reproduction totale ou partielle est interdite.
Design réalisé par Mewyn - Forum hébergé par forumactif.com

Les logos des SoPiens

Nos correspondants