Vrei să înveți cum să creezi un shortcode în WordPress?
A învăța cum să creați un shortcode în WordPress poate fi o modalitate eficientă de a vă personaliza postările și paginile. Cu toate acestea, dacă sunteți nou în acest proces, s-ar putea să vă fie dificil să vă dați seama cum să utilizați o astfel de caracteristică pe site-ul dvs. web.
De aceea, am creat un ghid care să vă ajute să începeți. Privind cum funcționează codurile scurte și cum să le aplicați eficient, puteți începe să vă personalizați conținutul după bunul plac, fără a fi nevoie de pluginuri suplimentare.
În acest articol, vom discuta ce sunt codurile scurte WordPress și de ce ați putea lua în considerare utilizarea lor. Apoi vă vom arăta cum să vă creați propriul dvs.
Dar înainte, dacă nu ați instalat niciodată WordPress, descoperiți Cum se instalează un blog WordPress pași 7 et Cum de a găsi, a instala și a activa o temă WordPress pe blog-ul dvs.
Apoi înapoi la motivul pentru care suntem aici.
Ce sunt codurile scurte WordPress?
Codurile rapide WordPress acționează ca comenzi rapide care vă permit să încorporați rapid elemente într-o postare sau pagină. Acestea sunt de obicei o singură linie de cod cuprinsă între paranteze pătrate. De exemplu :
[exemplecodehortcode]Acest cod va afișa o funcție predeterminată pe front-end-ul site-ului dvs.
WordPress au introdus pentru prima dată shortcodes cu eliberarea de Shortcode API. Acest lucru a făcut mai ușor pentru utilizatori să adauge elemente atractive la postările și paginile lor, cum ar fi Hărți Google sau butonul „Like” de pe Facebook.
Există în WordPress Mod implicitt șase coduri scurte :
- legendă: împachetați subtitrări în jurul conținutului
- galerie : afișează galerii de imagini
- Audio: încorporează și redă fișiere audio
- Vidéo : încorporează și redă fișiere video
- lista de redare : afișează o colecție de fișiere audio sau video
- încastra : înfășoară elementele inline
De asemenea, veți întâlni două tipuri de bază de formatare a codurilor scurte: self-closing et enclosing.
Shortcodes self-closing pot sta singuri și nu au nevoie de o etichetă de închidere.
Între timp, enclosing înconjoară conținutul pe care vrei să-l editezi și te obligă să închizi eticheta manual. De exemplu, puteți încorpora un videoclip YouTube împachetând adresa URL între etichete embed et /embed :
De exemplu, aceasta ar crea următorul rezultat:
Unele dintre cele mai bune plugin-uri WordPress vin cu propriile lor coduri scurte. De exemplu, Formulare WP et Formular de contact 7 au coduri scurte care vă permit să încorporați rapid a formular de contact într-o postare sau pagină. De asemenea, puteți utiliza un plugin ca MaxButtons pentru a adăuga un cod scurt de buton oriunde doriți pe site-ul dvs.
De ce ar trebui să vă gândiți să utilizați coduri scurte WordPress?
Există multe motive pentru care puteți utiliza coduri scurte WordPress. De exemplu, este mai ușor și mai rapid decât să înveți și să scrii o bucată lungă de cod în HTML. În plus, vă ajută să vă păstrați conținutul curat și accesibil.
Shortcodes pot fi folosite pentru a automatiza anumite funcții pe care le utilizați în mod repetat. De exemplu, dacă utilizați un buton îndemn la acțiune (CTA) pe fiecare dintre articolele dvs., a avea pregătit un shortcode dedicat poate fi o soluție rapidă și convenabilă.
Trebuie menționat că Editor Gutenberg funcționează în același mod, bazându-se pe utilizarea de coduri scurte. Permite utilizatorilor WordPress să adauge mai multe funcții interactive prin utilizarea blocurilor.
O astfel de metodă este mult mai prietenoasă pentru începători, deoarece puteți adăuga conținut chiar în interfața de utilizare. Cu toate acestea, editorul de blocuri WordPress este încă limitat în ceea ce oferă. Din fericire, vine cu un bloc SHORTCODE, care vă permite să adăugați conținut personalizat paginilor dvs.
Cum se creează un shortcode în WordPress
Dacă aveți deja cunoștințe de codificare, vă puteți crea propriile coduri scurte personalizate. Acest lucru vă oferă control deplin asupra aspectului și funcționalității site-ului dvs.
Să vedem cum să creăm un cod scurt WordPress personalizat. În acest tutorial, vom adăuga linkuri de rețele sociale la un articol ca exemplu.
Pasul 1 - Creați un nou fișier temă
Înainte de a începe, este o idee bună să backup complet pentru site-ul dvs. WordPress. De asemenea, va trebui să creați un fișier separat pentru codul scurt personalizat în afara fișierului functions.php dumneavoastră WordPress temă. Aceasta va oferi o soluție de rezervă în cazul în care ceva nu merge bine.
Puteți folosi un client FTP (File Transfer Protocol) ca FileZilla pentru a accesa fișierele tematice ale site-ului dvs. Odată autentificat la site-ul dvs., accesați wp-content> teme și găsiți folderul cu tema actuală. În exemplul nostru, asta va fi presă bufniță:
Deschideți folderul WordPress temă, faceți clic dreapta pe el și apăsați Creați fișier nou.
Denumiți noul fișier custom-shortcodes.php apoi faceți clic pe OK. Apoi îl puteți edita făcând clic dreapta pe el și selectând opțiunea Vizualizați/Editați :
Aceasta va deschide fișierul în editorul de text implicit. Apoi trebuie doar să adăugați următorul bloc de cod:
<?php ?>
Acest lucru vă asigură că noul fișier va fi interpretat ca PHP, care este limbajul de scripting pe care este construit WordPress.
Puteți apoi să salvați modificările și să închideți fișierul. Asigurați-vă că bifați următoarea casetă pentru a vă asigura că va fi actualizată pe server și aplicată site-ului dvs.:
Apoi deschideți fișierul functions.php în același folder de temă și adăugați următoarea linie de cod în partea de jos a documentului:
include('shortcodes-personnalises.php');
Acest lucru va spune sistemului să includă orice modificări pe care le faceți fișierului custom-shortcodes.php în functions.php în timp ce vă permite să le separați. Când sunteți gata, salvați modificările și închideți fișierul.
Pasul 2 - Creați funcția Shortcode
În continuare, va trebui să creați funcția de cod scurt, indicându-i ce să facă. Selectați din nou opțiunea Vizualizați/Editați a dosarului dvs custom-shortcodes.php. Utilizați următorul fragment de cod pentru a adăuga o acțiune la care să vă conectați funcția:
function subscribe_link(){
return 'Follow us on <a rel="nofollow" href="https://twitter.com/BlogPasCher">Twitter</a>';
}În continuare, va trebui să adăugați o funcție de apel invers, care va rula atunci când acțiunea de cârlig este activată. Adăugarea următoarei linii de cod direct după cea menționată mai sus va spune WordPress că funcția dvs. este un shortcode:
add_shortcode('sabonner', 'subscribe_link');Când creați un shortcode folosind funcția add_shortcode, atribuiți o etichetă de cod scurt „ ($tag) " și un cârlig de funcție corespunzător " ($func) care va rula de fiecare dată când este utilizată comanda rapidă.
Cu alte cuvinte, dacă eticheta de cod scurt este [subscribe], atunci cârligul „subscribe_link” redirecționează vizitatorul către adresa URL furnizată.
Prin urmare, întregul cod pe care îl utilizați în fișierul dvs shortcodes-personnalises.php va arata asa:
Trebuie remarcat faptul că atunci când denumiți etichete, ar trebui să utilizați doar litere mici, deși pot fi folosite litere de subliniere. Este, de asemenea, crucial evita folosirea cratimelor, deoarece poate interfera cu alte coduri scurte.
Pasul 3 - Adăugați codul scurt de auto-închidere pe site
Acum puteți testa codul dvs. inițial ca un shortcode cu auto-închidere pe site-ul dvs. WordPress. Folosind editorul de blocuri WordPress, puteți insera eticheta [subscribe] direct în postare:
Aceasta va afișa următorul conținut vizitatorilor site-ului dvs.:
Dacă ești mulțumit de acest shortcode, nu trebuie să faci nimic altceva. Cu toate acestea, dacă doriți să o personalizați, puteți sări la pasul următor.
Pasul 4 - Adăugați parametri la codul scurt
Puteți adapta shortcode-ul "Abonati-va" pentru funcționalitate suplimentară pentru afișarea altor link-uri de social media. Puteți face acest lucru adăugând un parametru pentru a modifica adresa URL.
Pentru a adăugați atribute de management, trebuie să deschideți fișierul custom-shortcodes.php si adauga urmatorul cod:
function subscribe_link_att($atts) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
return 'Follow us on '.$a['link'];
}
add_shortcode('sabonner', 'subscribe_link_att');Acest lucru vă va permite să personalizați linkurile din eticheta de cod scurt pentru a le adăuga la editorul Gutenberg. Îl puteți lipi peste codul anterior din fișier custom-shortcodes.php. Ar trebui să arate cam așa:
Adăugând funcția shortcode_atts(). va combina atributele utilizatorului cu toate atributele cunoscute, iar orice date lipsă vor fi înlocuite cu valorile implicite. Când sunteți gata, salvați modificările și închideți fișierul.
Pasul 5 - Testați setările
Acum puteți testa codul scurt actualizat în Editorul de blocuri WordPress. În exemplul nostru, testăm linkurile noastre Twitter și Facebook cu următoarele coduri scurte:
[link de abonare='https://www.facebook.com/live.blogpascher']Facebook[/subscribe]
[link de abonare='https://twitter.com/BlogPasCher']Twitter[/subscribe]
Acest lucru va produce următorul rezultat pe front-end:
Acest shortcode cu auto-închidere afișează adresele URL directe ale profilurilor tale sociale pentru vizitatori. Cu toate acestea, poate doriți ca această caracteristică să arate puțin șlefuită.
De exemplu, veți putea crea o versiune atașată care vă permite să personalizați complet textul de ancorare afișat utilizatorilor atunci când sunt pe cale să facă clic pe el. Vă vom arăta cum să o faceți în pasul următor.
Pasul 6 – Creați codul scurt de anexare
Shortcode-ul inclus va fi formatat la fel ca exemplul anterior de autoînchidere. Cu toate acestea, va include un parametru suplimentar pentru funcție.
În primul rând, va trebui să adăugați $content = null, care identifică această funcție ca un shortcode care include. Puteți adăuga apoi do_shortcode de la WordPress, care va căuta în conținut coduri scurte.
În dosar custom-shortcodes.php, adăugați noul cod scurt de anexare:
function subscribe_link_att($atts, $content = null) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
$content = do_shortcode($content);
return 'Suivez nous sur <a href="'.($a['link']).'" style="color: blue">'.$content.'</a>';
}
add_shortcode('sabonner', 'subscribe_link_att');Când ești gata, fișierul tău custom-shortcodes.php ar trebui sa arate asa:
Codul anterior are un atribut "stil" suplimentar, care va schimba textul ancora într-o culoare albastră. Nu uitați să salvați modificările când ați terminat.
Pasul 7 - Adăugați codul scurt pe site
Acum puteți introduce codul scurt în editorul de blocuri WordPress pentru a vedea rezultatul final:
După cum ați observat, puteți modifica cu ușurință adresele URL ale paginii de rețele sociale și textul de ancorare afișat vizitatorului folosind acest cod scurt de înveliș. În acest caz, noi am ales " Facebook " et "Twitter" :
Acolo ! Acum ați creat un shortcode personalizat pentru linkurile de abonament din paginile și postările dvs. Rețineți că toți pașii menționați mai sus pot fi modificați pentru a crea tot felul de elemente diferite folosind funcția WordPress Scurtăturile.
Adăugarea de funcționalități suplimentare site-ului dvs. WordPress este mult mai ușoară cu ajutorul codurilor scurte. Le puteți folosi pentru a vă personaliza conținutul existent și pentru a adăuga funcții interactive, cum ar fi formulare de contact, galerii de imagini sau link-uri de abonare.
Alte resurse recomandate
De asemenea, vă invităm să consultați resursele de mai jos pentru a merge mai departe în controlul și controlul site-ului și blogului dvs.
- Cum se creează un buton plutitor cu index Z cu Elementor
- Atunci când și cum se instalează WordPress într-un subdirector
- Cum să creezi un plugin WordPress simplu Gutenberg Block
- Cum să adăugați fonturi personalizate pe un site web WordPress
Concluzie
În acest articol, am învățat cum să vă creați propriul cod scurt în WordPress. Dacă aveți nelămuriri sau sugestii, vă rugăm să ne anunțați comentarii.
Cu toate acestea, veți putea, de asemenea, să ne consultați Resurse, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
În același timp, împărtășește acest articol pe diferitele rețele de socializare.
...
