Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak dodać interfejs użytkownika Shortcodes w WordPress z Shortcake

Uwaga redakcyjna: Otrzymujemy prowizję z linków partnerskich na WPBeginner. Prowizje nie mają wpływu na opinie i oceny naszych redaktorów. Dowiedz się więcej o Proces redakcyjny.

Jeśli tworzysz witrynę WordPress dla klienta, to jest prawdopodobne, że będziesz mieć krótkie kody do wykorzystania przez twojego klienta. Problem polega na tym, że wielu początkujących nie wie, jak dodawać krótkie kody, a jeśli biorą w tym udział złożone parametry, jest to jeszcze trudniejsze. Shortcake zapewnia rozwiązanie poprzez dodanie interfejsu użytkownika dla krótkich kodów. W tym artykule pokażemy, jak dodać interfejs użytkownika dla krótkich kodów w WordPressie za pomocą Shortcake.

Czym jest Shortcake?

WordPress oferuje łatwiejszy sposób dodawania wykonywalnego kodu wewnątrz wpisów i stron za pomocą krótkich kodów. Wiele motywów i wtyczek WordPress umożliwia użytkownikom dodawanie dodatkowych funkcji za pomocą krótkich kodów. Czasami jednak te krótkie kody mogą stać się skomplikowane, gdy użytkownik musi wpisz parametry w celu dostosowania.

Na przykład w typowym motywie WordPress, jeśli istnieje krótki kod do wpisz przycisk, użytkownik prawdopodobnie będzie musiał dodać co najmniej dwa do pięciu parametrów. Na przykład:

[themebutton url=”http://example.com” title=”Download Now” color=”purple” target=”newwindow”].

Shortcake to wtyczka WordPress i proponowana przyszła funkcja WordPress. Ma ona na celu rozwiązanie tego problemu poprzez udostępnienie interfejsu użytkownika, za pomocą którego można wpisz te wartości. Dzięki temu krótkie kody będą znacznie łatwiejsze w użyciu.

Shortcake Bakery Plugin

Pierwsze kroki

Ten poradnik jest przeznaczony dla użytkowników, którzy są nowicjuszami w rozwoju WordPressa. Początkujący użytkownicy, którzy lubią modyfikować swoje motywy WordPress, również uznają ten poradnik za pomocny.

Powiedziawszy to, zacznijmy.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i włączyć wtyczkę Shortcake (Shortcode UI).

Będziesz teraz potrzebował krótkiego kodu, który akceptuje kilka parametrów wprowadzanych przez użytkownika. Jeśli potrzebujesz trochę odświeżenia, oto jak dodać krótki kod w WordPress.

Na potrzeby tego poradnika użyjemy prostego krótkiego kodu, który pozwala użytkownikom wstawić przycisk do swoich wpisów lub stron WordPress. Oto przykładowy kod dla naszego krótkiego kodu, którego można użyć, dodając go do pliku funkcji twojego motywu lub we 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ć CSS, aby nadać styl twojemu przyciskowi. Możesz użyć tego CSS w arkuszu stylów twojego 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ł krótkiego kodu w swoich wpisach i stronach:

[cta-button title="Download Now" url="http://example.com"].

Teraz, gdy mamy krótki kod, który akceptuje parametry, stwórzmy dla niego interfejs użytkownika.

Rejestrowanie interfejsu użytkownika twojego krótkiego kodu w Shortcake

Interfejs API Shortcake umożliwia zarejestrowanie interfejsu użytkownika twojego krótkiego kodu. Będziesz musiał opisać, jakie atrybuty akceptuje twój krótki kod, typy pól wejściowych i które typy treści będą wyświetlać interfejs użytkownika krótkiego kodu.

Oto przykładowy fragment kodu, którego użyjemy do zarejestrowania interfejsu użytkownika naszego krótkiego kodu. Staraliśmy się wyjaśnić każdy krok za pomocą komentarzy inline. Możesz wkleić to w pliku funkcji twojego motywu lub we wtyczce 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, możesz teraz zobaczyć interfejs użytkownika krótkiego kodu w działaniu, edytując wpis. Wystarczy kliknąć przycisk Dodaj multimedia nad edytorem wpisu. Spowoduje to wyświetlenie narzędzia do przesyłania multimediów, w którym w lewej kolumnie pojawi się powiadomienie „Wstaw wpis”. Kliknięcie go spowoduje wyświetlenie przycisku umożliwiającego wstawienie twojego kodu.

Inserting your shortcode in a post or page

Kliknięcie miniaturki zawierającej ikonkę żarówki i etykietę twojego krótkiego kodu spowoduje wyświetlenie interfejsu użytkownika krótkiego kodu.

User interface for a simple shortcode

Dodawanie krótkiego kodu z wieloma danymi wejściowymi

W pierwszym przykładzie użyliśmy bardzo podstawowego krótkiego kodu. Teraz uczyńmy go nieco bardziej skomplikowanym i o wiele bardziej użytecznym. Dodajmy krótki kod, który pozwoli użytkownikom wybrać kolor przycisku.

Najpierw dodamy krótki kod. Jest to prawie ten sam krótki kod, z tą różnicą, że teraz przyjmuje dane wejściowe użytkownika dla 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 krótki kod 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 twojego 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:

Call to action buttons created with shortcode

Teraz, gdy nasz krótki kod jest gotowy, następnym krokiem jest zarejestrowanie interfejsu użytkownika krótkiego kodu. Będziemy używać zasadniczo tego samego kodu, z tym wyjątkiem, że tym razem mamy inny 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, możesz teraz edytować wpis lub stronę i kliknąć przycisk Dodaj media. Twój nowo dodany krótki kod zostanie powiadomiony w sekcji „Wstaw elementy posta”.

Selecting post element or shortcode to insert

Kliknięcie twojego nowo utworzonego krótkiego kodu spowoduje wyświetlenie interfejsu użytkownika krótkiego kodu, w którym możesz po prostu wpisz wartości.

Shortcode UI with a select field

Kod użyty w tym poradniku można pobrać jako wtyczkę.

wpb-shortcake-tutorial

Dołączyliśmy CSS, więc możesz użyć go do nauki lub użyć go do dodania własnych przycisków wezwania do działania w WordPressie za pomocą łatwiejszego interfejsu użytkownika. Nie krępuj się modyfikować źródła i bawić się nim.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać interfejs użytkownika dla krótkich kodów w WordPressie za pomocą Shortcake. Możesz również zapoznać się z tymi 7 niezbędnymi wskazówkami dotyczącymi korzystania z krótkich kodów w WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube, aby zobaczyć poradniki dotyczące filmów WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

3 komentarzeZostaw odpowiedź

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Waqar says

    hello, i want to modify my wordpress theme’s search box. because theme’s search box don’t search all over the place in website except title of post/product. please help me to get rid of this problem.

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.