Hogyan lehet blokkmintákat létrehozni a webhely felépítésének felgyorsításához

A blokkminták nagy problémát jelentenek minden WordPress-felhasználó számára, és ebben a bejegyzésben pontosan megmutatom, hogyan hozhat létre saját blokkmintákat.


add_action ('init', function () {

register_pattern ('NAME', [
'title' => __ ('TITLE'),
'tartalom' =>
'MINTA'
]);
});

Két nappal ezelőtt videómmel jelent meg, és bemutattam ezt a koncepciót, amely a sarkon körül jön a WordPress-nek, blogmintáknak. Most egyfajta kísérleti jellegű, és nagyon izgatott vagyok benne. És azt hiszem, ha átgondoljuk a blokkminták lehetőségeit, akkor láthatjuk annak potenciálját, hogy segítsünk Önnek a webhelyek gyorsabb eljuttatásában, ha ügyfelei vannak, és lehetővé tegyék számukra, hogy többet tegyenek a weboldal.

Szóval megmutatom neked. Pontosan hogyan hozhat létre blokkmintát ebben a videóban. Most meg fogunk csinálni néhány olyan dolgot, amelyek kissé a technikai oldalon vannak, és tudom, hogy ez a WordPress csatorna a nem-technikusok számára, ezért megpróbálom a lehető legegyszerűbbé tenni, de te végül meglátjuk, mennyire egyszerű ezen blokkminták létrehozása.

Tehát menjünk tovább, és nézzük meg. Tehát itt van az az oldal, ahol a szolgáltatás új kiadásáról beszélünk. Csak az átlagos emberek képesek blokkmintát létrehozni. Tehát amikor lefelé görgetek, megkapja a fajta sablont. Tehát minden, ami benne foglalkozik, valami olyat hoz létre, amelyet egyedi funkciónak hívnak.

De ne aggódjon, mindenki számára szuper könnyűvé tenné, de itt van ez a kis kódrészlet. Most kapok egy linket a lenti videó leírásban. A webhelyemre viszi. Így írásbeli utasításokat kap erről is. Ez a kis kódrészlet, amelyet másolhat és beilleszthet a saját webhelyére.

Oké, itt van, amire szükségünk lesz. Ez egy új szolgáltatás a Gutenberg számára, és aktiválva kell lennie a Gutenberg bővítményre, tehát legalább 7.8-as verzióra lesz szüksége, és ez az, ami nemrégiben jelent meg. Most az várhatóan négy-hat hónap múlva történik, talán 2020 nyarának végére ez alapértelmezés szerint bekerül a WordPress programba, de egyelőre szüksége lesz erre, ha kipróbálni szeretné. , telepítenie kell a Gutenberg bővítményt.

A következő dolog, amelyet megtehetsz, és ez nem kötelező, ha nem tudod, hogyan lehet egyéni funkciót hozzáadni a gyermek témához, és már nem is használom a gyermek témát, érdemes használni ezt az ingyenes bővítményt, és ez az egyik legjobb ingyenes plugin. Hogy valaha is találkoztam, és kódrészleteknek hívják. És ez lehetővé teszi számunkra, hogy hozzáadjuk ezt az egyéni funkciót, és egy nagyon könnyen kezelhető módon, könnyen kezelhető módon.

Oké? Szóval szüksége lesz rá. És ez nem kötelező. Ez egy ingyenes plugin, úgynevezett kadenceblokkok. És amit ez csinál, az sok oldalépítő funkcióval bővíti a Gutenberg-et. Nagyon ügyes abban, amit lehetővé tesz. Az oszlopok húzhatók és átméretezhetők. Nagyon sok elem hozzáteszi az oldalkészítő sok funkcióját, de a Gutenberghez, és ez egy teljesen ingyenes plugin.

