Cum să adăugați coduri scurte în WordPress

Doriți să includeți coduri scurte pe site-ul dvs.? Ai venit la locul potrivit. În acest ghid, vă vom arăta cum să adăugați coduri scurte în WordPress și vă vom arăta câteva exemple, astfel încât să puteți profita la maximum de ele.

De când codurile scurte au fost adăugate la WordPress în versiunea 2.5, utilizatorii le-au folosit pentru a realiza tot felul de personalizare. Shortcode-urile sunt foarte utile și ne permit să rulăm o anumită bucată de cod în postări, pagini și aproape oriunde pe site-urile noastre web. În plus, sunt foarte ușor de utilizat chiar și pentru cei mai neexperimentați utilizatori.

Ce sunt codurile scurte?

Un shortcode va declanșa o bucată de cod specificată de numele shortcode-ului, care este întotdeauna inclusă între paranteze drepte astfel: [shortcode-name]

Codul pe care îl rulează fiecare cod scurt depinde de modul în care a fost creat codul scurt. Multe plugin-uri oferă propriile coduri scurte, iar WordPress include și unele în mod implicit. Și cea mai bună parte este că API-ul WP shortcode vă permite să vă creați propriile coduri scurte personalizate.

Shortcode-urile sunt un instrument excelent pentru dezvoltatori, deoarece vă permit să inserați orice script oriunde pe site-ul dvs. Când utilizați același script de mai multe ori, puteți utiliza pur și simplu același shortcode fără a fi nevoie să repetați codul. Acest lucru vă ajută să economisiți timp și să vă păstrați codul curat.

În plus, un shortcode poate lua unele valori, care funcționează similar cu parametrii funcțiilor.

[ shortcode val1='hi' val2='ok' ]

Și, de asemenea, poate fi folosit ca o etichetă HTML atunci când deschideți și închideți shortcodes ca acesta [ shortcode ] some text [ /shortcode ] .

În rezumat, un shortcode vă permite să rulați un script PHP pe front-end fără a scrie niciun cod (dacă este un shortcode existent). WordPress și unele plugin-uri au unele coduri scurte în mod implicit, dar le poți crea și pe propriile tale, în funcție de nevoile tale.

În cele din urmă, există diferite tipuri de coduri scurte: pentru a insera galerii, produse WooCommerce, formulare, imagini și multe altele. Fiecare cod scurt este diferit și face lucruri diferite.

Dacă aveți nevoie de mai multe informații, aruncați o privire la acest ghid complet despre shortcodes.

Acum că înțelegem mai bine care sunt acestea, să vedem cum să adăugați coduri scurte pe site-ul dvs. WordPress .

Cum să adăugați coduri scurte în WordPress

Înainte de a începe, este important să rețineți că, deoarece fiecare cod scurt este construit diferit, ele pot avea sau nu valori. Aceste valori sunt specifice fiecărui cod scurt și transmit valorile codului pentru a obține rezultatul dorit.

După cum am menționat anterior, există diferite tipuri de coduri scurte, iar codurile scurte WooCommerce sunt unele dintre cele mai comune. De exemplu, codul scurt [ woocommerce_cart ] va afișa coșul WooCommerce oriunde îl inserați.

Pentru a-l testa, pur și simplu lipiți codul scurt pe o postare sau pe o pagină sau introduceți-l astfel: [ woocommerce_cart ] . Apoi, aruncați o privire la front-end și veți vedea coșul WC chiar acolo unde ați introdus codul scurt.

NOTĂ : Deoarece vom edita câteva fișiere de bază, înainte de a începe, vă recomandăm să faceți o copie de rezervă completă a site-ului dvs. și să creați o temă secundară. Puteți crea unul programatic sau folosind oricare dintre aceste pluginuri.

Adăugați coduri scurte WordPress cu valori

Acum să folosim codul scurt WordPress din galeria implicită pentru a afla cum să adăugați coduri scurte cu valori.

Codul scurt al galeriei afișează o galerie de imagini frumos și acceptă mai multe valori. Trebuie să includeți valoarea ID pentru a specifica ce imagini doriți să afișați în galerie. Acest parametru preia ID-urile și afișează acele imagini specifice.

De exemplu, dacă dorim să afișăm imaginile cu ID-urile 720, 729, 731 și 732, adăugăm shortcode-ul la o postare sau o pagină după cum urmează: [ gallery ids=”729,732,731,720” ]

