Jeśli tworzysz stronę WordPress dla klienta, prawdopodobnie będziesz miał shortcode'y do wykorzystania przez swoich klientów. Problem polega na tym, że wielu początkujących nie wie, jak dodawać shortcode'y, a jeśli są w nich złożone parametry, jest to jeszcze trudniejsze. Shortcake zapewnia rozwiązanie, dodając interfejs użytkownika dla shortcode'ów. W tym artykule pokażemy, jak dodać interfejs użytkownika dla shortcode'ów w WordPress za pomocą Shortcake.
Co to jest Shortcake?
WordPress oferuje łatwiejszy sposób dodawania wykonywalnego kodu do wpisów i stron za pomocą shortcode'ów. Wiele motywów i wtyczek WordPressa pozwala użytkownikom dodawać dodatkowe funkcje za pomocą shortcode'ów. Czasami jednak te shortcode'y mogą stać się skomplikowane, gdy użytkownik musi wprowadzić parametry do personalizacji.
Na przykład, w typowym motywie WordPress, jeśli istnieje shortcode do wprowadzenia przycisku, użytkownik prawdopodobnie będzie musiał dodać co najmniej dwa do pięciu parametrów. Tak jak tutaj:
[themebutton url="http://example.com" title="Pobierz teraz" color="purple" target="newwindow"]
Shortcake to wtyczka WordPress i proponowana przyszła funkcja WordPress. Ma na celu rozwiązanie tego problemu poprzez zapewnienie interfejsu użytkownika do wprowadzania tych wartości. Sprawi to, że shortcody będą znacznie łatwiejsze w użyciu.
Rozpoczęcie pracy
Ten tutorial jest przeznaczony dla użytkowników, którzy dopiero zaczynają przygodę z tworzeniem stron w WordPress. Użytkownicy początkujący, którzy lubią modyfikować swoje motywy WordPress, również znajdą ten tutorial pomocnym.
Mając to na uwadze, zacznijmy.
Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie wtyczki Shortcake (Shortcode UI).
Będziesz teraz potrzebować shortcode, który akceptuje kilka parametrów danych wejściowych użytkownika. Jeśli potrzebujesz małego przypomnienia, oto jak dodać shortcode w WordPress.
Na potrzeby tego tutorialu użyjemy prostego shortcode'u, który pozwoli użytkownikom wstawić przycisk do swoich postów lub stron WordPress. Oto przykładowy kod naszego shortcode'u, który możesz wykorzystać, dodając go do pliku functions.php swojego motywu lub do wtyczki 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 również musiał dodać trochę CSS, aby nadać przyciskowi styl. Możesz użyć tego CSS w arkuszu stylów swojego motywu.
.cta-button {
padding: 10px;
font-size: 18px;
border: 1px solid #FFF;
border-radius: 7px;
color: #FFF;
background-color: #50A7EC;
}
Tak 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 skróconego kodu w Shortcake
API Shortcake pozwala zarejestrować interfejs użytkownika Twojego shortcode'u. Będziesz musiał opisać, jakie atrybuty akceptuje Twój shortcode, jakie są typy pól wejściowych i na jakich typach postów będzie wyświetlany interfejs użytkownika shortcode'u.
Oto przykładowy fragment kodu, którego użyjemy do zarejestrowania interfejsu użytkownika naszego shortcode'u. Staraliśmy się wyjaśnić każdy krok za pomocą komentarzy w linii. Możesz wkleić ten kod do pliku functions.php swojego motywu lub do wtyczki specyficznej dla witryny.
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' ), ) );
To wszystko, teraz możesz zobaczyć interfejs użytkownika shortcode'ów w akcji, edytując wpis. Po prostu kliknij przycisk Dodaj multimedium nad edytorem wpisu. Spowoduje to wyświetlenie narzędzia do przesyłania multimediów, gdzie zauważysz nową pozycję „Wstaw element wpisu” w lewej kolumnie. Kliknięcie jej pokaże przycisk do wstawienia kodu.
Kliknięcie na miniaturę zawierającą ikonę żarówki i etykietę Twojego shortcode'u wyświetli interfejs użytkownika shortcode'u.
Dodawanie shortcode'u z wieloma danymi wejściowymi
W pierwszym przykładzie użyliśmy bardzo prostego shortcode'u. Teraz sprawmy, aby był nieco bardziej skomplikowany i znacznie bardziej użyteczny. Dodajmy shortcode, który pozwoli użytkownikom wybrać kolor przycisku.
Najpierw dodamy shortcode. Jest on prawie taki sam, z tą różnicą, że teraz akceptuje dane wejściowe od użytkownika dotyczące 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 ' . $color . '-button"><a href="' . $url . '">' . $title . '</a></span>';
}
Ponieważ nasz shortcode będzie wyświetlał przyciski w różnych kolorach, będziemy musieli również zaktualizować nasz CSS. Możesz użyć tego CSS w arkuszu stylów swojego 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ć przyciski:
Teraz, gdy nasz shortcode jest gotowy, następnym krokiem jest rejestracja interfejsu użytkownika shortcode'u. Użyjemy zasadniczo tego samego kodu, z tą różnicą, że tym razem mamy dodatkowy parametr dla koloru i oferujemy użytkownikom wybór spośród niebieskich, pomarańczowych lub zielonych przycisków.
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' ),
)
);
To wszystko, teraz możesz edytować wpis lub stronę i kliknąć przycisk Dodaj multimedium. Zauważysz swój nowo dodany shortcode pod „Wstaw elementy wpisu”.
Kliknięcie na nowo utworzony shortcode wyświetli interfejs użytkownika shortcode'u, gdzie możesz po prostu wprowadzić wartości.
Kod użyty w tym samouczku można pobrać jako wtyczkę.
Dołączyliśmy kod CSS, dzięki czemu możesz go studiować lub używać do dodawania własnych przycisków wezwania do działania w WordPressie za pomocą łatwiejszego interfejsu użytkownika. Zachęcamy do modyfikowania kodu źródłowego i zabawy z nim.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać interfejs użytkownika dla shortcode w WordPress za pomocą Shortcake. Możesz również przyjrzeć się tym 7 kluczowym wskazówkom dotyczącym używania shortcode w WordPress.
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz Kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
Waqar
witam, chcę zmodyfikować pole wyszukiwania mojego motywu WordPress. ponieważ pole wyszukiwania motywu nie przeszukuje całego miejsca na stronie z wyjątkiem tytułu posta/produktu. proszę pomóż mi pozbyć się tego problemu.
Wsparcie WPBeginner
Zapoznaj się z naszą listą wtyczek wyszukiwania WordPress, które poprawią wyszukiwanie na Twojej stronie
Admin