Oma WordPress teema

2.2.1. Visual Studio Code

Tagged with

Oman teeman koodaamisessa käytetään Visual Studio Code -edistynyttä koodieditoria. Asenna ohjelmisto omalle koneelle, luo myös local -paikalliselle palvelimelle uusi asennus.

Visual Studio Code

Visual Studio Code on Microsoftin kehittämä koodieditoriohjelmisto, jota käytämme editorina tällä kurssilla. Ohjelmisto perustuu avoimeen lähdekoodiin ja se on erityisesti ohjelmoijille tarkoitettu tekstieditori. Ohjelmiston voi asentaa Linux, MacOS ja Windows käyttöjärjestelmiin. Ohjelmassa on tuki virheenkorjaukselle, Git-versionhallinnalle, syntaksin korostukselle, automaattiselle koodin täydennykselle ja paljon muuta. Ohjelmistoon voidaan lisätä myös Microsoftin Copilot AI, jonka avulla voidaan esimerkiksi luoda tiedostojen koodaukset.

Visual Studio Code ohjelmisto. Lataa ohjelmisto siirtymällä lataussivustolle.
Visual Studio Code ohjelmisto. Lataa ohjelmisto siirtymällä lataussivustolle. Klikkaa logoa.

1. Alkutoimet ja teeman kansion luominen

Visual Studio Code -ohjelmaan voidaan avata olemassa olevan WordPress-asennuksen tiedostot näkyviin. Oletan, että olet asentanut WPLocal ohjelmiston ja tehnyt Localiin WordPress asennuksen. Jos et ole tehnyt vielä niitä tee ne nyt ja mene sen jälkeen vasta eteenpäin ohjeissa.

Ohjeet vaiheittain:

  1. Avaa Local-ohjelmisto ja käynnistä WordPress-asennuksen projekti Localista (4).
  2. Avaa seuraavaksi Localista sivuston kansio klikkaamalla sivuston nimen alla olevaa painiketta (linkkitekstiä) Go to site folder(5)
  3. Navigoi resurssienhallinnassa kansioon, jossa teemat sijaitsevat (app/public/wp-content/themes)
  4. Luo kansioon uuden teeman tiedostoille oma kansio ja nimeä se esimerkiksi omateema. Kansion nimenä kannattaa käyttää oman teeman nimeksi tulevaa nimeä ja jättää nimestä pois välilyönnit, erikoismerkit ja suuraakkoset. Voit siis nimetä teeman kansion oman maun mukaan mutta itse nimeän sen nimellä omateema.

Juuri luotu kansio on kansio, joka tullaan avaamaan Visual Studio Code -editorissa, jossa aletaan luomaan teemaan vaadittuja tiedostoja. Siirrytään siis seuraavaksi Visual Studio Code -ohjelman pariin.

WPLocal ohjelmiston käyttöliittymä.
WPLocal ohjelmiston käyttöliittymä.
Nimeä teemasi kansio.
Nimeä teemasi kansio teeman nimellä.

2. Visual Studio Code käyttöliittymä

Tutustutaan Visual Studio Code -ohjelman käyttöliittymän oleellisimpiin toimintoihin, joita käytetään harjoittelemisessa.

Käyttöliittymä (vrt.kuva):

  1. Toimintojen paneeli
  2. Toimintojen paneelin valinnan toiminnot avautuvat tähän lohkoon.
  3. Valitun tiedoston koodinäkymä, jossa avoimet tiedostot ovat välilehdittäin.
  4. Explorer eli paikka, jossa avatun projektikansion tiedostopuu (tiedostot ja kansiot) näkyy. Sisältyy toiminnot Open Editors, Folders (No Folder Opened) ja Timeline. Seuraavaksi avataan edellisessä kohdassa luotu omateema-kansio kohdasta No Folder Opened.
  5. Ohjelmaan on olemassa paljon lisäosia, joilla voidaan ottaa käyttöön hyödyllisiä ominaisuuksia koodaamisen helpottamiseksi. Niitä voidaan etsiä ja asentaa tästä toiminnosta.
  6. Käyttöliittymän ja ohjelman näkymän hallinta, josta voit muuttaa näkymän omaan käyttöön sopivaksi.
  7. Visual Studio Code -ohjelmistossa voidaan käyttää Microsoftin tekoälyä (AI) Copilot, jonka avulla voidaan luoda koodia maan ja taivaan väliltä. Tällä kurssilla olen luonut koodit valmiiksi chatGPT:n avulla ja testannut niiden toimivuuden, joten emme käytä luultavasti juurikaan Copilotin toimintoa. Jos haluat ottaa sen käyttöön ohjelmassa, Copilotiin joutuu kirjautumaan tai luomaan tilin.

Haetaan seuraavaksi uuden teemamme kansio näkyviin ohjelmaan toiminnon 4 avulla ja luodaan tiedostot, joiden avulla teema saadaan toimimaan WordPressissä.

Visual Studio Code -ohjelman käyttöliittymä.
Visual Studio Code -ohjelman käyttöliittymä.

EXTENSIONS – Lisäominaisuuksia ohjelmaan

Extensions (kuvan kohta 5) on paikka, josta voidaan asentaa Visual Studio Code -editoriin koodaustyötä helpottavia lisäominaisuuksia. Seuraavassa itselläni käytössä olevat lisäominaisuudet:

  • WordPress VS Code Extension Pack: Kokoelma lisäosia työskentelyyn WordPress sivustojen parissa VSCode -ohjelmassa.
  • Github Copilot: Valjasta tekoäly toimintaan ohjelmassa, jolloin voit muokata ja luoda koodeja tekoälyn avulla. Toiminto vaatii kirjautumisen/tilin luomisen Github-palveluun.

3. Avataan Oman teeman tiedostokansio

Avataan oman teeman tiedostokansio Visual Studio Code ohjelmistoon, jotta päästään luomaan tiedostoja kansioon.

Vaiheet:

  1. Avaa Visual Studio Code -ohjelman Explorer ja sieltä kohta No Folder Opened.
  2. Avaa tietokoneen resurssienhallinta klikkaamalla painiketta Open Folder.
  3. Navigoi resurssienhallinnassa tietokoneen tiedostoissa kuvanmukaiseen kohtaan josta löytyy teeman tiedostokansio. WPLocal paikallisen palvelimen ohjelmisto luo normaalisti asennusten tiedostokansion tähän osoitteeseen tietokoneessa (C-levy => Käyttäjät (Users) => Oma käyttäjätili => Local Sites-kansio jne. (vrt. kuva)
  4. Valitse tiedostokansio aktiiviseksi ja klikkaa painiketta Valitse kansio (5).
Teeman kansion hakeminen WPLocal paikallisen palvelimen ohjelmistosta.
Teeman kansion hakeminen WPLocal paikallisen palvelimen ohjelmistosta.

Ohjelma varmistaa, että luotat avattavan kansion omistavaan tahoon ja kohde on mielestäsi luotettava. Tähän voidaan klikata painike
Yes, I trust the authors.

Sulje vielä Welcome-välilehti, jonka jälkeen voidaan alkaa luomaan ja rakentamaan teemamme tiedostoja. Katsotaan siis aluksi hieman mitä tiedostoja on luotava, jotta teema yleensäkään toimii WordPressissä. Klikkaa itsesi seuraavaan artikkeliin.