Kako stvoriti blok uzorke za ubrzanje izgradnje web stranica

Blok uzorci će biti velika stvar za sve WordPress korisnike i u ovom postu ću vam pokazati točno kako stvoriti vlastite blok uzorke.


dodavanje ('init', funkcija () {

register_pattern ('NAME', [
'title' => __ ('TITLE'),
'sadržaj' =>
'UZORAK'
]);
});

Prije dva dana izašao sam s videom i predstavio ovaj koncept koji dolazi iza ugla u WordPress koji se zove blog obrasci. Trenutno je nekako eksperimentalna i to je nešto zbog čega sam stvarno uzbuđena. I mislim da ako se predomislite oko potencijala blok obrazaca, tada možete uvidjeti potencijal za to, kako bi vam brže isporučili web stranice ako imate klijente, kako biste im mogli omogućiti više da rade sa svojim web stranica.

Pa ću vam pokazati. Kako točno stvoriti blok uzorak u ovom videozapisu. Sada ćemo napraviti neke stvari koje su malo na strani tehnice, a znam da je ovo WordPress kanal za ne-tehnike, pa ću pokušati to učiniti što jednostavnijim, ali vi do kraja ćemo vidjeti koliko je jednostavno stvoriti jedan od tih blok obrazaca.

Dakle, idemo samo naprijed i pogledajte to. Dakle, ovdje je stranica na kojoj se govori o novom izdanju ove značajke u izradi. Sposoban za samo prosječne ljude stvoriti blok uzorak. Kada se pomaknem prema dolje, ona daje vrstu predloška za to. Dakle, sve što je u njemu uključeno je stvaranje nečega što se naziva prilagođena funkcija.

Ali ne brinite, svima ću to učiniti vrlo jednostavno, ali evo tog malog isječka koda. Sada ću imati vezu u opisu videa dolje. Odvest će vas na moju web stranicu. Dobit ćete pismena uputstva kako to učiniti. Ovaj mali isječak koda koji možete kopirati i zalijepiti na vlastitu web stranicu.

Dobro, evo što ćemo trebati. Ovo je nova značajka Gutenberga i trebat će vam aktiviran dodatak Gutenberg, tako da će vam trebati minimalna verzija od 7.8, a ovo je nedavno izašlo. Ono što će se na kraju dogoditi je možda za četiri do šest mjeseci, možda će do ljeta 2020. ovo biti podrazumijevano uključeno u WordPress, ali za sada ćete to morati, ako želite isprobati , trebat ćete instalirati Gutenberg dodatak.

Sljedeće što možete učiniti, a to je opcionalno. Ako ne znate kako dodati prilagođenu funkciju dječjoj temi, a čak ni više ne koristim podređenu temu, možda biste htjeli koristiti ovaj besplatni dodatak, a ovo je jedan od najboljih besplatnih dodataka. Da sam ikada naišao, a zove se isječak koda. A to će nam omogućiti da dodamo ovu prilagođenu funkciju i vrlo jednostavan za korištenje način, jednostavan za upravljanje.

U redu? Dakle, trebat će vam to. A to je neobavezno. Ovo je besplatni dodatak koji se zove kadence. A ono što radi je da dodaje puno funkcionalnosti alata za pravljenje stranica Gutenbergu. Prilično je uredan u onome što vam omogućuje. Možete povući i promijeniti veličinu stupaca. Puno je elemenata koji dodaju puno toj tvornici stranica, ali Gutenbergu i to je potpuno besplatan dodatak.

U redu. Idemo sada na moju web stranicu. Dakle, evo web stranice. Sad je sve postavljeno. I ako ne znate kako instalirati dodatak, netko se jako naljutio na mene drugi dan jer mi nije pokazao kako instalirati dodatak i video. Idite na dodatke, kliknite na dodavanje novog, pa upravo ovdje pretražite ime tog dodatka, a zatim kliknete.

Preuzmite, ili mi je žao, kliknite odmah instaliraj, a zatim je aktivirate. To je vrlo jednostavan postupak. Tako da ću kliknuti na svoje instalirane dodatke, a možete vidjeti da sam instalirao Gutenberg i da su to bili dodatni blokovi kadence, a ovdje su isječci koda. Tako da ću ići naprijed i aktivirati isječke koda te možete vidjeti da je sada aktivirano upravo ovdje.

Dakle, idite naprijed i kliknite isječke koda i vidjet ćete neke koje dolaze. A evo ove sklopke za prebacivanje i prekidača. Oni su svi isključeni i zapravo ne trebate ih zadrćavati prema zadanim postavkama. Ovdje možete samo kliknuti i sve biste ih mogli izbrisati, ali već sam nastavio i dodao jedan ovdje nazvan blok predložak.

Pa što biste vi učinili. Kliknite na dodavanje novog, a ovom šablonu blok uzorka možete imenovati u onom malom isječku koda koji sam vam pokazao da je ovdje točno, ali ću vam dati modificiranu verziju ovog na svojoj web stranici. Jednostavno ćete to kopirati i zalijepiti ovdje, a zatim ćete kliknuti na spremiti promjene.

