Dacă dezvoltați un site WordPress pentru un client, atunci este posibil să aveți coduri scurte pentru client. Problema este că mulți începători nu știu cum să adauge un shortcode și dacă sunt adăugați parametri, devine și mai complicat. Shortcake oferă utilizatorilor o soluție ușoară pentru a adăuga coduri scurte la WordPress.

În acest tutorial, vă voi arăta cum să adăugați o interfață shortcode pe WordPress pentru a simplifica adăugarea pe postări și pagini.

Ce este Shortcake?

WordPress oferă o caracteristică care vă permite să adăugați cod executabil la articole și pagini prin intermediul unor coduri scurte. Mulți tematică et WordPress plugin-uri permite utilizatorilor să adauge funcționalități pe blogurile lor folosind coduri scurte. Cu toate acestea, aceste coduri scurte pot deveni foarte grele, ceea ce complică personalizarea.

De exemplu, cu o temă WordPress de bază, dacă există un shortcode pentru a insera un buton, atunci utilizatorul va trebui probabil să completeze aproximativ cinci parametri pentru shortcode, după cum urmează:

[buton url = "http://example.com" title = "Aflați mai multe" color = "violet" target = "fereastră nouă"]

Aici intervine Shortcake, în sensul că vă permite să vă gestionați mai bine shortcodes-urile.

Shortcake-panificatie-plugin

Primii pași

Acest tutorial este pentru utilizatorii nou în dezvoltarea WordPress. Utilizatorii cărora le place să își personalizeze tematică va găsi și acest tutorial interesant.

Ce trebuie să faceți mai întâi este să instalați și să activați extensia Shortcace (UI de cod scurt).

Acum ar trebui să aveți un shortcode care acceptă câțiva parametri. Pentru acest tutorial, vom crea un scurtcod simplu care permite utilizatorilor să adauge butoane în postările și paginile lor WordPress. Acesta este un exemplu simplu pentru codul nostru scurt și puteți adăuga acest cod în plugin-ul dvs. sau în fișierul functions.php al temei copilului tău.

add_shortcode ('buton cta', 'cta_button_shortcode'); funcția cta_button_shortcode ($ atts) {extract (shortcode_atts (array ('title' => 'Title', 'url' => ''), $ atts)); întoarceți ”. $ titlu. ' '; }

Probabil că veți avea nevoie și de un cod CSS pentru buton.

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

Acesta este modul în care se afișează butonul în cauză, utilizatorul va trebui să introducă următorul shortcode:

[titlul butonului cta = »Descarcă acum» url = »http://example.com»]

Acum aveți un cod scurt care acceptă parametrii, vom crea acum o interfață pentru acesta.

Cum se înregistrează o interfață pentru un shortcode cu ShortCacke

API-ul lui Shortcake vă permite să înregistrați coduri scurte în interfața cu utilizatorul. Trebuie săscrie ce atribute acceptă codul scurt, tipul de câmpuri și ce format de postare va afișa interfața de utilizare (interfața de utilizator).

Iată un exemplu de bucată de cod pe care o puteți utiliza pentru a înregistra un shortcode în interfața cu utilizatorul Shortcake.

shortcode_ui_register_for_shortcode (/ ** Shortcode-ul tău * / 'butonul cta', / ** Eticheta shortcode-ului tău și pictograma acestuia * / array (/ ** Eticheta este obligatorie. * / 'label' => 'Butonul Add', / ** Icone. Src sau dashicons- $ icon. * / 'ListItemImage' => 'dashicons-lightbulb', / ** Attributes Shortcode * / 'attrs' => array (/ ** * Toate câmpurile care vor accepta valori utilizatorii vor avea propria matrice definită după cum urmează. * Acest scurtcod acceptă doi parametri url și titlu * Vom defini interfața pentru titlu. * / matrice (/ ** Această etichetă va fi afișată pe interfața utilizatorului * / 'label' => 'Title', / ** acesta este atributul folosit pentru shortcode * / 'attr' => 'title', / ** Definiți tipul câmpului, sunt acceptate: text , casetă de selectare, textarea, radio, selectare, e-mail, url, număr și dată. * / 'type' => 'text', / ** Adăugați descriere 'description' => 'Descriere',), / ** Noi să definim acum o interfață pentru câmpul de legătură * / matrice ('label' => 'URL', 'attr' => 'url', 'type' = > 'text', 'description' => 'URL complet',),),), / ** Formatul de postare în care să se afișeze interfața de utilizare * / 'post_type' => matrice ('postare', 'pagină' ),));

