Articles

kompletny przewodnik po tworzeniu niestandardowych skrótów w WordPress

skróty WordPress są używane do 1) zmniejszyć ilość kodu, który musisz napisać; 2) uprościć korzystanie z wtyczek, motywów i innych funkcji WordPress. Zachowują się jak makra, po włożeniu krótkiego kodu jest on zastępowany fragmentem kodu. To może być cokolwiek.

WordPress ma kilka wstępnie zdefiniowanych skrótów, takich jakI, a także są dołączone do wielu popularnych wtyczek i motywów. Możesz także tworzyć własne niestandardowe skróty, aby robić takie rzeczy, jak tworzenie kolumn w witrynie WordPress.

w tym poście przeprowadzimy Cię krok po kroku przez proces tworzenia i używania własnych niestandardowych skrótów. Przeprowadzimy Cię przez cały proces tworzenia nowego shortcode i pokażemy, jak modyfikować i kontrolować atrybuty i funkcje shortcode.

pamiętaj, że jest to bardziej zaawansowany post, który będzie zawierał szczegóły dotyczące tworzenia skrótów. Jeśli praca z kodem wykracza poza Twoją wiedzę techniczną i chcesz po prostu najprostszy sposób na rozpoczęcie tworzenia i używania skrótów, możesz zacząć od wtyczki shortcode.

podczas tworzenia własnych shortcodes, są dwie rzeczy, które musisz zrobić:

  1. Utwórz funkcję obsługi shortcode. Funkcja shortcode jest funkcją, która pobiera opcjonalne parametry (atrybuty) i zwraca wynik.
  2. rejestruje funkcję obsługi skrótów. Użyj wbudowanej funkcji WordPressadd_shortcut, aby zarejestrować niestandardowe skróty.

przygotowanie WordPressa do niestandardowych skrótów

chociaż nie jest to wymagane, dobrym pomysłem jest przechowywanie niestandardowych skrótów we własnym pliku. Możesz też dodać je do pliku functions.php.

najpierw Utwórz nowy plik o nazwiecustom-shortcodes.php i zapisz go w tym samym folderze, co plikfunctions.php.

następnie wewnątrz nowo utworzonego pliku Dodaj następujący blok kodu:

<?php ?>

następnie otwórz plikfunctions.php I dodaj następujący wiersz kodu:

include('custom-shortcodes.php');

jesteś teraz gotowy, aby rozpocząć dodawanie własnych skrótów.

podstawowe skróty

w tym pierwszym przykładzie stworzymy podstawowy Skrót WordPress, który wstawi dzień niezależnego obrazu avatara poniżej.

Tworzenie Shortcode

pierwszym krokiem jest utworzenie funkcji shortcode. Wewnątrz plikucustom-shortcodes.php Dodaj następujący blok kodu:

function dotiavatar_function() { return '<img src="http://dayoftheindie.com/wp-content/uploads/avatar-simple.png" alt="doti-avatar" width="96" height="96" class="left-align" />';}

w powyższym przykładzie kodu funkcjadotiavatar_function zwraca wstępnie określony obraz o nazwieavatar-simple.png.

następnym krokiem jest zarejestrowanie shortcode w WordPress za pomocą wbudowanej funkcjiadd_shortcode. Nadal wewnątrz custom-shortcodes.php, Dodaj następujący wiersz kodu:

add_shortcode('dotiavatar', 'dotiavatar_function');

podczas rejestracji skróconego kodu za pomocą funkcjiadd_shortcode, przekazujesz znacznik skróconego kodu ($tag) I odpowiednią funkcję ($func)/hook, który zostanie uruchomiony za każdym razem, gdy używany jest skrót.

w tym przypadku znacznik skrótu todotiavatar, a hook todotiavatar_function.

Uwaga: podczas nazywania znaczników używaj tylko małych liter i nie używaj myślników; dopuszczalne są podkreślniki.

Korzystanie z Shortcode

teraz, gdy masz już utworzony i zarejestrowany shortcode, nadszedł czas, aby go wypróbować! Jeśli chcesz, aby awatar DOTI pojawił się wewnątrz treści postu, możesz użyć skrótu:

skróty z parametrami (atrybutami)

w poprzednim przykładzie nie było zbyt wiele miejsca na zmiany. Powiedzmy, że zamiast naciskać pojedynczy obraz, chcielibyśmy być w stanie ustawić, którego obrazu użyć za pomocą parametru. Możesz to zrobić dodając kilka atrybutów ($atts).