Nećete kliknuti na “Spremi i aktiviraj”, već ćete kliknuti da biste spremili promjene, a ja ću vam pokazati zašto samo u trenu. U redu. Dakle, sada ćete htjeti napraviti ovaj blok obrazac. A blok obrazac je jednostavno samo spremljeni odjeljak. Dakle, ako koristite alat za pravljenje stranica, sada znate da biste mogli spremiti odjeljke, a neki od njih imaju unaprijed dizajnirane odjeljke, ali korisničko iskustvo, mislim da je u Gutenbergu puno bolje.

Dakle, ono što ćete htjeti učiniti je ići na stranice. I kliknite dodaj novo i po želji ćete to imenovati. Hm, zapravo dopustite da se riješim ove turneje. Htjet ćete imenovati ovaj blok obrazac, a upravo ćemo ovdje stvoriti ovaj blok obrazac. E sad, neću sada stvarati blok obrazac.

Pokazat ću vam onu ​​koju sam već stvorio, i to je. Upravo ovdje. Dakle, evo blok uzorka koji sam stvorio. Mogli ste vidjeti da je to ovaj odjeljak. Ima ovu šarenu pozadinu. Ovdje imam naslov, nekoliko podnaslova i nekoliko gumba, a ja stavljam video. Dakle, napravit ću ovaj moj blok uzorak kako bih mogao samo s dva klika mišem dodati ovo bilo gdje na web stranici.

Dakle, ono što ću učiniti je kliknuti gore desno, evo ove tri točke. Nekako ih je teško vidjeti, a kada kliknete na njih, ovdje postoji ova opcija koja kaže uređivač koda. Tako da ćete htjeti kliknuti na uređivač koda, a onda vam on pokazuje sav kôd koji je uključen u stvaranje bloga uzorak bloga.

U redu? Dakle, ovdje ćete kliknuti, a zatim ćete kliknuti kontrolu a ili narediti a na računalu da biste sve to istaknuli. I nova su godina. Stavite ga u međuspremnik. Tako da ću to kontrolirati C. Dakle, to je sada u mom međuspremniku. Dakle, sada ću se izvući odavde. Zapravo, ako želite izaći iz ovog pogleda, ovdje ima malo X koji kaže uređivač izlaznog koda, a sad će mi to pokazati onako kako je normalno ovdje.

U redu. Tako biste mogli spremiti ovo kao skicu ako želite, ali ovo vam neće trebati. Ovo je samo za vas da stvorite ovaj blok uzorak, a vi možete stvoriti blok obrazac koji je sve, i to ne mora biti jedan blok stvari. Na primjer, to bi mogao biti čitav predložak za blog. Ok, sad ću kliknuti gdje je to što me izvlači iz uređivača blokova.

Sad se vraćam dolje na isječke koda. Dakle, upravo ovdje sam stvorio predložak blok uzorka. Kliknuti ću na klona, ​​a sada je stvoren klon, a ja ću kliknuti naslov da ga počnem uređivati. Dakle, za naslov ću to promijeniti u naslov koji ima smisla za njegovo upravljanje.

Pa za mene, samo ću to imenovati. Heroj s videom. Tako da sada znam što je to kad budem gledao popis u budućnosti. U redu, postoji nekoliko stvari koje ćete morati urediti. Tri stvari. Super je jednostavno. Prvi je ime. To može biti bilo koje ime, to bi trebalo biti mala slova, bez razmaka ili simpatičnih znakova.

Dakle, idem naprijed i odmah ću staviti ime. Možete vidjeti da sam ga video imenovao junakom. Dalje, ovdje trebate unijeti naslov. Dakle, zamjenjujemo ovaj naziv riječi, a to je ono što će se prikazati. Gledate popis uzoraka bloga, bloka, a ne blok blokova. A ako primijetite, možete, ovo je prijateljsko ime, tako da može imati razmaka.

Ne bih baš tamo ubacio nijedne simpatične likove. Prostori su u redu. To je ono što će se prikazati na ovom popisu a i sljedeće ovdje gdje piše obrazac a. Samo ćete zalijepiti ono što ste upravo kopirali u međuspremnik. Sada želim da zabilježite jednu stvar. Za svaki od ovih. Mali apostrof ostavio sam sprijeda i straga.

Vidite da tamo mora postojati apostrof. Ako je slučajno uklonite, vratite je natrag. U redu. Samo se mijenjamo. Tek zamjenjujemo rezervirano mjesto teksta. Dakle, ovdje ne želim sve zamijeniti. Samo želim zamijeniti obrazac riječi, pa ću ga istaknuti, a zatim ću zalijepiti ono što sam kopirao.

I tu je. Sada ću se pomaknuti prema dolje i ovaj put ću kliknuti na spremiti promjene i aktivirati se. I sada bi trebao reći da je isječak ažuriran i aktiviran. A kad kliknem na sve isječke, sada ste mogli vidjeti da je uključen ovaj jedan junak s videom. Tako da u budućnosti za dodatne blok uzorke želim ići tamo gdje piše predložak blok uzorka i kliknuti na kloniranje i napraviti taj predložak blok uzorka na taj način.

