Note (septembre 2016) : bien que le principe d'une infobox reste le même, pour sa réalisation préférer les infoboxes portables.

Avant propos : J'ai décidé de faire un billet de blog pour cela car je comprends trop mal l'organisation du wiki des communautés pour me permettre de créer une page d'aide.

J'ai cependant organisé le texte pour qu'il puisse être, en tant que tel, considéré comme une page d'aide. J'ai voulu ce guide le plus complet possible, si vous remarquez que j'oublie des choses, faites le moi savoir dans les commentaires.

Ce guide sert principalement aux débutants, mais peu apprendre des choses même aux vétérans.

N'étant pas informé avec les billets de blogs des commentaires, si vous souhaitez faire une remarque, envoyez moi un message. Si vous êtes confrontés à des problèmes, allez sur le Forum où vous serez vraisemblablement plus vite renseignés que si vous me contactez.

L'important, dans ce tuto, est que vous découvriez comment faire une infobox soit-même. Il ne sert à rien de recopier bêtement mes codes et de les bidouiller, ceci vous permet de comprendre comment ça fonctionne, et ensuite, de les créer vous même.

Fin de l'avant-propos.


Qu'est-ce qu'une infobox ?

Une infobox utilisée sur le wiki One Piece.

Une infobox est, comme son nom l'indique, une boîte d'information - une fiche si vous préférez - qui permet de synthétiser des informations sur le sujet de la page. Il s'agit d'un modèle entièrement configurable, et customisable à souhait, il n'y a (presque) aucune limite à la créativité !

Elle est très utile pour identifier le personnage, et regroupe généralement les informations principales sur le personnage : Son nom, son âge, son appartenance, etc.

Comment intégrer une infobox à une page ?

Si vous savez déjà comment utiliser une infobox sur une page, passez à la sous partie suivante, "Créer une infobox"

