Drupal is een van de top 3 Content Management Systemen (CMS's) ter wereld, samen met Wordpress en Joomla, waarbij Drupal 7 (uitgebracht in januari 2011) de nieuwste versie van Drupal is. 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 werkt door het maken van een Drupal 7-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!

Deel een van de drie:
Voorbereiding

  1. 1 Zorg dat je klaar bent om de stappen aan te pakken. 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\ displaystyle
    • 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.
  2. 2 Een ontwikkelomgeving opzetten. 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.
  3. 3 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.
  4. 4 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.
  5. 5 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.
  6. 6 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 .tpl.php, wat' PHP-sjabloon 'betekent) worden door Drupal gebruikt om de uitvoer van elke webpagina te structureren.
    • Enkele van de veelgebruikte Drupal-sjablonen zijn onder meer: html.tpl.php, page.tpl.php, block.tpl.php, en node.tpl.php.
    • 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.
    • Deze sjablonenbestanden bevatten HTML-, PHP- en afgedrukte variabelen binnen de PHP-scripts. Een voorbeeld van een afgedrukte variabele is binnen de node.tpl.php het dossier. Deze inhoud variabele slaat alle tekst op die de gebruiker heeft ingevoerd in het veld 'Hoofdgedeelte' van de basispagina toen de gebruiker was aangemeld bij Drupal. De functie render () zorgt er eenvoudigweg voor dat de uitvoer van de inhoud variabele is ingepakt in de juiste HTML-tags.
    • Als u alle beschikbare variabelen in een sjabloonbestand wilt zien, zoekt u naar het standaardbestand van Drupal '.tpl.php' op Drupal.org. Als u de typische inhoud van een van deze sjablonen wilt zien, 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 Proces- en preprocess-functies invoegen. Met deze functies kan de gebruiker elk van de variabelen wijzigen die beschikbaar zijn voor de sjablonen, zodat deze verschillende uitvoer zullen weergeven wanneer ze in de sjabloonbestanden worden afgedrukt. Het verschil tussen proces- en preprocess-functies is eenvoudig dat alle preprocess-functies worden aangeroepen (in een specifieke volgorde die is ingesteld door Drupal) voordat alle procesfuncties worden uitgevoerd; ze zijn anders hetzelfde.
    • Deze functies zijn allemaal geschreven in de template.php bestand (merk op dat dit is niet een '.tpl.php' bestand). De naam van alle voorbewerkings- en procesfuncties waaraan u uw thema toevoegt, begint met de naam van uw thema, bijvoorbeeld. mytheme_process_node (). Als u er een aan uw thema wilt toevoegen, kunt u deze vanuit het niets schrijven of vanuit een ander thema kopiëren en wijzigen.
    • Een voorbeeld van het gebruik van een preprocess-functie om een ​​variabele te veranderen, is om een ​​opening en een sluiting toe te voegen
      tag aan het begin en einde van de $ Variabelen [ 'content'] variabele binnen een 'mytheme_preprocess_node () functie.
    • U kunt meer lezen over proces- en preprocess-functies en de volgorde bekijken waarin ze worden aangeroepen, op de Drupal 7-themafunctiepagina op Drupal.org.

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-modules:
    • Keer bekeken. Vitaal voor themanten, Views stelt u in staat om bijna elke inhoud van uw website 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.