UKMDesignWordpress

UKMDesign for Wordpress-tema

Her er det mye å forklare, så vi får ta det litt etter hvert. Feel free to contribute!

Templates

Wordpress-siden bruker mange ulike templates, som alle er definert i dette temaet.

Opprett template

Opprett en testside

Opprett en side i wordpress
Legg til "tilpasset felt" på siden
Du finner dette under innstillinger for dokumentet (tannhjul oppe til høyre), og "tilpassede felter"
I feltet navn skriver du UKMviseng.
I feltet verdi skriver du navnet på templaten du vil lage. Dette navnet må være det samme som nøkkel-verdien i punkt 7 (i eksempelet er dette mitt_nye_template)
Nå har du en testside du kan bruke.

Opprett template-filer

Lag, eller velg deg en mappe i Controller/, hvor du oppretter Controller-filen din. Se gjerne punkt 7 først for å få en pekepinn på hvor filen bør ligge.
I Views/ oppretter du en .html.twig-fil.
Filen plasseres i en mappe med samme navn som mappen du puttet controlleren din i.
Skriv hei eller noe i template-filen, så du kan se at du har fått opp denne (se standard-template)

Registrer template

Legg til template i templates.yml
Du kan registrere template under controllers: for en av følgende keys:

Key	System
`system`	Systemfunksjoner som innlogging, personvern osv.
`norge`	Brukes på hoved-site'n ukm.no/.
`oppsett`	Disse er tilgjengelige i wordpress, under "Designmal".
`organisasjonen`	Templates for organisasjonssiden (vi bak ukm).
`arrangement`	Templates for arrangement. Typisk kontaktpersoner, program, påmeldte osv.
`statistikk`	De ulike statistikk-sidene våre.
`festivalen`	Templates brukt for den nasjonale festivalen

templates:
  system:
    name: Systemfunksjoner
    controllers:
      autologin:
        name: Auto-innlogging fra UKM Delta
        file: Delta/autologin
        description: >
          Skal alltid være plassert på ukm.no/autologin/ og er den som logger inn
          deltakere når de ønsker å logge inn til arrangørsystemet fra UKM Delta.

# FOR EKSEMPEL
      mitt_nye_template:
        name: Et navn du velger selv
        file: Path/Til/Controllerfil/I/Controller-mappen
        description: >
          En hyggelig beskrivelse av hvor det er tenkt brukt, 
          eller hvordan det fungerer.

Sjekk syntax på templates.yml, så du er sikker på at denne er innafor.
Sjekk ut siden du opprettet i steg 1.

Standard-template

Vanligvis ønsker vi at template skal extende designet vårt, slik at menyen og footeren automatisk blir lagt til riktig. Derfor vil de fleste templates extende Page/Fullpage.html.twig. Hvis du jobber med en template som skal bryte helt ut av det tradisjonelle deisgnet, vil det kunne være aktuelt å extende UKMDesign/Layout/base.html.twig eller UKMDesign/Layout/framework.html.twig.

{% extends "Page/Fullpage.html.twig"|UKMpath %}

{% block page_content %}
    <h1>Wow, nytt template!</h1>
    <p>Og her kommer innholdet</p>

    <!-- Du vil mest sannsynlig bruke en bootstrap-grid -->
    <div class="container">
        <div class="row">
            <div class="col-12">Template i bootstrap-grid</div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="https://github.com/UKMNorge/UKMDesignWordpress/raw/master/url_til_din_js-fil"></script>
{% endblock %}

{% block css %}
    {{ parent() }}
{% endblock %}

Lansering av nye versjoner av tema

Husk: utplassering først må skje på DEV-miljø og etterpå på produksjon.

Lansering av nye versjoner av tema på DEV-miljø

Commit alle endringer på master på https://github.com/UKMNorge/UKMDesign
Update pakken ukmnorge/design på https://packagist.org
Gå på VM gjennom SSH vagrant ssh main
cd /var/www/wordpress/wp-content/themes
git clone dette repoet i en ny mappe med navn UKMDesignWordpress_vX
cd UKMDesignWordpress_vX
composer install
composer update
Skriv navn og versjon av tema i styles.css (for små endringer kan versjon format X.Y.Z brukes. For eks. 5.0.1)
Legg til bildet med navn screenshot.png som skal brukes som thumbnail (valgfritt)
git commit. Commit nye endringer i composer.lock og styles.css
git push
Gjør tema tilgjengelig på https://ukm.dev/wp-admin/network/themes.php
Aktiver det på https://ukm.dev/wp-admin/themes.php

Husk å hente riktig branch på assets https://github.com/UKMNorge/UKMDesignAssets. Assets ligger på /var/www/assets på VM

Lansering av nye versjoner av tema på produksjon

OBS: Utplassering på DEV-miljø må skje først!

Kjør git clone av dette repoet på wordpress/wp-content/themes/
Endre navn av mappen til UKMDesignWordpress_vX (X betyr versjon)
Kjør cd UKMDesignWordpress_vX
composer install (det er sterkt anbefalt å ikke kjøre composer update i produksjon. composer update MÅ kjøres på DEV-miljø og filen composer.lock commites)
Gjør tema tilgjengelig på https://ukm.no/wp-admin/network/themes.php
Aktiver tema på https://ukm.no/wp-admin/themes.php

Husk å hente riktig branch på assets https://github.com/UKMNorge/UKMDesignAssets.

VIKTIG: i tilfelle det nye temaet gir feilmelding da kan det gamle temaet aktiveres igjen.

UKMNorge / UKMDesignWordpress

readme