Shortcode'y w WordPressie: czym są, po co i jak z nimi pracować?

08.11.2021

Ten materiał ma 4 lata — ceny i warunki mogły się zmienić.

Shortcode w WordPressie to konstrukcja w tekście, która tworzy na stronie potrzebny element funkcjonalny — przycisk, formularz kontaktowy i tak dalej. CMS obsługuje shortcode'y funkcją PHP. Pojawiły się po raz pierwszy w WordPressie 2.5.

Na przykład najprostszy shortcode do utworzenia galerii wygląda tak:

[gallery]

To dość proste, dostępne domyślnie narzędzie bardzo poważnie poszerza możliwości twórców stron. Shortcode'ami często dodaje się do wpisów przyciski, wpisy, slidery i tym podobne. To dobra alternatywa, jeśli nie chcesz instalować Elementora ani innego ciężkiego kreatora stron.

Shortcode'ów nie wyparł nawet wbudowany edytor blokowy Gutenberg.

Przy trudniejszych zadaniach do shortcode'a dodaje się czasem parametry. Ten sam shortcode galerii z parametrami wygląda tak:

[gallery size="large" ids="14243,14242,14241"]

Parametr ids zawiera numery obrazków w galerii, a parametr size odpowiada za rozmiar tworzonego elementu.

Lista standardowych shortcode'ów działających w WordPressie

W CMS wbudowany jest zestaw shortcode'ów, które działają bez dodatkowych kroków. System rozpoznaje takie elementy:

[audio]
[caption]
[gallery]
[playlist]
[video].

Jak sprawić, żeby shortcode się wyświetlił, a nie wykonał?

Czasem na stronie WordPress trzeba po prostu pokazać shortcode, a nie go wykonywać. Służy do tego escapowanie. Jak to zrobić? Wystarczy dodać jeszcze jedną parę nawiasów kwadratowych.

[[gallery]]

Złożone shortcode'y mogą mieć znacznik otwierający i zamykający. Wtedy element po escapowaniu wygląda tak:

[[shortcode] … [/shortcode]].

Jeśli kod był już na stronie używany, zobaczysz go bez podwójnych nawiasów.

Jak tworzyć własne shortcode'y w WordPressie?

Możesz tworzyć własne shortcode'y w WP, żeby poszerzyć możliwości strony. Omówimy dwa sposoby. Najpierw zobaczmy, jak tworzyć shortcode'y bez umiejętności programowania, za pomocą wtyczek.

Narzędzi tego typu jest sporo. Szczegółowo opiszemy najpopularniejszą wtyczkę do shortcode'ów.

Shortcodes Ultimate: najwygodniejsze narzędzie do pracy z shortcode'ami

Funkcjonalna i bardzo wygodna wtyczka do shortcode'ów. Wśród deklarowanych możliwości i zalet:

ponad 50 rodzajów aktywnych shortcode'ów;
funkcje szybkiego wstawiania;
responsywność wszystkich tworzonych elementów;
pełna zgodność z dowolnymi motywami i wtyczkami do WP;
łatwa rozbudowa kodu;
własny widżet;
zgodność z Gutenbergiem.

Jest też kilka płatnych dodatków do wtyczki.

Podstawowe ustawienia wtyczki

Co zrobić, żeby wtyczka działała poprawnie? Po standardowym pobraniu i aktywacji w menu pojawi się sekcja Shortcodes. Warto zwrócić w niej uwagę na dwa miejsca:

Własny kod CSS. Nie musisz wstawiać stylów do motywu, jeśli chcesz zmienić wygląd standardowych elementów.
Prefiks jest po to, żeby używane shortcode'y nie kolidowały z kodem innych wtyczek. Wartość można zmienić na własną.

Dostępne shortcode'y

Kolejna sekcja zawiera dostępne warianty shortcode'ów. Zbiór elementów jest bardzo duży. Po wybraniu jednej z opcji znajdziesz pełną dokumentację jej użycia i konfiguracji.

W zakładce jest wszystko:

wygląd elementu, za który odpowiada shortcode;
przykładowy kod;
wszystkie parametry i operatory bloku.

Dodawanie do wpisów i stron

Żeby dodać shortcode do wpisu albo strony po instalacji wtyczki, znajdź przycisk Wstaw shortcode na pasku edytora tekstu na stronie.

W ten sposób po prostu wybierzesz potrzebny shortcode do właściwej części strony.

Dodawanie do widżetów

Wtyczka pozwala też dodawać shortcode'y do widżetów. W panelu ustawień wyglądu schodzimy w dół, znajdujemy widżet do shortcode'ów i przeciągamy go do aktywnych.

