Header
Partagez | 

[Xooit] Widget "derniers sujets" sur le forum

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur

Message Sujet: [Xooit] Widget "derniers sujets" sur le forum   Sam 3 Jan - 9:16

Bonjour à tous Smile

Dans ce tutoriel, nous allons voir comment récupérer rapidement le widget du portail qui affiche la liste des derniers messages pour pouvoir le réutiliser ailleurs sur le forum Smile

Idea Pré-requis :
  • Avoir accès à la création de portail,
  • Avoir accès aux templates du forum,
  • Connaitre au minimum le panneau d'admin.





On prépare le widget



Pour commencer, on va utiliser le portail pour pouvoir récupérer le widget "nouveau topic". Pour cela, on va aller dans :
PA >> Portail >> Gérer les pages
Et on va créer une page que l'on va appeler "topics récents".

Pour les dimensions, on va utiliser la largeur du forum au milieu, on va donc mettre 100% (ne pas oublier de cocher "non" pour "utiliser les dimensions générales")
Spoiler:
 

Ensuite, on va cliquer sur "gérer" pour ajouter des widgets dans notre page.
Spoiler:
 

Et on va choisir le module "recent topic" qu'on va placer au milieu. Et on clique sur "ajouter le module"

Ensuite, on va retourner dans "gérer les pages" et on va récupérer le numéro du portail
Spoiler:
 
Idea Pour moi, ce sera le 3 Smile

On modifie les templates



Passons maintenant, aux templates ^^ Pour cela, on va aller dans :
PA >> Thème >> Modifier les templates

Petite modif sur le code du widgets


Pour commencer, on va modifier celui qui concerne le widgets "sujets récents". On va donc ouvrir le template qui s'appelle "MODPORTAL/MOD_RECENT_TOPICS.TPL" et on va ajouter une ancre à notre widget pour que l'on puisse récupérer l'info qui nous intéresse Smile Pour cela, on va ajouter
Code:
id="last-topics"
à notre tableau
Code:
<table width="100%" cellpadding="2" cellspacing="1" border="0" class="forumline">

Le début de notre widgets ressemble donc à ça :
Code:
<!-- BEGIN scrolling_row -->
        <table width="100%" cellpadding="2" cellspacing="1" border="0" class="forumline" id="last-topics">
        <tr>
         <{PORTAL_CLASS_BALISE} class="{PORTAL_CLASS_TITLE}" height="25"><span class="genmed"><b>{L_RECENT_TOPICS}</b></span></{PORTAL_CLASS_BALISE}>
        </tr>
        <tr>
         <td class="row1" align="left"><span class="gensmall">
         <marquee id="recent_topics" behavior="scroll" direction="{SCROLL_WAY}" height="{SCROLL_HEIGHT}" scrolldelay="{SCROLL_DELAY}" scrollamount="{SCROLL_STEP}" onmouseover="this.stop();" onmouseout="this.start();">
         <!-- BEGIN recent_topic_row -->
         » <a href="{scrolling_row.recent_topic_row.U_TITLE}">{scrolling_row.recent_topic_row.L_TITLE}</a><br />
         {BY} <a href="{scrolling_row.recent_topic_row.U_POSTER}">{scrolling_row.recent_topic_row.S_POSTER}</a> {ON} {scrolling_row.recent_topic_row.S_POSTTIME}<br /><br />
         <!-- END recent_topic_row -->

La mise en place du widgets


Deuxième étape : l'appel de ce widget. Ici, on ne va pas utiliser d'iframe, mais de l'ajax. Pour faire simple : on va, grâce à du javascript, récupérer le contenu d'une div spécifique d'une page de notre serveur. Pourquoi c'est mieux que l'iframe ? Parce que le code sera injecté directement, comme s'il faisait réellement partie de la page (contrairement à l'iframe qui appelle une page dans ta page).

La bibliothèque JS


Tout d'abord, il faut vérifier que nous avons bien la bibliothèque jQuery appelé sur la page. Pour cela, on va aller ouvrir le template "overall_header" et regarder si on a une ligne qui appelle un fichier de ce type :
Code:
jquery-2.1.0.min.js
Si oui, on va le supprimer et appeler la dernière version de la bibliothèque JS. Pour la récupérer : [clic]. Ici :
Code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Idea Si cette ligne n'existe pas, il faut l'ajouter après :
Code:
<title>{SITENAME} :: {PAGE_TITLE}</title>

Mise en place du script


Maintenant, on va ajouter le script qui va nous permettre d'appeler notre bloc. Celui-ci ressemble à ça :
Code:
<script language="JavaScript" type="text/javascript">
<!--
jQuery(document).ready(function(){
   jQuery('#dernier-msg').load('NOMDUSITE/portal.php?pid=NUMPORTAIL #last-topics');
});
//-->
</script>

Exemple :
Code:
<script language="JavaScript" type="text/javascript">
<!--
jQuery(document).ready(function(){
   jQuery('#dernier-msg').load('http://miettes.xooit.fr/portal.php?pid=3 #last-topics');
});
//-->
</script>

Si on essaie de comprendre un peu :
Code:
jQuery(document).ready(function(){
Une fois la page chargée
Code:
jQuery('#dernier-msg')
L'élement qui a pour id "dernier-msg"
Code:
load('http://miettes.xooit.fr/portal.php?pid=3 #last-topics');
va recevoir le contenu de la page indiquée et plus spécialement, le contenu de l'élement ayant pour id "last-topics"

Idea On n'oublie pas de remplacer
- NOMDUSITE par l'adresse du forum
- NUMPORTAIL par le numéro du portail récupérer dans la partie 1 Smile
- il y a bien un espace entre NUMPORTAIL et #last-topics


Et on va placer ce code juste avant
Code:
</head>
(toujours dans le même template ^^ )

L'appel du widget


L'étape la plus simple : l'appel de notre widget. Ici, petit code tout simple :
Code:
<div id="dernier-msg"></div>

Eh oui ! C'est ce petit bout de code qui va faire le taff ^^

*** Pour l'afficher sur toutes les pages, en haut du forum : On va mettre ce code dans le template "overall_header" à l'endroit voulu

*** Pour l'afficher sur toutes les pages, en bas du forum : On va mettre ce code dans le template "overall_footer" à l'endroit voulu

*** Pour l'afficher uniquement sur l'index : On va mettre ce code dans le template "index_body" à l'endroit voulu

*** Pour l'afficher dans un forum ou une liste de sujet : On va mettre ce code dans le template "viewforum_body" à l'endroit voulu

*** Pour l'afficher dans un sujet : On va mettre ce code dans le template "viewtopic_body" à l'endroit voulu

Et c'est terminé Smile




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 "[Xooit] Widget "derniers sujets" sur le forum" tel que je l'ai rédigé.
Revenir en haut Aller en bas
[Xooit] Widget "derniers sujets" sur le forum
Page 1 sur 1
 Sujets similaires
-
» Désolé, mais seuls les utilisateurs avec un accès spécial peuvent lire des sujets dans ce forum
» [Code - PHPBB2 Xooit] Modifier la largeur de votre forum
» Comment insérer une image dans les messages du forum ?
» [Phanta] Commande d'un tableau d'accueil pour mettre dans un widget du portail
» [Annulée] Demande une page HTML
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+