Skip to content

Kaikki WordPressistä, web-kehityksestä — ja paljon muuta

💡 Kuinka luoda WordPress-sivusto dynaamisella sisällöllä: kaksi toimivaa menetelmää

💡 Kuinka luoda WordPress-sivusto dynaamisella sisällöllä: kaksi toimivaa menetelmää

Suunnittelit etusivun, lisäsit valikon ja jämähdit. Jokainen valikkokohta tarvitsee oman sivunsa: "Kuntosali Arbatilla", "Kuntosali Stroginossa" ja toiset parikymmentä samanlaista. Kopioi ja liitä editorissa? Viikkoa myöhemmin yrittäjä muuttaa jäsenhintaa, ja sinä muokkaat 20 sivua käsin.

Dynaaminen sisältö WordPressissä poistaa tämän ongelman kokonaan. Yksi mallipohja, ja kymmenet (tai sadat) sivut kootaan automaattisesti tietokannasta. Ei kopiointia. Ei ohjelmoijaa jokaista pientä muutosta varten. Alla on kaksi toimivaa menetelmää, jotka kattavat valtaosan todellisista tehtävistä: toimipistekorteista aina luetteloihin ja portfolioihin.

💡 Pikaopas:

  • Mitä dynaaminen sisältö on ja miten se eroaa staattisesta sisällöstä, konkreettisen esimerkin kera
  • Menetelmä 1: Toolset Blocks, visuaalinen mallipohjarakentaja Gutenbergin päällä, ilman yhtäkään koodiriviä
  • Menetelmä 2: Total Theme, sisäänrakennetut dynaamiset mallipohjat WPBakeryn kautta, niille jotka jo käyttävät Totalia
  • Menetelmien vertailutaulukko + päätösmatriisi omaan tehtävääsi

Mitä dynaaminen sisältö on ja miksi staattinen häviää

Tyypillinen WordPress-sivu on staattinen. Teksti, kuvat, painike: kaikki syötetään käsin editorissa. Jos sinulla on 30 kuntosalin ketju ja jokaisella on oma sivunsa, jossa on osoite, kuva ja hinta, joko kopioit sisältöä 30 kertaa tai kutsut kehittäjän muokkaamaan PHP-mallipohjia.

Dynaaminen sisältö toimii eri tavalla. Data säilytetään erillään ulkoasusta, mukautetuissa kentissä ja taksonomioissa. WordPress kokoaa sivun lennossa: se lisää otsikon, hinnan, gallerian ja yhteystiedot tietokannasta valmiiksi rakennettuun mallipohjaan.

Kaavio dynaamisen sisällön toiminnasta WordPressissä

Mekaniikka on yksinkertainen. Kun kävijä avaa "Kuntosali Stroginossa" -sivun, järjestelmä menee tietokantaan, etsii kyseisen nimisen tietueen, hakee siihen liittyvät kentät ja renderöi valmiin sivun. "Kuntosali Arbatilla" -sivulle se käyttää samaa mallipohjaa mutta eri dataa.

Miksi tämä päihittää staattisen:

  • Yksi muutos, kaikkialla. Päivität hinnan mukautetussa kentässä, ja kaikki kyseistä hintaa näyttävät sivut päivittyvät automaattisesti. Ei tarvitse käydä jokaista erikseen läpi.
  • Sisällöntuottajat eivät voi rikkoa ulkoasua. Sinä asetat mallipohjan; tiimi vain täyttää kentät (otsikko, kuvaus, hinta). Ulkoasu ei hajoa.
  • Skaalautuminen ilman tuskaa. Sadannen toimipisteen lisääminen tarkoittaa uuden tietueen luomista ja kenttien täyttämistä. Sivu on valmis minuutissa.
  • Responsiivisuus suoraan paketista. Dynaaminen mallipohja perii teeman responsiivisen ruudukon; mobiiliversio ei vaadi ylimääräistä työtä.
