Cum să creați un bloc WordPress personalizat (mod facil)

Doriți să creați un bloc Gutenberg personalizat pentru site-ul dvs. WordPress?

În timp ce WordPress vine cu o mulțime de blocuri de bază pentru crearea de conținut, este posibil să aveți nevoie de ceva mai personalizat pentru site-ul dvs.

În acest articol, vă vom arăta o modalitate ușoară de a crea blocuri Gutenberg personalizate pentru site-ul dvs. WordPress.

De ce să creați un bloc WordPress personalizat?

WordPress vine cu un editor de blocuri intuitiv care vă permite să vă creați cu ușurință postările și paginile adăugând conținut și elemente de aspect ca blocuri.

În mod implicit, WordPress este livrat cu mai multe blocuri utilizate în mod obișnuit. Pluginurile WordPress pot adăuga, de asemenea, propriile blocuri pe care le puteți utiliza.

Cu toate acestea, uneori poate doriți să vă creați propriul bloc personalizat pentru a face ceva specific și nu puteți găsi un plugin pentru blocuri care să funcționeze pentru dvs.

În acest tutorial, vă vom arăta cum să creați un bloc complet personalizat.

Notă : Acest articol este pentru utilizatorii intermediari. Va trebui să fii familiarizat cu HTML și CSS pentru a crea blocuri personalizate Gutenberg.

Pasul 1: Începeți cu primul dvs. bloc personalizat

În primul rând, trebuie să instalați și să activați pluginul Genesis Custom Blocks. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

Creat de oamenii din spatele popularului Genesis Theme Framework și StudioPress, acest plugin oferă dezvoltatorilor instrumente simple pentru a crea rapid blocuri personalizate pentru proiectele lor.

De dragul acestui tutorial, vom construi un bloc „mărturii”.

Mai întâi, mergeți la Blocuri personalizate » Adăugați o pagină nouă din bara laterală din stânga a panoului de administrare.

Acest lucru vă va duce la pagina Editor de blocuri.

De aici, trebuie să dai un nume blocului tău.

În partea dreaptă a paginii, veți găsi proprietățile blocului.

Aici puteți alege o pictogramă pentru blocul dvs., puteți adăuga o categorie și puteți adăuga cuvinte cheie.

Slug-ul va fi completat automat pe baza numelui blocului dvs., astfel încât nu trebuie să îl schimbați. Cu toate acestea, puteți scrie până la 3 cuvinte cheie în câmpul de text Cuvinte cheie, astfel încât blocul dvs. să fie ușor de găsit.

Acum să adăugăm câteva câmpuri la blocul nostru.

Puteți adăuga diferite tipuri de câmpuri, cum ar fi text, numere, adresă de e-mail, URL, culoare, imagine, casetă de selectare, butoane radio și multe altele.

Vom adăuga 3 câmpuri la blocul nostru de mărturii personalizate: un câmp de imagine pentru imaginea recenzentului, o casetă de text pentru numele recenzentului și un câmp de zonă de text pentru textul de mărturie.

Faceți clic pe butonul [+] Adaugă câmp pentru a insera primul câmp.

Acest lucru va deschide câteva opțiuni pentru domeniu. Să aruncăm o privire la fiecare dintre ele.

• Eticheta câmpului : puteți utiliza orice nume dorit pentru eticheta câmpului. Să numim primul nostru câmp „Imagine de examinator”.
• Nume câmp : Numele câmpului va fi generat automat pe baza etichetei câmpului. Vom folosi acest nume de câmp în pasul următor, așa că asigurați-vă că este unic pentru fiecare câmp.
• Tip câmp : Aici puteți selecta tipul de câmp. Dorim ca primul nostru câmp să fie o imagine, așa că vom selecta Imagine din meniul drop-down.
• Locația câmpului : puteți decide dacă doriți să adăugați câmpul la editor sau la inspector.
• Text de ajutor : puteți adăuga un text pentru a descrie câmpul. Acest lucru nu este necesar dacă creați acest bloc pentru uz personal, dar poate fi util pentru blogurile cu mai mulți autori.