Oké. Most ugorjunk át a webhelyemre. Tehát itt van egy weboldal. Most már fel van állítva. És ha nem tudod, hogyan kell telepíteni a beépülő modult, akkor valaki nagyon dühös lett rám, mert nem mutatta meg, hogyan kell telepíteni a beépülő modult és egy videót. Megnézi a plugineket, rákattint az új hozzáadása elemre, majd itt keres egy adott plugin nevét, majd kattint.

Töltse le, vagy sajnálom, kattintson a Telepítés most elemre, majd aktiválja azt. Ez egy nagyon egyszerű folyamat. Szóval rákattintok a telepített beépülő modulokra, és láthatja, hogy telepítettem a Gutenberg-t, és ez opcionális kadenceblokkok volt, és itt van a kódrészletek. Tehát megyek és aktiválom a kódrészleteket, és láthatja, hogy itt aktiválódik.

Tehát akkor menj tovább, és kattints a kódrészletekre, és megnézed néhányat, amihez tartozik. És itt van ez a váltókapcsoló, és ez is váltható. Mindegyik ki van kapcsolva, és valójában nem kell megőriznie ezeket, amelyek alapértelmezés szerint jönnek. Csak rákattinthat ide, és törölheti őket, de már elmentem, és itt hozzáadtam egyet, az úgynevezett blokkminta sablont.

Tehát mit tennél. Kattintson az Új hozzáadása elemre, és elnevezheti ezt a blokkmintázat-sablonot abban a kis kódrészletben, amelyet megmutattam neked, hogy itt van, de a weboldalon meg fogom adni ennek egy módosított változatát. Csak átmásolja és illeszti be ezt a dokumentumot, és rákattint a mentés módosítására.

Nem kattint a mentésre és az aktiválásra, hanem a változtatások mentésére fog kattintani, és egy pillanat alatt megmutatom neked. Oké. Tehát most ezt a blokkmintát kell létrehozni. És a blokkminta egyszerűen csak mentett szakasz. Tehát ha oldalszerkesztőt használ, akkor most már tudja, hogy menthet szakaszokat, és néhányuk előre tervezett szakaszokkal érkezik, de a felhasználói élmény, szerintem sokkal jobb Gutenbergben.

Tehát mit akarsz csinálni, az az, hogy az oldalakra lép. És kattintson az Új hozzáadása elemre, és ezt meg akarja nevezni. Ööö, valójában hadd szabaduljak meg ettől a turnétól. Meg akarja nevezni ezt a blokkmintát, és éppen itt fogjuk létrehozni ezt a blokkmintát. Most nem fogok megalkotni a blokkmintát.

Megmutatom neked azt, amelyet már készítettem, és az. Pont itt. Tehát itt van egy blokkmintázat, amelyet létrehoztam. Láthatta, hogy ez a szakasz. Ennek a színes háttérnek van. Van itt egy címsor, néhány alcím és néhány gomb, és beteszek egy videót. Tehát ezt a blokkmintát készítem, hogy csak két egérkattintással hozzáadhassam ezt bárhol a webhelyemre..

Szóval, kattintson a jobb felső sarokra, ott van ez a három pont. Valami nehéz látni, és ha rákattintasz, itt van ez a lehetőség, amely szerint a kódszerkesztő. Tehát kattintson a kódszerkesztőre, majd megmutatja az összes kódot, amely ahhoz kapcsolódik, hogy az adott blog blokkmintázatú blogmintává váljon.

Oké? Tehát ide kattint, majd a számítógép vezérlésére vagy a parancsra kattintva mindet kiemeli. És ők új év. Helyezze a vágólapra. Szóval meg fogom csinálni a C irányítását, tehát most a vágólapomban van. Tehát most azt fogom csinálni, hogy kiszabadulok innen. Valójában, ha ki akar lépni ebből a nézetből, van itt egy kis X, amelyben a kilépési kód szerkesztője van, és most megmutatja nekem, hogy általában itt van..