Po raz kolejny, wewnątrz custom-shortcodes.php, dodaj kolejną funkcję, w ten sposób:

function dotirating_function( $atts = array() ) { // set up default parameters extract(shortcode_atts(array( 'rating' => '5' ), $atts)); return "<img src=\"http://dayoftheindie.com/wp-content/uploads/$rating-star.png\" alt=\"doti-rating\" width=\"130\" height=\"188\" class=\"left-align\" />";}

powyższa funkcja akceptuje jeden parametr: rating. Jeśli wartośćrating nie zostanie przekazana, używa domyślnej wartości ciągu5. Robi to poprzez rozpakowanie tablicy atrybutów za pomocą wbudowanej funkcji shortcode_atts I połączenie wartości domyślnych z wartościami, które mogły zostać przekazane do funkcji.

nie zapomnij zarejestrować shortcode:

add_shortcode('dotirating', 'dotirating_function');

Po utworzeniu funkcji shortcode i dodaniu Hooka, shortcode jest teraz gotowy do użycia w treści posta:

Alternatywnie możesz pominąć rating I po prostu przejdź z wartością domyślną:

i to wszystko! Teraz wiesz, jak tworzyć samozamykające się skróty WordPress. Ale jest inny rodzaj, który możesz stworzyć.

zamykanie skrótów

do tej pory pracowaliśmy z samozamykającymi się krótkimi kodami. Ale jest inny rodzaj shortcode: zamykanie shortcodes.

zamykanie skrótów pozwala na użycie formatu w stylu BBCode. Oznacza to, że styl, który wygląda tak:

content

zamykanie skrótów jest przydatne, gdy trzeba manipulować zamkniętą zawartością. Na przykład, załóżmy, że masz określony styl przycisku, którego używasz na swojej stronie; możesz użyć kodu HTML do wygenerowania tego przycisku / stylu za każdym razem, gdy potrzebujesz go użyć,lub możesz zamiast tego skonfigurować niestandardowy kod zamykający.

używając zamykającego shortcode, możesz skupić się na treści, a nie na kodzie.

Tworzenie Shortcode

ponownie, wewnątrz plikucustom-shortcodes.php, Dodaj następujący blok kodu:

function dotifollow_function( $atts, $content = null ) { return '<a href="https://twitter.com/DayOfTheIndie" target="blank" class="doti-follow">' . $content . '</a>';}

w powyższym bloku kodu $content = null służy do identyfikacji tej funkcji jako Enklawy shortcode. Wewnątrz tej funkcji zawijasz zawartość ($content) w kodzie HTML.

OK, teraz czas zarejestrować Skrót:

add_shortcode('dotifollow', 'dotifollow_function');

i tyle! Twój shortcode jest gotowy do użycia.

używanie skróconego kodu

używanie zamkniętego kodu nie różni się zbytnio od użycia samozamykającego się kodu. Podobnie jak HTML, musisz tylko upewnić się, że masz instrukcję otwierającą i zamykającą:

Follow us on Twitter!

oczywiście jest to tylko podstawowy przykład. Możesz także dodać parametry do zamykającego się kodu skróconego, tak jak w przypadku samozamykającego się kodu skróconego.

wewnątrz custom-shortcodes.php dodaj jeszcze jedną funkcję:

function dotibutton_function( $atts = array(), $content = null ) { // set up default parameters extract(shortcode_atts(array( 'link' => '#' ), $atts)); return '<a href="'. $link .'" target="blank" class="doti-button">' . $content . '</a>';}

a następnie zarejestruj skrócony Kod:

add_shortcode('dotibutton', 'dotibutton_function');

Ta nowa funkcja pozwala ustawić link dla przycisku, używając następującej składni:

Shop Now!

zamykając shortcodes, możesz zrobić wiele z bardzo małym kodem.

słowo o widżetach

domyślnie skróty są obsługiwane tylko w postach, stronach lub niestandardowych typach postów; nie są obsługiwane w widżetach paska bocznego. Aby dodać obsługę widżetów, musisz dodać następujący kod do plikufunctions.php:

add_filter( 'widget_text', 'shortcode_unautop' );add_filter( 'widget_text', 'do_shortcode' );

gdy to zrobisz, możesz użyć skrótów w widżetach – tak jak robisz to w postach/stronach.

zamykanie rzeczy

dodawanie własnych skrótów nie wymaga dużego wysiłku – zwłaszcza gdy zrozumiesz, jak są one implementowane. Jeśli chcesz dowiedzieć się więcej, sprawdź Kodeks WordPress.