The Beginner’s Guide to Writing Your Own Custom Shortcode

Shortcodes są popularną funkcją zawartą w wielu wtyczkach i motywach. Jednak jeśli nigdy wcześniej nie budowałeś własnych shortcodes, możesz nie mieć pojęcia, jak dodać je do własnych projektów WordPress.

Na szczęście, WordPress’ Shortcode API sprawia, że tworzenie własnych shortcodes jest dość proste. Wykonanie tego umożliwi użytkownikom skorzystanie z funkcji Twojej wtyczki lub motywu z dowolnego obszaru opartego na tekście w ich witrynie WordPress. Włączenie shortcodes do swoich projektów jest łatwym sposobem budowania na funkcjonalności, którą już stworzyłeś, więc dostajesz najwięcej plusów za swoje pieniądze.

W tym artykule porozmawiamy trochę więcej o tym, jak działają shortcodes. Następnie pokażemy Ci jak proste może być zaprogramowanie własnego w trzech krokach. Zaczynajmy!

Wprowadzenie do Shortcodes i Shortcode API

The WordPress Shortcode API jest poręcznym narzędziem dla programistów.

Skróty wyglądają jak małe kawałki tekstu w nawiasach kwadratowych, jak ten: . Każdy z nich reprezentuje unikalne wykonanie predefiniowanego kodu, który jest uruchamiany na żądanie. Możesz ich używać prawie wszędzie, gdzie tekst może być dodany w WordPress.

Ponieważ większość shortcodes jest dodawana przez motywy i wtyczki, rdzeń WordPressa posiada kilka domyślnych shortcodes, których możesz użyć. Niektóre z nich to audio, galeria i napis.

Na przykład, gdy dodajesz obraz z podpisem, WordPress generuje określony shortcode:

Gdy zobaczysz to na front-endzie, zobaczysz obraz z podpisem:

Na szczęście Shortcode API sprawia, że tworzenie niestandardowych shortcodes dla własnych projektów WordPress jest stosunkowo proste. Jest to często mądry pomysł, ponieważ ułatwia życie użytkowników, umożliwiając im korzystanie ze złożonych funkcji za pomocą zaledwie kilku naciśnięć klawiszy.

Jak napisać własny niestandardowy shortcode (w 3 prostych krokach)

Teraz, gdy rozumiesz, jak działają shortcodes, dowiedzmy się, jak dodać jeden do własnego motywu lub wtyczki! Oczywiście to, co robi twój shortcode, zależy od ciebie. W tym przykładzie, użyjemy prostej funkcji „Hello world!”, abyś mógł zacząć.

Wpisanie funkcji shortcode

Po pierwsze, będziesz chciał otworzyć nowy plik w edytorze tekstu. Następnie napisz funkcję o unikalnej nazwie, która wykona kod, który chcesz, aby shortcode wywołał:

function torque_hello_world_shortcode() { return 'Hello world!';}

Jeśli użylibyśmy tej funkcji normalnie, zwróciłaby ona Hello world! jako ciąg znaków, który mógłby być wyprowadzony do HTML. Ta funkcja może również przyjmować niestandardowe parametry. Na przykład, jeśli chcesz, aby ktoś mógł powiedzieć Hello Bob! zamiast tego, możesz dodać parametr name. Parametry te nazywane są atrybutami, a wszystkie są obsługiwane za pomocą pojedynczej tablicy predefiniowanej jako $atts przez WordPress.

Tutaj znajduje się przykład, jak korzystać z funkcji shortcode $atts, aby prawidłowo obsługiwać atrybuty shortcode w WordPress. Możesz dowiedzieć się więcej o tym, jak to działa dla własnych potrzeb w codexie WordPress:

