Cum să creați un bloc WordPress personalizat (Mod ușor)

Blocurile implicite WordPress sunt excelente pentru conținut simplu — dar pot deveni rapid insuficiente atunci când aveți nevoie de layout-uri personalizate, elemente interactive sau designuri adaptate.

Aici intervin blocurile personalizate. Acestea vă oferă control complet asupra modului în care arată și funcționează conținutul dvs., fără a vă baza pe pluginuri voluminoase sau soluții de ocolire.

Partea cea mai bună? Crearea de blocuri personalizate este mai accesibilă decât cred majoritatea oamenilor. Cu instrumentele potrivite și un proces clar, nu trebuie să fii un dezvoltator pentru a crea blocuri care să corespundă nevoilor unice ale site-ului tău.

De-a lungul anilor, am folosit blocuri personalizate pentru a eficientiza fluxurile de lucru și pentru a livra site-uri WordPress complet personalizate pentru clienți — și acum, îți vom arăta cum să faci același lucru.

În acest ghid, veți învăța procesul pas cu pas pentru crearea blocurilor WordPress personalizate, chiar dacă nu sunteți un programator expert.

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

WordPress vine cu un editor de blocuri intuitiv, care vă permite să vă construiți cu ușurință postările și paginile prin adăugarea de elemente de conținut și aspect ca blocuri.

Implicit, WordPress vine cu mai multe blocuri utilizate frecvent. Pluginurile WordPress pot adăuga, de asemenea, propriile blocuri pe care le puteți utiliza.

Cu toate acestea, uneori, este posibil să doriți să creați un bloc personalizat pentru a face ceva specific pe site-ul dvs. WordPress, deoarece nu puteți găsi un plugin de bloc care să funcționeze pentru dvs.

Cu blocuri personalizate, puteți adăuga funcționalități și caracteristici unice site-ului dvs. web care s-ar putea să nu fie disponibile în blocurile predefinite. Acest lucru poate ajuta la automatizarea proceselor sau la eficientizarea creării de conținut pentru blogul dvs. WordPress.

De exemplu, ați putea crea un bloc personalizat pentru a afișa mărturii și apoi să inserați și să gestionați cu ușurință acel bloc fără nicio cunoștință de codare.

Acestea fiind spuse, să vedem cum să creăm cu ușurință un bloc complet personalizat în WordPress.

Pentru acest tutorial, vă vom prezenta două metode pentru a crea un bloc personalizat. Puteți utiliza linkurile rapide de mai jos pentru a sări la metoda aleasă:

• Metoda 1: Crearea de blocuri personalizate pentru WordPress folosind WPCode (Recomandat)
• Metoda 2: Crearea de blocuri personalizate pentru WordPress folosind pluginul Genesis Custom Code (gratuit)
• Bonus: Creați șabloane personalizate pentru postările dvs.

Metoda 1: Crearea de blocuri personalizate pentru WordPress folosind WPCode (Recomandat)

Dacă sunteți nou în WordPress și codarea pare intimidantă, WPCode este o alegere fantastică pentru dvs.

Ca parte a setului nostru de instrumente, am constatat că WPCode este cea mai prietenoasă pentru începători și cea mai sigură modalitate de a adăuga fragmente de cod personalizate.

Avem, de asemenea, o recenzie WPCode detaliată care ar putea fi utilă pentru a înțelege întregul său potențial.

Una dintre caracteristicile sale remarcabile este fragmentele de bloc, care vă permit să creați blocuri personalizate fără efort.

Mai întâi, trebuie să instalați și să activați pluginul WPCode. Pentru instrucțiuni detaliate, poate doriți să consultați ghidul nostru pentru începători despre cum se instalează un plugin WordPress.

După activare, accesați pagina Code Snippets » + Add Snippet din bara laterală de administrare WordPress.

Odată ce sunteți acolo, faceți clic pe butonul „Utilizați fragmentul” sub opțiunea „Adăugați codul personalizat (Fragment nou)”.

Acest lucru vă va duce la pagina „Creare fragment personalizat”, unde puteți începe prin a introduce un nume pentru noul bloc pe care urmează să-l creați.

Odată ce ați făcut acest lucru, selectați pur și simplu opțiunea „Blocuri Snippet” din meniul derulant „Tip de cod” din colțul din dreapta al ecranului.

Aceasta va afișa butonul „Editare cu editorul de blocuri” în caseta „Previzualizare cod”.

Pur și simplu faceți clic pe acest buton pentru a lansa editorul de blocuri.

Acum, o fereastră de dialog va apărea pe ecran, cerându-vă să salvați fragmentul de cod pentru a-l încărca în editorul de blocuri. Faceți clic pe butonul „Da” pentru a continua.