De asemenea, puteți obține câteva opțiuni suplimentare în funcție de tipul de câmp pe care îl alegeți. De exemplu, dacă selectați un câmp de text, veți primi opțiuni suplimentare, cum ar fi textul substituent și limita de caractere.

În urma procesului de mai sus, să adăugăm alte 2 câmpuri pentru blocul nostru de mărturii făcând clic pe butonul [+] Adaugă câmp .

În cazul în care doriți să reordonați câmpurile, puteți face asta trăgându-le folosind mânerul din partea stângă a fiecărei etichete de câmp.

Pentru a edita sau șterge un anumit câmp, trebuie să faceți clic pe eticheta câmpului și să editați opțiunile din coloana din dreapta.

După ce ați terminat, faceți clic pe butonul Publicare , prezent în partea dreaptă a paginii, pentru a salva blocul personalizat Gutenberg.

Pasul 2: Creați un șablon de bloc personalizat

Deși ați creat blocul WordPress personalizat în ultimul pas, acesta nu va funcționa până când nu creați un șablon de bloc.

Șablonul bloc determină exact modul în care informațiile introduse în bloc sunt afișate pe site-ul dvs. Puteți decide cum arată folosind HTML și CSS, sau chiar cod PHP dacă trebuie să rulați funcții sau să faceți alte lucruri avansate cu datele.

Există două moduri de a crea un șablon de bloc. Dacă ieșirea blocului dvs. este în HTML/CSS, atunci puteți utiliza editorul de șabloane încorporat.

Pe de altă parte, dacă ieșirea blocului necesită ca PHP să ruleze în fundal, atunci va trebui să creați manual un fișier șablon de bloc și să-l încărcați în folderul cu tema.

Metoda 1. Utilizarea editorului de șabloane încorporat

Pe ecranul de editare a blocurilor personalizate, pur și simplu comutați la fila Editor de șabloane și introduceți codul HTML în fila de marcare.

Puteți scrie codul HTML și puteți utiliza paranteze duble pentru a insera valorile câmpurilor blocate.

De exemplu, am folosit următorul cod HTML pentru exemplul de bloc creat mai sus.

<div class="testimonial-item">
<img src="reviewer-image" class="reviewer-image">
<h4 class="reviewer-name">reviewer-name</h4>
<div class="testimonial-text">testimonial-text</div>
</div>

După aceea, treceți la fila CSS pentru a stila marcajul de ieșire a blocului.

Iată exemplul CSS pe care l-am folosit pentru blocul nostru personalizat.

.reviewer-name  
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;


.reviewer-image 
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;


.testimonial-text 
    font-size:14px;


.testimonial-item  
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;

Metoda 2. Încărcarea manuală a șabloanelor bloc personalizate

Această metodă este recomandată dacă trebuie să utilizați PHP pentru a interacționa cu câmpurile dvs. de bloc personalizate.

Practic, va trebui să încărcați șablonul editorului direct pe tema dvs.

În primul rând, trebuie să creați un folder pe computerul dvs. denumește-l cu numele blocului personalizat. De exemplu, blocul nostru demonstrativ se numește Mărturii, așa că vom crea un folder cu mărturii.

Apoi, trebuie să creați un fișier numit block.php folosind un editor de text simplu. Aici veți pune partea HTML / PHP a șablonului de bloc.

Iată modelul de șablon pe care l-am folosit pentru exemplul nostru.

<div class="testimonial-item <?php block_field('className'); ?>">
<img class="reviewer-image" src="<?php block_field( 'reviewer-image' ); ?>" alt="<?php block_field( 'reviewer-name' ); ?>" />
<h4 class="reviewer-name"><?php block_field( 'reviewer-name' ); ?></h4>
<div class="testimonial-text"><?php block_field( 'testimonial-text' ); ?></div>
</div>

