Käytit 20 minuuttia tyylikkääseen call-to-action-lohkoon. Hioit värit, marginaalit ja tekstit. Viikkoa myöhemmin huomaat rakentavasi samaa lohkoa alusta asti toisella sivustolla. Kuulostaako tutulta?

Lohkojen manuaalinen kopiointi WordPress-sivustojen välillä syö tunteja, joita sinulla ei ole. Mutta Gutenberg ratkaisi tämän ongelman jo kauan sitten: uudelleenkäytettävät lohkot ja JSON-vienti mahdollistavat minkä tahansa lohkon siirtämisen toiselle sivustolle alle minuutissa. Ei lisäosia, ei kokonaisia tietokantavientejä, ei tuskailua XML-tuontien kanssa.

Tämä opas käy läpi jokaisen vaiheen, uudelleenkäytettävän lohkon luomisesta sen tuomiseen erilliselle sivustolle. Lisäksi vaihtoehtoinen lisäosa, joka tekee prosessista vieläkin yksinkertaisemman.

💡 Pikaopas:

• Luo lohko Gutenberg-editorissa ja muunna se uudelleenkäytettäväksi
• Vie se JSON-tiedostona lohkonhallintakäyttöliittymän kautta
• Tuo JSON kohde-WordPress-sivustolla, ja lohko on käyttövalmis
• Vaihtoehtoisesti Blocks Export Import -lisäosalla voit viedä mitä tahansa lohkoja, et vain uudelleenkäytettäviä

Mitä uudelleenkäytettävät lohkot ovat ja miksi tarvitset niitä

Uudelleenkäytettävä lohko Gutenbergissa on tallennettu sisältöpohja, jonka luot kerran ja lisäät sitten mihin tahansa artikkeliin tai sivuun. Muokkaa alkuperäistä lohkoa, ja muutokset päivittyvät kaikkialle, missä sitä käytetään.

Tyypillisiä käyttötapauksia:

• Kiitosviesti tai allekirjoitus jokaisen artikkelin lopussa
• Banneri, jossa on tarjous tai tilauslomake
• Lohko, jossa on yhteystiedot, juridiset tiedot tai tekijänoikeustiedot
• Kuva-liukusäädin tai galleria, jota käytetään uudelleen useilla sivuilla

Ennen Gutenbergia olisit säilyttänyt tällaisia pätkiä työpöydälläsi tekstitiedostossa ja liittänyt ne leikepöydältä. Nyt tämä toimii WordPressin ydintasolla ja siirtyy sivustojen välillä.

Tärkeä huomio: jos lohko on riippuvainen kolmannen osapuolen lisäosasta (esimerkiksi Getwid- tai Stackable-lohkot), kyseisen lisäosan on oltava asennettuna kohdesivustolla. Muuten lohko avautuu virheen kanssa tai menettää osan tyyleistään.

1. Uudelleenkäytettävän lohkon luominen

Avaa Gutenberg-editori kohdasta Artikkelit → Lisää uusi. Klikkaa Lisää lohko (+) -kuvaketta ylätyökalupalkissa ja valitse tarvitsemasi lohkotyyppi. Alla olevassa esimerkissä se on yksinkertainen kappalelohko:

Määritä lohko: lisää teksti, linkit, taustaväri, täyte, kaikki mitä tarvitset lopulliseen ulkoasuun. Esimerkissämme lopputulos on kiitoslohko, jossa on some-linkit ja värillinen tausta:

Tältä valmis lohko näyttää tyylien ja tekstin säätöjen jälkeen:

Tähän asti tämä on tavallinen lohko. Tehdäksesi siitä uudelleenkäytettävän, klikkaa Lisää vaihtoehtoja -kuvaketta (kolme pistettä) lohkon työkalupalkissa ja valitse Lisää uudelleenkäytettäviin lohkoihin:

Anna lohkolle nimi ja klikkaa Tallenna. Valmista: lohko näkyy nyt sivustosi uudelleenkäytettävien lohkojen kirjastossa.

2. Valmiin lohkon käyttäminen julkaisuissa

Tallennetun lohkon lisääminen mihin tahansa julkaisuun tai sivuun käy parilla klikkauksella. Klikkaa Gutenberg-editorissa Lisää lohko (+), vaihda Uudelleenkäytettävät lohkot -välilehdelle ja valitse tarvitsemasi lohko:

