Si të krijoni një shtojcë të thjeshtë të bllokut Gutenberg të WordPress

Dëshironi të krijoni një plugin WordPress blloku i thjeshtë i Gutenberg?

A nuk e duam të gjithë WordPress-in? Platforma ka parë sukses masiv që nga fillimi i saj, me zhvilluesit që shtojnë vazhdimisht veçori të reja. Një nga veçoritë më të spikatura të kohëve të fundit është Redaktori i Bllokut të WordPress, emri i kodit Gutenberg.

Gutenberg u ofron përdoruesve të WordPress një mënyrë të re emocionuese për të publikuar përmbajtje dhe për të personalizuar faqen e tyre të internetit. Është tepër i lehtë për t'u përdorur, gjë që është një lajm i shkëlqyeshëm për fillestarët dhe zhvilluesit. Nëse jeni duke përdorur versionin më të fundit të WordPress, tashmë jeni njohur me redaktuesin e bllokut dhe konceptin e blloqeve.

Si parazgjedhje, redaktori i bllokut të WordPress vjen me disa blloqe që ju lejojnë të përfshini tekst, imazhe, citate, audio, video, ngulitje, etj. Përveç kësaj, ka një sërë shtesash Gutenberg që ju lejojnë të zgjeroni redaktuesin pa u prishur një djersë.

Sidoqoftë, mund të keni një nevojë specifike që ju shtyn të krijoni blloqet tuaja të personalizuara. Në këtë artikull, ne do t'ju tregojmë në disa paragrafë, se si të krijoni blloqe të personalizuara Gutenberg për të përmbushur nevojat tuaja specifike.

Pa vonesë, le të fillojmë sepse ka shumë për të mësuar.

Por më parë, nëse nuk keni instaluar kurrë WordPress zbuloni Si të instaloj një WordPress blog hapa 7 et Si të kërkoni, instaloni dhe aktivizoni një temë WordPress në blogun tuaj

Atëherë kthehu pse ne jemi këtu. 

Çfarë janë blloqet, gjithsesi?

Blloqet trajtojnë paragrafët, titujt, median dhe ngulitje si komponentë që, kur bashkohen së bashku, përbëjnë përmbajtjen e ruajtur në bazën e të dhënave të WordPress, duke zëvendësuar konceptin tradicional të tekstit me media dhe kode të shkurtra të integruara.

Në të kaluarën, përdoruesit e WordPress u mbështetën në tekst dhe kode të shkurtra për të shtuar përmbajtje. Gutenberg përdor blloqet. Redaktori i ri ju lejon të përdorni njësi blloku për të krijuar paraqitje të pasura dhe fleksibël që janë të lehta për t'u menaxhuar. Aktualisht, mund të përdorni redaktuesin e bllokut për postime dhe faqe, por ka plane aktive për të marrë mbështesin redaktimin e plotë të faqes në të ardhmen.

Puna me blloqe e bën krijimin e përmbajtjes në WordPress mjaft freskues. Për më tepër, shumë shtojca ekzistuese mbështesin redaktuesin e ri dhe vijnë me blloqe të gatshme për përdorim që e bëjnë të lehtë shtimin e përmbajtjes nga shtojcat e përmendura. Redaktori ju lejon të tërhiqni dhe lëshoni blloqe në një faqe në mënyrë që të mund të shtypni më shpejt butonin e publikimit.

Ashtu si një ndërtues faqesh i integruar direkt në WordPress.

Nëse jeni të njohur me ndërtues faqesh si Elementor, ndoshta jeni njohur me konceptin e ndërtimit të faqeve me tërheqje dhe lëshim. Gutenberg është një përpjekje për të integruar plotësisht ndërtimin e faqeve të internetit me tërheqje dhe lëshim në thelbin e WordPress.

Pra, le të shkojmë në pjesën më të mirë të artikullit të sotëm. Le të mësojmë se si të krijojmë një bllok të thjeshtë. Këtë mund ta bëni me dorë ose duke përdorur shtojca si p.sh Blloqe të personalizuara të Zanafillës (ish BlockLab), Blloqe dembele ou ACF. Krijimi i blloqeve të personalizuara është pak teknik, kështu që për qëllimet e artikullit të sotëm, ne do të përdorim një shtesë.

Si të krijoni një bllok të personalizuar (duke përdorur genesis Custom Blocks)

Është më e lehtë të shkosh në rrugën e shtojcave sepse krijimi i blloqeve të personalizuara të Gutenberg nga e para kërkon një kuptim të mirë të HTML, CSS, PHP dhe më e rëndësishmja, javaScript. Ju gjithashtu do të duhet të kuptoni React.