Esimerkki staattisesta WordPress-sivusta

Vasemmalla on staattinen: sisältö on kovakoodattu sivuun. Oikealla on dynaaminen: sama data, mutta mallipohjan tietokannasta kokoamana.

Esimerkki dynaamisesta WordPress-sivusta, jossa tietoja korvataan

Staattisella on tasan yksi haittapuoli, mutta se on kohtalokas: se ei skaalaudu. Heti kun sivustolla on yli tusina samankaltaista sivua, manuaalisesta hallinnasta tulee painajainen. Dynaaminen lähestymistapa poistaa tämän ongelman kokonaan.

Alla on kaksi työkalua eri skenaarioihin. Molemmat ovat käytännössä testattuja.

Menetelmä 1: Toolset Blocks, visuaaliset mallipohjat Gutenbergilla

Toolset Blocks -lisäosa WordPressissä

Toolset Blocks on kaupallinen lisäosa tiimiltä, joka on käyttänyt yli vuosikymmenen työkalujen rakentamiseen mukautettujen sisältötyyppien ja kenttien käsittelyyn WordPressissä. Lisäosa lisää lohkoja dynaamisilla lähteillä Gutenberg-editoriin: sen sijaan että sanoisit "lisää tämä kuva", sanot "lisää nykyisen artikkelin artikkelikuva".

🔗 Toolset Blocks, virallinen sivusto

Suurin etu on nolla aloituskynnystä. Ei yhtäkään koodiriviä. Ei functions.php-tiedostoa. Kokoat vain mallipohjan visuaalisessa editorissa valmiista lohkoista (Kuva, Otsikko, Yksittäinen kenttä) ja määrität tietolähteen. Järjestelmä lisää automaattisesti oikean sisällön kullekin sivulle.

Miten Toolset Blocks toimii konepellin alla

Lisäosa tarjoaa kaksi keskeistä mekanismia:

  • Sisältömallipohjat. Luot yhden ulkoasun kaikille tietyn tyypin artikkeleille, esimerkiksi "Kuntosalit". Mallipohjan sisälle asetat Toolset-lohkoja, jotka on linkitetty dynaamisiin lähteisiin. Kun mikä tahansa tämän tyypin artikkeli avataan, WordPress renderöi mallipohjan ja korvaa siihen kyseisen artikkelin datan.
  • Dynaamiset lähteet lohkoille. Jokainen Toolset-lohko voi hakea datansa ei siitä "mitä editoriin on kirjoitettu" vaan tietokannasta: artikkelikuva, mukautetun kentän arvo, artikkelin otsikko, taksonomia. Asetat sen kerran; järjestelmä korvaa tiedot automaattisesti.
Esimerkki Toolset Blocks -sisältöpohjasta kuntosalille

Mallipohjan luominen vaihe vaiheelta

Ennen aloittamista asenna Toolset Blocks (lisäosa on maksullinen; linkki yllä). On myös hyödyllistä kerrata Gutenberg-editorin perusteet, sillä mallipohjat rakennetaan siellä.

Vaihe 1: Luo sisältömallipohja

Siirry kohtaan Toolset → Dashboard ja klikkaa Create Content Template halutun sisältötyypin vieressä. Esimerkissämme tämä on "Gyms".

Sisältöpohjan luominen Toolsetin hallintapaneelissa

Gutenberg-editori avautuu. Seuraavaksi mallipohja kootaan lohkoista.

Vaihe 2: Lisää dynaaminen kuva

Klikkaa editorin vasemmassa yläkulmassa olevaa +-merkkiä avataksesi lohkopaneelin. Vieritä Toolset-osioon ja valitse Image-lohko.

Lohkon lisääminen Gutenberg-editorissa

Avautuvasta paneelista etsi Toolset-osio ja valitse Image-lohko.

Kuvalohkon valitseminen Toolsetin listasta

