Cum de a adăuga o interfață de utilizator Shortcodes în WordPress cu Shortcake

Dacă sunteți în curs de dezvoltare un site WordPress pentru un client, atunci este posibil să aveți coduri scurte pentru clienții dvs. de a utiliza. Problema este că mulți începători nu știu cum să adauge coduri scurte și dacă sunt implicați parametri complexi, atunci este și mai dificil. Shortcake oferă o soluție prin adăugarea unei interfețe de utilizator pentru coduri scurte. În acest articol, vă vom arăta cum să adăugați o interfață de utilizator pentru scurte coduri în WordPress cu Shortcake.

Ce este Shortcake?

WordPress oferă o modalitate mai ușoară de a adăuga cod executabil în interiorul posturilor și paginilor, utilizând coduri scurte. Multe teme și pluginuri WordPress permit utilizatorilor să adauge funcții suplimentare folosind coduri scurte. Cu toate acestea, uneori aceste coduri scurte pot deveni complicate atunci când un utilizator trebuie să introducă parametri pentru personalizare.

De exemplu, într-o temă tipică WordPress dacă există un scurtcod pentru a introduce un buton, atunci utilizatorul va trebui probabil să adauge cel puțin două până la cinci parametri. Asa:

[themebutton url = "http://example.com" title = "Descarcă acum" color = "purple" target = "newwindow"]

Shortcake este un plugin WordPress și o caracteristică propusă pentru viitorul WordPress. Scopul său este de a rezolva această problemă prin furnizarea unei interfețe de utilizator pentru a introduce aceste valori. Acest lucru va face codurile scurte mult mai ușor de utilizat.

Noțiuni de bază

Acest tutorial este destinat utilizatorilor care sunt noi în dezvoltarea WordPress. Utilizatorii de nivel incepator care doresc sa-si optimizeze temele WordPress ar putea gasi si acest tutorial utile.

După ce am spus asta, 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 nevoie acum de un scurtcod care acceptă câțiva parametri de intrare pentru utilizator. Dacă aveți nevoie de o mică actualizare, iată cum puteți adăuga un shortcode în WordPress.

