1.5 Lisäosia
Katsaus lisäosiin
Kaikkiaan lisäosat ovat työkaluja, joilla saada toteutettua haluttuja toimintoja sivustolle. Yhteydenottolomake, tapahtumakalenteri ja erilaiset toiminnallisuudet hallintapaneeliin ovat tavallisimpia toimintoja, joita kaivataan sivustolle. Ne voidaan toteuttaa asentamalla WordPressiin lisäosia. Katsotaan hieman mitä lisäosia erilaisiin tarkoituksiin on tarjolla.
Saavutettavuutta tekijöille
WordPress ei sellaisenaan ole välttämättä erityisen saavutettava verkkosivualusta perustekijälle. Saattaa herätä kysymyksiä kuten kuinka voin käyttää jotain fonttia, jota ei löydy suoraan fonttivalikoimasta editorissa? tai kuinka voin lisätä koodia sivun head-osaan? Toimintoihin on olemassa ratkaisu lisäosissa.
Fontit paikallisesti
Kun asetetaan sivuston typografiaa ja tiedetään mitä fontteja tullaan käyttämään sivustolla, voidaan fontit ladata mediakirjastoon ja käyttää fontteja suoraan sieltä paikallisesti. Lisäosalla Custom Fonts – Host Your Fonts Locally ladataan fonttitiedostot mediakirjastoon ja ne ilmestyvät käytettäväksi esimerkiksi Elementorin Typografia-asetukseen.
Etuna tällä metodilla on, että fontteja ei tarvitse ladata Googlen palvelimelta tai muualta ulkoisesta lähteestä vaan ne käytetään paikallisesti sivustolla. Etu sivujen latausta ajatellen. Lisäksi asennetut fontit näkyvät Elementorin fonttivalikoimassa ylimpänä ja ovat nopeasti valittavissa ilman etsimistä ja vierittämistä.
Yhteydenottolomake
Yhteydenottolomake on sivustolla miltei välttämätön ja sen toteuttamiseen on useita eri lisäosia tarjolla.
Contact Form 7 on yksi suosituimpia sovelluksia erilaisten lomakkeiden toteuttamiseen sivustolla. Mikä parasta lisäosa on suurimmalta osaltaan käännetty myös suomeksi mikä helpottaa vähemmän englannin teknistä sanastoa hallitsevan lomakkeen tekoa.
Muita vaihtoehtoja yhteydenottolomakkeille ovat:
Lomakelisäosiin on tarjolla myös lisätoimintoja erillisten lisäosien avulla. Jos lomakkeen toimintaan tarvitsee toimintoa, jota lomakelisäosa ei suoraan tarjoa, kannattaa hakea lisäosaa toimintoon.
Sivuston optimointi
Sivuston optimointi on olennainen osa verkkosivujen kehittämistä ja WordPress tarjoaa lukuisia lisäosia myös tehostamistoimiin. WP-Optimize -lisäosa auttaa sinua siivoamaan ja optimoimaan WordPress-tietokannat, joihin kertyy ajan myötä turhaa tietoa. Sivustosi toimii paremmin, kun siivoat tietokannat välillä. Tämän lisäosan avulla tietokantojen puhdistuksen saa myös automatisoitua.
Imagifylla voit optimoida ilmaiseksi 25 megatavun (noin 250 kuvan) verran kuvia joka kuukausi. Yleensä kuvat optimoidaan luonnollisesti jo ennen palvelimelle laittamista mutta lisäosaa kannattaa käyttää lisäksi, jotta saavutetaan optimaalinen tulos kuvien osalta. Imagify osaa muuttaa kuvat myös uuteen Googlen WebP-kuvamuotoon.
WP Fastest Cache on työkalu sivuston välimuistin hallintaan. Välimuistin optimointi vaikuttaa erittäin merkittävästi sivuston toimivuuteen ja latautumisnopeuteen. Kun otat lisäosan käyttöön, kannattaa tarkistaa sivuston toiminta. Jos ongelmia ilmenee poista combine css ja combine js käytöstä. Edellä mainitut pyrkivät optimoimaan sivuston CSS-muotoilukoodin ja javascript-koodin ja joskus lisäosa menee kajoamaan sellaisiin osiin koodista, joka aiheuttaa virheitä sivustolla.
Muita välimuistiin liittyviä lisäosia:
Kalenterit
Kalenterilisäosa on usein käytössä esimerkiksi yhdistyksillä ja tapahtumia järjestävillä tahoilla. Tapahtumakalenterilisäosista Events Manager on oman kokemukseni mukaan ilmaisversioista tehokkain ja monipuolisin toiminnoiltaan. Events Manageria ei pidä sekoittaa WP Event Manageriin, joka on toinen lisäosa.
Events Manager kalenterilisäosa on melko tekninen muokata ja tapahtumien sivut ovat sellaisenaan melko pelkistetyt. Tapahtumasivujen muotoilut on toteutettava koodaamalla CSS:llä mikä tekee lisäosan hieman haastavaksi. Toisaalta muokattavuus, vaikkakin tekninen, mahdollistaa todella suuret mahdollisuudet toteuttaa omaperäinen kalenterisovellus sivulle.
Events Manager antaa jo ilmaisversiossaan mahdollisuuden luoda toistuvia tapahtumia, mikä on hyvä ominaisuus. Se sisältää myös varaustoiminnon ja mahdollisuuden asettaa tapahtumien lisäämistoiminnon myös sivustoille.
Muissa kalenterilisäosissa edellä mainituista toiminnoista joutuu usein hankkimaan lisäosan maksullisen Premium-version.
Muita kalenterilisäosia ovat:
Muita hyödyllisiä lisäosia
Duplicate Post on Yoastilta todella kätevä työkalu erityisesti sivustojen rakentamisvaiheessa, sillä sillä voi tehdä kopion kokonaisesta sivusta tai artikkelista. Sivuston sivuthan pyritään usein tekemään noudattamaan suunnilleen samaa linjaa muotoilussa ja Duplicate Post -lisäosan avulla sisältöä ei tarvitse aina luoda uudelleen.
Mediakirjaston järjestämiseen on olemassa käteviä lisäosia, joilla voit luoda omia kategorioita mediatiedostojen käyttökohteiden mukaan. Normaalisti WordPress sijoittaa ladatut tiedostot latauspäivämäärän mukaan kansioihin, mikä ei ole useinkaan käyttäjälle kovin kätevää. Lisäosilla saadaan tähänkin toiminnallisuuteen korjaava liike.
Medialisäosia:
Hakukoneoptimointi
Hakukoneoptimointi tarkoittaa toimenpiteitä, joilla pyritään parantamaan yksittäisen verkkosivun tai kokonaisen verkkosivuston sijoituksia hakukoneiden hakutulosten luettelossa tiettyjä hakusanoja käytettäessä. Hakukoneoptimointiin on WordPressissä useita lisäosia, joilla asettaa sivujen hakusanat ja muut optimointiin tarvittavat tiedot sivun koodiin. Lisäosat sisältävät usein myös vinkkejä sivuston optimointiin.
Rank Math SEO, All in One SEO Pack ja Yoast SEO ovat kaiketi suosituimpia lisäosia hakukoneoptimoinnissa. Lisäosissa asetetaan sivujen avainsanat ja muut hakukoneoptimointiin liittyvät tiedot sivuille.
Google Search Console on Googlen maksuton palvelu, jonka avulla voit seurata ja ylläpitää sivustosi näkyvyyttä Google-hakutuloksissa sekä suorittaa vianetsintää. Google Haun tuloksissa näkyminen ei edellytä Search Consoleen rekisteröitymistä, mutta Search Console voi auttaa sinua ymmärtämään Googlen tapaa nähdä sivustosi ja optimoimaan sivustosi näkyvyyttä.
Google Analytics ei ole suoranainen sivujen hakukoneoptimointityökalu mutta sillä voi seurata sivustojen liikennettä ja toimii apuvälineenä optimointia suunnitellessa. Analyticsiin löytyy myös Google Analytics Dashboard -lisäosa, jonka avulla Analyticsin paneelin voi sisällyttää osaksi WordPressin hallintapaneelia.
Kuvasliderit
Kuvasliderit ja erilaiset työkalut näyttää kuvasisältöä sivuilla ovat mukava tapa saada eloa ja näyttävyyttä sivustoille. Jo teemojen yhteydessä mainitsin Slider Revolution lisäosan, joka on varmasti Slider-työkaluista edistynein. Jos kuitenkaan sivuston teemaan ei kuulu Revolution Slideria eikä ole halua sijoittaa rahaa slideriin, melko näyttäviä ilmaisiakin vaihtoehtoja on tarjolla.
Smart Slider 3 -kuvalider on käytössä tälläkin sivustolla etusivulla. Lisäosalla voi luoda useita slidereita ja ne liitetään sivulle lyhyen koodin avulla.
Slider, Gallery, and Carousel by MetaSlider on yksi hyvä vaihtoehto sivujen kuva- ja videosisällön esittämiseen.
Sosiaalinen media
On useita lisäosia, joiden avulla voit tuoda sosiaalisen median sisältöä sivuille. Sivuilla tavallisesti esitetään myös somepainikkeet, joiden hallitsemiseen on omat lisäosansa. Seuraavassa esimerkkiä sosiaalisen median lisäosista:
Edellä siis vain muutama esimerkki olemassa olevista hyödyllisistä lisäosista.
Hakemalla Googlesta ja WordPressin lisäosat-paneelista löytyy kosolti (eh 🙂 … tuhansia) lisää.
Yhteydenottolomake Contact Form 7
Opetellaan yksinkertaisen yhteydenottolomakkeen luominen Contact Form 7-lisäosan avulla. Asenna ja ota käyttöön lisäosa WordPressissä ja siirry lisäosan osioon hallintapaneelissa valintaan Yhteydenotto/Yhteydenottolomakkeet (Contact/Contact Forms).
Lisäosa muodostaa valmiiksi yksinkertaisen esimerkkilomakkeen yhteydenottolomakkeeksi ja avataan kyseinen lomake muokattavaksi (Edit). Nimeä aluksi lomake uudelleen suomen kielellä, jos haluat vaikka ”Yhteydenotto” tai jotain muuta vastaavaa.
Yhteydenottolomake Contact Form 7
Opetellaan yksinkertaisen yhteydenottolomakkeen luominen Contact Form 7-lisäosan avulla. Asenna ja ota käyttöön lisäosa WordPressissä ja siirry lisäosan osioon hallintapaneelissa valintaan Yhteydenotto/Yhteydenottolomakkeet (Contact/Contact Forms).
Lisäosa muodostaa valmiiksi yksinkertaisen esimerkkilomakkeen yhteydenottolomakkeeksi ja avataan kyseinen lomake muokattavaksi (Edit). Nimeä aluksi lomake uudelleen suomen kielellä, jos haluat vaikka ”Yhteydenotto” tai jotain muuta vastaavaa.
Form-välilehti
Form-välilehdellä rakennetaan sivulla näkyvä lomake ja sen kentät. Kentät ovat näkymässä (1) HTML-merkkauskielellä ja niitä voidaan lisätä klikkaamalla kohdassa 2 olevista kenttien painikkeista, joista avautuu kentän luonti-ikkuna.
- Lomakkeen koodaus näkymä
- Lomakkeelle lisättävien kenttien painikkeet
- Contact Form 7 lisäosan välilehdet lomakkeelle
- Lomakkeen kopioitava lyhytkoodi (Short code).
- Lomakkeen nimi
- Lomakkeen tallennus, poisto ja kloonauspainikkeet
Kentän lisääminen
Aloitetaan rakentamaan lomaketta sivustolle lisäämällä Etunimelle tarkoitettu kenttä. Olemassa olevat kentät ovat englanninkielisiä, joten luodaan harjoituksen ja esimerkin vuoksi manuaalisesti uusi etunimelle varattu tekstikenttä. Klikkaa Text-painiketta lisättävien kenttien painikkeista (2), joka avaa kentän luonti-ikkunan.
- Kentän tyypin valinta ja mahdollisuus asettaa kenttä pakolliseksi täyttää.
- Kentän nimi ja mahdollisuus asettaa kentän nimeksi asetettu arvo automaattisen täytön määritteeksi.
- CSS-luokan voit määrittää myös, jolloin kenttään voidaan kohdistaa CSS-muotoiluja helpommin.
- Kannattaa asettaa myös minimi- ja maksimipituus kentälle vaikka vain tietoturvallisuudenkin takia.
- Kentän oletusarvo tarkoittaa, että määritetty arvo tulee oletuksena kentän arvoksi, jollei selaaja kirjoita kenttään mitään.
- Koodin esikatselu ja Tagin lisäämispainike.
Luodaan siis Etunimelle kenttä lomakkeelle ja asetetaan arvoiksi kentälle kuvanmukaiset arvot. Käytetään myös CSS-luokkaa ”nimi” asetuksena. Tulemme asettamaan joitain muotoiluja lomakkeelle myöhemmin.
Label?
Kuten huomaat kentästä selaajaa informoiva Label jäi puuttumaan ja sitä ei luotu automaattisesti, joten se on lisättävä käsin kentän luomisen jälkeen.
Täydennä siis label koodiin:
<label> Etunimi
[text* etunimi autocomplete:name class:nimi minlength:2 maxlength:20] </label>
Tee vielä sukunimelle oma kenttänsä esimerkiksi kopioimalla etunimen kenttä ja muuttamalla siihen tiedot: Sukunimi, sukunimi, autocomplete arvoksi family-name, CSS-luokaksi sukunimi ja maksimipituudeksi vaikka 30 merkkiä.