Järjestelmä kysyy: käytetäänkö dynaamisia lähteitä? Klikkaa Yes.

Kehotus käyttää dynaamisia lähteitä

Valitse lähteeksi: Featured Image Data. Nyt lohko näyttää saman kuvan sijaan kunkin julkaisun artikkelikuvan.

Artikkelikuvan tietojen valitseminen dynaamiseksi kuvalähteeksi

Oikean reunan sivupalkissa voit hienosäätää kuvan kokoa, tasausta ja CSS-luokkia.

Dynaamisen kuvan määrittäminen sivupalkissa

Vaihe 3: Kytke mukautettu kenttä

Lisätään seuraavaksi arvosana (arvo, joka on tallennettuna "Rating"-mukautetussa kentässä jokaiselle kuntosalille).

Valitse Toolset-lohkolistasta Single Field.

Single Field -lohkon lisääminen Toolsetista

Määritä oikean puolen paneelissa kohdan Field Source alla:

  • Kenttätyyppi: Custom Field;
  • Kenttäryhmä: sisältötyyppisi (Gyms);
  • Itse kenttä: Rating.
Arvostelu-dynaamisen kenttälähteen määrittäminen

Valmista. Nyt kun siirryt eri kuntosalien sivujen välillä, oikea arvosana ilmestyy tähän kohtaan. Ei yhtään koodiriviä.

Lopputulos

Kun lisäät muutaman lohkon lisää (otsikko, kuvaus, galleria), saat valmiin mallipohjan. Julkisella puolella se näyttää tältä:

Valmis dynaaminen pohja sivuston julkisella puolella

Rakenna se kerran, niin kaikki tämän tyypin julkaisut saavat automaattisesti saman rakenteen eri sisällöllä. Muuta mallipohjaa, niin kaikki sivut päivittyvät kerralla.

Tapa 2: Total Theme, sisäänrakennetut dynaamiset mallipohjat WPBakeryn kautta

Dynaamisen pohjan luominen Total Teemassa

Jos käytät jo Total-teemaa (yksi ThemeForestin suosituimmista premium-teemoista, yli 55 000 aktiivista asennusta), dynaamiset mallipohjat ovat sisäänrakennettuina "suoraan paketista". Mitään lisäliitännäisiä ei tarvita.

🔗 Total Theme virallisella sivustolla

Total toimii yhdessä WPBakery Page Builderin kanssa (sisältyy teemaan; erillistä ostoa ei tarvita). Dynaamisia mallipohjia kutsutaan täällä nimellä Dynamic Templates, ja ne rakennetaan WPBakeryn elementeillä, joissa on dynaamiset lähteet. Logiikka on samankaltainen kuin Toolsetissa, mutta käyttöliittymä on erilainen.

Mitä Total tarjoaa dynaamiseen sisältöön

  • Post Media -elementti: lisää automaattisesti artikkelin esittelykuvan, gallerian tai videon. Yksi elementti kaikelle mediasisällölle.
  • Post Content -elementti: tulostaa artikkelin pääsisällön (mitä editorissa on).
  • Post Title, Post Meta, Related Items, Social Links: kymmeniä valmiita elementtejä mallipohjan rakentamiseen mille tahansa sisältötyypille.

Lisäksi: yli 90 WPBakery-mallia, yli 40 valmista demosivustoa tuotavaksi, Slim Mode (poistaa käytöstä tarpeettomat WPBakery-skriptit nopeampaa latausta varten), yli 450 koodinpätkää kehittäjille.

Dynaamisen mallipohjan luominen Totalissa

Vaihe 1: Uusi mallipohja

Siirry kohtaan WPBakery Page Builder → Templates ja napsauta Add New. Nimeä mallipohja, esimerkiksi "Portfolio-kortti".

Julkaisun media- ja julkaisun sisältö -elementtien lisääminen Total-pohjaan

Vaihe 2: Lisää dynaamisia elementtejä

