Shortcode-urile WordPress sunt unele dintre cele mai utile funcționalități ale platformei, permițând inserarea de conținut dinamic sau complex în articole, pagini și widget-uri cu o simplă comandă text între paranteze pătrate. De la galerii foto la formulare de contact, de la butoane la conținut restricționat, shortcode-urile simplifică publicarea conținutului complex fără a necesita cunoștințe de programare.
Înțelese corect, shortcode-urile WordPress deschid posibilități extinse de personalizare a conținutului. Multe plugin-uri adaugă propriile shortcode-uri, dar WordPress permite și crearea de shortcode-uri personalizate prin adăugarea câtorva linii de cod în fișierul functions.php al temei sau într-un plugin de site.
Acest ghid acoperă atât utilizarea shortcode-urilor existente, cât și crearea de shortcode-uri personalizate pentru nevoi specifice.
Shortcode-uri implicite WordPress
WordPress include câteva shortcode-uri native:
- , afișează o galerie cu imaginile atașate postării
- , adaugă o legendă unei imagini
- , inserează un player audio
- , inserează un player video
- , creează o listă de redare audio/video
- , inserează conținut embeds din diverse surse
Utilizarea shortcode-urilor din plugin-uri
Cele mai populare plugin-uri WordPress adaugă propriile shortcode-uri. Exemple frecvente:
- Contact Form 7:
- WooCommerce:
- Elementor:
- WP Forms:
Crearea de shortcode-uri personalizate
Shortcode-urile personalizate se înregistrează în functions.php sau într-un plugin de site. Structura de bază:
// Shortcode simplu - fără atribute
function my_simple_shortcode() {
return '<p class="nota-info">Aceasta este o notă importantă.</p>';
}
add_shortcode('nota', 'my_simple_shortcode');
// Utilizare: [nota]Shortcode cu atribute
// Shortcode cu atribute personalizabile
function buton_shortcode($atts) {
$atts = shortcode_atts(array(
'text' => 'Apasă aici',
'url' => '#',
'color' => 'blue'
), $atts, 'buton');
return '<a href="' . esc_url($atts['url']) . '"
class="btn btn-' . esc_attr($atts['color']) . '">'
. esc_html($atts['text']) . '</a>';
}
add_shortcode('buton', 'buton_shortcode');
// Utilizare: [buton text="Contactați-ne" url="/contact" color="green"]Shortcode cu conținut enclosed
// Shortcode care înfășoară conținut
function cutie_evidentiata($atts, $content = null) {
return '<div class="cutie-evidentiata">'
. do_shortcode($content) . '</div>';
}
add_shortcode('cutie', 'cutie_evidentiata');
// Utilizare: [cutie]Conținut important de evidențiat[/cutie]Bune practici pentru shortcode-uri
- Sanitizați toate intrările, utilizați esc_url(), esc_html(), esc_attr() pentru a preveni vulnerabilitățile XSS
- Folosiți shortcode_atts(), asigură că atributele au valori implicite și sunt tratate corect
- Numiți shortcode-urile descriptiv, evitați conflicte cu shortcode-urile altor plugin-uri
- Documentați utilizarea, adăugați comentarii care explică sintaxa și atributele disponibile
- Nu abuzați de shortcode-uri în conținut, dependența excesivă creează probleme la schimbarea temei sau plugin-urilor
Dezavantajele shortcode-urilor și alternativele moderne
În era editorului Gutenberg, shortcode-urile sunt treptat înlocuite de blocuri. Blocurile Gutenberg oferă o experiență vizuală de editare și nu lasă cod rezidual în conținut dacă plugin-ul este dezactivat. Pentru proiecte noi, considerați crearea de blocuri Gutenberg personalizate în locul shortcode-urilor clasice.
Shortcode-urile WordPress rămân o soluție valoroasă pentru personalizarea conținutului, mai ales în proiectele care nu utilizează editorul Gutenberg sau care trebuie să fie compatibile cu editorul clasic TinyMCE. Înțelegerea API-ului de shortcode-uri vă oferă un instrument puternic pentru extinderea funcționalității WordPress fără a compromite securitatea sau mentenabilitatea site-ului.