Na taj način uvijek imam predložak. Ako već znate i imate vlastiti način dodavanja prilagođenih funkcija, ne trebaju vam isječci koda i, i sve ove vrste stvari, možete ga staviti tamo gdje ga želite staviti. Ovo je samo mnogo lakši način da se njime upravljate ako mene pitate. Okej, sada idem na stranice klikom na Dodaj novo, a ako želite vidjeti.

Blokirajte obrasce. Uh, ovdje je ikona za to. Kad miša pređete preko nje, piše blok obrasci. A kad kliknem na njega, vidjet ćete neke blok uzorke s kojima se trenutno eksperimentira. Ali kad se pomaknete prema dolje, vidjet ćete onaj blok obrazac koji sam stvorio. A ono što je stvarno uredno jest da stvara umanjene sličice.

I to čini dinamično. Imate alate za pravljenje stranica koji to čak i ne čine. Uh, i to vam toliko olakšava upravljanje blokadnim obrascima. Dakle, i ovdje možete vidjeti kako piše heroj s predloškom. Ako želim ovo koristiti bilo gdje na svojoj web stranici, to je jedan klik miša. A onda je tu. I sve što bih u tom trenutku trebao učiniti da počnem mijenjati neke tekstove, mijenjati veze na gumbe.

Ovdje mogu kliknuti i mogu promijeniti video. Tako. Tako stvarate blok obrazac. Sada je to velika stvar, mislim da je ono što će se dogoditi tema. Programeri i tvorci dodataka moći će stvoriti ove obrasce blokova za vas, tako da će biti mnogo brže, brže i jednostavnije graditi web stranicu pomoću izvornog alata za izgradnju blokova koji WordPress već uključuje.

Ne možete kupiti ništa, nema blota. Ne postoji ništa od toga, i. Što još više vodi. Možete vidjeti kako vam je lako stvoriti vlastite blok uzorke, a na popisu je zaista lako vidjeti. Kliknite na gumb i tamo se ubacuje. Sada biste mogli razmisliti o tome koliko je lakše izgraditi web stranicu kad imate vlastitu biblioteku blok obrazaca.

Dakle, ako stvarate web stranice za klijente, a ne želite koristiti graditelj stranica. Jednostavno želite koristiti ugrađeni graditelj blokova. Možete stvoriti vlastitu biblioteku obrazaca. Vidjeli ste kako je to lako. Ja to mogu. Mogli biste to i učiniti. Uh, možete stvoriti vlastitu biblioteku blok obrazaca koje možete premještati s web mjesta na web mjesto i možete pokazati klijentu kako to može napraviti.

Ovo nije samo za stranice, ovo je za postove, a nije ograničeno samo na jedan odjeljak koji ste vidjeli. U osnovi sve što možete stvoriti na stranici. Možete napraviti blok uzorak. Dakle, ako program za izgradnju bloka koristite samo za postove na blogu, a postoje određeni elementi koje želite upotrebljavati iznova i iznova u postu na blogu kako biste poboljšali izgled blogova, pa možete stvoriti blok obrazac za to.

I stvarno je lako. Jednim klikom i to ste u mogućnosti koristiti. U stvari, čitavi predlošci na blogu. Dakle, ako postoji formula koju slijedite za dijelove bloga, možete cijeli blog objaviti blok predloškom. Primijeni se jedan klik i onda sve što trebate učiniti je istaknuti, kliknuti i urediti.

Dakle, posljednja stvar prije nego što završimo ovdje, to je novi koncept i o nečemu treba razmišljati u narednih nekoliko mjeseci. Eksperimentirajte sa sada. Nije baš Yeti, Yeti. Nije baš spreman za premijeru, jer ako ste primijetili, hm, jedini negativan trenutak koji sam vidio je kada gledate blog. Vidi tamo idem opet.

Ako gledate obrasce blokova, to je samo viši popis članaka kroz koji se morate kretati, pa oni trebaju poboljšati postupak kategorizacije i organiziranja. Možda za to imaju neko sučelje kako bi ga učinili vizualnijim i jednostavnijim za rad. Ako ćete imati 50 različitih blokova.

Uzoraka. Dakle, oni to jednostavno trebaju poboljšati. A možda će se sintaksa na kodu malo promijeniti. Tko zna kada se to napokon pokaže. Ali cijela poanta ovog videa je samo da vam pokaže što će biti moguće vrlo, vrlo brzo, tako da možete početi. Razmišljate kako se to može primijeniti na vaš tijek rada i što radite kao graditelj web mjesta.

U svakom slučaju, to je sve što imam za vas u ovom postu. Nadam se da ćete ovako cijeniti napredne poglede na budućnost WordPressa, a ako ste cijenili ovaj videozapis ili pronašli neku vrijednost, razmislite o tome da mu dodate palac i podijelite ovaj video kako bi ljudi mogli vidjeti što se događa iza ugla.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map