Lisää ensin Post Media -elementti. Se näyttää kaikki artikkeliin liitetyt mediatiedostot: esittelykuvan, gallerian, videon.

Lisää sitten Post Content -moduuli. Se tulostaa tekstin artikkeli-editorista.

Halutessasi voit lisätä Post Title (artikkelin otsikko), Post Meta (päivämäärä, kirjoittaja, kategoriat), Related Items (samankaltaiset artikkelit) ja Social Links (jakopainikkeet).

Kun olet valmis, napsauta Publish.

Vaihe 3: Liitä mallipohja sisältötyyppiin

Siirry kohtaan Appearance → Customize, sitten Portfolio-osioon (tai omaan sisältötyyppiisi) ja valitse luotu mallipohja Dynamic Template (Advanced) -pudotusvalikosta.

Dynaamisen pohjan määrittäminen Total Teeman muokkausnäkymässä

Lopputulos

Tallenna muutokset, ja kaikki portfolio-artikkelit saavat automaattisesti uuden asettelun. Media, otsikot ja sisältö haetaan kustakin yksittäisestä artikkelista.

Dynaaminen portfoliopohja sivuston julkisella puolella

Tämä toimii erityisen hyvin, kun rakennat sivustoja asiakkaille: kokoat mallipohjan kerran, ja kaikki asiakkaan uusi sisältö asettuu valmiiseen rakenteeseen. Jos ulkoasua pitää muuttaa kuukauden päästä, muokkaat mallipohjaa, ja 50 sivua päivittyy automaattisesti.

Toolset Blocks vai Total Theme: kumpi valita

Molemmat työkalut ratkaisevat saman ongelman, mutta sopivat eri ihmisille ja eri tilanteisiin. Alla on rehellinen vertailu keskeisten parametrien mukaan.

Kriteeri

Toolset Blocks

Total Theme

Aloituskynnys

Matalampi: pelkkä Gutenberg, visuaalinen

Keskitaso: WPBakery on opeteltava

Koodi

Ei tarvita lainkaan

Ei tarvita mallipohjiin; räätälöintiin yli 450 valmista koodinpätkää

Viitekehys

Gutenberg (sisäänrakennettu WordPressiin)

WPBakery (sisältyy teemaan)

Joustavuus

Korkeampi: erillinen liitännäinen, toimii minkä tahansa teeman kanssa

Sidottu Totaliin: jos vaihdat teemaa, menetät mallipohjat

Hinta

Toolset-tilaus (alkaen $69/vuosi)

Total-teema $59 (kertamaksu, sisältää WPBakeryn)

Kenelle

Aloittelija millä tahansa teemalla; tarvitaan maksimaalinen kenttien hallinta

Totalin omistaja; freelancer, joka rakentaa sivustoja volyymilla

Lisäedut

Types (sisältötyypit), Views (listatulostus) sisältyvät

Yli 40 demoa, Slim Mode, yli 80 räätälöityä WPBakery-elementtiä

Haitat

Maksullinen tilaus; riippuvuus Toolset-ekosysteemistä

Sidottu yhteen teemaan; kaikki eivät pidä WPBakerysta

Päätösmatriisi

  • Olet vasta aloittamassa, mikä tahansa teema: hanki Toolset Blocks. Aloituskynnys on olematon, tuloksia tunnissa.
  • Käytät jo Totalia: älä keksi pyörää uudelleen. Sisäänrakennetut Dynamic Templates kattavat tehtävän täysin, ilman lisäkustannuksia.
  • Rakennat asiakassivustoja volyymilla: Total. Yksi mallipohja, demon tuonti nopeaan aloitukseen, asiakas täyttää kentät eikä voi rikkoa asettelua.
  • Tarvitset monimutkaisia relaatioita ja suodattimia: Toolset. Views ja räätälöidyt sisältötyypit paketissa tarjoavat paljon enemmän vaihtoehtoja räätälöityyn logiikkaan.