Pentru a-l testa, pur și simplu lipiți codul scurt, înlocuind ID-urile imaginii cu propriile ID-uri. Dacă nu vă cunoașteți ID-urile imaginii, deschideți-le în editorul bibliotecii media și veți vedea ID-ul pe adresa URL a browserului și permalink tipărit pe detaliile imaginii.

Dacă utilizați editorul de text clasic, puteți pur și simplu să lipiți codul scurt în conținut. Pe Gutenberg, pe de altă parte, puteți folosi blocul de coduri scurte. În plus, mulți constructori de pagini și teme includ și alte soluții de gestionare a codurilor scurte pe care le puteți utiliza.

Gutenberg

Editor clasic

După ce adăugați codul scurt, verificați interfața site-ului și ar trebui să vedeți ceva de genul acesta:

Utilizarea codurilor scurte în fișierele șablon

O altă modalitate de a utiliza codurile scurte WordPress este să le adăugați la fișierele șablon. Dacă doriți să dezvoltați o soluție personalizată, aceasta este o opțiune interesantă pentru dvs. De exemplu, acest lucru vă permite să rulați un cod scurt pe o condițională logică sau să schimbați valorile codului scurt în mod dinamic, printre multe alte posibilități.

Puteți utiliza coduri scurte într-un fișier șablon cu funcția PHP do_shortcode() . Aceasta este o funcție implicită WordPress pe care o puteți utiliza în orice fișier.

Pentru a rula un shortcode dintr-un fișier, pur și simplu adăugați următoarele:

echo do_shortcode(' [ gallery ids=”21,42,32,11” ] ');

Acum personalizați antetul și rulați codul scurt al galeriei în fișierul header.php . Pentru a face acest lucru, trebuie să suprascrieți acest fișier folosind o temă copil. Pentru mai multe informații despre cum să personalizați șabloanele, consultați acest ghid.

În tabloul de bord WordPress, adăugați codul scurt în antet, mergând la Aspect > Editor de teme și deschizând fișierul header.php . Mergeți la sfârșitul fișierului și inserați codul așa cum se arată mai jos:

După ce includeți scriptul de mai sus în fișier, veți vedea galeria în antet.

Utilizarea shortcode-urilor cu cârlige WordPress

O altă modalitate de a adăuga coduri scurte la WordPress în mod programatic este să le folosiți în combinație cu cârlige. Dacă nu sunteți familiarizat cu cârligele, vă recomandăm să consultați acest ghid pentru a afla mai multe despre ele.

Pentru a utiliza un cod scurt cu cârlige, aveți nevoie de funcția do_shortcode() , așa cum am văzut în secțiunea anterioară.

Următorul script va funcționa pe fișierul functions.php al temei copil. Folosim hook-ul wp_footer() , deci acesta va fi imprimat pe subsolul site-ului.

