WordPress-teeman kehittäminen
Koskivirta, Jasu (2022)
2022
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-202202282928
https://urn.fi/URN:NBN:fi:amk-202202282928
Tiivistelmä
Tämän opinnäytetyön aiheena on uuden WordPress-teeman kehittäminen toimeksiantajan web-kehityksen tueksi. Päätavoitteena on, että teeman uudistuksen avulla siirrytään WordPress-sisällönhallintajärjestelmän klassisen sisältöeditorin käytöstä uuteen Gutenberg-editoriin. Gutenberg eroaa vanhasta editorista siten, että se perustuu lohkoihin, jotka toimivat erilaisina sisältöelementteinä. Sivuston muokkausnäkymän on tarkoitus vastata lopullista sivuston ulkoasua, eikä täten erillistä esikatseluikkunaa tarvita. Toimeksiantajana työssä on Mikkelissä sijaitseva Mainostoimisto Groteski Oy, joka toteuttaa perinteisten mainostoimiston palveluiden lisäksi näyttäviä ja visuaalisia digitaalisia ratkaisuja.
Opinnäytetyön aluksi esitellään sisällönhallintajärjestelmän perusteet, minkä jälkeen teoriaosuus keskittyy WordPressin ominaisuuksiin kuten lisäosiin. Työssä käsitellään myös keskeisimmät teeman kehittämiseen käytetyt web-tekniikat, kuten PHP, SCSS ja jQuery. Tarkoituksena on esitellä kehitysprosessi sellaisille henkilöille, jotka haluavat perehtyä WordPress-sivujen kehityksen ytimeen eli teemaan, joka määrittää verkkosivuston rakenteen, toiminnallisuuden sekä ulkoasun.
Ennen varsinaista kehitystyön aloittamista uutta teemaa suunniteltiin ja määriteltiin yhdessä toimeksiantajan kanssa. Gutenberg-editorin yhteiskäyttöä Advanced Custom Fields -lisäosan kanssa testattiin lokaalissa kehitysympäristössä, minkä jälkeen teeman rakentaminen ja siihen luotavien lohkojen kehitys alkoi. Lohkon rakentaminen aina rekisteröinnistä ohjelmointiin saakka esitellään työssä kattavasti vaihe vaiheelta, minkä jälkeen niiden ulkoasu ja responsiivisuus testattiin opinnäytetyötä varten rakennetulla demosivulla.
Tuloksena on aiempaa helppokäyttöisempi ylläpitonäkymä asiakkaille verkkosivustojen sisällönsyöttöä varten sekä monipuolinen ja selkeä kustomoitava pohja toimeksiantajan web-kehityksen käyttöön. Uusi teema toimii ensimmäisenä julkaistuna versiona, minkä jälkeen sen jatkokehitys alkaa kehittäjiltä saatujen kokemusten sekä asiakkaiden palautteiden perusteella. The purpose of this thesis was to develop a theme using the content management system WordPress. The main objective was that the former classic content editor would be replaced with the new Gutenberg editor based on block type content. Blocks are content elements that users can add to their website at edit screen to create different content layouts. The site edit screen view will match the final visual look of the website so there is no need for a separate preview window with the Gutenberg editor.
The theoretical part of this thesis introduced the basics of a content management system before focusing on the update history and features of WordPress. This thesis also explained technologies used for developing the theme, such as PHP, SCSS and jQuery. The purpose was to present the development process to people who wanted to become more familiar with WordPress development and themes. The theme is like core for a WordPress website, because it defines the structure, functionality and visual layout.
Before the actual development, the new theme was designed and defined together with the client company. The usage of the Gutenberg editor with the Advanced Custom Fields plugin was tested before developing blocks and other elements for the new theme. The theme was developed in a local development environment and its responsiveness was tested on a demo website compiled for this thesis.
The main result of this thesis was an easy-to-use edit screen for customers to update content on their websites. The new theme also works as customizable and a versatile base for web developers at Mainostoimisto Groteski Oy. It will be the first published version and its further development will continue based on the information gained from the developers and customer feedback.
Opinnäytetyön aluksi esitellään sisällönhallintajärjestelmän perusteet, minkä jälkeen teoriaosuus keskittyy WordPressin ominaisuuksiin kuten lisäosiin. Työssä käsitellään myös keskeisimmät teeman kehittämiseen käytetyt web-tekniikat, kuten PHP, SCSS ja jQuery. Tarkoituksena on esitellä kehitysprosessi sellaisille henkilöille, jotka haluavat perehtyä WordPress-sivujen kehityksen ytimeen eli teemaan, joka määrittää verkkosivuston rakenteen, toiminnallisuuden sekä ulkoasun.
Ennen varsinaista kehitystyön aloittamista uutta teemaa suunniteltiin ja määriteltiin yhdessä toimeksiantajan kanssa. Gutenberg-editorin yhteiskäyttöä Advanced Custom Fields -lisäosan kanssa testattiin lokaalissa kehitysympäristössä, minkä jälkeen teeman rakentaminen ja siihen luotavien lohkojen kehitys alkoi. Lohkon rakentaminen aina rekisteröinnistä ohjelmointiin saakka esitellään työssä kattavasti vaihe vaiheelta, minkä jälkeen niiden ulkoasu ja responsiivisuus testattiin opinnäytetyötä varten rakennetulla demosivulla.
Tuloksena on aiempaa helppokäyttöisempi ylläpitonäkymä asiakkaille verkkosivustojen sisällönsyöttöä varten sekä monipuolinen ja selkeä kustomoitava pohja toimeksiantajan web-kehityksen käyttöön. Uusi teema toimii ensimmäisenä julkaistuna versiona, minkä jälkeen sen jatkokehitys alkaa kehittäjiltä saatujen kokemusten sekä asiakkaiden palautteiden perusteella.
The theoretical part of this thesis introduced the basics of a content management system before focusing on the update history and features of WordPress. This thesis also explained technologies used for developing the theme, such as PHP, SCSS and jQuery. The purpose was to present the development process to people who wanted to become more familiar with WordPress development and themes. The theme is like core for a WordPress website, because it defines the structure, functionality and visual layout.
Before the actual development, the new theme was designed and defined together with the client company. The usage of the Gutenberg editor with the Advanced Custom Fields plugin was tested before developing blocks and other elements for the new theme. The theme was developed in a local development environment and its responsiveness was tested on a demo website compiled for this thesis.
The main result of this thesis was an easy-to-use edit screen for customers to update content on their websites. The new theme also works as customizable and a versatile base for web developers at Mainostoimisto Groteski Oy. It will be the first published version and its further development will continue based on the information gained from the developers and customer feedback.