Acum că sunteți în editorul de blocuri, puteți crea cu ușurință un bloc personalizat folosind blocurile prefabricate disponibile în meniul de blocuri.

Pentru acest tutorial, vom crea un bloc personalizat pentru a adăuga testimoniale pe site-ul dvs.

Mai întâi, faceți clic pe butonul „Adăugare bloc” (+) din colțul din stânga sus al ecranului pentru a deschide meniul de blocuri.

De aici, trageți și plasați blocul Antet în interfața editorului de blocuri și denumiți-l „Testimoniale”.

În continuare, puteți utiliza blocurile de paragraf, pull-quote sau quote pentru a adăuga testimoniale de la diferiți clienți pe site-ul dvs.

Puteți chiar să vă personalizați blocul de testimoniale mai mult, utilizând blocurile de imagini, sigla site-ului, pictogramele sociale sau tagline-ul site-ului.

Poți, de asemenea, să configurezi dimensiunea, culoarea textului sau culoarea de fundal a mărturiilor tale din panoul de blocuri din partea dreaptă a ecranului.

Odată ce ați terminat, nu uitați să faceți clic pe butonul „Actualizare” din partea de sus pentru a salva setările blocului dvs. personalizat.

Apoi, pur și simplu faceți clic pe butonul „Return to WPCode Snippet” din partea de sus pentru a fi redirecționat la pagina editorului de cod.

Odată ce ajungeți acolo, derulați în jos la secțiunea „Inserare” și alegeți modul „Inserare automată”.

După activarea fragmentului de cod, blocul dvs. personalizat va fi adăugat automat în locația pe care alegeți să îl inserați pe site-ul dvs. web.

În continuare, trebuie să configurați locația blocului personalizat pe care l-ați creat.

Pentru a face acest lucru, pur și simplu faceți clic pe meniul derulant „Locație” din secțiunea „Inserare” și comutați la fila „Specific paginii”. De aici, puteți alege acum opțiunea „Inserare după postare” dacă doriți să afișați blocul de testimoniale după sfârșitul postării.

Odată ce faceți acest lucru, puteți configura și numărul de postări după care ar trebui să apară blocul de testimoniale. De exemplu, dacă introduceți numărul 3, blocul Testimoniale va apărea în fiecare a treia postare.

Puteți, de asemenea, să afișați blocul între diferite paragrafe, după rezumatele postărilor și multe altele.

Cu toate acestea, dacă nu găsești locația blocului pe care o cauți, poți crea propria regulă de logică condițională pentru a încorpora blocul personalizat în locul preferat.

Pentru a face acest lucru, derulați în jos la secțiunea „Smart Conditional Logic” și activați comutatorul „Enable Logic”.

Apoi, trebuie să faceți clic pe butonul „Adăugare grup nou” pentru a începe crearea unei reguli de logică condițională.

De exemplu, dacă dorești să afișezi blocul personalizat pe care l-ai creat doar pe o anumită pagină sau postare, atunci va trebui să selectezi opțiunea „URL pagină” din meniul derulant din dreapta.

După aceea, puteți lăsa meniul derulant din mijloc așa cum este și apoi adăugați URL-ul paginii/postării WordPress la alegere în câmpul din stânga.

De asemenea, puteți configura regula de logică condiționată pentru a afișa blocul personalizat doar pe o anumită pagină, utilizatori conectați, pagini WooCommerce, pagini Easy Digital Downloads, date specifice și multe altele.

Odată ce ați terminat, derulați înapoi în partea de sus a paginii și comutați comutatorul „Inactiv” la „Activ”. Apoi, faceți clic pe butonul „Actualizare” pentru a salva setările.

Blocul dvs. personalizat va fi acum adăugat automat în toate locațiile selectate pentru fragmentul de bloc.

Reține că blocul personalizat pe care l-ai creat nu va fi afișat ca o opțiune în meniul de blocuri al editorului WordPress Gutenberg.

Va trebui să configurați setările blocului vizitând pagina Fragmente de cod din tabloul de bord WordPress și făcând clic pe linkul „Editați” sub fragmentul de bloc.

Aceasta va deschide pagina „Edit Snippet”, unde puteți personaliza blocul sau îi puteți schimba locația și regulile de logică condițională cu ușurință.

Acum, vizitați site-ul dvs. web pentru a vedea blocul personalizat pe care l-ați creat în acțiune.

Iată blocul nostru personalizat de Mărturii pe site-ul nostru de demonstrație.

Metoda 2: Crearea de blocuri personalizate pentru WordPress folosind pluginul Genesis Custom Code (gratuit)

