Drupal-teeman luominen alusta alkaen

Drupal tarjoaa erittäin joustavan tavan rakentaa verkkosivustoja, ja yksi sen suurimmista vahvuuksista on mahdollisuus luoda täysin räätälöityjä teemoja. Vaikka valmiita teemoja on saatavilla runsaasti, monet projektit hyötyvät omasta teemasta, joka on suunniteltu juuri kyseisen verkkopalvelun tarpeisiin.

Oman Drupal-teeman rakentaminen voi aluksi vaikuttaa monimutkaiselta, mutta prosessi on varsin looginen, kun sen pilkkoo pienempiin vaiheisiin. Tässä oppaassa käydään läpi, miten Drupal-teema luodaan alusta alkaen.

Mikä on Drupal-teema?

Teema määrittää, miltä verkkosivusto näyttää käyttäjälle.

Teema vastaa esimerkiksi:

Sivuston ulkoasusta
Sivupohjista
Typografiasta
Väriasetuksista
Sivun rakenteesta

Drupal erottaa sisällön ja esitystavan toisistaan, mikä tekee teemoista joustavia ja helposti ylläpidettäviä.

Teeman kansiorakenne

Kaikki omat teemat kannattaa sijoittaa hakemistoon:

/web/themes/custom/

Luo sinne oma teemakansio esimerkiksi:

/web/themes/custom/yritysteema/

Tyypillinen rakenne näyttää tältä:

yritysteema/
├── css/
├── js/
├── images/
├── templates/
├── yritysteema.info.yml
├── yritysteema.libraries.yml
└── screenshot.png

Selkeä kansiorakenne helpottaa ylläpitoa myöhemmin.

Luo info-tiedosto

Jokaisella Drupal-teemalla on oltava .info.yml-tiedosto.

Esimerkki:

name: Yritysteema
type: theme
description: Mukautettu Drupal-teema
core_version_requirement: ^11
base theme: stable9

Tämä tiedosto kertoo Drupalille:

Teeman nimen
Tyypin
Kuvauksen
Yhteensopivuuden

Ilman tätä tiedostoa Drupal ei tunnista teemaa.

Luo libraries-tiedosto

CSS- ja JavaScript-tiedostot määritellään libraries.yml-tiedostossa.

Esimerkki:

global-styling:
  css:
    theme:
      css/style.css: {}

global-scripts:
  js:
    js/main.js: {}

Tämä tekee resurssien hallinnasta selkeää ja modulaarista.

Liitä kirjastot teemaan

Lisää .info.yml-tiedostoon:

libraries:
  - yritysteema/global-styling
  - yritysteema/global-scripts

Tämän jälkeen Drupal lataa automaattisesti määritellyt tiedostot.

Luo ensimmäinen CSS-tiedosto

Luo hakemistoon:

css/style.css

Voit lisätä esimerkiksi:

body {
  font-family: Arial, sans-serif;
  margin: 0;
}

Tämä on yksinkertainen lähtökohta oman tyylin rakentamiselle.

Twig on Drupalin templating-järjestelmä

Drupal käyttää Twig-templateja HTML-rakenteen muodostamiseen.

Tyypillisiä tiedostoja ovat:

page.html.twig
node.html.twig
block.html.twig
region.html.twig

Näiden avulla voidaan hallita sivuston rakennetta hyvin tarkasti.

Luo page.html.twig

Luo tiedosto:

templates/page.html.twig

Yksinkertainen esimerkki:

<header>
  {{ page.header }}
</header>

<main>
  {{ page.content }}
</main>

<footer>
  {{ page.footer }}
</footer>

Twig erottaa logiikan ja esitystavan toisistaan.

Alueiden määrittely

Drupal käyttää alueita (regions), joihin sisältöä voidaan sijoittaa.

Lisää .info.yml-tiedostoon:

regions:
  header: Header
  content: Content
  sidebar: Sidebar
  footer: Footer

Tämän jälkeen alueet näkyvät hallintapaneelissa.

Lisää kuvia ja JavaScriptiä

Teemaan voidaan lisätä:

Logoja
Kuvakkeita
Animaatioita
Interaktiivisia toimintoja

JavaScript kannattaa pitää mahdollisimman kevyenä suorituskyvyn säilyttämiseksi.

Responsiivinen suunnittelu

Modernien verkkosivujen tulee toimia kaikilla laitteilla.

CSS:ssä kannattaa hyödyntää esimerkiksi:

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

Mobiilikäyttö on nykyään olennainen osa verkkosivuston suunnittelua.

Luo screenshot-kuva

Drupal näyttää teeman hallintapaneelissa esikatselukuvan.

Lisää teemakansioon:

screenshot.png

Tämä helpottaa teeman tunnistamista erityisesti monimutkaisissa ympäristöissä.

Ota teema käyttöön

Kun tiedostot ovat valmiina:

Siirry hallintapaneeliin.
Valitse Appearance.
Etsi uusi teema.
Ota teema käyttöön.

Drupal tunnistaa uuden teeman automaattisesti.

Tyhjennä välimuisti

Drupal käyttää tehokasta välimuistia.

Muutosten jälkeen välimuisti kannattaa tyhjentää:

drush cr

Tai hallintapaneelin kautta.

Tämä varmistaa, että kaikki muutokset näkyvät välittömästi.

Käytä aliteemaa tarvittaessa

Jos haluat hyödyntää olemassa olevaa teemaa pohjana, voit luoda aliteeman.

Hyötyjä:

Nopeampi kehitys
Vähemmän ylläpitotyötä
Helpommat päivitykset

Tämä on yleinen lähestymistapa monissa projekteissa.

Hyödynnä komponenttipohjaista kehitystä

Vuonna 2026 yhä useammat Drupal-projektit rakentuvat uudelleenkäytettävien komponenttien ympärille.

Esimerkkejä:

Hero-lohkot
Kortit
Navigaatiokomponentit
Sisältömoduulit

Komponentit helpottavat suurten projektien ylläpitoa.

Suorituskyky kannattaa huomioida alusta asti

Hyvä teema ei ole pelkästään näyttävä.

Sen tulisi olla myös:

Kevyt
Nopea
Helposti ylläpidettävä

Vältä:

Tarpeetonta JavaScriptiä
Suuria CSS-tiedostoja
Monimutkaisia rakenteita

Suorituskyky vaikuttaa sekä käyttäjäkokemukseen että hakukonenäkyvyyteen.

Dokumentoi teema

Hyvä dokumentaatio helpottaa ylläpitoa.

Kirjaa esimerkiksi:

Käytetyt alueet
Mukautetut template-tiedostot
Erityistoiminnot
Riippuvuudet

Tämä säästää aikaa myöhemmissä kehitysvaiheissa.

Yhteenveto

Drupal-teeman luominen alusta alkaen koostuu selkeästä kansiorakenteesta, .info.yml– ja libraries.yml-tiedostoista, Twig-templateista sekä CSS- ja JavaScript-tiedostoista. Vaikka ensimmäinen oma teema voi tuntua haastavalta, prosessi on hyvin hallittavissa, kun se tehdään vaihe vaiheelta.

Oman teeman rakentaminen tarjoaa täyden hallinnan verkkosivuston ulkoasuun, suorituskykyyn ja käyttäjäkokemukseen. Samalla se antaa mahdollisuuden hyödyntää Drupalin joustavuutta tavalla, johon valmiit teemat eivät aina pysty.