⁉️🤔 Usein kysytyt kysymykset

Voinko luoda dynaamista sisältöä ilmaiseksi?

Kyllä, yhdistelmällä Advanced Custom Fields (ACF, ilmainen versio) ja hieman PHP-koodia teematiedostoissa. Mutta tämä vaatii vähintään perusymmärrystä WordPressin hookeista. Aloittelijoille Toolset tai Total maksavat itsensä takaisin tunteina, jotka säästyvät googlailulta ja virheenkorjaukselta. Ilmainen polku on realistinen, mutta oppimiskäyrä on jyrkempi. ACF tarjoaa kentät, mutta niiden näyttäminen mallipohjassa on sinun vastuullasi. Kertaluontoiseen projektiin, jossa on yksinkertainen rakenne (osoite, puhelin, kuva), se käy hyvin. Asiakassivustoihin ja monimutkaisiin relaatioihin tämän artikkelin työkalut säästävät päiviä.

Toolset Blocks vai ACF: kumpi on parempi?

Eri lokerot. ACF on kenttien rakentaja. Toolset on ekosysteemi: kentät, sisältötyypit, visuaaliset mallipohjat ja Views listojen tulostamiseen. Jos tarvitset vain kenttiä, ACF on kevyempi ja sillä on valtava yhteisö. Tarvitsetko koodittoman putken kentästä valmiille sivulle? Toolset. Käytännössä ihmiset käyttävät usein ACF:ää kenttiin ja Toolsetia mallipohjiin; ne ovat yhteensopivia. Mutta jos aloitat tyhjästä etkä halua koodia, Toolset kattaa kaiken yksinään.

Toimiiko tämä minkä tahansa teeman kanssa?

Toolset Blocks: kyllä, minkä tahansa Gutenbergia tukevan teeman kanssa (mikä tarkoittaa käytännössä kaikkia moderneja teemoja). Total Theme: vain omalla teemallaan, tietenkin. Mutta Total antaa vastineeksi täyden integraation: yhteensopivuutta ei tarvitse valvoa; toimittaja on testannut kaiken.

Mitä dynaamisille mallipohjille tapahtuu teemaa vaihdettaessa?

Toolsetin mallipohjat säilyvät; liitännäinen toimii teemasta riippumatta. Pieniä tyylisäätöjä saatetaan tarvita, mutta rakenne ei hajoa. Totalin mallipohjat katoavat kokonaan teemaa vaihdettaessa; kyseessä on sisäänrakennettu toiminnallisuus. Ota tämä huomioon valintaa tehdessäsi.

Kuinka kauan käyttöönotto kestää?

Ensimmäinen mallipohja Toolsetissa vie noin tunnin (käyttöliittymän opettelu ja asettelun rakentaminen). Jokainen seuraava vie 15-20 minuuttia. Totalissa vastaavat luvut: ensimmäinen mallipohja vie tunnin, seuraavat ovat nopeampia. Nopeudessa ei ole kriittistä eroa.

Mitä asentaa omaan tehtävääsi

WordPressin dynaaminen sisältö ei ole taikuutta eikä kehittäjien yksinoikeus. Nykyaikaiset työkalut ovat laskeneet kynnystä niin paljon, että sivuston omistaja voi rakentaa mallipohjan hiirellä tunnissa. Kaksi yllä kuvattua, toimivaksi todettua tapaa kattavat käytännössä minkä tahansa skenaarion: yksinkertaisesta portfoliosta satojen kohteiden katalogiin.

Lyhyesti: Toolset Blocks maksimaaliseen joustavuuteen ilman sidosta teemaan. Total Theme, jos olet jo Totalissa tai rakennat asiakassivustoja volyymilla. Molemmat vaihtoehdot toimivat. Valitse se, johon sinulla on jo perusta, ja rakenna ensimmäinen mallipohjasi tänään.