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

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.

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.

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

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:

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”.

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.

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.