De nombreux sites utilisent le logiciel MediaWiki, y compris wikiHow! Comme vous pouvez le constater, même si MediaWiki est livré avec un ensemble de skins prêts à l'emploi, de nombreux sites, tels que wikiHow, choisissent d'avoir leur propre skin pour donner au site une apparence unique. La personnalisation de l'apparence d'un site basé sur MediaWiki peut être réalisée de plusieurs manières, toutes impliquant des skins. Généralement, créer un nouveau skin à partir de zéro n'est pas nécessaire pour de nombreux niveaux de personnalisation. Dans d'autres situations, créer un habillage basé sur l'un des modèles déjà implémentés, tels que MonoBook, puis le modifier selon vos besoins sera largement suffisant. Cependant, si vous voulez vraiment changer radicalement la présentation du wiki, vous devrez peut-être créer votre propre skin à partir de zéro. Cet article vous guidera de manière systématique, organisée et facile!^[1]

Aux fins de démonstration, l'article supposera que votre nouvelle peau sera appelée TrialSkin. Vous devez remplacer toutes les références à "TrialSkin" par le nom de votre peau.

Pas

1. 1 Créez la structure de fichier de base pour votre nouveau skin. Cela inclut la création des fichiers et dossiers suivants (tous doivent être ajoutés à la peaux dossier de votre installation MediaWiki):
   • UNE TrialSkin.php fichier - C'est ici que vous allez mettre la plupart du code et définir la disposition des pages.
   • UNE TrialSkin.deps.php file - Ceci est un fichier standard qui contiendra probablement le même code. Il est créé pour corriger un bug avec PHP.
   • le trial répertoire - Tous les autres fichiers liés à votre skin doivent figurer dans ce répertoire, y compris les feuilles de style et les images.
   • UNE /skins/trialskin/main.css fichier qui contiendra la feuille de style principale pour le skin - [Facultatif, mais le plus susceptible d'être nécessaire]
   • La feuille de style spécifique au navigateur corrige des fichiers, tels que /skins/trialskin/IE60Fixes.css - [Facultatif, mais préféré]
2. 2 Ajoutez le code d'initialisation comme indiqué ci-dessous dans la sous-section "Code d'initialisation" de cet article. Remplacer TrialSkin avec le nom de votre peau et trial avec le nom de votre peau après avoir transformé toutes les lettres en minuscules.
3. 3Ajoutez le code "Category List Fix" comme indiqué dans la sous-section correspondante ci-dessous.
4. 4Définir la exécuter() fonction, qui sera appelée pour sortir le contenu des pages dans les navigateurs clients.
5. 5 Déclarez la variable globale $ wgUser dans le exécuter() fonction et utiliser son getSkin () méthode pour obtenir un $ peau variable / objet. Vous aurez probablement besoin de cette variable. Cependant, si vous n'en avez pas besoin, il est inutile de suivre cette étape. Vous trouverez un exemple standard de déclaration du exécuter() Fonctionne avec le code le plus couramment utilisé dans la sous-section "Déclaration de la fonction execute ()".
6. 6 Commencez à ajouter du code (à la fois PHP et XHTML) pour rendre les pages de votre wiki. Très probablement, bien que vous ayez besoin de modifier radicalement la disposition, vous devrez rendre le même ensemble d'informations que les habillages normaux (avec quelques modifications, peut-être). Les éléments / composants / blocs les plus fréquemment ajoutés à une page sont (voir les sous-sections correspondantes pour plus de détails et / ou des exemples de codes):
   • Le code XHTML qui ouvre (et finit par fermer) la sortie HTML qui sera envoyée au navigateur du client.
   • L'élément head, qui importe les feuilles de style, les scripts, définit les métadonnées de la page et spécifie le titre à afficher dans la barre de titre du navigateur pour la page en cours de visualisation.
   • L'étiquette d'ouverture du corps. Cette balise ouvre l'élément body de la page et spécifie ce qui se passe lorsque la page est chargée ou cliquée deux fois si de tels gestionnaires existent.
   • Le bloc de nom du site.
   • L'image du logo du site.
   • Le tag-line du site
   • Bloc d'avis de site.
   • Bloc de notification de message utilisateur (si nécessaire)
   • La barre d'outils de l'utilisateur.
   • Bloc de navigation Intrapage.
   • Chercher.
   • Boîte à outils.
   • Liens linguistiques
   • Nom de la page.
   • Sous-titre de la page.
   • Undelete avis.
   • Contenu de la page
   • Liens de catégorie.
   • Barre d'outils de la page.
   • Bas de page.
   • Sentier de fermeture

Méthode un de huit:
Code d'initialisation

• Remplacer SkinTrialSkin avec la peauYourSkinName, trial avec votre nom et TrialSkinTemplate avec YourSkinNameModèle.

 <? php // code d'initialisation si( !défini('MEDIAWIKI') ) mourir("Ce fichier Skin n'est pas un point d'entrée valide."); Demandez une fois('includes / SkinTemplate.php'); // hérite du code principal de SkinTemplate, définit le filtre CSS et le modèle classe SkinTrialSkin étend SkinTemplate  fonction initPage(&$ out)  SkinTemplate::initPage($ out); $ ceci->skinname = 'trialkin'; $ ceci->nom du style = 'trialkin'; $ ceci->modèle = 'TrialSkinTemplate';   classe TrialSkinTemplate étend QuickTemplate  // D'autres sections de code seront ajoutées à ce corps de classe 

Méthode deux de huit:
Code de la liste de catégories

• Il suffit de copier et coller le code suivant dans le corps de la classe de modèle (TrialSkinTemplate dans cet exemple), de préférence après le code d'initialisation)

 / * pirater les fonctions de catégorie pour créer une liste appropriée * / fonction getCategories()  $ catlinks=$ ceci->getCategoryLinks(); si(!vide($ catlinks))  revenir "
$ catlinks
";   fonction getCategoryLinks()  global $ wgOut, $ wgUser, $ wgTitle, $ wgUseCategoryBrowser; global $ wgContLang; si(compter($ wgOut->mCategoryLinks) == 0) revenir "; $ peau = $ wgUser->getSkin(); # séparateur  $ sep = ""; // utilise des caractères de substitution d'intégration de code binaire Unicode, // s'assure que les liens ne se brisent pas de façon désagréable $ dir = $ wgContLang->isRTL() ? 'rtl' : 'ltr'; $ incorporer = "
"; $ pop = ''; $ t = $ incorporer . imploser ( "$ pop $ sep $ embed" , $ wgOut->mCategoryLinks ) . $ pop; $ msg = wfMsgExt('pagecatégories', tableau('Parsemag', 'échapper'), compter($ wgOut->mCategoryLinks)); $ s = $ peau->makeLinkObj(Titre::newFromText(wfMsgForContent('pagecategorieslink')), $ msg) . $ t; # navigateur de catégorie optionnel 'dmoz-like' - sera affiché sous la liste  Nombre de catégories auxquelles appartient un article  si($ wgUseCategoryBrowser)  $ s .= '
'; # obtenir un grand tableau de l'arbre des parents  $ parenttree = $ wgTitle->getParentCategoryTree(); # Objet de peau passé par référence car il ne peut pas être  # accédé sous la sous-fonction method drawCategoryBrowser  $ tempout = exploser("\ n", Peau::drawCategoryBrowser($ parenttree, $ ceci)); # nettoie les fausses entrées et les trie  non défini($ tempout[0]); un tri($ tempout); # sortie un par ligne  $ s .= imploser("
\ n", $ tempout);  revenir $ s;  

Méthode trois de huit:
Code principal de la méthode execute ()

• Vous pouvez supprimer les lignes qui déclarent $ wgUser, $ wgSitename et $ skin si vous ne les utilisez pas.

 fonction exécuter()  // déclarer des variables globales et obtenir l'objet skin au cas où vous auriez besoin de les utiliser plus tard global $ wgUser, $ wgSitename; $ peau = $ wgUser->getSkin(); // récupère le nom du site $ ceci->ensemble('nom du site', $ wgSitename); // supprime les avertissements pour empêcher les avis sur les index manquants dans $ this-> data wfSuppressWarnings(); 

Méthode quatre des huit:
Code de structure XHTML principal

• Code d'ouverture - ici, vous indiquez au skin de sortir la balise HTML et de déclarer tous les espaces de noms XHTML nécessaires. Le code suivant est une déclaration standard que vous pouvez personnaliser, mais ce n’est probablement pas nécessaire.

 ?> var13 -> <? php pour chaque($ ceci->Les données['xhtmlnamespaces'] comme $ tag => $ ns)  ?>xmlns:<? php écho "$ tag=\"$ ns\" ";  ?>xml: lang = "<? php $ ceci->texte('lang') ?>"lang ="<? php $ ceci->texte('lang') ?>"dir ="<? php $ ceci->texte('dir') ?>"> 

• L'élément head - ici, vous produisez l'élément head avec tout son contenu. Cela inclut les liens vers les feuilles de style, les scripts côté client et les métadonnées pour les robots et les navigateurs. Le code inclus ici est un code standard que vous devrez peut-être modifier pour inclure tous les scripts ou feuilles de style personnalisés à inclure.
  • Pour que ce code fonctionne comme prévu, vous devez disposer des fichiers suivants (vous pouvez supprimer les lignes qui importent ces feuilles de style si vous n'en avez pas besoin):
    • /common/commonPrint.css - feuille de style pour imprimer des pages. Vous pouvez changer le chemin d'accès à cette feuille de style si vous ne souhaitez pas utiliser la feuille de style d'impression standard.
    • main.css, contents.css - feuilles de style principales pour votre peau. Ceux-ci doivent être dans le répertoire de votre skin (/ skins / trialkin dans cet exemple)
    • handheld.css - une feuille de style à utiliser avec les appareils portatifs.
    • IE50Fixes.css, IE55Fixes.css, IE60Fixes.css, IE70Fixes.css - des correctifs pour différents navigateurs. Vous pouvez copier ces fichiers depuis l'un des skins déjà existants, vous devrez probablement ne rien modifier sur ces fichiers.
  • Les dernières lignes, à partir de "/ *** divers scripts et styles liés à MediaWiki *** /" inclure des feuilles de style spécifiques à l'utilisateur, spécifiques à la page et spécifiques à l'ensemble du site. Si vous ne supportez pas ces fonctionnalités, supprimez-les simplement jusqu'au commentaire.
  • Il a été remarqué que l'appel $ this-> html ('headscripts') cause parfois des problèmes, donc si quelque chose ne va pas, essayez de le supprimer.
  • Si le code ne fonctionne pas pour une raison quelconque, vous pourriez oublier complètement ce code et écrire votre propre code, y compris les liens de feuille de style, les scripts et la balise de titre, tous écrits par votre propre code!

   <? php $ ceci->html("liens") ?>  <? php / *** feuilles de style général *** / ?>  <? php / *** feuilles de style spécifiques aux médias *** / ?> <? php si(vide($ ceci->Les données['imprimable']) )  ?>media = "print"<? php  ?> href = "<? php $ ceci->texte('stylepath') ?>/common/commonPrint.css?<? php écho $ GLOBALS['wgStyleVersion'] ?>" />  <? php / *** feuilles de style spécifiques au navigateur *** / ?>     <? php / *** Corrections IE générales *** / ?>  <? php impression Peau::makeGlobalVariablesScriptScript($ ceci->Les données); ?> <? php / *** divers scripts et styles liés à MediaWiki *** / ?>  <? php si($ ceci->Les données['jsvarurl'])  ?>  <? php  ?> <? php si($ ceci->Les données['pagecss'])  ?>  <? php  si($ ceci->Les données['usercss'])  ?>  <? php  si($ ceci->Les données['userjs'])  ?>  <? php  si($ ceci->Les données['userjsprev'])  ?>  <? php  si($ ceci->Les données['trackbackhtml']) impression $ ceci->Les données['trackbackhtml']; ?>  <? php $ ceci->html(«scripts») ?>  

• La balise d'ouverture du corps - affiche la balise d'ouverture du corps. Très probablement, vous n'aurez pas besoin de le modifier, sauf si vous souhaitez coder en dur les styles de corps dans la balise.

  <? php si($ ceci->Les données['body_ondblclick'])  ?>ondblclick = "<? php $ ceci->texte('body_ondblclick') ?>"<? php  ?> <? php si($ ceci->Les données['body_onload'])  ?>onload = "<? php $ ceci->texte('body_onload') ?>"<? php  ?>kw2 "> <? php $ ceci->texte('nsclass') ?> <? php $ ceci->texte('dir') ?> <? php $ ceci->texte('pageclass') ?>"> 

• Sentier de clôture - il est ajouté à la fin du fichier. Il ferme toutes les balises ouvertes, les scripts, le code php… etc. Tout le code suivant doit être placé avant cela, ce devrait être la dernière ligne du fichier skin.

  <? php $ ceci->html("bas de page"); / * JS appelle à runBodyOnloadHook * / ?> <? php $ ceci->html('heure du rapport') ?> <? php si ( $ ceci->Les données['déboguer'] ): ?>  <? php fin si; ?>   <? php wfRestoreWarnings();  // fin de la méthode execute ()  // fin du cours ?> 

Méthode cinq de huit:
Code des éléments du site commun

• Notez l'utilisation de $ this-> text ($ msg) et de $ this-> html ($ msg). il sera beaucoup utilisé sur la peau.
• Nom du site:

 <? php écho $ ceci->texte('nom du site') ?> 

• Image du logo du site:

 
 <? php ?>href = "<? php écho htmlspecialchars($ ceci->Les données['nav_urls']['page d'accueil']['href'])?>"<? php écho $ peau->tooltipAndAccesskey('n-mainpage') ?>> 
   

• Ligne de balise du site:

 
<? php $ ceci->msg('slogan') ?>
 

• Le bloc de notification de site - le contenu de l'avis de site est généralement modifié et ajouté à la page de message WikiMedia: Sitenotice.

 <? php si($ ceci->Les données['sitenotice'])  ?>
<? php $ ceci->html('sitenotice') ?>
<? php  ?> 

• Bloc de notification de message utilisateur:

 <? php si($ ceci->Les données['newtalk'])  ?>
<? php $ ceci->html('newtalk') ?>
<? php  ?> 

• Bloc de navigation Intrapage - ceci est facultatif

 <? php si($ ceci->Les données['showjumplinks'])  ?>
<? php $ ceci->msg('sauter à') ?> <? php $ ceci->msg('jumptonavigation') ?>, <? php $ ceci->msg('jumptosearch') ?>
<? php  ?> 

Méthode six de huit:
Code des éléments de la page commune

• Nom de la page:

 
<? php $ ceci->Les données['displaytitle']!=""?$ ceci->html('Titre'):$ ceci->texte('Titre') ?>
 

• Sous-titre de la page:

 
<? php $ ceci->html('Sous-titre') ?>
 

• Contenu de la page:

 <? php $ ceci->html('le corps du texte') ?> 

• Liens de catégorie:

 <? php si($ ceci->Les données['catlinks'])  ?>
<? php $ ceci->html('catlinks') ?>
<? php  ?> 

• Footer - ce code est itératif alors faites attention en le copiant!

 
 <? php si($ ceci->Les données['poweredbyico'])  ?> 
<? php $ ceci->html('poweredbyico') ?>
 <? php  si($ ceci->Les données['copyrightico'])  ?> 
<? php $ ceci->html('copyrightico') ?>
 <? php  // génère des liens de bas de page supplémentaires ?> 
 <? php $ footerlinks = tableau( 'lastmod', 'nombre de vues', 'numberofwatchingusers', 'crédits', 'droits d'auteur', 'intimité', 'sur', 'avertissement', 'slogan', ); pour chaque( $ footerlinks comme $ aLink )  si( isset( $ ceci->Les données[$ aLink] ) && $ ceci->Les données[$ aLink] )  ?> 
<? php $ ceci->html($ aLink) ?>
 <? php   ?> 
 
 

Méthode sept de huit:
Code des barres d'outils communes

• Barre d'outils de l'utilisateur - Cela rend les liens de navigation de l'utilisateur tels que la page de l'utilisateur, la page de discussion, le lien de déconnexion… etc.

 
 
<? php $ ceci->msg('outils personnels') ?>
  
 
 <? php pour chaque($ ceci->Les données['personal_urls'] comme clé $ => $ item)  ?> <><? php si ($ item['actif'])  ?><? php  ?>><? php écho $ peau->tooltipAndAccesskey('pt-'.clé $) ?><? php si(!vide($ item['classe']))  ?>kw2 "> <? php écho htmlspecialchars($ item['classe']) ?>"<? php  ?>><? php écho htmlspecialchars($ item['texte']) ?> <? php  ?> 
 
 
 

• Barre d'outils de la page - qui comprend le modifier, créer, discuter liens avec d'autres en fonction du groupe de l'utilisateur

 
 
<? php $ ceci->msg('vues') ?>
  
 
 <? php pour chaque($ ceci->Les données['content_actions'] comme clé $ => onglet $)  ?> <><? php si(onglet $['classe'])  ?>kw2 "> <? php écho htmlspecialchars(onglet $['classe']) ?>"<? php  ?>><? php écho $ peau->tooltipAndAccesskey('Californie-'.clé $) ?>><? php écho htmlspecialchars(onglet $['texte']) ?> <? php  ?> 
 
 
 

• Undelete notice - si la page a été supprimée auparavant et que l'utilisateur peut annuler la suppression de pages, ce lien devrait apparaître (si vous le souhaitez)

 <? php si($ ceci->Les données['Undelete'])  ?>
<? php $ ceci->html('Undelete') ?>
<? php  ?> 

Méthode huit de huit:
Portlets (principaux blocs de navigation)

• Portlet de recherche - zone de recherche. Il s'agit d'une implémentation minimale qui montre uniquement ce qui doit être généré pour que le champ de recherche fonctionne.

 
 
<? php $ ceci->msg('chercher') ?>
 
 
 <? php écho $ peau->tooltipAndAccesskey('chercher'); si( isset( $ ceci->Les données['chercher'] ) )  ?> valeur = "<? php $ ceci->texte('chercher') ?>"<? php  ?> /> <? php écho $ peau->tooltipAndAccesskey( "recherche" ); ?> />  <? php écho $ peau->tooltipAndAccesskey( 'search-fulltext' ); ?> /> 
 
 
 

• Portlet de la boîte à outils:

 
 
<? php $ ceci->msg('boîte à outils') ?>
 
 
 <? php si($ ceci->Les données['page non spéciale'])  ?> 
<? php écho $ peau->tooltipAndAccesskey('t-whatlinkshere') ?>><? php $ ceci->msg('whatlinkshere') ?>
 <? php si( $ ceci->Les données['nav_urls']['recentchangeslinked'] )  ?> 
<? php écho $ peau->tooltipAndAccesskey('t-recentchangeslinked') ?>><? php $ ceci->msg('recentchangeslinked') ?>
 <? php   si(isset($ ceci->Les données['nav_urls']['trackbacklink']))  ?> 
<? php écho $ peau->tooltipAndAccesskey('t-trackbacklink') ?>><? php $ ceci->msg('trackbacklink') ?>
 <? php  si($ ceci->Les données[«aliments»])  ?> 
<? php pour chaque($ ceci->Les données[«aliments»] comme clé $ => $ feed)  ?><? php écho $ peau->tooltipAndAccesskey('alimentation-'.clé $) ?>><? php écho htmlspecialchars($ feed['texte'])?>  <? php  ?>
<? php  pour chaque( tableau('contributions', 'blockip', 'utilisateur de messagerie', 'télécharger', 'specialpages') comme $ spécial )  si($ ceci->Les données['nav_urls'][$ spécial])  ?>
<? php écho $ peau->tooltipAndAccesskey('t-'.$ spécial) ?>><? php $ ceci->msg($ spécial) ?>
 <? php   si(!vide($ ceci->Les données['nav_urls']['impression']['href']))  ?> 
<? php écho $ peau->tooltipAndAccesskey('t-print') ?>><? php $ ceci->msg('version imprimable') ?>
<? php  si(!vide($ ceci->Les données['nav_urls']['permalink']['href']))  ?> 
<? php écho $ peau->tooltipAndAccesskey('t-permalink') ?>><? php $ ceci->msg('permalink') ?>
<? php  sinon ($ ceci->Les données['nav_urls']['permalink']['href'] === ")  ?> <><? php écho $ peau->infobulle('t-ispermalink') ?>><? php $ ceci->msg('permalink') ?><? php  wfRunHooks( 'TrialSkinTemplateToolboxEnd', tableau( &$ ceci ) ); ?> 
 
 
 

• Liens linguistiques:

 <? php si( $ ceci->Les données['language_urls'] )  ?> 
 
<? php $ ceci->msg('autres langues') ?>
 
 
 <? php pour chaque($ ceci->Les données['language_urls'] comme $ langlink)  ?> <? php écho htmlspecialchars($ langlink['classe'])?>"><? php ?><? php écho $ langlink['texte'] ?> <? php  ?> 
 
 
 <? php  ?>