Totul despre codurile scurte WordPress

Dacă ați lucrat vreodată cu o temă WordPress, probabil că ați întâlnit un cod scurt WordPress... ceva care arată cam așa:

 [button type="twitter"]

Dacă ați înțeles ce este un shortcode și cum funcționează, este o altă problemă! Autorii de teme folosesc în mod extensiv coduri scurte, dar uneori doar „presupun” că utilizatorii vor ști ce sunt și cum funcționează, când, de fapt, pot fi destul de confuzi!

Vestea bună este că shortcode-urile sunt atât ușor de înțeles, cât și de utilizat. În acest articol, vom arunca o privire la codurile scurte pentru a afla cum le puteți profita la maximum înainte de a vedea cum vă puteți construi propriul cod scurt!

Să sărim înăuntru!

Ce sunt codurile scurte WordPress?

WordPress a introdus shortcode-urile cu mult timp în urmă, când a lansat v2.5 a WordPress (adică în 2008) și de atunci au fost utilizate pe scară largă în majoritatea temelor și pluginurilor.

Deci, ce sunt exact codurile scurte? Ei bine, pe scurt (îmi pare rău, nu am putut rezista), codurile scurte sunt un pic de cod care poate fi folosit aproape oriunde pe site-ul dvs. pentru a insera o caracteristică sau o funcție. Deci, în loc să trebuiască să codificați laborios, să spunem, o pictogramă de social media folosind HTML, puteți în schimb să inserați un shortcode care „spune” WordPress să insereze o pictogramă de social media oriunde introduceți un anumit shortcode. Stilul și funcția (în acest exemplu) pictogramei rețelelor sociale sunt predefinite de către dezvoltatorul temei, astfel încât toate sarcinile grele din perspectiva programării au fost făcute pentru dvs.

Deci, poate doriți să puneți o pictogramă Facebook în partea de jos a unei postări pe blog. În loc să inserați manual acest lucru, să adăugați un hyperlink, să actualizați dimensiunea pictogramei și așa mai departe, tot ce trebuie să faceți este să introduceți un shortcode care a fost „preprogramat” de către autorul temei care ar putea arăta astfel:

 social icon="facebook"]

Este important să reiterați în acest moment că nu puteți doar să adăugați coduri scurte create de dvs. și să vă așteptați să funcționeze. Trebuie să fi fost adăugate ca opțiune la tema dvs. De obicei, temele vin cu multe coduri scurte prefabricate, iar instrucțiunile temei vor include o listă de coduri scurte disponibile din care să le alegeți.

Codurile scurte sunt o comandă rapidă excelentă pentru non-dezvoltatori pentru a afișa multe tipuri de conținut fără a scrie cod și un instrument care poate economisi timp și pentru dezvoltatori.

Ce poți face cu codurile scurte WordPress?

Shortcode-urile sunt folosite pentru a insera o gamă largă de conținut de la un buton de îndemn la acțiune (CTA), caseta de reclamă dinamică, un formular de contact, galerii de imagini, glisoare și multe altele în afară de... dar, așa cum am menționat mai sus, ce opțiuni de coduri scurte sunt disponibile pentru dvs. va depinde de tema și pluginurile pe care le utilizați.

Un exemplu de cod scurt folosind pluginul Contact Form 7

Nu numai temele folosesc codurile scurte. Unul dintre cele mai populare pluginuri de formulare de contact disponibile astăzi, Formularul de contact 7, utilizează coduri scurte pentru a permite utilizatorilor să încorporeze rapid și ușor un formular de contact într-o locație la alegerea lor.

Pentru a face acest lucru, odată ce ați instalat Formularul de contact 7, tot ce trebuie să faceți pentru a adăuga un formular la o pagină sau a posta pe site-ul dvs. web este următorul.

Primul pas:

Accesați meniul Contact > Formulare de contact și creați un formular nou sau utilizați-l pe cel existent cu care vine pluginul.

Copiați codul scurt [contact-form-7 title="Contact form 1"] care corespunde formularului.

Pasul doi:

Lipiți codul scurt în locația în care doriți să apară formularul, așa cum se arată mai jos:

Salvați pagina și apoi ar trebui să vedeți asta:

Si asta e! Tocmai ați folosit cu succes un cod scurt pentru a încorpora un formular de contact pe site-ul dvs. web. După cum puteți vedea, codurile scurte sunt incredibil de ușor de utilizat și pot accelera sarcinile care altfel ar putea fi complexe și consumatoare de timp.

Utilizarea codurilor scurte implicite din WordPress

Deși majoritatea codurilor scurte pe care le veți utiliza probabil vor fi introduse ca urmare a instalării unei teme sau a unui plugin. Cu toate acestea, WordPress în sine are o mână de shortcodes „implicit” pe care le puteți folosi. Acestea includ:

• Audio
• Legendă
• Încorporare
• Galerie
• Lista de redare
• Video

Aceste coduri scurte pot fi folosite pe întregul site pentru a adăuga o gamă largă de conținut, de exemplu, un player audio. În imaginea de mai jos arătăm acest lucru folosit într-un widget Footer.

Pentru a afla cum să utilizați aceste coduri scurte mai detaliat, consultați articolul de asistență WordPress despre acestea.

Deci, ce faci atunci când fie WordPress, fie tema/plugin-ul pe care îl folosești nu oferă codul scurt de care ai nevoie pentru scopul tău specific? Ușor... creează-ți propriul tău!

Creați-vă propriul cod scurt WordPress

