Veel sites gebruiken de MediaWiki-software, inclusief wikiHow! Zoals je ziet, ondanks het feit dat MediaWiki wordt geleverd met een reeks kant-en-klare skins, kiezen veel sites, zoals wikiHow, ervoor om hun eigen huid te hebben om de site een unieke look en feel te geven. Het aanpassen van hoe een op MediaWiki gebaseerde site eruitziet, kan op vele manieren worden bereikt met betrekking tot skins. Meestal is het niet nodig om vanuit het niets een nieuwe skin te maken voor vele niveaus van aanpassingen. In andere situaties is het maken van een skin op basis van een van de reeds geïmplementeerde, zoals MonoBook, en vervolgens aanpassen aan uw behoeften ruim voldoende. Als je de lay-out van de wiki echter drastisch wilt veranderen, moet je misschien je eigen skin vanaf de grond af maken. Dit artikel zal je begeleiden om dit op een systematische, georganiseerde en gemakkelijke manier te doen!^[1]

Voor het doel van de demonstratie gaat het artikel ervan uit dat je nieuwe skin wordt gebeld TrialSkin. Vervang alle verwijzingen naar "TrialSkin" door de naam van uw skin.

Stappen

1. 1 Maak de basis bestandsstructuur voor je nieuwe skin. Dit omvat het maken van de volgende bestanden en mappen (die allemaal moeten worden toegevoegd aan de skins map van je MediaWiki-installatie):
   • EEN TrialSkin.php bestand - Hier plaatst u het grootste deel van de code en definieert u de lay-out van pagina's.
   • EEN TrialSkin.deps.php bestand - Dit is een standaardbestand dat waarschijnlijk dezelfde code bevat. Het is gemaakt om een ​​bug met PHP te repareren.
   • De trialskin map - Alle andere bestanden gerelateerd aan je skin zouden in deze map moeten staan, inclusief stylesheets en afbeeldingen.
   • EEN /skins/trialskin/main.css bestand dat de belangrijkste stylesheet voor de skin zal bevatten - [Optioneel, maar hoogstwaarschijnlijk nodig]
   • Browserspecifieke stylesheet herstelt bestanden, zoals /skins/trialskin/IE60Fixes.css - [Optioneel, maar liever]
2. 2 Voeg de initialisatiecode toe zoals hieronder vermeld in de subsectie "Initialisatiecode" van dit artikel. Vervangen TrialSkin met de naam van je huid en trialskin met de naam van je huid nadat je alle letters in kleine letters hebt omgezet.
3. 3Voeg de "Category List Fix" -code toe zoals vermeld in de overeenkomstige subparagraaf hieronder.
4. 4Definieer de execute () functie, die wordt aangeroepen om de inhoud van de pagina's naar clientbrowsers uit te voeren.
5. 5 Verklaar de globale variabele $ wgUser in de execute () functie en gebruik de getSkin () methode om een ​​te verkrijgen $ huid variable / object. Je hebt die variabele waarschijnlijk nodig. Als u het echter niet nodig hebt, hoeft u deze stap niet te doen. U vindt een standaardvoorbeeld van het declareren van de execute () functie met de meest gebruikte code in de subsectie "Declaration of the execute () Function".
6. 6 Begin met het toevoegen van code (zowel PHP als XHTML) om pagina's in uw wiki te renderen. Hoogstwaarschijnlijk, hoewel u de lay-out mogelijk drastisch moet wijzigen, maar u moet dezelfde set informatie weergeven als normale skins doen (met enkele wijzigingen misschien). De meest toegevoegde elementen / componenten / blokken voor een pagina zijn (zie overeenkomstige subsecties voor details en / of voorbeeldcodes):
   • De XHTML-code die de HTML-uitvoer opent en uiteindelijk sluit die naar de browser van de client wordt verzonden.
   • Het hoofdelement, dat stijlbladen, scripts importeert, definieert de metadata van de pagina en specificeert de titel die moet worden weergegeven in de titelbalk van de browser voor de specifieke pagina die wordt bekeken.
   • De body opening tag. Met deze tag wordt het hoofdgedeelte van de pagina geopend en wordt aangegeven wat er gebeurt wanneer de pagina wordt geladen of dubbel wordt geklikt als er dergelijke handlers bestaan.
   • Het naamblok van de site.
   • Het logo van de site.
   • De tag-regel van de site
   • Site Notice-blok.
   • Meldingsblok gebruikersbericht (als er behoefte aan is)
   • De werkbalk van de gebruiker.
   • Intrapage navigatieblok.
   • Zoeken.
   • Gereedschapskist.
   • Taal links.
   • Paginanaam.
   • Pagina-ondertiteling.
   • Bericht verwijdering ongedaan maken.
   • Pagina inhoud.
   • Categorie koppelingen.
   • Pagina-knoppenbalk.
   • Voettekst.
   • Afsluitingspad.