/* Shortcode with wp_footer hook*/
add_action('wp_footer','QuadLayers_footer_shortcode');
function QuadLayers_footer_shortcode(){
echo do_shortcode(' /* Shortcode with wp_footer hook*/
add_action('wp_footer','QuadLayers_footer_shortcode');
function QuadLayers_footer_shortcode(){
echo do_shortcode(' [ products ids="623" ] ');
} ');
}

Acest shortcode vine cu WooCommerce în mod implicit și este folosit pentru a afișa produse. În acest caz, îl folosim pentru a afișa un singur produs, cu ID = 623.

Pentru mai multe informații despre cum să personalizați subsolul de pe site-ul dvs., consultați acest ghid.

Cum să creați coduri scurte personalizate în WordPress

O altă alternativă interesantă este să vă creați propriile coduri scurte personalizate. Acest lucru nu este greu, dar necesită niște abilități de bază de dezvoltator și unele cunoștințe de codificare. Dacă nu sunteți un utilizator avansat, nu vă faceți griji. Chiar și cei mai neexperimentați programatori vor găsi acest lucru destul de ușor.

WordPress ne oferă funcția add_shortcode() pentru a construi și adăuga propriile noastre coduri scurte. Să vedem cum să folosiți această funcție pentru a crea un shortcode personalizat cu câteva exemple de scripturi.

Afișează un mesaj diferit pentru utilizatorii conectați și deconectați

Următorul script va crea un cod scurt și va imprima un mesaj pentru utilizatori. Pentru a o face mai interesantă, am aplicat o condiție de a afișa diferite mesaje pentru utilizatorii conectați și deconectați.

 /* Shortcode autentificat*/
add_shortcode('loggedin','QuadLayers_shortcode_loggedin');
funcția QuadLayers_shortcode_loggedin($atts){
    if(este_user_logged_in()==true){
        $response='ești autentificat';
    }
    altfel{
        $response='ești deconectat';
    }
returnează $răspuns;
}

Folosind un dacă, verificăm dacă utilizatorul este autentificat și afișăm mesajul „Ești autentificat” dacă este adevărat și „Ești deconectat” în caz contrar.

Afișează o singură postare după ID

O altă opțiune este să adăugați un cod scurt WordPress care afișează o postare specificată pe care o vom transmite ca valoare în codul scurt.

 add_shortcode('get-post','QuadLayers_shortcode_post');
funcția QuadLayers_shortcode_post($atts) {
    $a = shortcode_atts( array('id' => '',), $atts ); 
    $args = array('post_type' => 'post','p' => $a['id']); 
    $interogare = new WP_Query($args); 
    $interogare->the_post();
    $string = '<h3>'.get_the_title().'</h3>' ; 
    $șir.=the_post_thumbnail();
    $șir .= get_the_content();
    returnează $șir;
}

În acest exemplu, am adăugat codul scurt [ get-post ] și arată astfel:

Rulați diferite coduri scurte într-o condiție logică

În acest exemplu, vom crea un cod scurt personalizat pentru a rula diferite coduri scurte într-o condiție logică.

Codul nostru scurt personalizat va afișa diferite formulare care au fost create cu un plugin de formular de contact. Prin urmare, vom tipări un alt formular pentru utilizatorii conectați și deconectați.

 add_shortcode('show-form','QuadLayers_custom_shortcode');
funcția QuadLayers_custom_shortcode(){
    if(este_user_logged_in()==true){
        $response='<h3>Contactați-ne</h3>';
        $response.='[wpforms]';
    }
    altfel{
        $response='<h3>Abonați-vă la buletinul nostru informativ</h3>';
        $response.='[wpforms]';
    }
    echo do_shortcode($răspuns);
}

Încă o dată, folosim un condițional dacă pentru a verifica dacă utilizatorul este conectat sau nu și pentru a afișa un anumit formular pe baza acestuia.

Note

• Returnați întotdeauna datele atunci când creați un cod scurt. Dacă îl repetați, este posibil să întâmpinați unele probleme legate de poziția în care ar trebui să afișați conținutul
• Codul do_shortcode(); funcția funcționează excelent în majoritatea fișierelor șablon, dar, deoarece trebuie să fie repetată, ar putea declanșa și unele probleme
• Multe plugin-uri oferă coduri scurte pe care le puteți folosi în mod liber. Cu toate acestea, este posibil ca unele coduri scurte să nu funcționeze în postări, pagini sau atunci când încercați să le utilizați în widget-urile antet, subsol sau bară laterală. Acest lucru depinde de cât de complex este codul scurt și de modul în care a fost construit
• Dacă vedeți unele erori când utilizați un cod scurt personalizat în editorul Gutenberg, înseamnă că codul scurt nu este compatibil cu Gutenberg. Va funcționa oricum pe front-end și puteți încerca să treceți la editorul implicit pentru a scăpa de această eroare

Concluzie

Pe scurt, codurile scurte sunt instrumente utile care vă permit să rulați o anumită bucată de cod oriunde pe site-ul dvs. Când utilizați același script de mai multe ori, puteți crea un cod scurt și îl puteți utiliza pentru a evita repetarea codului de mai multe ori. Shortcode-urile sunt ușor de utilizat chiar și pentru începători și vă ajută să economisiți timp.

În acest ghid, am văzut diferite moduri de a adăuga coduri scurte în WordPress. Am învățat cum să folosim coduri scurte cu valori, în fișiere șablon și cu cârlige. În plus, am văzut cum să creăm coduri scurte personalizate și ți-am oferit câteva exemple de scripturi pe care le poți ajusta în funcție de nevoile tale.

Pentru a afla mai multe despre shortcodes și despre cum să vă personalizați site-ul, consultați următoarele postări:

• Codurile scurte WooCommerce: Ghidul final
• Cum să personalizați pagina de magazin WooCommerce
• Personalizați pagina produsului în WooCommerce

Ați adăugat coduri scurte pe site-ul dvs. WordPress? Ați avut probleme în urma acestui ghid? Spune-ne în comentariile de mai jos!