function torque_hello_world_shortcode( $atts ) { $a = shortcode_atts( array( 'name' => 'world' ), $atts ); return 'Hello ' . $a . !';}

To domyślnie ustawia atrybut name na world, jeśli nie ma innej nazwy. Jeśli nazwa jest podana, funkcja wypisuje ją zamiast niej. Oto przykład, jak to zostanie wykonane z shortcode:

// Outputs "Hello world!" // Outputs "Hello Bob!"

Gdy skończysz, może to być użyte w dowolnym obszarze opartym na tekście na stronie WordPress, gdzie zainstalowana jest wtyczka lub motyw, który zawiera ten shortcode.

Zapisz plik i dodaj go do swojego projektu

Gdy twój shortcode jest gotowy, możesz utworzyć nowy plik w swoim niestandardowym motywie lub wtyczce, aby zapisać funkcję. Opisowa nazwa pomoże Ci znaleźć ten plik później (na przykład: shortcode-function-hello-world.php).

Teraz nadszedł czas, aby poinformować resztę Twojego projektu o tym nowym pliku. Jeśli pracujesz z motywem, będziesz chciał umieścić go w pliku functions.php. Jeśli budujesz wtyczkę, możesz umieścić go w dowolnym pliku już załadowanym do projektu.

Tutaj jest przykład, jak załadowałbyś plik do motywu używając get_stylesheet_directory(). Upewnij się, że edytujesz ścieżkę do swojego pliku, aby dopasować ją do struktury folderów wewnątrz motywu:

include( get_stylesheet_directory() . 'path/to/shortcode-function-hello-world.php' );

Z drugiej strony, tak wygląda ładowanie pliku do wtyczki, używając plugin_dir_url(). Ponownie, edytuj ścieżkę do swojego pliku, aby dopasować ją do struktury folderów swojej wtyczki:

include( plugin_dir_url( __FILE__ ) . 'path/to/shortcode-function-hello-world.php' );

W tym momencie twoja funkcja jest już dostępna do użycia! Pozostaje tylko aktywnie zarejestrować shortcode w WordPress.

Rejestracja shortcode

Ostatnim krokiem jest zarejestrowanie nowego shortcode z Shortcode API. Odbywa się to za pomocą funkcji add_shortcode. Wymaga ona dwóch argumentów:

  1. Tag shortcode, który ma być użyty w edytorze tekstu
  2. Nazwa funkcji obsługującej wykonanie shortcode

Pod swoją funkcją shortcode umieść tę linię kodu i zaktualizuj ją, aby odpowiadała Twoim własnym wartościom:

add_shortcode( 'helloworld', 'torque_hello_world_shortcode' );

Pierwsza wartość znajdzie się w nawiasach kwadratowych w edytorze tekstu. Druga będzie pasować do nazwy funkcji, którą napisałeś w poprzednich dwóch krokach. Obie powinny być na tyle unikalne, aby nie kolidowały z innymi shortcodes zawartymi przez rdzeń WordPressa, motywy lub wtyczki.

Jak już skończysz, wszystko co pozostało to przetestować to. Zaloguj się do administratora WordPressa i spróbuj dodać swój shortcode do postu:

To wszystko! Twój shortcode może być tak skomplikowany lub prosty, jak chcesz – to, co zdecydujesz się zbudować za pomocą tej mocy, zależy od Ciebie! Dla zaawansowanych sytuacji, w których chciałbyś dostosować dane wyjściowe do różnych sytuacji, może warto napisać unikalną klasę PHP, aby obsłużyć swój nowy shortcode.

Podsumowanie

Dodawanie złożonych funkcjonalności do postów i stron WordPress jest łatwe dzięki shortcodes. Są one proste do zaprogramowania i dodają wartość do istniejącego projektu, czyniąc prostą treść dynamiczną.

W tym artykule dowiedziałeś się, że potrzeba tylko trzech prostych kroków, aby utworzyć shortcode:

  1. Napisz zwykłą funkcję, która wykonuje pożądany niestandardowy kod.
  2. Zapisz kod do swojej wtyczki WordPress lub motywu.
  3. Zarejestruj shortcode w ramach WordPress.

.

Dodaj komentarz