Drupal is een van de top 3 Content Management Systemen (CMS's) ter wereld, samen met Wordpress en Joomla. Drupal 8 (nog niet uitgebracht) is de nieuwste versie van Drupal wanneer deze wordt vrijgegeven. Drupal is aangepast met behulp van thema's, die een krachtige manier zijn om een ​​door Drupal aangedreven website te verbeteren door de structuur en het uiterlijk (en enkele aanvullende functionaliteit) van de site te beschrijven. Dit artikel zal werken door het creëren van een Drupal 8-thema van begin tot eind.

Houd er rekening mee dat dit artikel u weliswaar begeleidt bij het maken van een thema helemaal opnieuw, het is vaak beter om je werk te beginnen met een basisthema, zoals de populaire Zen, Omega of Tao-thema's. Als je nieuw bent, is het maken van een geheel nieuw thema minder verwarrend en leer je meer!


Voordat je begint

Om de tutorial effectief te kunnen volgen en voltooien, moet u de basisprincipes begrijpen van:

  • Het doel van websites
  • HTML en CSS: hoe ze worden gebruikt om websites te maken
  • PHP: wat het is, en hoe het wordt gebruikt om te verbeteren
  • CMS's: wat ze zijn, en hoe ze worden gebruikt om websites van stroom te voorzien
  • Drupal: hoe een eenvoudige website te maken die er gebruik van maakt

Laat je echter niet afschrikken door deze lijst. Met voldoende enthousiasme kun je tijdens het volgen van deze tutorial leren wat je nodig hebt.
Om snel en soepel een thema te ontwikkelen (zonder aan internet gerelateerde problemen), moet u een ontwikkelomgeving (een code-editorprogramma en een testserver) op uw computer instellen. De meest gebruikelijke manier om dit te doen is het installeren van een WAMP / LAMP / MAMP-stack (W: windows; L: Linux; M: Mac, A: Apache, de serversoftware; M: MySQL, de databasesoftware; P: PHP, het server-side script) en download een open-source code-editor.

Deel een van de drie:
Voorbereiding

  1. 1 Ontwerp de website.
    • Begin met het schetsen van de lay-out van de startpagina van uw website met een potlood en een schoon vel papier; je moet je vrij voelen om fouten en veranderingen aan te brengen. Teken alle delen van een basiswebpagina, inclusief de koptekst, het navigatiemenu (dat zich net onder de kop of in een zijbalk bevindt), de paginolichaam (voor de inhoud) en de voettekst. Misschien heb je andere gebieden in je ontwerp.
    • Als u tevreden bent met uw ontwerp, recreëert u uw getekende ontwerp een grafisch programma waarmee u webpagina's kunt ontwerpen, zoals Adobe Photoshop of, nog beter, Adobe Fireworks.
    • Zorg er vervolgens voor dat je alle andere visuele elementen toevoegt; overweeg de kleuren en contrasten van donker licht, de typografie en hoe deze bijdraagt ​​aan de ervaring van de gebruiker, de lay-out en lege ruimtes (witruimte is belangrijk!), en hoe inhoud past.
  2. 2 Ontwikkel de website met behulp van HTML en CSS.
    • Net als bij de ontwerpfase van de website, is het waarschijnlijk het meest efficiënt om alleen de webpagina's van de site te maken die hun eigen unieke lay-outs hebben, zoals de startpagina en de pagina Contact opnemen. Houd de lay-out zo eenvoudig mogelijk en gebruik waar mogelijk moderne werkwijzen en conventies (zoals HTML5 en CSS3). Voeg op dit moment geen server-side scripting (zoals PHP) toe en houd client-side scripting (zoals Javascript) tot een minimum beperkt, om niet te interfereren met Drupal's code; dit kan later worden toegevoegd.
  3. 3 Stel Drupal in om met het thema te beginnen. Download Drupal en verplaats de bestanden naar de server die u gaat gebruiken om uw thema te ontwikkelen (uw testserver - aanbevolen - of een online server).
    • Plaats de gedownloade bestanden in de wortel map (als u een testserver gebruikt, is dit de www of localhost map). Gebruik een webbrowser om naar de hoofdmap te gaan (bijvoorbeeld http: // www /) en volg het installatieproces. Installeer vervolgens alle modules die nuttig zijn voor de ontwikkeling van het thema.
  4. 4 Begrijp de structuur van de webpagina van Drupal en converteer uw statische pagina's ernaar.
    • HTML-webpagina's staan ​​bekend als 'statisch' - wat betekent dat ze niet zijn ontworpen om inhoud te hebben die regelmatig wordt gewijzigd - en worden gemaakt met behulp van bloktype tags zoals 'divs' (en 'header', 'footer', enz. In HTML5).
    • Drupal-webpagina's zijn een combinatie van statische onderdelen (HTML) en dynamische onderdelen: onderdelen die inhoud bevatten die naar verwachting regelmatig wordt gewijzigd. Deze dynamische delen worden 'Regio's'in Drupal. Een voorbeeld van een regio is een zijbalk, waar u mogelijk navigatielinks wilt invoegen, een zoekvak, knoppen voor sociale media, enzovoort. Zie het onderstaande schema voor een visuele weergave:
      De dingen die je in regio's kunt zetten, worden 'blokken'in Drupal. Een zoekvak of een menu zijn bijvoorbeeld veelgebruikte blokken. U kunt blokken in regio's invoegen, de blokken herschikken en blokken uit regio's verwijderen wanneer u zich aanmeldt bij Drupal op de Structuur > Blocks pagina. Veel van de beschikbare blokken in een standaard Drupal-website worden geleverd door de geïnstalleerde modules, maar u kunt uw eigen blokken maken op de Blokken-pagina.
      De inhoud van elke webpagina (de hoofdtekst, koppen, afbeeldingen, enzovoort) wordt ook in een regio geplaatst: de regio 'Inhoud', die voor alle Drupal-thema's is vereist. De inhoud van elke webpagina (of blogpost of aangepast inhoudstype) wordt een 'knooppunt', en is ingepakt in de Hoofdpagina-inhoud blok. Met andere woorden, de inhoud van de Over ons pagina wordt natuurlijk opgeslagen in het knooppunt (met een knooppunttype 'pagina') en wordt uitgevoerd naar de Hoofdpagina-inhoud blok, dat is geplaatst in de Inhoud regio.
      Merk op dat soms meerdere knooppunten op de ene webpagina worden weergegeven via de Hoofdpagina-inhoud blok; een voorbeeld is de voorpagina, die standaard verschillende van de meest recente artikelen van de website (blogposts) toont.
      Uw thema bepaalt de regio's, maar niet wat de websitebeheerders erin hebben gestopt. Als de themagerichtheb je Drupal op de hoogte houden van de regio's die jouw thema zal hebben, en registreer je ze in bestanden die sjablonen worden genoemd, die in de volgende sectie worden behandeld.

Tweede deel van de drie:
De themabestanden maken

  1. 1 Stel de themamap in. Maak in deze map een .info-bestand met het doel van het thema en informatie over hoe het wordt gebruikt. Maak een lijst van wat er in gaat. Voeg in de map screenshots toe. en een CSS-map.
  2. 2 Maak de sjabloonbestanden.
    Drupal 'sjabloon'bestanden (die een bestandsnaam hebben die eindigt op' .html.twig ') worden door Drupal gebruikt om de uitvoer van elke webpagina te structureren. Standaardsjablonen omvatten:
    • html.html.twig
    • page.html.twig
    • block.html.twig
    • node.html.twig
    • aangepaste sjabloonpagina's
      Elke webpagina die Drupal uitvoert (bijvoorbeeld de 'Startpagina') gebruikt de html sjabloon eenmaal, de pagina sjabloon één keer, en de regio, blok en knooppunt sjablonen minstens één keer per keer.
      Als u de typische PHP-code en HTML-markup wilt zien die naar elk van deze sjablonen gaat, kunt u de sjabloonbestanden bekijken in de directory van de belangrijkste Drupal-thema's in de drupal > thema's map (niet de drupal > plaatsen > alle > thema's map).
  3. 3 Voer de functies Proces en Pre-proces in.
    Om deze functies te begrijpen, moet u eerst weten hoe drupal inhoud en HTML-markeringen opslaat en uitvoert. Zoals je in de vorige stap in de sjablonen had moeten zien, hebben alle Drupal-sjablonen verschillende variabelen die ze kunnen uitvoeren met functies zoals pagina inhoud'] . In dat voorbeeld de variabele inhoud (die is opgeslagen in de pagina array in plaats van als een variabele op zichzelf; het is precies hoe Drupal het doet) slaat alle tekst op die de gebruiker in de 'body' van de webpagina heeft getypt toen de gebruiker op Drupal was ingelogd.
    In principe laten proces- en pre-process-functies de gebruiker toe om de variabelen die beschikbaar zijn voor de sjablonen te wijzigen voordat Drupal ze beschikbaar maakt voor gebruik door de sjablonen. Deze functies zijn allemaal geschreven in de template.php bestand (merk op dat dit is niet een '.html.twig'-bestand).

Derde deel van de drie:
Installeer het thema en de afwerking

  1. 1 Installeer het thema in Drupal, stel de vereiste weergaven in en voeg de vereiste knooppunten en regio's toe.
  2. 2 Installeer extra nuttige modules die het uiterlijk, de beveiliging en de functionaliteit verbeteren.
    De volgende lijst met modules is zeer nuttig voor de meeste Drupal-websites en werd geschreven door Steve Floyd in zijn artikel Top 25 Drupal 7-modules (NB. Deze lijst zal waarschijnlijk veranderen voor Drupal 8):
    • Keer bekeken. Vitaal voor themanten, Views stelt u in staat om bijna elke inhoud van uw website (zoals 'de 10 meest recente artikelen') te verzamelen en deze als een pagina of blok te presenteren. Vooral handig voor het maken van een dynamische startpagina.
    • Diavoorstelling weergeven
    • Pathauto
    • Mollom
    • Google Analytics
    • WYSIWYG
    • xmlsitemap
    • Back-up en migratie
    • Werkbank
    • Media
    • Drupal Commerce
  3. 3 Voeg website-inhoud toe om de site te voltooien.