Tässä artikkelissa käydään läpi esimerkkejä vapaavalintaisten teema-asetuksien käyttämisestä.

Lue myös:

Valintalistan (<select>) toteuttaminen

Tässä esimerkissä valintalistatyyppistä asetusta käytetään määrittämään <h1>-tason otsikkojen fontti.

  1. Lisää teeman theme.xml-asetustiedostoon valintalista-asetus ja määritä siellä valittavissa olevat arvot:
    <?xml version="1.0"?>
<Theme>
    ...
    <ThemeSettings>
        <Setting
                type="select"
                name="font_family_heading"
                name="font_family_heading_label"
                description="font_family_heading_description"
                default="Lato">

            <Option value="font-family-heading-cormorant" label="Cormorant Garamond" />
            <Option value="font-family-heading-contrail" label="Contrail One" />
            <Option value="font-family-heading-mochiy" label="Lato" />
        </Setting>
    </ThemeSettings>
    ...
</Theme>
  2. Lisää asetuksen käyttämät tekstit teeman kielitiedostoon (esim. translations/theme.en.yaml):
    font_family_heading_label: Main heading font
font_family_heading_description: Select font for main heading
  3. Lisää teeman <head>-elementtiin toiminto, joka käyttää valintalistan arvoja:
    {Doctype}
<html>
    ...
    <head>
        ...
        <style type="text/css">
            h1 {
                font-family: {Setting(name: 'primary_color')};
            }
        </style>

Nyt teema-asetusten valikossa on uusi Main heading font -niminen <select>-valikko, josta <h1>-otsikoille voi valita fontin.

Numerovalinnan toteuttaminen

Tässä esimerkissä toteutetaan numerokenttä, jonka avulla teeman käyttäjä voi asettaa yleisen oletusfonttikoon kaikelle tekstille (<body>-elementille):

  1. Lisää teeman asetuksiin numerokenttäasetus:

    Kentälle voi asettaa oletusarvon, minimi- ja maksimiarvot, step-arvon sekä yksikön:

    <?xml version="1.0"?>
<Theme>
    ...
    <ThemeSetting>
        <Setting
            type="integer"
            name="font_size"
            label="font_size_label"
            description="font_size_description"
            default="12"
            min="0"
            max="24"
            step="1"
            unit="px" />
    </ThemeSetting>
    ...
</Theme>
  2. Lisää asetuksen käyttämät tekstit teeman kielitiedostoon:
    font_size_label: Font size
font_size_description: Enter font size for all text
  3. Lisää teemaan toiminto, joka käyttää numerokentän arvoa:
    {Doctype}
<html>
    ...
    <head>
    ...
        <style>
            body {
                font-size: {Setting(name: 'font_size')}
            }
        </style>

    font-size-määrityksessä ei tarvitse käyttää yksikköä, sillä se on valmiina mukana asetusmäärityksessä.

Nyt teema-asetusten valikossa on uusi Main heading font -valintalista, josta <h1>-otsikoille voi valita fontin.

Värimäärityksen toteuttaminen

Tässä esimerkissä lisätään teema-asetuksiin värinvalintakenttä, joka määrittää <p>-elementtien tekstin värin:

  1. Lisää teeman asetustiedostoon theme.xml värikoodin valinta-asetus.
    <?xml version="1.0"?>
<Theme>
    ...
    <ThemeSettings>
        <Setting
            type="color"
            name="primary_color"
            label="primary_color_label"
            description="primary_color_description"
            default="#378940"/>
    </ThemeSettings>
    ...
</Theme>

    Asetus lisää teema-asetuksiin WYSIWYG-väripyöräelementin, josta teeman käyttäjä voi valita värin.

  2. Lisää teeman kielitiedostoon (esim. translations/theme.en.yaml) asetuksen käyttämät tekstit:
    primary_color_label: Primary color
primary_color_description: Primary color description
  3. Lisää teemaan CSS-merkkaus, joka käyttää käyttäjän valitsemaa väriä.

    Tämä esimerkki asettaa käyttäjän valitseman värin kaikkien <p>-elementtien tekstin väriksi:

    {Doctype}
<html>
    ...
    <head>
        ...
        <style type="text/css">
            p {
                color: {Setting(name: 'primary_color')};
            }
        </style>

    Käyttäjän valitsema väri tulostuu teemaan hex-koodina.

Nyt teeman asetuksissa on uusi Primary color -asetus, jossa käyttäjän valitsema väri toimii tekstikappaleiden värinä.