Methode één van de acht:
Initialisatiecode

• Vervangen SkinTrialSkin met SkinYourSkinName, trialskin met yourskinname en TrialSkinTemplate met YourSkinNameSjabloon.

 <? Php // initialisatiecode als( !bepaald('Mediawiki') ) dood gaan("Dit skinbestand is geen geldig startpunt."); eenmalig benodigd('Includes / SkinTemplate.php'); // overname hoofdcode van SkinTemplate, stel CSS en sjabloonfilter in klasse SkinTrialSkin strekt SkinTemplate  functie initPage(&$ out)  SkinTemplate::initPage($ out); $ this->skinname = 'Trialskin'; $ this->stijl naam = 'Trialskin'; $ this->sjabloon = 'TrialSkinTemplate';   klasse TrialSkinTemplate strekt QuickTemplate  // Andere codesecties worden toegevoegd aan deze klasselichaam 

Methode twee van acht:
Categorielijst Fix Code

• Kopieer en plak de volgende code in de body van de sjabloonklasse (TrialSkinTemplate in dit voorbeeld), bij voorkeur na de initialisatiecode)

 / * kaping-categoriefuncties om een ​​juiste lijst te maken * / functie getCategories()  $ catlinks=$ this->getCategoryLinks(); als(!leeg($ catlinks))  terugkeer "
$ Catlinks
";   functie getCategoryLinks()  globaal $ wgOut, $ wgUser, $ wgTitle, $ wgUseCategoryBrowser; globaal $ wgContLang; als(tellen($ wgOut->mCategoryLinks) == 0) terugkeer "; $ huid = $ wgUser->getSkin(); # scheidingsteken  $ september = ""; // gebruik Uniode bidi-insluitende override-tekens, // om ervoor te zorgen dat links elkaar niet op een lelijke manier in elkaar slaan $ dir = $ wgContLang->isRTL() ? 'Rtl' : 'Ltr'; $ embed = "
"; $ pop = ''; $ t = $ embed . imploderen ( "$ Pop $ September $ Embed" , $ wgOut->mCategoryLinks ) . $ pop; $ msg = wfMsgExt('Pagecategories', rangschikking('Parsemag', 'ontsnappen'), tellen($ wgOut->mCategoryLinks)); $ s = $ huid->makeLinkObj(Titel::newFromText(wfMsgForContent('Pagecategorieslink')), $ msg) . $ t; # optionele 'dmoz-achtige' categoriebrowser - wordt weergegeven onder de lijst  # van de categorieën waartoe een artikel behoort  als($ wgUseCategoryBrowser)  $ s .= '
'; # krijg een groot aantal van de stamboom van de ouders  $ parenttree = $ wgTitle->getParentCategoryTree(); # Huidobject doorgegeven door verwijzing omdat het niet kan zijn  # benaderd onder de methodesubfunctie drawCategoryBrowser  $ tempout = ontploffen("\ n", Huid::drawCategoryBrowser($ parenttree, $ this)); # verwijder valse eerste entry en sorteer ze  ongezet($ tempout[0]); een soort($ tempout); # output één per regel  $ s .= imploderen("
\ n", $ tempout);  terugkeer $ s;  

Methode Three of Eight:
Main execute () Methodecode

• Je zou de regels kunnen verwijderen die $ wgUser, $ wgSitename en $ skin aangeven als je ze niet gaat gebruiken.

 functie uitvoeren()  // globale variabelen declareren en het skin-object ophalen voor het geval u ze later moet gebruiken globaal $ wgUser, $ wgSitename; $ huid = $ wgUser->getSkin(); // naam van de site ophalen $ this->reeks('site naam', $ wgSitename); // onderdruk waarschuwingen om kennisgevingen over ontbrekende indexen in $ this-> data te voorkomen wfSuppressWarnings(); 

Methode vier van acht:
Hoofdstructuur XHTML-structuur