Wtyczka jest bardzo wygodna w użyciu. Wersja premium kosztuje 30 USD za licencję dożywotnią — ten wydatek zwraca się w stu procentach.

Inne wtyczki do tworzenia i wstawiania shortcode'ów

Jest jeszcze kilka wtyczek, którymi można tworzyć i wstawiać shortcode'y. Są mniej rozbudowane, ale też bywają przydatne. Najpopularniejsze i najwygodniejsze:

Shortcoder;
CSSIgniterShortcodes;
Column Shortcodes.

Jak utworzyć shortcode bez wtyczek?

Do utworzenia shortcode'a bez wtyczek służy funkcja add_shortcode(). Ma dwa parametry: nazwę shortcode'a i nazwę samej funkcji PHP. Oto przykład prostego kodu PHP rejestrującego nowy shortcode na stronie:

add_shortcode( 'foobar', 'foobar_shortcode' )

function foobar_shortcode( $atts ){
	return 'Cześć! Jestem nowym shortcode\'em.';
}

Ten kod zamienia [foobar] na napis Cześć! Jestem nowym shortcode'em.

Tworzenie shortcode'ów z atrybutami

Do shortcode'a można dodać atrybuty, które dokładniej ustawiają parametry tworzonego na stronie elementu. W takich przypadkach lepiej użyć funkcji shortcode_atts():

add_shortcode( 'foobar', 'foobar_shortcode' );
function foobar_shortcode( $atts ) {

	$atts = shortcode_atts( [
		'name' => 'Noname',
		'age'  => 18,
	], $atts );

	return "Nazywam się {$atts['name']} i mam {$atts['age']} lat";
}

Teraz tekst zamieni się na imię i wiek, które podasz w wartościach atrybutów.

shortcode_atts() określa atrybuty, nadaje im wartości domyślne i usuwa te nierozpoznane.

Atrybuty shortcode'ów najlepiej zapisywać małymi literami. W wartościach atrybutów mogą znaleźć się dowolne znaki.
Jeśli do shortcode'a trafi atrybut, którego nie ma wśród domyślnych dla shortcode_atts(), zostanie pominięty.

Shortcode'y z zamknięciem i shortcode'y zagnieżdżone

Shortcode z poprzedniego przykładu zapisuje się tak:

[trueurl anchor="tekst linku" url="URL linku"]

Przebudujemy go trochę i zapiszemy w takiej postaci:

[trueurl anchor="tekst linku"]URL linku[/trueurl].

W zamykanych shortcode'ach można umieszczać inne shortcode'y. Służy do tego do_shortcode().

function true_url_external( $atts, $shortcode_content = null ) {
 
	$params = shortcode_atts( 
		array(
			'anchor' => 'Host4Biz'
		), 
		$atts 
	);
 
	return '' . $params[ 'anchor' ] . '';
}
 
add_shortcode( 'trueurl', 'true_url_external' )

Taki shortcode wyświetli link do strony głównej tam, gdzie go wstawisz.

Buforowanie wyjścia w shortcode

Czasem nie da się zwrócić wyniku wewnątrz danego shortcode'a. Rozwiązaniem jest wtedy buforowanie.

function truehostfobiz_shortcode_callback() {
	ob_start();
	// tutaj można od razu drukować przez echo()
	// albo get_template_part( 'entry' );
	// albo zamknąć znacznik ?> i wypisać HTML wprost
 
	$output = ob_get_contents(); // wszystko, co wypisane, trafi do $output
	ob_end_clean();
 
	return $output;
}

Używanie shortcode'ów w PHP

Rzecz w tym, żeby poprawnie użyć funkcji do_shortcode().

Parametrem funkcji może być jeden shortcode:

echo do_shortcode( '[hostfobiz]' );

Albo shortcode z treścią:

echo do_shortcode( '[trueurl anchor="Strona główna"]' . site_url() . '[/trueurl]' )

Można też wyświetlić treść wpisów razem z shortcode'ami.

$content_shortcoded = do_shortcode( get_the_content() );

Podsumowanie

Pokazaliśmy tylko część przykładów zastosowania shortcode'ów. Zrozumienie podstawowych zasad pomoże Ci jednak rozwinąć umiejętności pracy z kodem i realizować trudniejsze projekty na WordPressie.

Będziemy dalej przybliżać możliwości tego CMS-a i narzędzia do pracy z nim. No i oczywiście w Host4Biz zawsze zamówisz niezawodny hosting WordPress dla swoich projektów.