Oké. Tehát elmentheti ezt tervezetként, ha akarod, de erre nincs szükséged. Csak ezt a blokkmintát hozhatja létre, és létrehozhat bármi blokkmintát, amelynek nem kell egy darab blokknak lennie. Ez egy teljes sablon lehet egy blogbejegyzéshez, például. Oké, szóval most rákattintok arra a helyre, ahol van, ami kiszabadít a blokk szerkesztőből.

Most visszamegyek a kódrészletekhez. Szóval itt hoztam létre ezt a blokkmintát. Kattanok a klónra, és most létrehoztam egy klónt, majd rákattanok a címre a szerkesztés megkezdéséhez. Tehát a címnél ezt megcserélem egy olyan címre, amely értelme van annak kezelésére.

Tehát nekem csak el fogom nevezni. Hős videóval. Tehát most már tudom, mi ez, amikor a jövőben megnézem a listát. Oké, tehát van itt néhány dolog, amelyeket szerkeszteni kell. Három dolog. Rendkívül egyszerű. Az első a név. Tehát ez lehet bármilyen név, amelyre lesz, minden kisbetűnek kell lennie, szóközök és funky karakterek nélkül.

Szóval megyek előre, és most felveszek egy nevet. Láthatjuk, hogy videón keresztül hősnek neveztem el. Ezután, itt, meg kell adnod a címet. Tehát kicseréljük ezt a szócímet, és ez fog megjelenni. A blog mintáinak, blokkoknak, nem pedig blokkoknak a listáját nézi. És ha észreveszi, akkor ez a barátságos név, így szóközöket tartalmazhat.

Ööö, nem tennék bele funky karaktereket. A szóköz rendben van. Szóval ezt fogja megmutatni ebben a listában és a következőben itt, ahol az a mintát mondja. Csak beilleszti a vágólapra, amit éppen másolt. Most azt akarom, hogy tudjon egy dolgot. Mindegyikre. Elhagytam a kis aposztrófát elöl és hátul.

Látja, hogy ott kell lennie az aposztrófának. Ha véletlenül eltávolítja, helyezze vissza. Oké. Csak változunk. Csak a szöveg helyőrzőjét cseréljük ki. Tehát itt nem akarok mindent pótolni. Csak ki akarom cserélni a szómintát, ezért kiemelem, majd beillesztem a másolatomat.

És ott van. Tehát most görgetek lefelé, és ezúttal kattintson a mentések módosítására és az aktiválásra. Most tehát azt kell mondania, hogy a részlet frissítve és aktiválva van. És amikor rákattintottam az összes részletre, láthatta, hogy ez a hős a videóval be van kapcsolva. Tehát a jövőben további blokkmintákhoz azt akarom elmenni, ahol a blokkmintázat sablonja van, majd kattintson a klónra, és így készítsem el ezt a blokkmintát.

Így mindig van a sablon. Most, ha már tudja, és megvan a saját módja az egyedi funkciók hozzáadásához, nincs szüksége kódrészletekre, és mindezeket a cuccokat elhelyezheti oda, ahová el akarja tenni. Ez csak sokkal könnyebben kezelhető, ha megkérdezik tőlem. Oké, tehát most megyek az új hozzáadás gombra kattintva, és ha látni akarod az oldalakat.

Blokkminták. Ööö, itt van az ikon erre. És amikor rávigyél, azt mondja: blokkminták. És amikor rákattintlak, látni fogja azokat a blokkmintákat, amelyekkel jelenleg kísérleteznek. De amikor lefelé görget, látni fogja azt a blokkmintát, amelyet létrehoztam. És ami igazán ügyes, miniatűr előnézetet generál.

És dinamikusan teszi ezt. Van olyan oldalépítő eszközök, amelyek ezt még nem is teszik. Ööö, és ez sokkal könnyebbé teszi a blokkminták kezelését. Tehát, és láthatjuk itt is, hogy a hős sablonnal szól. Most, ha ezt bárhol a webhelyemre szeretném használni, ez egy egérkattintás. És akkor ott van. És csak annyit kellett tennem, hogy megváltoztassam néhány szöveget, megváltoztattam a linkeket a gombokra.