Për seksionin tjetër, ne do të përdorim Genesis Custom Blocks. Versioni i tij falas është i disponueshëm në depon zyrtare të WordPress, që do të thotë se ne mund ta instalojmë atë në pultin e administratorit të WordPress.

Instaloni Genesis Custom Blocks

Identifikohu në pultin e administratorit të WordPress dhe lundroni te Shtesat> Shto, siç tregohet më poshtë.

Pastaj futni " Blloqe të personalizuara të Zanafillës në kutinë e kërkimit të fjalëve kyçe dhe kliko në butonin Instalo tani

Pas kësaj, aktivizoj shtojcën për t'ju nisur

Më pas, le të krijojmë një bllok të ri personal. Për qëllime ilustrimi, le të krijojmë një thirrje për veprim të personalizuar (CTA) që do ta shtojmë në fund të çdo artikulli që publikojmë. Pjesa më e mirë është se ju mund t'i ripërdorni blloqet për t'ju shpëtuar nga krijimi i të njëjtave blloqe pa pushim.

Në menunë tuaj të administratorit të WordPress, lundroni te Blloqe të personalizuara > Shto të re, siç theksojmë më poshtë.

Kjo do t'ju çojë në faqen tjetër ku do të gjeni të gjitha opsionet për të krijuar një bllok të personalizuar (në rastin tonë, një CTA):

Këtu janë disa fjalë për të shpjeguar atë që shihni në pamjen e mësipërme. Duke filluar nga lart, ju e keni atë.

Zona kryesore e redaktimit:

• Ndërtues – Ju ndoshta do të kaloni shumë kohë këtu duke dizajnuar bllokun tuaj të personalizuar. të Ndërtues ju lejon të shtoni titull, fusha, slug, fjalë kyçe, kategori dhe të shikoni paraprakisht bllokun tuaj të personalizuar. Do të mësoni se si të shtoni fusha.
• Redaktuesi i shabllonit – Pas dizajnimit të bllokut tuaj të personalizuar (d.m.th. duke shtuar fusha të ndryshme), do t'ju duhet të krijoni një shabllon blloku (lexoni, shtoni pak kod) në redaktori i modelit. Ne do të mësojmë më shumë kur të hartojmë CTA.
• Pamja paraprake e redaktorit – Ju lejon të shikoni paraprakisht bllokun e personalizuar në redaktuesin e bllokut të WordPress.
• Parashikimi i pjesës së përparme - Këtu mund të shikoni paraprakisht se si do të duket blloku i personalizuar në faqen tuaj të internetit.
• EditorField – Do të shfaqë fushat në zonën kryesore të redaktimit të një postimi ose faqeje (e dini, ashtu siç shihni postimet tuaja të zakonshme në redaktorin e WordPress)
• Inspektor Fusha – Shfaq fushën në shiritin anësor të djathtë poshtë inspektorit të bllokut.

Opsionet e shiritit anësor

• Goditje e fortë – Plotësohet automatikisht në bazë të titullit që i jepni bllokut tuaj të personalizuar. Kjo është e rëndësishme kur krijoni modelin e bllokut.
• Ikonë – Ky opsion ju lejon të shtoni një ikonë në bllokun tuaj të personalizuar.
• Kategoria - Kjo ju lejon të caktoni një kategori në bllokun tuaj të personalizuar. Ju mund të kategorizoni bllokun tuaj të personalizuar duke përdorur një nga kategoritë e integruara, ose mund të krijoni një kategori krejtësisht të re.
• Keywords – Shtoni një maksimum prej tre fjalë kyçe të lidhura në bllokun tuaj të personalizuar në mënyrë që njerëzit ta gjejnë lehtësisht në zgjedhësin e bllokut.
• Hapni fushat e bllokut në mënyrë modale në vend që të jepni në vend – Aktivizo nëse dëshiron të hapësh fushat në modalitet. Kjo është e dobishme nëse keni një bllok të personalizuar me shumë fusha.
• Post Llojet – Kontrolloni kutinë(et) për të lejuar që blloku juaj i personalizuar të shfaqet në çdo lloj postimi. Për shembull, nëse zgjidhni Postimet, bllokimi nuk do të shfaqet në asnjë postim.

Krijo një bllok të personalizuar

Tani që e keni kuptuar më mirë ndërfaqen e përdoruesit dhe atë që bën secila pjesë, le të fillojmë punën.

Në Ndërtues - Ndërtues -, jepini bllokut tuaj të personalizuar një titull të përshtatshëm. Ne do të zgjedhim CTA për këtë siç tregohet më poshtë.

Përpara se të shtojmë fusha të reja, le të shtojmë një ikonë, fjalë kyçe dhe të zgjedhim një kategori për bllokun e personalizuar siç tregohet më poshtë.