Kun olet lisännyt lohkon, klikkaa Esikatsele tai Julkaise ja tarkista lopputulos sivuston etupuolella:

Lohko toimii kaikissa julkaisutyypeissä, jotka tukevat Gutenberg-editoria: julkaisut, sivut, mukautetut julkaisutyypit. Luo kerran, käytä missä tahansa.

3. Lohkon vienti JSON-muodossa

Kun lohko on valmis ja testattu, voit viedä sen siirrettäväksi toiselle sivustolle. Klikkaa Gutenberg-editorissa Lisää työkaluja ja asetuksia -kuvaketta (kolme pistettä oikeassa yläkulmassa) ja valitse Hallinnoi kaikkia uudelleenkäytettäviä lohkoja:

Näyttö, jossa listataan kaikki sivuston uudelleenkäytettävät lohkot, avautuu. Tällä hetkellä niitä on vain yksi, kiitosviesti. Kun luot lisää lohkoja, lista kasvaa:

Vie hiiri lohkon nimen päälle, niin näet Vie JSON-muodossa -linkin. Klikkaa sitä:

Selaimesi lataa tiedoston, jonka pääte on .json. Tallenna se sopivaan kansioon tietokoneellasi:

JSON-tiedoston sisällä on lohkon koko rakenne: HTML-merkintä, tyylit, attribuutit, sisäkkäiset lohkot. Se on itsenäinen tiedosto, joka on valmis tuotavaksi mille tahansa WordPress-sivustolle, jossa Gutenberg on aktiivisena.

4. Lohkon tuonti toiselle sivustolle

Avaa kohde-WordPress-sivustolla Gutenberg-editori (Julkaisut → Lisää uusi). Klikkaa uudelleen Lisää työkaluja ja asetuksia ja valitse Hallinnoi kaikkia uudelleenkäytettäviä lohkoja:

Klikkaa lohkonäkymässä Tuo JSON-muodossa -painiketta, valitse aiemmin lataamasi tiedosto ja klikkaa Tuo:

Valmista. Tuotu lohko ilmestyy listaan ja on heti käytettävissä julkaisuihin lisättäväksi:

Tästä eteenpäin voit käyttää lohkoa toisella sivustolla täsmälleen samoin kuin ensimmäisellä. Toista toimenpide niin monelle lohkolle kuin haluat; rajoituksia ei ole.

Vaihtoehtoinen tapa: Blocks Export Import -lisäosa

Manuaalinen tapa, jossa lohko muunnetaan uudelleenkäytettäväksi, toimii useimmissa tilanteissa, mutta siinä on yksi rajoitus: voit viedä vain uudelleenkäytettäviä lohkoja. Tavallinen lohko, jonka olet juuri suunnitellut, on ensin muunnettava ja vasta sitten vietävä.

ThemeIslen Blocks Export Import -lisäosa poistaa tämän rajoituksen. Se lisää vientipainikkeen suoraan minkä tahansa lohkon valikkoon ilman välivaiheen muunnosta.

Asenna ja aktivoi lisäosa, avaa sitten Gutenberg-editori ja luo lohko. Uusi Vie JSON -vaihtoehto ilmestyy Lisää vaihtoehtoja -valikkoon:

JSON-tiedosto, joka sisältää koko lohkorakenteen, latautuu tietokoneellesi. Tuodaksesi sen toiselle sivustolle klikkaa Lisää lohko (+), vaihda Vimpaimet-välilehdelle ja valitse Tuo lohkoja JSON:sta:

Klikkaa sitten Valitse tiedosto, osoita tietokoneellasi olevaan JSON-tiedostoon ja klikkaa Lähetä:

Lisäosamenetelmässä on yksi varjopuoli: tällä tavalla tuotuja lohkoja ei tallenneta sivuston uudelleenkäytettävien lohkojen kirjastoon. Ne ovat olemassa vain JSON-tiedostona tietokoneellasi. Manuaalinen menetelmä (osiot 1-4) sen sijaan tallentaa lohkon WordPressin tietokantaan, joten se pysyy käytettävissä tavallisen lohkonhallintakäyttöliittymän kautta.

Menetelmän valinta riippuu tilanteestasi: kertaluontoiseen siirtoon omien sivustojesi välillä ota lisäosa (se on nopeampi); jatkuvaan työskentelyyn lohkokirjaston kanssa useilla sivustoilla opettele natiivin uudelleenkäytettävän lohkon vienti.