Ide kattintva meg tudom változtatni a videót. Így. Így hozhat létre blokkmintát. Most azt hiszem, hogy ez nagy ügy, mert az a téma, ami fog történni. A fejlesztők és a beépülő modulok készítői képesek lesznek az Ön számára létrehozni ezeket a blokkmintákat, így sokkal gyorsabb, gyorsabb és könnyebb lesz egy webhely létrehozása a natív blokképítő eszköz segítségével, amelyet a WordPress már tartalmaz.

Nincs mit vásárolni, nincs kód puffadás. Nincs ilyen dolog, és. Ami tovább vezet Láthatja, milyen könnyű létrehozni a saját blokkmintáit, és nagyon könnyű megtekinteni egy listában. Kattintson egy gombra, és odahelyezi. Tehát most elgondolkodhat azon, hogy mennyire könnyebb lehet weblapot létrehozni, ha saját blokkmintáinak könyvtára van.

Tehát ha webhelyeket hoz létre az ügyfelek számára, és nem akarja használni az oldalkészítőt. Csak építő blokk készítőt szeretne használni. Saját mintázatkönyvtárat hozhat létre. Látta, milyen könnyű ez. Meg tudom csinálni. Meg tudod csinálni. Uh, elkészítheti saját blokkmintáinak könyvtárát, amelyet áthelyezhet webhelyről helyre, és megmutathatja az ügyfelének, hogyan tudják ezt kiépíteni..

Ez nem csak az oldalakon, hanem a postákon is, és nem korlátozódik csak arra az egy szakaszra, amelyet láttál. Alapvetően bármi, amit létrehozhat egy oldalon. Készíthet blokkmintát. Tehát ha csak a blokk-készítőt használja a blogbejegyzésekhez, és vannak bizonyos elemek, amelyeket újra és újra használni szeretne egy blogbejegyzésben, hogy javítsa a blogbejegyzések elrendezését, akkor blokkmintát hozhat létre a azt.

És ez nagyon egyszerű. Egy kattintással használhatja. Valójában a teljes blogbejegyzés sablonjai. Tehát ha van egy képlet, amelyet egy blogbejegyzés szakaszaihoz követ, akkor blokkolósablonként elkészítheti az egész blogbejegyzést. Ezt az egy kattintást alkalmazni kell, és csak annyit kell tennie, hogy mutatni, kattintani és szerkeszteni.

Tehát az utolsó dolog, mielőtt itt foglalkoznánk, ez egy új koncepció, és erre kell gondolni az elkövetkező néhány hónapban. Kísérletezzen most. Nem egészen Yeti, Yeti. Még nem egészen kész a főműsoridőre, mert ha észrevetted, um, az egyetlen negatív láttam, amikor a blogot nézel. Látja, megyek újra.

Ha a blokkmintákat nézi, akkor ez csak egy magasabb cikkek listája, ahol át kell görgetnie, tehát javítaniuk kell a kategorizálási és rendezési folyamatot. Talán van valamiféle felületük, amely vizuálisabbá és könnyebben használhatóvá teszi. Ha 50 különböző blokkod lesz.

Mintákat. Tehát ezt csak javítani kell. És a kód néhány szintaxisa kissé megváltozhat. Ki tudja, mikor jelent meg ez végre? De ennek a videónak az a lényege, hogy megmutassa, mi lesz nagyon hamarosan lehetséges, hogy elkezdhesse. Gondolkodás arra, hogyan lehet alkalmazni a munkafolyamatra, és mit csinál webhely készítőként.

Különben is, ez minden, ami számomra áll ebben a bejegyzésben. Remélem, hogy értékelni fogja a WordPress jövőjének ilyen fejlett nézeteit, és ha értékelted ezt a videót, vagy találsz valamilyen értéket, fontolja meg egy hüvelykujj felvetését és megoszthatja ezt a videót, hogy az emberek láthassák, mi áll a sarkon..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Adblock
    detector