HTML till Drupal Tema 1


Förberedelser

Idag ska vi omvandla HTML till Drupal Tema och vi kör igång på en gång, utan att hänga kvar vid en massa bakgrund, för du har ju redan bestämt dig för att lära dig hur man omvandlar en statiskt HTML till » Drupal tema som är en dynamisk PHP & JavaScript baserad CMS, så grunderna i webbutveckling som, HTML & CSS borde du kunna…

 

Utvecklingsmiljön

Som en utvecklare är det viktigt att ha en bra utvecklingsmiljö och du kan hitta en massa bra tips på Drupal.org. Vi ska installera Devel, ett mycket populärt verktyg som kan generera noder (innehåll), användare, kommentarer, termer och mycket annat snabbt och enkelt, så logga in i din Drupal installation och navigera dig till Modules och installera Devel, gå sedan tillbaka till Modules och aktivera den genom att kryssa i “ENABLED” och scrolla längst ner på sidan och spara genom att klicka på “Save configuration”.

 

“Dummy” innehåll

Vi börjar med att skapa en del dummy innehåll så att vi kan se hur sidan kommer att se ut med riktigt innehåll, så navigera dig till Configuration » Development » Generate content, här har du antagligen bara två möjligheter; Article & Basic page, och det är artiklar som ska börja med. Jag ska skapa 50st på en gång Vi skapar även ett par sidor; Portfolio, Webb, Om oss & Kontakt.

 

Verktyg

Jag kommer att använda Aptana Studio för att skapa temat eftersom den lämpar sig väl till PHP projekt och har mycket bra kodkomplettering, men Netbeans är också väldigt bra kandidat för ett PHP projekt. Den andra viktiga verktyget är webbläsaren! Min favorit är Chrome som har utvecklingsverktyg installerade som standard, men en spännande nyhet är Firefox Developer Edition som är en webbläsare dedikerad för webbutveckling


Skapa projektet

Vi börjar med att skapa en bas för temat, som består av en ny PHP-projekt och den ska vi placera under drupal/sites/all/themes för det är där som Drupal kommer att leta efter det nya temat (inte i drupal/themes som innehåller kärnteman som kommer med i installationen), themes mappen kommer inte att finnas från början så du får skapa den. Jag kommer att kalla mitt tema för cr8gr8designs efter min hemsida (cr8gr8designs.com).

 

.info

Den första filen vi ska skapa är en .info fil som ska heta samma som temat, så i mitt fall blir det cr8gr8designs.info och i den ska vi skriva in följande:

 

 

Name

Name är ju rätt självförklarande, och är namnet på temat

 

Description

Description är en beskrivning av temat,

 

Version

Version är tema version vilket kan vara bra speciellt nu i utvecklingsskedet då man gärna vill se förändringar man gör (man kan också tömma cache i admin delen av Drupal)

 

Core (Drupal kompatibilitet)

Sedan har vi core som anger vilken Drupal version som temat är kombitabelt med.

 

Engine » PHPTemplate

Engine förmodas att vara PHPTemplate som standard och dess uppgift är att upptäcka tema funktioner och sidomallar för beteendet av temat.

 

Testa temat…

Nu har vi bara en fil » temanamn.info men vi kan aktivera temat nu och då kommer Drupal att generera sidan åt oss. Det ser inte så snyggt ut men det fungerar!

 

En koll på Drupals standard klasser

Som du ser gör Drupal en hel del utan att man behöver berätta hur den ska göra det. Om vi kollar på källkoden för sidan kan vi lära oss lite om hur Drupal genererar klasser till element, ta en titt på body elementet:

 

Som du ser kan man lätt förstå sig på hur Drupal bestämmer vilka klasser som ska adderas på element, och du kan gå igenom och titta på dom olika klasserna på resten av sidan men vi återkommer till det här senare.

 

HTML dokumentet

HTML dokumentet som vi ska omvandla till ett Drupal tema är en basic HTML5 dokument:

 

 

Den är en basic HTML5 sida utan krusiduller, men meningen är att du ska förstå sammanhanget mellan olika delar när du bygger temat.