De dragul acestui tutorial vom folosi un shortcode simplu care permite utilizatorilor să introducă un buton în mesajele sau paginile lor WordPress. Iată exemplul de cod pentru codul nostru scurt și îl puteți folosi adăugând în fișierul funcțiilor temei sau într-un plugin specific site-ului.

 add_shortcode ('cta-buton', 'cta_button_shortcode'); funcția cta_button_shortcode ($ atts) extract (shortcode_atts (array ('title' => 'Titlu', 'url' =>), $ atts) 

Va trebui, de asemenea, să adăugați niște CSS pentru a-ți stilul butonului. Puteți utiliza acest CSS în foaia de stil a temei.

 .cta-buton padding: 10px; font-size: 18px; frontieră: 1px solid #FFF; raza de graniță: 7px; culoare: #FFF; fundal-culoare: # 50A7EC;  

Acesta este modul în care un utilizator va folosi codul scurt în postările și paginile sale:

[cta-buton url = "http://example.com"]

Acum că avem un cod scurt care acceptă parametrii, să creăm un interfață utilizator pentru el.

Înregistrarea interfeței de utilizator cu Shortcode cu Shortcake

Shortcake API vă permite să înregistrați interfața de utilizator a codului scurt. Va trebui să descrieți ce atribute acceptă codul dvs. scurt, tipurile de câmpuri de intrare și tipurile de postări care vor afișa interfața de utilizare scurtă.

Iată un exemplu de fragment de cod pe care îl vom folosi pentru a înregistra interfața de utilizator a codului scurt. Am încercat să explicăm fiecare pas cu comentarii inline. Puteți insera acest lucru în fișierul funcțiilor temei sau într-un plugin specific site-ului.

 shortcode_ui_register_for_shortcode (/ ** Mânerul dvs. de scurtătură * / 'cta-button', / ** Eticheta dvs. Shortcode și pictograma * / array (/ ** Eticheta pentru interfața cu utilizatorul dumneavoastră shortcode. Add-Button ', / ** Icon sau un atașament de imagine pentru shortcode.Opțional. Src sau dashicons- $ icon. * /' ListItemImage '=>' dashicons-lightbulb ', / ** Atribute Shortcode * /' attrs '=> array (/ ** * Fiecare atribut care acceptă intrarea utilizatorului va avea matrice proprie definită ca aceasta * Codul nostru scurt acceptă doi parametri sau atribute, titlu și URL * Să definească mai întâi UI pentru domeniul titlului. eticheta va apărea în interfața utilizatorului * / 'label' => 'Titlu', / ** Aceasta este valoarea reală folosită în codul utilizat pentru shortcode * / 'attr' => 'title', / ** Definiți tipul de intrare. Tipurile acceptate sunt textul, caseta de selectare, textarea, radio, selectați, e-mail, url, număr și dată. * / 'Type' => 'text', / ** Introduceți o descriere utilă pentru descrierea utilizatorilor '=> textul butonului "), / ** Acum vom UI fin pentru câmpul URL * / array ('label' => 'URL', 'attr' => 'url', 'type' => 'text', 'description' => ), / ** Puteți selecta ce tipuri de posturi vor afișa codul de scurtătură UI * / 'post_type' => array ('post', 'page'),)); 

Asta e tot, acum puteți vedea interfața cu utilizatorul scurt în acțiune prin editarea unei postări. Trebuie doar să faceți clic pe butonul Adăugați media de deasupra unui editor de postare. Acest lucru va aduce mesajul de încărcare a conținutului media unde veți observa un nou element "Introduceți elementul de publicare" în coloana din stânga. Dacă faceți clic pe acesta, veți afișa un buton pentru a introduce codul.

Dacă faceți clic pe miniatură care conține pictograma bec și eticheta shortcake vă va afișa interfața de utilizare scurtă.

Adăugarea codului scurt cu intrări multiple

În primul exemplu, am folosit un scurtcod de bază. Acum vă permite să deveniți un pic mai complicat și mult mai util. Să adăugăm un scurtcod care permite utilizatorilor să aleagă culoarea butonului.

Mai întâi vom adăuga codul scurt. Acesta este aproape același cod scurt, cu excepția faptului că acum excepția de intrare de utilizator pentru culoare.

 add_shortcode ('mybutton', 'my_button_shortcode'); funcția my_button_shortcode ($ atts) extract (shortcode_atts (array ('color' => 'blue', 'title' => 'title', 'url' => . ''; 

Deoarece codul nostru scurt va afișa butoane în culori diferite, va trebui să ne actualizăm și CSS. Puteți utiliza acest CSS în foaia de stil a temei.

 .mybutton padding: 10px; font-size: 18px; frontieră: 1px solid #FFF; raza de graniță: 7px; culoare: #FFF;  .Blue-button background-color: # 50A7EC;  .orange-buton fundal-culoare: # FF7B00; . butonul verde background-color: # 29B577;  

Acesta este modul în care vor arăta butoanele:

Acum, că codul nostru scurt este gata, următorul pas este să înregistrați codul de interfață scurt. Vom folosi în mod esențial același cod, cu excepția faptului că de data aceasta avem un alt parametru pentru culoare și oferim utilizatorilor să selecteze butoanele albastru, portocaliu sau verde.

 shortcode_ui_register_for_shortcode (/ ** Mânerul dvs. de scurtătură * / 'mybutton', / ** Eticheta dvs. Shortcode și pictograma * / array (/ ** Eticheta pentru interfața cu utilizatorul dvs. scurtă de cod Această parte este obligatorie * / 'label' => ' un buton colorat, / ** Pictogramă sau un atașament de imagine pentru codul scurt.Particular.src sau dashicons- $ icon. * / 'listItemImage' => 'dashicons-flag', / ** Atribute shortcode * / 'attrs' => array (/ ** * Fiecare atribut care acceptă intrarea utilizatorului va avea matrice proprie definită ca aceasta * Codul nostru scurt acceptă doi parametri sau atribute, titlu și URL * Să definească mai întâi UI pentru domeniul titlului. eticheta va apărea în interfața utilizatorului * / 'label' => 'Titlu', / ** Aceasta este valoarea reală folosită în codul utilizat pentru shortcode * / 'attr' => 'title', / ** Definiți tipul de intrare. Tipurile acceptate sunt text, caseta de selectare, textarea, radio, selectare, email, url, număr și dată. * / 'Tip' => 'text', / ** " Introduceți textul butonului "), / ** Acum suntem va defini UI pentru câmpul URL * / array ('label' => 'URL', 'attr' => 'url', 'type' => 'text' / ** În cele din urmă vom defini UI pentru selectarea culorilor * / array ('label' => 'Color', 'attr' => 'color', / ** Vom folosi câmpul selectați în loc de text * => 'selectați', 'opțiuni' => array ('blue' => 'albastru', 'orange' => 'orange', 'green' poate să selecteze tipurile de postare care vor afișa codul UI * / 'post_type' => array ('post', 'pagina'),)); 

Asta e tot, poți să editezi o postare sau o pagină și să dai clic pe butonul Adăugare media. Veți observa codul dvs. nou adăugat sub "Introduceți elemente postare".

Dacă faceți clic pe noul cod scurt creat, va apărea interfața UI scurtă, unde puteți introduce doar valorile.

Puteți descărca codul folosit în acest tutorial ca plugin.

WPB-Shortcake-tutorial

Am inclus CSS, astfel încât să îl puteți utiliza pentru a-l studia sau a folosi pentru a adăuga propriile butoane de apel în acțiune în WordPress folosind o interfață de utilizator 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 codurile scurte în WordPress cu Shortcake. Ați putea dori, de asemenea, să aruncați o privire la aceste 7 sfaturi esențiale pentru utilizarea scurtături în WordPress.

Dacă v-ați plăcut acest articol, vă rugăm să vă abonați la tutorialele video YouTube pentru canalul YouTube pentru WordPress. Ne puteți găsi pe Twitter și pe Facebook.