Video: Gutenberg-lohkojen vienti ja tuonti käytännössä

Katso lyhyt video-opas, joka näyttää koko kierron uudelleenkäytettävän lohkon luomisesta sen tuomiseen toiselle WordPress-sivustolle:

⁉️🤔 Usein kysytyt kysymykset

Voinko viedä useita lohkoja yhdessä tiedostossa?

Kyllä. Valitse editorissa useita lohkoja (pidä Shift pohjassa ja klikkaa jokaista), ryhmitä ne Lisää uudelleenkäytettäviin lohkoihin -toiminnolla ja vie tuloksena oleva ryhmä yhtenä JSON-tiedostona. Blocks Export Import -lisäosa tukee myös usean lohkon vientiä: valitse lohkot ja valitse Vie JSON, jolloin kaikki valitut lohkot päätyvät yhteen tiedostoon.

Mitä teen, jos tuotu lohko näkyy väärin?

Kolme todennäköistä syytä. Ensimmäinen: lisäosaa, jonka lohkoihin tuotu sisältö perustuu (Getwid, Stackable, Kadence Blocks tai vastaava), ei ole asennettu kohdesivustolle. Asenna lisäosa ja tuo uudelleen. Toinen: sivustojen teemat eroavat CSS:ltään merkittävästi, joten lohko saattaa periä vääriä fontteja tai välistyksiä. Säädä lohkon asetuksista tai lisää mukautettua CSS:ää. Kolmas: JSON-tiedosto vioittui siirron aikana; lataa ja tuo se uudelleen.

Miten erotan tavallisen lohkon uudelleenkäytettävästä lohkosta editorissa?

Uudelleenkäytettävä lohko on Gutenberg-editorissa korostettu violetilla reunuksella ja sen työkalupalkissa on uudelleenkäyttökuvake (kaksi silmukkaa muodostavaa nuolta). Tavallisella lohkolla on sininen reunus ilman erityistä kuvaketta. Kun viet hiiren uudelleenkäytettävän lohkon päälle, sen nimi tulee näkyviin.

Säilyvätkö teeman tyylit, kun lohko viedään?

Osittain. JSON sisältää upotetun merkinnän ja lohkon attribuutit (taustavärin, tekstikoon, liukuvärit, kaiken Gutenbergin asetusten kautta määritellyn). Aktiivisen teeman style.css-tiedostossa määritellyt tyylit eivät sisälly JSONiin: ne kuuluvat teemalle, eivät lohkolle. Siksi toisella sivustolla, jossa on eri teema, lohko voi näyttää erilaiselta. Ulkoasun kannalta kriittisissä lohkoissa kannattaa määrittää keskeiset tyylit lohkon omien asetusten kautta teeman CSS:n sijaan.

Onko viedyllä JSONilla kokorajoitusta?

Teknisesti ei, mutta erittäin suuret lohkot, joissa on kymmeniä sisäkkäisiä elementtejä, voivat tuottaa useiden megatavujen kokoisen JSON-tiedoston. Tällaista tiedostoa tuotaessa palvelimen PHP-asetusten upload_max_filesize-direktiivi astuu voimaan (oletus on 2 Mt). Jos JSON ylittää rajan, nosta direktiivin arvoa php.ini-tiedostossa tai jaa lohko pienempiin osiin.

Milloin manuaalinen vienti päihittää lisäosan

Manuaalinen tapa uudelleenkäytettävien lohkojen kautta on sisäänrakennettu WordPressin ytimeen. Se ei ole riippuvainen kolmannen osapuolen päivityksistä, ei lisää ylimääräistä koodia sivustollesi ja tallentaa lohkot tietokantaan, joten näet ne tavallisessa hallintakäyttöliittymässä.

Blocks Export Import -lisäosa on nopeampi, kun haluat vain napata lohkon ja siirtää sen heti tallentamatta kirjastoon. Mutta jos työskentelet järjestelmällisesti vakiolohkojen joukolla useilla sivustoilla, opettele natiivi uudelleenkäytettävä vienti. Lohkokirjasto, johon pääsee käsiksi mistä tahansa artikkelista, maksaa lopulta takaisin sen ylimääräisen muunnosklikkauksen.

Kokeile molempia tapoja testisivustoparilla ja valitse se, joka sopii työnkulkuusi. Kymmenen minuutin asennus tänään säästää kymmeniä tunteja vuoden mittaan.