Huvudfiler

page.tpl.php

Page.tpl.php är huvudmallen för alla sidor och den som presenterar noder, block, kommentarer, views och andra Drupal byggstenar.

 

Innehåll i page.tpl.php

  • Små PHP snuttar som printar ut variabler:

  • Basic logik:

  • Den ska INTE anropa funktioner, för den ska användas för presaentation och innehåller nästan bara HTML med ytterst små snuttar PHP

 

Typer av .tpl.php filer

Det finns 5 basic mallar för olika delar av temat:

  • page.tpl.php » kontrollerar övergripande funktion av sidan
  • block.tpl.php » till för individuella block (byggstenar i Drupal)
  • node.tpl.php » skriver ut alla noder (artiklar osv.) och har två lägen » teaser som visar en del av innehållet och full där hela noden visas.
  • box.tpl.php » bara en omslutande div comments.tpl.php
  • comment.tpl.php » visar kommentar noder

 

Variationer av .tpl.php

Man kan också skapa helt egna varianter av t.ex. node.tpl.php:

  • node-blog.tpl.php
  • node-article.tpl.php
  • node-news.tpl.php

Sedan har en massa andra varianter också:

 

 

Det finns en massa andra variationer som du kan titta på Drupal.org

 

Vi börjar modifiera page.tpl.php

Okej nu kan vi börja med att modifiera page.tpl.php filen så att den fungerar med Drupal. Skriv in innehållet från HTML dokumentet som jag visade innan i page.tpl.php och så tar vi och fixar till head delen. Skriv in följande mellan head taggarna:

 

 

Sedan har vi title, stilar, skript och en head hook så att man kan komma åt den från andra ställen och fråmst används den av Drupal själv för att lägga till stilar mm.

 

 

Nu kommer Drupal att skriva titeln dynamiskt och ladda in standard stilar och skript och dom som angivits i .info filen, och du kan hitta dessa bland en massa andra:

 

 

Vi fortsätter med dynamisk innehåll

Det finns en massa variabler som man kan använda sig av och du hittar en lista med dom på Drupal.org. Vidare med h1 & h2 » sidotitel  och slogan:

 

 

Huvudmeny

Ny är det dags för huvudmenyn som ska genereras av Drupal dynamiskt, så vi får ändra en del på koden:

 

 

Jag la till en extra länk (i svart) om man är utloggad så dyker det upp en inloggningslänk. Om du laddar om sidan nu så ska den nya menyn fungera som det ska och länka till rätt sida.

Och så har vi sökrutan som finns i en array som kan konfigureras i admin penelen och den ska få plats i header delen av sidan:

 

 

Redigering, hjälp mm. av noder

När man skapar en nod (innehåll) i Drupal så visas ett meddelande om att det lyckades och så finns det flikar där man kan välja att redigera noden, och det är dom sakerna som ska in i huvudinnehållet:

 

 

Om du nu går till en “ensam” nod, som en artikel eller sida kommer du att se tre flikar » View, Edit och Devel (om du har Devel modulen aktiverad)

 

Regions

Regions anger platser i temat som man ska kunna lägga Block med länkar, menyer mm. genom att gå till » Administration » Structure » Blocks, och regionerna skrivs in i .info filen. Drupal tillhandahåller fem standard regioner men om man ska lägga till egna kommer dom att skrivas över, så därför skriver vi i dom.

 

Regioner som finns som standard i Drupal 7:

 

 

Du hittar en lista med standard variabler för Block inställningar på Drupal.org

Vi ska lägga till stöd för ett gäng regioner i .info filen och ett par egna specialare så att du kan göra liknande modifieringar i framtiden:

 

 

Vi lägger till dom där två footer regionerna i page.tpl.php mallen:

 

 

Och så dom två sidospalterna på varsin sida om huvudinnehållet (eller där du tycker att det passar att placera dom):

 


Lämna en kommentar

E-postadressen publiceras inte. Obligatoriska fält är märkta *

En tanke om “HTML till Drupal Tema