Dacă dezvoltați un site WordPress pentru un client, atunci este probabil să aveți shortcode-uri pe care clienții dvs. le pot folosi. Problema este că mulți începători nu știu cum să adauge shortcode-uri și dacă sunt implicați parametri complecși, atunci este și mai dificil. Shortcake oferă o soluție prin adăugarea unei interfețe de utilizator pentru shortcode-uri. În acest articol, vă vom arăta cum să adăugați o interfață de utilizator pentru shortcode-uri în WordPress cu Shortcake.
Ce este Shortcake?
WordPress oferă o modalitate mai ușoară de a adăuga cod executabil în interiorul postărilor și paginilor folosind shortcode-uri. Multe teme și plugin-uri WordPress permit utilizatorilor să adauge funcționalități suplimentare folosind shortcode-uri. Cu toate acestea, uneori aceste shortcode-uri pot deveni complicate atunci când un utilizator trebuie să introducă parametri pentru personalizare.
De exemplu, într-o temă WordPress tipică, dacă există un shortcode pentru a introduce un buton, atunci utilizatorul va trebui probabil să adauge cel puțin doi până la cinci parametri. Ca acesta:
[themebutton url=”http://example.com” title=”Descărcați acum” color=”purple” target=”newwindow”]
Shortcake este un plugin WordPress și o caracteristică propusă pentru viitorul WordPress. Acesta își propune să rezolve această problemă prin furnizarea unei interfețe de utilizator pentru introducerea acestor valori. Acest lucru va face ca shortcode-urile să fie mult mai ușor de utilizat.
Introducere
Acest tutorial este destinat utilizatorilor noi în dezvoltarea WordPress. Utilizatorii începători cărora le place să modifice temele WordPress ar găsi, de asemenea, acest tutorial util.
Acestea fiind spuse, să începem.
Primul lucru pe care trebuie să îl faceți este să instalați și să activați pluginul Shortcake (Shortcode UI).
Veți avea acum nevoie de un shortcode care acceptă câțiva parametri de intrare de la utilizator. Dacă aveți nevoie de o mică reîmprospătare, iată cum să adăugați un shortcode în WordPress.
În scopul acestui tutorial, vom folosi un shortcode simplu care permite utilizatorilor să insereze un buton în postările sau paginile lor WordPress. Iată codul exemplu pentru shortcode-ul nostru și îl puteți folosi adăugându-l în fișierul functions.php al temei dvs. sau într-un plugin specific site-ului.
add_shortcode( 'cta-button', 'cta_button_shortcode' );
function cta_button_shortcode( $atts ) {
extract( shortcode_atts(
array(
'title' => 'Title',
'url' => ''
),
$atts
));
return '<span class="cta-button"><a href="' . $url . '">' . $title . '</a></span>';
}
De asemenea, va trebui să adăugați niște CSS pentru a stiliza butonul. Puteți folosi acest CSS în foaia de stil a temei dvs.
.cta-button {
padding: 10px;
font-size: 18px;
border: 1px solid #FFF;
border-radius: 7px;
color: #FFF;
background-color: #50A7EC;
}
Așa va folosi un utilizator shortcode-ul în postările și paginile sale:
[cta-button title="Descarcă acum" url="http://example.com"]
Acum că avem un shortcode care acceptă parametri, să creăm o interfață utilizator pentru el.
Înregistrarea interfeței utilizatorului shortcode cu Shortcake
API-ul Shortcode vă permite să înregistrați interfața utilizator a shortcode-ului dvs. Va trebui să descrieți ce atribute acceptă shortcode-ul dvs., tipurile de câmpuri de intrare și ce tipuri de postări vor afișa interfața shortcode-ului.
Iată un exemplu de fragment de cod pe care îl vom folosi pentru a înregistra interfața de utilizare a shortcode-ului nostru. Am încercat să explicăm fiecare pas cu comentarii inline. Puteți lipi acest cod în fișierul functions.php al temei dvs. sau într-un plugin specific site-ului.
shortcode_ui_register_for_shortcode( /** Your shortcode handle */ 'cta-button', /** Your Shortcode label and icon */ array( /** Label for your shortcode user interface. This part is required. */ 'label' => 'Add Button', /** Icon or an image attachment for shortcode. Optional. src or dashicons-$icon. */ 'listItemImage' => 'dashicons-lightbulb', /** Shortcode Attributes */ 'attrs' => array( /** * Each attribute that accepts user input will have its own array defined like this * Our shortcode accepts two parameters or attributes, title and URL * Lets first define the UI for title field. */ array( /** This label will appear in user interface */ 'label' => 'Title', /** This is the actual attr used in the code used for shortcode */ 'attr' => 'title', /** Define input type. Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. */ 'type' => 'text', /** Add a helpful description for users 'description' => 'Please enter the button text', ), /** Now we will define UI for the URL field */ array( 'label' => 'URL', 'attr' => 'url', 'type' => 'text', 'description' => 'Full URL', ), ), ), /** You can select which post types will show shortcode UI */ 'post_type' => array( 'post', 'page' ), ) );
Acesta este tot, acum puteți vedea interfața utilizatorului pentru shortcode în acțiune editând o postare. Pur și simplu faceți clic pe butonul Adăugare media de deasupra editorului unei postări. Aceasta va deschide încărcătorul de media unde veți observa un nou element „Inserare element postare” în coloana din stânga. Făcând clic pe el, veți vedea un buton pentru a insera codul dvs.
Făcând clic pe miniatura care conține pictograma bec și eticheta dvs. shortcake, veți vedea interfața de utilizare shortcode.
Adăugarea unui shortcode cu mai multe intrări
În primul exemplu, am folosit un shortcode foarte simplu. Acum să-l facem puțin mai complicat și mult mai util. Să adăugăm un shortcode care permite utilizatorilor să aleagă o culoare pentru buton.
Mai întâi vom adăuga shortcode-ul. Este aproape același shortcode, cu excepția faptului că acum acceptă intrarea utilizatorului pentru culoare.
add_shortcode( 'mybutton', 'my_button_shortcode' );
function my_button_shortcode( $atts ) {
extract( shortcode_atts(
array(
'color' => 'blue',
'title' => 'Title',
'url' => ''
),
$atts
));
return '<span class="mybutton ' . $color . '-button"><a href="' . $url . '">' . $title . '</a></span>';
}
Deoarece shortcode-ul nostru va afișa butoane în culori diferite, va trebui să ne actualizăm și CSS-ul. Puteți utiliza acest CSS în foaia de stil a temei dvs.
.mybutton {
padding: 10px;
font-size: 18px;
border: 1px solid #FFF;
border-radius: 7px;
color: #FFF;
}
.blue-button {
background-color: #50A7EC;
}
.orange-button {
background-color:#FF7B00;
}
.green-button {
background-color:#29B577;
}
Așa vor arăta butoanele:
Acum că shortcode-ul nostru este gata, următorul pas este să înregistrăm interfața de utilizare a shortcode-ului. Vom folosi în esență același cod, cu excepția faptului că de data aceasta avem un alt parametru pentru culoare și oferim utilizatorilor să aleagă dintre butoane albastre, portocalii sau verzi.
shortcode_ui_register_for_shortcode(
/** Your shortcode handle */
'mybutton',
/** Your Shortcode label and icon */
array(
/** Label for your shortcode user interface. This part is required. */
'label' => 'Add a colorful button',
/** Icon or an image attachment for shortcode. Optional. src or dashicons-$icon. */
'listItemImage' => 'dashicons-flag',
/** Shortcode Attributes */
'attrs' => array(
/**
* Each attribute that accepts user input will have its own array defined like this
* Our shortcode accepts two parameters or attributes, title and URL
* Lets first define the UI for title field.
*/
array(
/** This label will appear in user interface */
'label' => 'Title',
/** This is the actual attr used in the code used for shortcode */
'attr' => 'title',
/** Define input type. Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. */
'type' => 'text',
/** Add a helpful description for users */
'description' => 'Please enter the button text',
),
/** Now we will define UI for the URL field */
array(
'label' => 'URL',
'attr' => 'url',
'type' => 'text',
'description' => 'Full URL',
),
/** Finally we will define the UI for Color Selection */
array(
'label' => 'Color',
'attr' => 'color',
/** We will use select field instead of text */
'type' => 'select',
'options' => array(
'blue' => 'Blue',
'orange' => 'Orange',
'green' => 'Green',
),
),
),
/** You can select which post types will show shortcode UI */
'post_type' => array( 'post', 'page' ),
)
);
Atât, acum puteți edita o postare sau o pagină și faceți clic pe butonul Adăugare media. Veți observa shortcode-ul dvs. nou adăugat sub „Inserare elemente postare”.
Făcând clic pe shortcode-ul dvs. nou creat, va apărea interfața de utilizare a shortcode-ului, unde puteți introduce pur și simplu valorile.
Puteți descărca codul utilizat în acest tutorial ca un plugin.
Am inclus CSS-ul, astfel încât să îl puteți utiliza pentru a studia sau pentru a adăuga propriile butoane de apel la acțiune în WordPress folosind o interfață de utilizare mai ușoară. Simțiți-vă liber să modificați sursa și să vă jucați cu ea.
Sperăm că acest articol v-a ajutat să învățați cum să adăugați o interfață de utilizator pentru shortcode-uri în WordPress cu Shortcake. De asemenea, ați putea dori să consultați aceste 7 sfaturi esențiale pentru utilizarea shortcode-urilor în WordPress.
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.
Waqar
salut, vreau să modific caseta de căutare a temei mele wordpress. deoarece caseta de căutare a temei nu caută peste tot pe site, cu excepția titlului postării/produsului. vă rog să mă ajutați să scap de această problemă.
Suport WPBeginner
Consultați lista noastră de pluginuri de căutare WordPress pentru a îmbunătăți căutarea pe site-ul dvs.
Admin