Dacă sunteți un utilizator intermediar și căutați o soluție gratuită, atunci această metodă este pentru dvs. Rețineți că va trebui să fiți familiarizat cu HTML și CSS pentru a urma instrucțiunile din această metodă.

Mai întâi, 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 se instalează un plugin WordPress.

De dragul acestui tutorial, vom construi un bloc de testimoniale.

Pasul 1: Creați un bloc personalizat pentru WordPress

Mai întâi, accesați pagina Blocuri personalizate » Adăugare nou din bara laterală de administrare WordPress.

Acest lucru vă va duce la pagina Editor de Blocuri, unde veți crea un bloc personalizat pentru site-ul dvs. WordPress.

De aici, puteți începe prin a da un nume blocului dvs.

Acum, în partea dreaptă a paginii, veți găsi proprietățile blocului pe care le puteți configura.

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

Slug-ul va fi completat automat pe baza numelui blocului dvs., deci nu trebuie să îl schimbați. Cu toate acestea, puteți introduce până la 3 cuvinte cheie în câmpul text „Keywords” pentru ca blocul dvs. să fie găsit cu ușurință.

Acum, este timpul să adăugați câmpuri la blocul dvs. Puteți adăuga diferite tipuri de câmpuri, cum ar fi text, numere, adrese de e-mail, URL-uri, culori, imagini, casete de selectare, butoane radio și multe altele.

Vom adăuga trei câmpuri la blocul nostru personalizat de testimoniale: un câmp de imagine pentru fotografia recenzentului, o casetă de text pentru numele recenzentului și un câmp de zonă de text pentru textul testimonialului.

Pur și simplu faceți clic pe butonul „+” pentru a insera primul câmp.

Aceasta va deschide câteva opțiuni pentru câmp în coloana din dreapta. Să le analizăm pe fiecare.

• Etichetă câmp: Puteți folosi orice nume doriți pentru eticheta câmpului. Să numim primul nostru câmp „Imagine recenzent”.
• 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 alege „Imagine” din meniul derulant.
• Locație câmp: 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. Acesta nu este obligatoriu dacă creați acest bloc pentru uz personal, dar poate fi util pentru blogurile cu mai mulți autori.

De asemenea, este posibil să vedeți opțiuni suplimentare în funcție de tipul de câmp pe care îl alegeți. De exemplu, dacă selectați un câmp text, veți obține opțiuni suplimentare precum textul de substituent și limita de caractere.

Urmând procesul de mai sus, să adăugăm încă 2 câmpuri pentru blocul nostru de mărturii, făcând clic pe butonul ‘+’.

În cazul în care dorești să reordonezi câmpurile, poți face acest lucru trăgându-le folosind mânerul din partea stângă a etichetei fiecărui câmp. Pentru a edita sau șterge un anumit câmp, trebuie să dai clic pe eticheta câmpului și să editezi opțiunile din coloana din dreapta.

Când ați terminat, faceți clic pe butonul „Publicați” din partea dreaptă a paginii pentru a salva blocul Gutenberg personalizat.

Pasul 2: Creează un șablon de bloc personalizat

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

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

Există două modalități 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 tău necesită rularea unui cod PHP în fundal, atunci va trebui să creezi manual un fișier șablon de bloc și să îl încarci în folderul temei tale.

Metoda 1: Utilizarea editorului de șabloane încorporat

Pe ecranul de editare a blocului personalizat, comutați pur și simplu la fila „Editor de șabloane” și introduceți codul HTML sub fila marcaj.

Poți scrie codul tău HTML și poți folosi acolade duble pentru a insera valorile câmpurilor blocului.

De exemplu, am folosit următorul HTML pentru blocul eșantion pe care l-am 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, comutați la fila „CSS” pentru a stiliza marcajul de ieșire al blocului dvs.

Iată CSS-ul de eșantion 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 de bloc personalizate

Această metodă este recomandată dacă trebuie să utilizați PHP pentru a interacționa cu câmpurile blocului dvs. personalizat. Va trebui să încărcați șablonul editorului direct în tema dvs.

Mai întâi, trebuie să creați un folder pe computer și să-l numiți folosind slug-ul numelui blocului dvs. personalizat.

De exemplu, blocul nostru demo se numește Testimonials, așa că vom crea un folder testimonials.

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 blocului dvs.

Iată șablonul de eșantion 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>

Acum, probabil ați observat cum am folosit funcția block_field() pentru a prelua date dintr-un câmp de bloc.

Am încadrat câmpurile blocului nostru în codul HTML pe care dorim să îl utilizăm pentru a afișa blocul. Am adăugat, de asemenea, clase CSS pentru a putea stiliza blocul corespunzător.

Nu uitați să salvați fișierul în folderul pe care l-ați creat anterior.

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 interiorul folderului pe care l-ați creat.