WordPress are un API Shortcode care poate fi folosit pentru a vă dezvolta relativ ușor propriile coduri scurte. Să parcurgem pașii de bază pe care trebuie să-i faceți pentru a vă crea propriul cod scurt acum.

Primul pas:

În acest exemplu, vom crea un buton CTA (Call to Action) pe care cititorul poate face clic pentru a fi redirecționat către un formular de contact.

Pentru a vă ajuta să păstrați lucrurile organizate, vă sugerăm să păstrați toate codurile scurte într-un fișier separat (în loc să adăugați cod la un fișier existent). Pentru a face acest lucru, creați un nou fișier gol în același folder cu fișierul functions.php al temei și denumiți-l așa cum ar fi my-shortcodes.php . După aceasta, includeți acest fișier în fișierul functions.php astfel:

 include('my-shortcodes.php');

În timp ce, așa cum tocmai am spus, vă recomandăm să vă creați codurile scurte într-un fișier separat, în scopul acestui articol vom continua și vom adăuga noul nostru cod direct în fișierul functions.php pentru a ajuta la păstrarea exemplului. cât se poate de clar.

Vom folosi funcția add_shortcode care este introdusă în fișierul wp-includes/shortcodes.php . Această funcție are nevoie de doi parametri, eticheta de cod scurt și funcția de apel invers.

 add_shortcode( string $tag, callable $callback )

Pasul doi:

Iată fragmentul de cod pe care îl puteți pune în fișierul functions.php :

 add_shortcode( 'my_cta_button', 'my_cta_function' ); function my_cta_function() { return '<span class="cta_button"><a href="THE_CONTACT_FORM_URL">Let us know you are interested</a></span>'; }

Rețineți că numele etichetelor și funcțiilor includ doar litere mici și litere de subliniere.

Nu uitați să înlocuiți „THE_CONTACT_FORM_URL” cu adresa URL a formularului de contact către care doriți să redirecționați utilizatorul.

De asemenea, puteți utiliza opțional acest cod CSS în fișierul style.css pentru a face butonul să arate mai atrăgător vizual:

 .cta_button a { color: white; text-decoration: none; } .cta_button { text-align: center; color: #fff !important; text-transform: uppercase; text-decoration: none; background: #ed3330; padding: 20px; border-radius: 5px; display: inline-block; border: none; transition: all 0.4s ease 0s; } .cta_button:hover { background: #434343; letter-spacing: 1px; -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); box-shadow: 5px 40px -10px rgba(0,0,0,0.57); transition: all 0.4s ease 0s; }

Pasul trei:

Afișarea codului scurt în conținutul site-ului se face ca și pentru orice alt cod scurt. În acest exemplu, codul nostru scurt ar fi [my_cta_button] . Adăugați acest lucru la o postare sau o pagină și ar trebui să vedeți ceva de genul acesta când vizualizați pagina:

Acest exemplu produce conținut care este predefinit în codul PHP pe care l-am furnizat. Să vedem cum puteți permite utilizatorului administrator să personalizeze rezultatul codului scurt dacă este necesar.

Un cod scurt care acceptă atributele utilizatorului

Pentru a crea un shortcode care are atribute editabile de utilizator, trebuie să definiți o serie de atribute pe care doriți să le permiteți utilizatorului să le modifice în cadrul funcției de apel invers. De exemplu, ați putea dori posibilitatea de a schimba titlul implicit și adresa URL a butonului.

 add_shortcode( 'my_cta_button', 'my_cta_function' ); function my_cta_function( $atts ) { $params = shortcode_atts( array( 'title' => 'Let us know you are interested', 'url' => 'THE_CONTACT_FORM_URL' ), $atts ); return '<span class="cta_button"><a href="' . $params['url'] .'">' . $params['title'] .'</a></span>'; }

În codul de mai sus, am folosit funcția shortcode_atts pentru a combina atributele definite de utilizator cu atributele cunoscute. În acest fel, trebuie să creați o funcție de cod scurt diferit pentru fiecare buton CTA de care veți avea nevoie, dar numai unul care redirecționează oriunde specifică utilizatorul de fiecare dată.

Utilizarea acestui cod ar trebui specificată astfel: [my_cta_button title='My Custom Title' url='MY_URL']

Adăugați un cod scurt într-un fișier șablon

Din punctul de vedere al dezvoltatorilor, există și o modalitate rapidă de a forța includerea codului scurt într-o poziție predefinită pe site-ul dvs., apelându-l în fișierul șablon corespunzător. De exemplu, dacă dorim ca butonul CTA să fie afișat în secțiunea de jos a fiecărei postări sau pagini, putem edita șablonul singular și folosim funcția do_shortcode . În tema Twenty Twenty, am editat fișierul singular.php și am inserat această linie sub închiderea containerului principal div:

 <?php echo do_shortcode('[my_cta_button]'); ?>

Rezultatul se va afișa sub conținutul postării și înaintea widget-urilor de subsol.

Concluzie

Înainte de a încheia acest articol, amintiți-vă că, dacă utilizați coduri scurte care sunt furnizate de tema dvs. sau de un plugin și apoi dezactivați acea temă/plugin, atunci acele coduri scurte vor înceta să funcționeze (veți rămâne doar cu paranteza de coduri scurte afișată. partea frontală a site-ului dvs. web).

Cu această mică avertizare, codurile scurte sunt o caracteristică cu adevărat utilă atunci când vine vorba de construirea unui site web. Ele sunt utilizate pe scară largă în WordPress și, dacă încă nu ați acceptat să le folosiți, atunci poate că acum este momentul să dați un alt aspect codurilor scurte!