Première chose à savoir : Les infobox sont à la base des modèles. Ce sont des petits "modules" qui ont étés configurés (voir en dessous pour plus d'infos).

Deuxième chose à savoir : Il est important de vous familiariser avec le mode source : Tout le tutoriel repose sur ce mode, qui affiche les codes. Ne soyez pas effrayés, c'est beaucoup plus simple que ça en a l'air.

Pour voulez utiliser une infobox, il vous faut utiliser le modèle de l'infobox. Ce modèle commence toujours par {{ (Dans le code source évidemment) et se termine par }} . Chaque élément à intégrer dans une infobox, par exemple l'âge d'un personnage, est séparé par un |.

Exemple : Je veux utiliser l'infobox personnages présent sur un wiki. Je vérifie en regardant une page Personnage contenant l'infobox, puis je vais dans le code source. Je vois par exemple le modèle

{{Infobox Personnage

| Nom = Agecanonix

| Age = 93 ans

}}

En rouge : Ce qui marque le début et la fin du modèle.

En bleu : Ce qui permet de séparer les options

En orange : Le nom du modèle, par extension, le nom de l'infobox

En violet : Les différentes options que vous pouvez intégrer. Attention : Ces options sont définies dans l'infobox, si vous tapez par exemple Force, mais que ça n'a pas été défini dans le modèle, il n'apparaitra pas sur l'infobox. Ne pas oublier les "=", ceux-ci indiquent au modèle la "réponse" que vous donnez à l'option en question.

ici, c'est une infobox qui possède apparemment deux options. Il est utile de noter que certaines infobox contiennent des éléments cachés, où l'on peut ajouter d'autres informations.

Bref, ici, nous avons la base du modèle. Entraînez vous à comprendre les infobox, pratiquez ! C'est comme cela qu'il est le plus facile d'apprendre !

Pour vous entraîner sur le wiki sur lequel vous souhaitez utiliser des infobox, allez sur votre page utilisateur (Dans l'url : wiki/Utilisateur:Votrepseudo) et tapez wiki/Utilisateur:Votrepseudo/Bacasable pour vous entraîner sur une page sans gêner le wiki.

Étape 1 : Créer une infobox

Bon nombre d'infobox sur les wikis français sont des copies de celles des wikis anglais. Ce n'est pas mauvais en soit, mais savoir créer une infobox unique pour son wiki, sans avoir à bidouiller ou modifier l'infobox du voisin, c'est un réel avantage !

Cette partie (très longue, attention, accrochez-vous !) vous apprendra à créer votre infobox. Après avoir lu cette partie (que j'espère suffisamment claire et accessible à tous), il n'y aura comme limite que votre imagination !

Une infobox, à la base, qu'est-ce que c'est ?

Ce n'est rien d'autre qu'un tableau !

Voici une infobox de base. En partant de cela, vous pouvez arriver à tout !

Pour commencer, disons que je souhaite faire la description... d'une chaussure, amusons nous un peu !!

Je fais donc créer une page modèle qui soit logique pour tous ceux qui voudront l'utiliser. Je vais donc l'appeler Chaussure Box, et elle va me servir sur le wiki bac à sable (Qui est libre d'accès, vous pouvez vous entrainer dessus, faire toutes les bêtises que vous voulez, personne ne vous grondera ^^). Je vais donc dans l'URL, et je tapes /wiki/Modèle:Chaussure_Box

http://fr.bacasable.wikia.com/wiki/Mod%C3%A8le:Chaussure_Box

{|
!colspan="2"|Nom de la chaussure
|-
!Nom
|Ma Chaussure
|-
!Pointure
|45
|-
!Couleur
|Rouge, jaune verte et blanche
|-
!Couleur des Lacets
|Rouge
|-
!Semelles
|Peau d'Alien mutant
|}

{| et |} marquent le début et la fin du code de votre infobox. Il faut qu'ils soient présents, sinon votre modèle ne fonctionnera pas.

!colspan="2"|Nom de la Chaussure : Vous avez défini le nombre de colones (correspondant à !colspan="2"), et le grand titre de la page, qui apparaitra en haut de votre infobox. Vous pouvez ne pas en mettre, dans ce cas, supprimez "|Nom de la Chaussure"

|- désigne un passage une ligne en dessous.

! désigne la partie de gauche et | La réponse, donc la partie à droite (En réalité c'est plus compliqué que ça, mais je ne vais pas vous faire un tuto sur les tableaux, donc si vous êtes habitués avec, tant mieux, dans ce cas vous comprenez ce que je veux dire, sinon, eh bien, vous n'avez pas besoin d'en savoir plus pour votre infobox, généralement, sauf cas très rare (voir tout en bas de cette page), les infobox ne contiennent que deux colonnes.


http://fr.bacasable.wikia.com/wiki/Ma_chaussure Voici le modèle, ou le tableau, comme vous voulez apparait sur une page. Il n'y a pas encore d'options définies, raison pour laquelle j'ai juste mis {{Chaussure_Box}} sur la page.

Note : C'est pas beau esthétiquement, mais on s'en fiche pour l'instant. Ce qui compte, c'est que vous compreniez comment ça fonctionne.

A ce stade là, vous avez juste créé un modèle, mais c'est un bon début ! Vous avez défini les options principales, en réalité, vous avez juste créé un tableau, mais une infobox, c'est un tableau, et vous avez créé un modèle, ce qui veut dire que votre modèle est utilisable à souhait sur !

Maintenant que vous savez ce que vous voulez mettre dans votre infobox box, on va passer un design de votre infobox.

Étape 2 : Le design de base de l'infobox

Il s'agit de l'aspect le plus méticuleux : C'est ce qui fera que votre infobox sera jolie, ou cas contraire, complètement... Ratée :'(

Le design d'une infobox est modifiable sans modifier les pages sur lesquelles elle est utilisée. C'est la réelle force de l'infobox. En effet, si vous n'utilisez pas d'infobox, et qu'à la place, vous utilisez un code non automatique ou un tableau directement sur la page, si l'infobox doit changer, c'est toutes les pages qu'il faut changer. Ici, vous avez juste à modifier la page modèle.

Pour le design/style de l'infobox, c'est les premiers paramètres : Vous les insérez juste à la suite du {|

Base du design : essentiel

La plupart des infoboxes sont alignés sur le côté droit de la page avec des marges suffisantes que pour ne pas interférer avec le texte entré, qui apparait sur le côté gauche. Pour répondre à cela, nous nous assurons de laisser "flotter" le modèle vers la droite et ajouter au modèle des marges à gauche et en bas pour laisser de l'espace entre lui et votre texte. Sans ces paramètres, votre modèle ne sera pas esthétique. On va également ajouter des traits de démarcation afin de bien distinguer les colonnes. On pourra aussi ajouter un fond de couleur au titre, faire un remplissage, et tout ce qui est important pour une infobox.

Voici donc le code que je vais choisir pour cette infobox :

{| style="float: right; margin: 0 0 0.5em 1em; border: 1px solid silver;background: white; padding: 2px 5px" 

Et je vais l'insérer dans mon infobox :

{| style="float: right; margin: 0 0 0.5em 1em; border: 2px solid black;background: #F1F9CC; padding: 2px 5px" 
!colspan="2"|Nom de la Chaussure
|-
!Nom
|Ma Chaussure
|-
!Pointure
|45
|-
!Couleur
|Rouge, jaune verte et blanche
|-
!Couleur des Lacets
|Rouge
|-
!Semelles
|Peau d'Alien mutant
|}

Voici ce que ça donne cette fois :

http://fr.bacasable.wikia.com/wiki/La_chaussure

On avance !

Pour les codes à insérer pour l'esthétisme :

Pour définir le style de votre modèle, vous commencez par

style="Insérericitouslesparamètres"

Ne mettez Style="" une seule fois, et tous les paramètres liés au style doivent y apparaitre.

Les points virgules permettent de passer d'un paramètre à un autre.

float: right

=> L'élément est flottant, et ira au plus à droite possible. Vous pouvez mettre float: center ou float: left (Quoique assez inutile dans le dernier cas), mais une infobox, c'est à droite, donc vous trouverez FORCÉMENT ce code au début de votre style infobox.

margin: 0 0 0.5em 1em

=> C'est la marge. Petit site pour comprendre l'unité em : ici, mais cette margin là convient pour à peu près toutes les infobox, c'est même la valeur de référence. Visiter ce site pour appronfondir

border: 2px solid black

Correspond à la bordure de l'infobox, ici, elle est noire et fait 2pixel d'épaisseur. Vous pouvez changer la couleur en mettant le nom anglais d'une couleur, ou en utilisant un code couleur de type HTML :

border: 2px #ED6DED

Vous donnera une bordure rose. Pour trouver la couleur de vos rêves, vous pouvez aller sur ce site.

padding: 2px 5px

Tout comme Margin, permet de définir une marge. Visiter ce site pour appronfondir, et comprendre la différence entre le Margin et le Padding, bien que ce ne soit pas essentiel ici.

Codes supplémentaires que je n'ai pas mis, mais qui peuvent aider

Il existe un grand nombre de codes supplémentaires, le temps défile, et je n'ai pas le temps de tout vous mettre, cette partie, je la complèterait après.

Étape 3 : Mettre des paramètres dans l'infobox

Les paramètres sont des variables définies par des mots clés. Ils sont définis dans le code de l'infobox. En gros, les paramètres permettent d'utiliser l'infobox sur n'importe quel page tout en changeant le contenu, et sans recréer un tableau.

Nous allons reprendre l'Infobox Chaussure, et l'améliorer, de façon à avoir des éléments configurables, et transformer le modèle en une réelle infobox.

Ces éléments dits dynamiques seront définis par trois crochets, par exemple

{{{Nom}}}, {{{Pointure}}} {{{Couleur}}} etc.

. Cela servira à remplir les données, il faut donc transformer les données qu'on a entré pour définir "Ma chaussure" par des paramètres.

Si l'on ajoute ces paramètres pour l'infobox chaussures, on arrive à ce résultat :

{| style="float: right; margin: 0 0 0.5em 1em; border: 2px solid black;background: #F1F9CC; padding: 2px 5px" 
!colspan="2"|{{{Nom}}}
|-
!Nom
|{{{Nom}}}
|-
!Pointure
|{{{Pointure}}}
|-
!Couleur
|{{{Couleur}}}
|-
!Couleur des Lacets
|{{{Couleur Lacets}}}
|-
!Semelles
|{{{Semelles}}}
|}

Et voici le code de l'infobox tel qu'il apparait sur la page modèle : http://fr.bacasable.wikia.com/wiki/Mod%C3%A8le:Chaussure_Box3

Note : {{{Nom}}} apparait deux fois : C'est volontaire, celui après Colspan sera le titre alors que l'autre sera une information... En gros le nom apparait deux fois.

Voici un exemple d'utilisation :

{{Chaussure_Box3
|Nom            = Botte Volcanique
|Pointure       = 46
|Couleur        = Rouge
|Couleur des Lacets = 
|Semelles       = Caoutchouc
}}

http://fr.bacasable.wikia.com/wiki/Chaussure_de_John

Parfait ! Je peux mettre ce modèle partout pour toutes les chaussures, génial ! Arf, mais non, il y a un problème, là, comment je fais, j'ai mis la couleur des lacets dans l'infobox alors que les bottes n'en ont pas

Pas de problème !

Passons à la suite, qui résoudra ce problème :

Paramètres optionnels de l'infobox

Comme on l'a vu précédemment, il arrive que certaines informations soient manquantes ou impossible. Par exemple, plus concrètement, si on a la date d'anniversaire de personnages, mais pas d'autres... Comment fait-on ?

On ajoute un paramètre optionnel ! Pour la couleur des lacets par exemple, dans le code, on met :

|-
{{#if: {{{Couleur Lacets|}}}
  | !Couleur des lacets {{!}} {{{Couleur Lacets}}}
}}
|-

(Si le paramètre Couleur Lacets est dans l'infobox, alors on affiche Couleur des Lacets avec la couleur définie)

Ainsi, si on ne met pas |Couleur Lacets dans l'infobox, ce paramètre ne s'affichera pas.

Exemple :

{| style="float: right; margin: 0 0 0.5em 1em; border: 2px solid black;background: #F1F9CC; padding: 2px 5px" 
!colspan="2"|{{{Nom}}}
|-
!Nom
|{{{Nom}}}
|-
!Pointure
|{{{Pointure}}}
|-
!Couleur
|{{{Couleur}}}
|-
{{#if: {{{Couleur Lacets|}}}
  | !Couleur des lacets {{!}} {{{Couleur Lacets}}}
}}
|-
!Semelles
|{{{Semelles}}}
|}

Note :

Il est également possible de mettre :

|- {{#if: {{{Couleur Lacets|}}} | | style="display: none" }}
! Couleur des Lacets
| {{{Couleur Lacets|Pas de lacets}}}
|-

Ainsi, cela affichera toujours "Couleur du Lacet" mais si vous ne le mettez pas dans l'infobox, il mettra automatiquement comme information Couleur des Lacets : Pas de lacets.

Ajouter une image à l'infobox

Pour ajouter une image, c'est un paramètre comme un autre.

Je recommande d'avoir une image importée sur le wiki, comme celle-ci : Photo-non-disponible.jpg

Une fois que vous avez ça, eh bien vous pouvez mettre cet élément en premier :

|-
| colspan="2" style="padding:0em 0; text-align:center;" | {{#ifeq:{{{image|}}}||[[File:Photo-non-disponible.jpg|200px]]|{{{image}}} }}
|-

Ce qui donne :

{| style="float: right; margin: 0 0 0.5em 1em; border: 2px solid black;background: #F1F9CC; padding: 2px 5px" 
!colspan="2"|{{{Nom}}}
|-
| colspan="2" style="padding:0em 0; text-align:center;" | {{#ifeq:{{{Image|}}}||[[File:Photo-non-disponible.jpg|200px]]|{{{Image}}} }}
|-
!Nom
|{{{Nom}}}
|-
!Pointure
|{{{Pointure}}}
|-
!Couleur
|{{{Couleur}}}
|-
{{#if: {{{Couleur Lacets|}}}
  | !Couleur des lacets {{!}} {{{Couleur Lacets}}}
}}
|-
!Semelles
|{{{Semelles}}}
|}

Exemple d'utilisation : http://fr.bacasable.wikia.com/wiki/Chaussure_de_John_Trololo

Assemblons ce que nous avons appris pour faire un modèle avec des couleurs

Maintenant que nous avons l'idée générale de ce que nous voulons avoir dans l'infobox et qu'on a des idées précises des paramètres à utiliser, nous pouvons finaliser l'infobox. Tout ce qui est design touche au css.

Ce genre de modèle est suffisamment intéressant pour pouvoir être utilisé à grande échelle sur un wiki.

Attention aux crochets ! Un crochet oublié, et c'est la pagaille, le modèle ne fonctionnera pas !

{| style="float: right; margin: 0 0 0.5em 1em; border: 1px solid silver; background: white; padding: 2px 5px"
!colspan="2" style="padding: 3px; background-color: green; border: 1px solid black"|{{{Nom|{{PAGENAME}} }}}
|-
| colspan="2" style="padding:0em 0; text-align:center;" | {{#ifeq:{{{Image|}}}||[[File:Photo-non-disponible.jpg|200px]]|{{{Image}}} }}
|-
!style="padding: 3px; background-color: lightgreen; border: 1px solid black"|Nom
|{{{Nom|{{PAGENAME}} }}}
|-
{{#if: {{{Pointure|}}}
 |!style="padding: 3px; background-color: lightgreen; border: 1px solid black" {{!}} Pointure
 {{!}} {{{Pointure}}}
}}
|-
{{#if: {{{Couleur|}}}
 |!style="padding: 3px; background-color: lightgreen; border: 1px solid black" {{!}} Couleur
 {{!}} {{{Couleur}}}
}}
|-
{{#if: {{{Couleur Lacets|}}}
 |!style="padding: 3px; background-color: lightgreen; border: 1px solid black" {{!}} Couleur des lacets
 {{!}} {{{Couleur Lacets}}}
}}
|-
{{#if: {{{Semelle|}}}
 |!style="padding: 3px; background-color: lightgreen; border: 1px solid black" {{!}} Semelle
 {{!}} {{{Semelle}}}
}}
|}

Rendre le code moins lourd grâce au Common.js

En cours de rédaction

Auto-Catégorisation

La bonne chose sur l'utilisation des infoboxes dans des articles est que l'infobox peut ajouter des informations automatiquement sur chaque article. Ces données peuvent être utilisées pour classer automatiquement les pages de votre wiki. Par exemple, dans mon dernier exemple, vous pouvez voir que j'ai utilisé pour mon mal alignement. Avec une fonction de commutation, vous pouvez classer la page en fonction de cette valeur.

Par exemple, pour catégoriser automatiquement la pointure de la chaussure, on peut utiliser, en fin de modèle :

{{#switch: {{{Couleur|}}}
  |Rouge    = [[Categorie:Chaussure de couleur rouge feuuuu !!]]
  |Orange   = [[Categorie:Chaussure de couleur orange comme le fruit]]
  |Violet   = [[Categorie:Chaussure de couleur violette]]
  |#default = [[Categorie:Chaussure de couleur inconnue]]
}}

Note : #default agit en cas d'absence de contenu

ou encore :

{{#if: {{{Pointure|}}}
  |[[Category:Chaussure de Pointure {{{Pointure}}}]]
}}

Annexe

Il est intéressant de connaitres les "Mots magiques" de wikia. Je tenais à les mettre même si il y a peu de chances qu'ils vous soient utiles pour ce tuto, mais-sait-on jamais. Petit rappel :

__NOTOC__ Retire le sommaire de la page
__TOC__ Place le sommaire à un endroit précis de la page : L'endroit où ce "mot magique" est mis sur la page
__NOWYSIWYG__, Desactive le mode d'édition riche sur la page
{{CURRENTDAYNAME}} Donne le jour que l'on est
{{NUMBEROFARTICLES}} Montre le nombre d'articles sur le wiki
{{SITENAME}} Montre le nom du wiki
{{PAGENAME}} Montre le nom de la page
{{FULLPAGENAME}} Montre le nom entier de la page

Enfin, derniers propos de ce tuto, une fois que vous avez assimilé tous les points importants de la création des infobox, il vous faudra des bases en css pour faire des infoboxs superbes.

J'espère que ce tuto trouvera une utilité, sinon c'est pas grave ^^

Sauf mention contraire, le contenu de la communauté est disponible sous licence CC-BY-SA.