• Openingscode - hier geeft u de skin opdracht om de HTML-tag uit te voeren en alle benodigde XHTML-naamruimten te declareren. De volgende code is een standaardverklaring die u mogelijk kunt aanpassen, maar hoogstwaarschijnlijk niet nodig.

 ?> var13 -> <? Php foreach($ this->gegevens['Xhtmlnamespaces'] als $ tag => $ ns)  ?>xmlns:<? Php echo "$ Tag=\"$ Ns\" ";  ?>xml: lang ="<? Php $ this->tekst('Lang') ?>"lang ="<? Php $ this->tekst('Lang') ?>"dir ="<? Php $ this->tekst('Dir') ?>"> 

• Het hoofdelement - hier geeft u het hoofdelement samen met de volledige inhoud af. Dit omvat style-sheets links, client-side scripts en metadata voor robots en browsers. De hier opgenomen code is een standaardcode die u mogelijk moet wijzigen om eventuele aangepaste scripts of stylesheets op te nemen.
  • Om deze code te laten werken zoals verwacht, moet je de volgende bestanden hebben (je kunt de regels verwijderen die deze stijlpagina's importeren als je ze niet nodig hebt):
    • /common/commonPrint.css - stijlpagina voor het afdrukken van pagina's. U kunt het pad naar dit stijlblad wijzigen als u niet het standaard afdrukstijlblad wilt gebruiken.
    • main.css, contents.css - hoofdstijlbladen voor je huid. Deze moeten in de directory van je skin staan ​​(/ skins / trialskin in dit voorbeeld)
    • handheld.css - een stylesheet die kan worden gebruikt met draagbare apparaten.
    • IE50Fixes.css, IE55Fixes.css, IE60Fixes.css, IE70Fixes.css - oplossingen voor verschillende browsers. U mag deze bestanden kopiëren van een van de reeds bestaande skins, hoogstwaarschijnlijk hoeft u niets aan deze bestanden te veranderen.
  • De laatste regels, beginnend bij "/ *** verschillende MediaWiki-gerelateerde scripts en stijlen *** /" gebruikersspecifieke, paginaspecifieke en site-brede specifieke stijlbladen opnemen. Als u deze functies niet ondersteunt, verwijdert u ze allemaal tot de commentaar.
  • Het is opgevallen dat de $ this-> html ('headscripts') oproep soms problemen veroorzaakt, dus als er iets fout gaat, probeer het dan te verwijderen.
  • In het geval dat de code om wat voor reden dan ook niet werkt, zou u deze code helemaal kunnen vergeten en uw eigen code kunnen schrijven, inclusief de stylesheet-links, scripts en de title-tag, allemaal geschreven door uw eigen code!

   <? Php $ this->html('Headlinks') ?>  <? Php / *** algemene stijlbladen *** / ?>  <? Php / *** mediaspecifieke stijlbladen *** / ?> <? Php als(leeg($ this->gegevens['Printbare']) )  ?>media = "print"<? Php  ?> href ="<? Php $ this->tekst('Stylepath') ?>/common/commonPrint.css?<? Php echo $ GLOBALS['WgStyleVersion'] ?>" />  <? Php / *** browserspecifieke stijlbladen *** / ?>     <? Php / *** algemene IE-correcties *** / ?>  <? Php afdrukken Huid::makeGlobalVariablesScript($ this->gegevens); ?> <? Php / *** verschillende MediaWiki-gerelateerde scripts en stijlen *** / ?>  <? Php als($ this->gegevens['Jsvarurl'])  ?>  <? Php  ?> <? Php als($ this->gegevens['Pagecss'])  ?>  <? Php  als($ this->gegevens['Usercss'])  ?>  <? Php  als($ this->gegevens['Userjs'])  ?>  <? Php  als($ this->gegevens['Userjsprev'])  ?>  <? Php  als($ this->gegevens['Trackbackhtml']) afdrukken $ this->gegevens['Trackbackhtml']; ?>  <? Php $ this->html('Headscripts') ?>  

• De body opening-tag - maakt het label van de opening body. Hoogstwaarschijnlijk hoeft u dit niet aan te passen tenzij u de body-stijlen in de tag wilt coderen.

  <? Php als($ this->gegevens['Body_ondblclick'])  ?>ondblclick ="<? Php $ this->tekst('Body_ondblclick') ?>"<? Php  ?> <? Php als($ this->gegevens['Body_onload'])  ?>onload ="<? Php $ this->tekst('Body_onload') ?>"<? Php  ?>kw2" > <? php $ this->tekst('Nsclass') ?> <? Php $ this->tekst('Dir') ?> <? Php $ this->tekst('Pageclass') ?>"> 

• Afsluitingspad - dit is toegevoegd aan het einde van het bestand. Het sluit alle geopende tags, scripts, php-code ... enz. Alle volgende code moet hier voor worden geplaatst, dit moeten de laatste regels van het skinbestand zijn.

  <? Php $ this->html('Bottomscripts'); / * JS-aanroep voor uitvoerenBodyOnloadHook * / ?> <? Php $ this->html('Reporttime') ?> <? Php als ( $ this->gegevens['Debug'] ): ?>  <? Php stop als; ?>   <? Php wfRestoreWarnings();  // end of execute () methode  // einde van de les ?> 

Methode Vijf van Acht:
Common Site Elements 'Code

• Let op het gebruik van $ this-> text ($ msg) en $ this-> html ($ msg). het zal veel over de huid worden gebruikt.
• Naam van de site:

 <? Php echo $ this->tekst('site naam') ?> 

• Logo-afbeelding van de site:

 
 <? Php ?>href ="<? Php echo htmlspecialchars($ this->gegevens['Nav_urls']['hoofdpagina']['Href'])?>"<? Php echo $ huid->tooltipAndAccesskey('N-hoofdpagina') ?>> 
   

• Site-tagregel:

 
<? Php $ this->msg('Tagline') ?>
 

• Het siteberichtsblok - inhoud van de site-aankondiging wordt meestal bewerkt en toegevoegd aan de berichtpagina van WikiMedia: Sitenotice.

 <? Php als($ this->gegevens['Sitenotice'])  ?>
<? Php $ this->html('Sitenotice') ?>
<? Php  ?> 

• Blokkering gebruikersbericht:

 <? Php als($ this->gegevens['Newtalk'])  ?>
<? Php $ this->html('Newtalk') ?>
<? Php  ?> 

• Intrapage-navigatieblok - dit is optioneel

 <? Php als($ this->gegevens['Showjumplinks'])  ?>
<? Php $ this->msg('Spring naar') ?> <? Php $ this->msg('Jumptonavigation') ?>, <? Php $ this->msg('Jumptosearch') ?>
<? Php  ?> 

Methode Six of Eight:
Common Page Elements 'Code

• Paginanaam:

 
<? Php $ this->gegevens['DISPLAYTITLE']!=""?$ this->html('titel'):$ this->tekst('titel') ?>
 

• Pagina-ondertitel:

 
<? Php $ this->html('Ondertitel') ?>
 

• Pagina-inhoud:

 <? Php $ this->html('lichaamstaal') ?> 

• Categorie koppelingen:

 <? Php als($ this->gegevens['Catlinks'])  ?>
<? Php $ this->html('Catlinks') ?>
<? Php  ?> 

• Voettekst - deze code is iteratief dus wees voorzichtig tijdens het kopiëren!

 
 <? Php als($ this->gegevens['Poweredbyico'])  ?> 
<? Php $ this->html('Poweredbyico') ?>
 <? Php  als($ this->gegevens['Copyrightico'])  ?> 
<? Php $ this->html('Copyrightico') ?>
 <? Php  // genereer extra footer-links ?> 
 <? Php $ footerlinks = rangschikking( 'Lastmod', 'kijkcijfers', 'Numberofwatchingusers', 'Credits', 'auteursrechten', 'Privacy', 'over', 'Disclaimer', 'Tagline', ); foreach( $ footerlinks als $ ALINK )  als( isset( $ this->gegevens[$ ALINK] ) && $ this->gegevens[$ ALINK] )  ?> 
<? Php $ this->html($ ALINK) ?>
 <? Php   ?> 
 
 

Methode Seven of Eight:
Common Toolbars-code

• Gebruikerswerkbalk - dit geeft de navigatielinks van de gebruiker weer, zoals de gebruikerspagina, overlegpagina, uitloglink ... etc.

 
 
<? Php $ this->msg('Personaltools') ?>
  
 
 <? Php foreach($ this->gegevens['Personal_urls'] als $ key => $ punt)  ?> <><? Php als ($ punt['actief'])  ?><? Php  ?>><? Php echo $ huid->tooltipAndAccesskey('PT-'.$ key) ?><? Php als(!leeg($ punt['klasse']))  ?>kw2" > <? php echo htmlspecialchars($ punt['klasse']) ?>"<? Php  ?>><? Php echo htmlspecialchars($ punt['tekst']) ?> <? Php  ?> 
 
 
 

• Pagina-knoppenbalk - inclusief de Bewerk, creëren, bespreken koppelingen samen met anderen, afhankelijk van de groep van de gebruiker

 
 
<? Php $ this->msg('keer bekeken') ?>
  
 
 <? Php foreach($ this->gegevens['Content_actions'] als $ key => tab $)  ?> <><? Php als(tab $['klasse'])  ?>kw2" > <? php echo htmlspecialchars(tab $['klasse']) ?>"<? Php  ?>><? Php echo $ huid->tooltipAndAccesskey('Ca-'.$ key) ?>><? Php echo htmlspecialchars(tab $['tekst']) ?> <? Php  ?> 
 
 
 

• Bericht opnieuw opheffen - als de pagina eerder is verwijderd en de gebruiker kan de verwijdering van pagina's ongedaan maken, moet deze link worden weergegeven (als u ervoor kiest)

 <? Php als($ this->gegevens['Undelete'])  ?>
<? Php $ this->html('Undelete') ?>
<? Php  ?> 

Methode Acht van de acht:
Portlets (hoofdnavigatieblokken)

• Zoekportlet - het zoekvak. Dit is een minimale implementatie die alleen laat zien wat moet worden uitgevoerd om het zoekvak te laten werken.

 
 
<? Php $ this->msg('zoeken') ?>
 
 
 <? Php echo $ huid->tooltipAndAccesskey('zoeken'); als( isset( $ this->gegevens['zoeken'] ) )  ?> value ="<? Php $ this->tekst('zoeken') ?>"<? Php  ?> /> <? Php echo $ huid->tooltipAndAccesskey( 'Search-go' ); ?> />  <? Php echo $ huid->tooltipAndAccesskey( 'Search-fulltext' ); ?> /> 
 
 
 

• Toolbox-portlet:

 
 
<? Php $ this->msg('gereedschapskist') ?>
 
 
 <? Php als($ this->gegevens['Notspecialpage'])  ?> 
<? Php echo $ huid->tooltipAndAccesskey('T-WhatLinksHere') ?>><? Php $ this->msg('Whatlinkshere') ?>
 <? Php als( $ this->gegevens['Nav_urls']['Recentchangeslinked'] )  ?> 
<? Php echo $ huid->tooltipAndAccesskey('T-recentchangeslinked') ?>><? Php $ this->msg('Recentchangeslinked') ?>
 <? Php   als(isset($ this->gegevens['Nav_urls']['Trackbacklink']))  ?> 
<? Php echo $ huid->tooltipAndAccesskey('T-trackbacklink') ?>><? Php $ this->msg('Trackbacklink') ?>
 <? Php  als($ this->gegevens['Feeds'])  ?> 
<? Php foreach($ this->gegevens['Feeds'] als $ key => $-feed)  ?><? Php echo $ huid->tooltipAndAccesskey('eten geven-'.$ key) ?>><? Php echo htmlspecialchars($-feed['tekst'])?>  <? Php  ?>
<? Php  foreach( rangschikking(Bijdragen ', 'Blockip', 'Emailuser', 'uploaden', 'Specialpages') als $ special )  als($ this->gegevens['Nav_urls'][$ special])  ?>
<? Php echo $ huid->tooltipAndAccesskey('T-'.$ special) ?>><? Php $ this->msg($ special) ?>
 <? Php   als(!leeg($ this->gegevens['Nav_urls']['afdrukken']['Href']))  ?> 
<? Php echo $ huid->tooltipAndAccesskey('T-print') ?>><? Php $ this->msg('printbare versie') ?>
<? Php  als(!leeg($ this->gegevens['Nav_urls']['Permalink']['Href']))  ?> 
<? Php echo $ huid->tooltipAndAccesskey('T-permanente') ?>><? Php $ this->msg('Permalink') ?>
<? Php  elseif ($ this->gegevens['Nav_urls']['Permalink']['Href'] === ")  ?> <><? Php echo $ huid->tooltip('T-ispermalink') ?>><? Php $ this->msg('Permalink') ?><? Php  wfRunHooks( 'TrialSkinTemplateToolboxEnd', rangschikking( &$ this ) ); ?> 
 
 
 

• Taal links:

 <? Php als( $ this->gegevens['Language_urls'] )  ?> 
 
<? Php $ this->msg('andere talen') ?>
 
 
 <? Php foreach($ this->gegevens['Language_urls'] als $ langlink)  ?> <? Php echo htmlspecialchars($ langlink['klasse'])?>"><? Php ?><? Php echo $ langlink['tekst'] ?> <? Php  ?> 
 
 
 <? Php  ?>