Asta este tot ce trebuie să faceți pentru a afișa codul scurt pe interfața de utilizare. Acum puteți începe să editați un articol pentru a putea utiliza codul scurt. Tot ce trebuie să faceți este să faceți clic pe butonul Adăugare media. Veți vedea o nouă secțiune intitulată „ Introduceți elementul Post". Făcând clic pe acesta, veți putea vedea diferitele coduri scurte pe care le-ați creat.

insertpostelement

Făcând clic pe pictogramă, veți vedea interfața de utilizare care vă permite să personalizați codul scurt.

shortcodeui

Cum se adaugă un scurtcod cu mai multe câmpuri

În primul exemplu, am folosit un shortcode destul de de bază. Acum vom face lucrurile ceva mai complicate și mai utile. Vom adăuga un cod scurt care permite utilizatorilor să aleagă culoarea butonului.

Mai întâi vom adăuga codul scurt. Este în esență același cod ca cel de mai sus, singura excepție este că vom adăuga un câmp pentru culoare.

add_shortcode ('butonul meu', 'my_button_shortcode'); function my_button_shortcode ($ atts) {extract (shortcode_atts (array ('color' => 'blue', 'title' => 'Title', 'url' => ''), $ atts)); întoarceți ”. $ titlu. ' '; }

Deoarece codul nostru scurt afișează butoane de diferite culori, va trebui să actualizăm și codul CSS.

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

Iată cum va arăta acest buton.

colorat-butoane-SHORTCODE

Acum că shortcode-ul nostru este gata, următorul pas este să îl înregistrați pe Shortcake. Vom folosi același cod, diferența aici este că vom furniza un parametru suplimentar pentru a afișa un câmp de culoare.

shortcode_ui_register_for_shortcode (/ ** Mânerul shortcode-ului tău * / 'mybutton', / ** Eticheta și pictograma Shortcode-ului tău * / array (/ ** Etichetă pentru interfața ta de utilizator shortcode. Această parte este necesară. * / 'label' => 'Adaugă un buton colorat ', / ** Pictogramă sau un atașament de imagine pentru shortcode. Opțional. src sau dashicons- $ pictogramă. * /' listItemImage '=>' dashicons-flag ', / ** Shortcode Attributes * /' attrs '=> array (/ ** * Fiecare atribut care acceptă introducerea utilizatorului va avea propriul său array definit astfel * Codul nostru scurt acceptă doi parametri sau atribute, titlu și URL * Permite mai întâi să definim interfața de utilizare pentru câmpul titlu. * / array (/ ** eticheta va apărea în interfața cu utilizatorul * / 'label' => 'Titlu', / ** Aceasta este valoarea reală utilizată în codul utilizat pentru shortcode * / 'attr' => 'titlu', / ** Definiți tipul de intrare. Tipurile acceptate sunt text, casetă de selectare, textarea, radio, selectare, e-mail, url, număr și dată. * / 'Type' => 'text', / ** Adăugați o descriere utilă pentru utilizatori * / 'description' => ' Vă rugăm să introduceți textul butonului ',), / ** Acum noi va defini UI pentru câmpul URL * / array ('label' => 'URL', 'attr' => 'url', 'type' => 'text', 'description' => 'URL complet',), / ** În cele din urmă vom defini interfața de utilizare pentru Selecția culorii * / matrice ('label' => 'Color', 'attr' => 'color', / ** Vom folosi câmpul select în loc de text * / 'type' => 'selectați', 'opțiuni' => matrice ('albastru' => 'Albastru', 'portocaliu' => 'Portocaliu', 'verde' => 'Verde',),),), / ** Tu poate selecta tipurile de postări care vor afișa codul scurt al UI * / 'post_type' => matrice ('postare', 'pagină'),));

Asta e tot ! Acum, când editați sau scrieți o postare, veți putea vedea noul scurtcod, încă în aceeași secțiune din fereastra media.

postelements

Făcând clic pe noul shortcode, va fi afișată interfața de personalizare a shortcode-ului și puteți specifica valorile.

colorui

Gata pentru acest tutorial. Sper că vă ajută să creați o interfață mai bună pentru codurile scurte de pe WordPress. Un an Nou fericit!