Për këtë, le të shtojmë disa fusha në bllokun tonë të personalizuar. Për shembullin tonë të bllokut CTA, ne do të shtojmë vetëm tre fusha në rendin e mëposhtëm: një imazh, pak tekst dhe një fushë skedari që i lejon njerëzit të shkarkojnë një ebook.

Lexo gjithashtu: Shtojcat 5 WooCommerce për të redaktuar produktet tuaja në masë

Shtimi i fushave të bllokut

Në seksionin Fushat e redaktuesitklikoni mbi ikonën Plus (+). për të shtuar fushën e parë siç tregohet më poshtë.

Më pas, le të shtojmë një fushë imazhi. Në shiritin anësor, vendosni Lloji i fushës është aktiv Imazh dhe vendosni opsionet e tjera. Gjithashtu, merrni parasysh slugun pasi do ta përdorim atë kur krijojmë modelin e bllokut.

Pas kësaj, shtoni fushat e tekstit dhe skedarit në të njëjtën mënyrë.

Kaloni në Redaktuesi i shabllonit > Markup.

Këtu do të dizajnojmë se si do të duket blloku ynë i personalizuar në faqen tuaj të internetit. Redaktori i modelit pranon HTML, CSS dhe slugs në terren (të cilat duhet t'i vendosni midis 2 kllapave katrore). Nëse keni nevojë të përdorni gjuhën PHP, mund ta krijoni shabllonin duke përdorur Metoda e modelimit PHP

Mos u shqetëso, është e lehtë.

Dans redaktori i modelit, nën skeda e shënimit, shtoni kodin e mëposhtëm:

<div class="cta-block">
<div class="cta-image">
<img src ="{{image-field}}">
</div>
<div class="text-upload">
<h2>{{text-field}}</h2>
<a href="{{file-field}}">
<button type="button" class="dwnld">Telecharger</button></a>
</div>
</div>

Ndërsa shkruani kodin tuaj, do ta vini re këtë redaktori i modelit Plotësoni automatikisht slugat e fushës (p.sh. {{fusha e imazhit}} ) për ju.

Pastaj shkoni te seksioni CSS për të shtuar stile të thjeshta me kodin e mëposhtëm:

.cta-block {
text-align:center;
background-color:orange;
width:100%;
height:auto;
border: 2px solid orange;
}

.dwnld {
background-color: black;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
border-radius:2px;

}

Ju mund t'i personalizoni këto stile sipas dëshirës tuaj,

Kliko në publikoj :

Për të parë bllokun tuaj të ri të personalizuar në veprim, kthehuni te paneli juaj i administratorit të WordPress dhe krijoni një postim siç bëni zakonisht, klikoni Më shumë (+) për të shtuar një bllok të ri dhe për të zgjedhur bllokun tuaj të ri të personalizuar, siç theksojmë më poshtë.

Më pas, plotësoni bllokun tuaj të personalizuar sipas dëshirës dhe postoni mesazhin tuaj:

Tani, nëse kontrollojmë bllokun tonë të ri CTA me porosi në pjesën e përparme, kjo është ajo që shohim.

CTA jonë e personalizuar është pikërisht atje! Ju lutemi, mos u shqetësoni për aftësitë tona të projektimit – sigurisht, në një skenar të jetës reale, do të shpenzoni pak më shumë kohë duke personalizuar bllokun tuaj. Por shpresojmë se keni mësuar diçka këtu.

Burime të tjera të rekomanduara

Ju ftojmë gjithashtu të konsultoheni me RESSOURCES më poshtë për të hyrë më thellë në fillimin dhe kontrollin e faqes suaj të internetit dhe blogut.

• 10 Filialin e WordPress Plugins për të krijuar një program
• Si të shtoni kolona të shumta në WordPress
• Si të shtoni kolona të shumta në WordPress
• Si të përdorni sfonde të ndryshme në WordPress
• Elementor: Si të krijoni një animacion në hover

Përfundim

Ndërtimi i blloqeve me porosi nuk është një detyrë e lehtë. Por me WordPress plugins të tilla si Genesis Custom Blocks dhe Lazy Blocks, ndër të tjera, pavarësisht nëse jeni fillestar apo jo, do të keni sukses në krijimin e tyre. Nga më themeloret tek komplekset në varësi të nevojave tuaja.

Kjo është ajo për këtë artikull që ju tregon se si të shtoni fontet e personalizuara në një uebsajt të WordPress. Ju ftojmë të provoni. Nëse keni ndonjë shqetësim ose sugjerim, ju lutemi na tregoni brenda komente.

Megjithatë, gjithashtu do të jeni në gjendje të konsultoheni me ne RESSOURCES, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.

Ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.   

...