Vom folosi acest fișier pentru a adăuga CSS necesar pentru stilizarea afișării blocului nostru. Iată CSS-ul eșantion 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.

Folderul dvs. de șabloane de bloc va avea acum două fișiere de șablon în interior.

După aceea, trebuie să încărcați folderul blocului pe site-ul dvs. folosind un client FTP sau aplicația Manager fișiere din panoul de control al contului dvs. de hosting WordPress.

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

Dacă folderul temei dvs. nu are un folder numit „blocks”, creați un nou director și numiți-l blocks.

Apoi, trebuie să încărcați folderul pe care l-ați creat pe computer în folderul blocks.

Atât! Ați creat cu succes fișiere de șablon manuale pentru blocul dvs. personalizat.

Pasul 3: Previzualizați blocul dvs. personalizat

Înainte de a putea previzualiza HTML/CSS, va trebui să furnizați niște date de test care pot fi utilizate pentru a afișa un exemplu de ieșire.

În zona de administrare WordPress, editați blocul dvs. și comutați la fila „Previzualizare editor”. Aici, trebuie să introduceți niște date fictive.

Aceste date nu vor face parte din blocul dvs. personalizat și vor fi utilizate numai pentru a previzualiza modificările pe care le-ați făcut folosind HTML și CSS.

După ce ați adăugat datele, nu uitați să faceți clic pe butonul „Actualizare” pentru a salva modificările.

Dacă nu faceți clic pe butonul „Actualizare”, nu veți putea vedea previzualizarea blocului dvs. personalizat.

Acum puteți comuta la fila „Front-end Preview” pentru a vedea cum va arăta blocul dvs. pe partea frontală a site-ului dvs. WordPress.

Dacă totul arată bine pentru dvs., atunci puteți actualiza din nou blocul pentru a salva orice modificări nesalvate.

Pasul 4: Utilizarea blocului personalizat în WordPress

Acum puteți utiliza blocul personalizat în WordPress, la fel cum ați face cu orice alt bloc.

Pur și simplu editați orice postare sau pagină unde doriți să utilizați acest bloc. Apoi, faceți clic pe butonul „Adăugare bloc” (+) din colțul din stânga sus pentru a deschide meniul de blocuri.

Aici, utilizați funcția de căutare pentru a găsi blocul dvs. tastând numele sau cuvintele cheie. Apoi adăugați-l la pagină sau postare.

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

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

Pe măsură ce vă deplasați de la un bloc WordPress personalizat la altul, editorul va afișa automat o previzualizare live a blocului dvs.

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

Iată cum arată blocul Testimonials pe site-ul nostru de test.

Bonus: Creați șabloane personalizate pentru postările dvs.

Pe lângă crearea de blocuri personalizate, puteți adăuga șabloane personalizate pentru postările de blog sau paginile site-ului dvs.

Un șablon este un aspect pe care îl puteți adăuga postării dvs. pentru a o face să arate diferit de alte pagini și conținut. Acest lucru poate face postările dvs. mai captivante și mai atrăgătoare vizual și poate ajuta la generarea mai multor lead-uri.

Puteți crea cu ușurință un șablon pentru toate postările dvs. prin crearea unui bloc Grup reutilizabil.

Mai întâi, va trebui să faceți clic pe butonul „Adăugați bloc” (+) pentru a adăuga blocul Grup la postare. Apoi, puteți adăuga orice blocuri în cadrul grupului, inclusiv antet, media și text, imagini de copertă și multe altele.

Odată ce ați creat șablonul postării, faceți clic pe meniul cu trei puncte din bara de instrumente a blocului din partea de sus a blocului. Apoi, faceți clic pe butonul „Creare model”.

După aceea, șablonul postării tale va fi salvat ca un bloc reutilizabil. Îl poți accesa și adăuga la orice postare deschizând meniul de blocuri (+) și comutând la fila „Tipare”.

Cu toate acestea, țineți cont de faptul că această metodă de creare a șabloanelor de postări personalizate permite o funcționalitate limitată. Pentru a crea un șablon personalizat mai frumos, fără nicio codare, puteți utiliza SeedProd, care este cel mai bun constructor de pagini de pe piață.

Pentru detalii, consultați tutorialul nostru despre cum să creați șabloane personalizate pentru postări unice în WordPress.

Sperăm că acest articol v-a ajutat să învățați cum să creați cu ușurință blocuri Gutenberg personalizate pentru site-ul dvs. WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre cum să adăugați o listă de verificare pentru articole de blog în editorul WordPress și să consultați sfaturile esențiale pentru utilizarea shortcodurilor pe site-ul dvs.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.