Observați cum am folosit funcția block_field() pentru a prelua date dintr-un câmp bloc.

Ne-am împachetat câmpurile de bloc în codul HTML pe care vrem să-l folosim pentru a afișa blocul. Am adăugat și clase CSS, astfel încât să putem stila corect blocul.

Nu uitați să salvați fișierul în folderul creat mai devreme.

Apoi, trebuie să creați un alt fișier folosind editorul de text simplu de pe computer și să-l salvați ca block.css în folderul pe care l-ați creat.

Vom folosi acest fișier pentru a adăuga CSS necesar pentru a stila afișarea blocurilor. Iată exemplul CSS pe care l-am folosit pentru acest exemplu.

.reviewer-name  
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;


.reviewer-image 
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;


.testimonial-text 
    font-size:14px;


.testimonial-item  
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;

Nu uitați să salvați modificările.

Dosarul dvs. de șablon bloc va avea acum două fișiere șablon în el.

După aceea, trebuie să încărcați folderul de blocare pe site-ul dvs. web folosind un client FTP sau aplicația File Manager din panoul de control al contului dvs. de găzduire WordPress.

Odată conectat, navigați la folderul /wp-content/themes/your-current-theme/ .

Dacă folderul dvs. cu tema nu are un nume de folder blocuri, atunci continuați și creați un director nou și denumește-l blocks .

Acum intrați în folderul blocuri și încărcați folderul creat pe computer în folderul blocuri.

Asta e tot! Ați creat cu succes fișiere șablon manuale pentru blocul dvs. personalizat.

Pasul 3. Previzualizați blocul personalizat

Acum, înainte de a putea previzualiza HTML/CSS, trebuie să furnizați câteva date de testare care pot fi folosite pentru a afișa un exemplu de ieșire.

În interiorul zonei de administrare WordPress, editați blocul și treceți la fila Previzualizare editor. Aici, trebuie să introduceți câteva date false.

Nu uitați să faceți clic pe butonul Actualizare pentru a salva modificările înainte de a putea previzualiza.

Acum puteți trece la fila Previzualizare front-end pentru a vedea cum va arăta blocul dvs. pe front-end (zona publică a site-ului dvs. WordPress).

Dacă totul vi se pare bine, atunci vă puteți actualiza blocul pentru a salva orice modificări nesalvate.

Pasul 4. Utilizarea blocului personalizat în WordPress

Acum puteți utiliza blocul personalizat în WordPress așa cum ați folosi orice alte blocuri.

Pur și simplu editați orice postare sau pagină în care doriți să utilizați acest bloc.

Faceți clic pe butonul de adăugare a unui bloc nou și căutați blocul dvs. introducând numele sau cuvintele cheie ale acestuia.

După ce inserați blocul în zona de conținut, veți vedea câmpurile de bloc pe care le-ați creat pentru acest bloc personalizat.

Puteți completa câmpurile blocate după cum este necesar.

Pe măsură ce vă îndepărtați de bloc în alt bloc, editorul va afișa automat o previzualizare live a blocului dvs.

Acum vă puteți salva postarea și pagina și le puteți previzualiza pentru a vedea blocul personalizat în acțiune pe site-ul dvs. web.

Iată cum arată blocul de mărturii pe site-ul nostru de testare.

Sperăm că acest articol te-a ajutat să înveți cum să creezi cu ușurință blocuri Gutenberg personalizate pentru site-ul tău WordPress.

De asemenea, poate doriți să vedeți ghidul nostru despre cum să creați o temă WordPress personalizată de la zero sau să vedeți alegerea noastră de experți a pluginurilor WordPress obligatorii pentru site-ul dvs.

Dacă ți-a plăcut acest articol, atunci abonează-te la canalul nostru YouTube pentru tutoriale video WordPress. Ne puteți găsi și pe Twitter și Facebook.