W artykule:
Jeśli opracowujesz witrynę WordPress dla klienta, prawdopodobnie będziesz miał skróty do wykorzystania przez swoich klientów. Problem polega na tym, że wielu początkujących nie wie, jak dodać skróty, a jeśli występują złożone parametry, jest to jeszcze trudniejsze. Shortcake zapewnia rozwiązanie poprzez dodanie interfejsu użytkownika dla shortcodes. W tym artykule pokażemy, jak dodać interfejs użytkownika dla shortcodes w WordPress z Shortcake.
Co To jest Shortcake?
WordPress oferuje łatwiejszy sposób dodawania wykonywalnego kodu wewnątrz postów i stron za pomocą skrótów. Wiele motywów i wtyczek WordPress pozwala użytkownikom dodawać dodatkowe funkcje za pomocą skrótów. Jednak czasami te skróty mogą się skomplikować, gdy użytkownik musi wprowadzić parametry do dostosowywania.
Na przykład w typowym motywie WordPress, jeśli istnieje krótki kod, aby wprowadzić przycisk, użytkownik prawdopodobnie będzie musiał dodać co najmniej dwa do pięciu parametrów. O tak.:
[themebutton url=”http://example.com” title = “Pobierz teraz” color = “purple” target = “newwindow”]Shortcake to wtyczka do WordPressa i proponowana przyszła funkcja WordPress. Ma na celu rozwiązanie tego problemu poprzez udostępnienie interfejsu użytkownika do wprowadzania tych wartości. Dzięki temu skróty będą znacznie łatwiejsze w użyciu.
Pierwsze Kroki
Ten poradnik jest przeznaczony dla użytkowników, którzy są nowicjuszami w rozwoju WordPress. Początkujący użytkownicy, którzy lubią ulepszać swoje motywy WordPress, również uznaliby ten samouczek za pomocny.
Skoro tak mówisz, zaczynajmy.
Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Shortcake (shortcode UI).
Będziesz teraz potrzebował krótkiego kodu, który akceptuje kilka parametrów wprowadzania użytkownika. Jeśli potrzebujesz trochę odświeżenia, oto jak dodać shortcode w WordPress.
Ze względu na ten samouczek będziemy używać prostego shortcode, który pozwala użytkownikom wstawić przycisk do swoich postów lub stron WordPress. Oto przykładowy kod naszego shortcode i możesz go użyć, dodając go do pliku funkcji motywu lub w wtyczce specyficznej dla witryny.
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>";
}
Będziesz także musiał dodać trochę CSS do stylu przycisku. Możesz użyć tego CSS w arkuszu stylów motywu.
.CTA-button {
padding: 10px;
font-size: 18px;
border: 1px solid # FFF;
border-radius: 7PX;
color: # FFF;
background-color: # 50A7EC;
}
W ten sposób użytkownik będzie używał shortcode w swoich postach i stronach:
[CTA-button title = "Pobierz teraz"url= "http://example.com"]
Teraz, gdy mamy shortcode, który akceptuje parametry, stwórzmy dla niego interfejs użytkownika.
Rejestracja interfejsu użytkownika Shortcode za pomocą Shortcake
Shortcake API pozwala zarejestrować interfejs użytkownika shortcode. Będziesz musiał opisać atrybuty akceptowane przez shortcode, typy pól wejściowych i typy postów, które pokażą interfejs shortcode.
Oto przykładowy fragment kodu, którego użyjemy do zarejestrowania interfejsu użytkownika naszego shortcode. Staraliśmy się wyjaśnić każdy krok za pomocą komentarzy wbudowanych. Możesz wkleić to do pliku funkcji motywu lub wtyczki specyficznej dla witryny.
shortcode_ui_register_for_shortcode(
/ * * Twój uchwyt shortcode */
"CTA-button",
/ * * Twoja etykieta i ikona skrótu */
array(
/ * * Etykieta dla interfejsu użytkownika shortcode. Ta część jest wymagana. */
'label' = > 'Dodaj przycisk',
/ * * Ikona lub załącznik obrazu dla shortcode. Opcjonalnie. src lub dashicons - $icon. */
'listItemImage' = > 'dashicons-żarówka',
/ * * Atrybuty Shortcode */
'attrs' = > array(
/**
* Każdy atrybut, który akceptuje dane wejściowe użytkownika, będzie miał własną tablicę zdefiniowaną w ten sposób
* Nasz shortcode akceptuje dwa parametry lub atrybuty, tytuł i adres URL
* Pozwala najpierw zdefiniować interfejs dla pola title.
*/
array(
/ * * Ta etykieta pojawi się w interfejsie użytkownika */
'label' = > 'Tytuł',
/ * * Jest to rzeczywisty attr używany w kodzie używanym do shortcode */
'attr' = > 'title',
/ * * Zdefiniuj typ wejścia. Obsługiwane typy to text, checkbox, textarea, radio, select, e-mail, url, numer i data. */
'type' = > 'text',
/ * * Dodaj pomocny opis dla użytkowników
'description' = > 'Proszę wpisać tekst przycisku',
),
/ * * Teraz zdefiniujemy interfejs użytkownika dla pola URL */
array(
'label' = > 'URL',
'attr' = > 'url',
'type' = > 'text',
'description' = > 'pełny URL',
),
),
),
/ * * Możesz wybrać, które typy postów pokażą shortcode UI */
'post_type' = > array ('post', 'page' ),
)
);
To wszystko, możesz teraz zobaczyć interfejs użytkownika shortcode w akcji, edytując post. Wystarczy kliknąć przycisk Dodaj Media nad edytorem postów. Spowoduje to wyświetlenie programu media uploader, w którym zauważysz nowy element “Wstaw element Post” w lewej kolumnie. Kliknięcie na niego pokaże Ci przycisk do wstawienia kodu.
Kliknięcie miniatury zawierającej ikonę żarówki i etykietę shortcake spowoduje wyświetlenie interfejsu shortcode.
Dodawanie Skrótu Z Wieloma Wejściami
W pierwszym przykładzie użyliśmy bardzo podstawowego shortcode. Teraz uczyńmy to trochę bardziej skomplikowanym i o wiele bardziej użytecznym. Dodajmy shortcode, który pozwala użytkownikom wybrać kolor przycisku.
Najpierw dodamy shortcode. Jest to prawie ten sam shortcode, z tą różnicą, że teraz wyłącza wprowadzanie przez użytkownika koloru.
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". $kolor . '- button"><a href="'. $url . '">' . $title . "</a > < / span>";
}
Ponieważ nasz shortcode będzie wyświetlał przyciski w różnych kolorach, więc będziemy musieli również zaktualizować nasz CSS. Możesz użyć tego CSS w arkuszu stylów motywu.
.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;
}
Tak będą wyglądały przyciski:
Teraz, gdy nasz shortcode jest gotowy, następnym krokiem jest rejestracja shortcode UI. Będziemy używać zasadniczo tego samego kodu, z wyjątkiem tego, że tym razem mamy inny parametr dla koloru i oferujemy użytkownikom wybór z niebieskich, pomarańczowych lub zielonych przycisków.
shortcode_ui_register_for_shortcode(
/ * * Twój uchwyt shortcode */
"mybutton",
/ * * Twoja etykieta i ikona skrótu */
array(
/ * * Etykieta dla interfejsu użytkownika shortcode. Ta część jest wymagana. */
'label' = > 'Dodaj kolorowy przycisk',
/ * * Ikona lub załącznik obrazu dla shortcode. Opcjonalnie. src lub dashicons - $icon. */
'listItemImage' = > 'dashicons-flag',
/ * * Atrybuty Shortcode */
'attrs' = > array(
/**
* Każdy atrybut, który akceptuje dane wejściowe użytkownika, będzie miał własną tablicę zdefiniowaną w ten sposób
* Nasz shortcode akceptuje dwa parametry lub atrybuty, tytuł i adres URL
* Pozwala najpierw zdefiniować interfejs dla pola title.
*/
array(
/ * * Ta etykieta pojawi się w interfejsie użytkownika */
'label' = > 'Tytuł',
/ * * Jest to rzeczywisty attr używany w kodzie używanym do shortcode */
'attr' = > 'title',
/ * * Zdefiniuj typ wejścia. Obsługiwane typy to text, checkbox, textarea, radio, select, e-mail, url, numer i data. */
'type' = > 'text',
/ * * Dodaj pomocny opis dla użytkowników */
'description' = > 'Proszę wpisać tekst przycisku',
),
/ * * Teraz zdefiniujemy interfejs użytkownika dla pola URL */
array(
'label' = > 'URL',
'attr' = > 'url',
'type' = > 'text',
'description' = > 'pełny URL',
),
/ * * Na koniec zdefiniujemy interfejs użytkownika dla wyboru koloru */
array(
'label' = > 'Kolor',
'attr' = > 'color',
/ * * Zamiast tekstu użyjemy pola select */
'type' = > 'select',
'options' = > array(
'blue' = > 'Blue',
'orange' = > 'Orange',
'green' = > 'Green',
),
),
),
/ * * Możesz wybrać, które typy postów pokażą shortcode UI */
'post_type' = > array ('post', 'page' ),
)
);
To wszystko, możesz teraz edytować post lub stronę i kliknąć przycisk Dodaj Media. Zauważysz swój nowo dodany shortcode pod “Wstaw elementy Post”.
Kliknięcie na nowo utworzonym shortcode spowoduje wyświetlenie interfejsu shortcode, w którym można po prostu wprowadzić wartości.
Możesz pobrać kod używany w tym samouczku jako wtyczkę.
wpb-shortcake-tutorial
Uwzględniliśmy CSS, dzięki czemu możesz go użyć do nauki lub użyć go do dodania własnego połączenia do przycisków akcji w WordPress za pomocą łatwiejszego interfejsu użytkownika. Możesz modyfikować źródło i bawić się nim.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać interfejs użytkownika dla shortcodes w WordPress z Shortcake. Możesz również zapoznać się z tymi 7 podstawowymi wskazówkami dotyczącymi korzystania z shortcodes w WordPress.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
