Kurs WordPress (10)
Autor: Damian Chodorek • Opublikowany: 6 stycznia 2015 • Ostatnia aktualizacja: 8 lutego 2015 • Kategoria: kursy, wordpress
Dynamiczne wstawianie treści, czyli shortcodes.
Shortcodes to bardzo prosty, a jednocześnie potężny sposób na danie użytkownikom kontroli nad szablonem. Shortcodes przypominają nieco widgety – generują kod HTML, ale mogą być wstawione bezpośrednio w tekst posta, strony, itp.
Dobrym przykładem jest galeria. Kiedy wstawisz w posta własną galerię, wybierzesz interesujące Cię zdjęcia, to w trybie wizualnym pojawi się gotowa galeria, ale w trybie tekstowym Twoim oczom ukaże się kod podobny do poniższego.
[gallery ids="2238,2237,2069,2054,1989,1999,2000,2023,2040,2279"]
To właśnie shortcode, czyli krótki i prosty fragment kodu, który powie WordPresowi jaki kod HTML powinien na jego podstawie wygenerować. Odbywa się to poprzez wywołanie odpowiedniej funkcji, która obsługuje dany shortcode i przekazanie do niej jego atrybutów, np. ids
.
Twój własny shortcode
Wszystko sprowadza się do stworzenia i zarejestrowania odpowiedniego handlera, który obsłuży Twój shortcode. Przykładowo chcesz dać użytkownikom możliwość wstawienia pięknego cytatu, poprzez umieszczenie go w shortcode tak jak poniżej.
[myquote width="500" author="Albert Einstein"]Chcę wiedzieć, jak Bóg stworzył ten świat. Nie interesuje mnie to czy inne zjawisko. Chcę znać Jego myśli, reszta to szczegóły.[/myquote]
Poniżej kod, który na podstawie shortcode wygeneruje HTML’a.
function my_quote_handler($atts, $content = null) {
extract(shortcode_atts(array(
'width' => '600',
'author' => '',
),
$atts
)
);
if ($author != '') {
$authorname = '<cite><em>' . esc_attr($author) . '</em></cite>';
} else {
$authorname = null;
}
return '<blockquote class="my-quote" style="width: ' . esc_attr($width) . 'px;">
<p>' . $content . '</p>' . $authorname . '</blockquote>';
}
Pierwszy argument to opcje, które użytkownik zdefiniował w swoim shortcode, np. width
lub author
. Jak nietrudno się domyślić drugim argumentem jest treść shortcode, która znajduje się pomiędzy [myquote ]
a [/myquote ]
Funkcja extract()
tworzy z tablicy asocjacyjnej zwykłe zmienne, dostępne w programie.
Funkcja shortcode_atts()
powoduje przefiltrowanie atrybutów, które pojawiły się w shortcode, na podstawie tablicy atrybutów z wartościami domyślnymi. Wynikiem jest tablica, która zawiera tylko dozwolone atrybuty, a w razie potrzeby ustawione mają wartości domyślne.
Funkcja esc_attr()
zamienia znaki specjalne HTML na ich zakodowane wersje. Są to przykładowo znaki < lub >, które należy zakodować na < oraz >.
Kolejnym krokiem jest zarejestrowanie tej funkcji oraz nowego shortcode w WP.
add_shortcode("myquote", "my_quote_handler");
Teraz wypada jeszcze zdefiniować odpowiednie CSS’y.
blockquote.my-quote cite {
display: block;
text-align: right;
}
blockquote.my-quote cite:before {
content: " — ";
}
blockquote.my-quote {
border-left: 1px solid #DDD;
padding-left: 20px;
}
blockquote.my-quote p {
font-size: 1.7em;
line-height: 1.3em;
}
Jak stworzyć swoją galerię bez pisania pluginu?
Skoro wiesz, że wstawienie galerii powoduje stworzenie shortcode, możesz zastąpić domyślną funkcję, która generuje galerię, własną funkcją.
add_shortcode("gallery", "my_gallery");
Rozwiązanie to zadziała, ale ma jedną wadę – w edytorze wizualnym, w panelu admina, nadal będzie się pojawiać domyślna galeria. Zmiany będą widoczne dopiero po wejściu na stronę.
Więcej zastosowań
Poniżej przedstawiam listę przykładowych zastosowań shortcodes.
- Przycisk do serwisu społecznościowego umieszczony tylko w jednym, szczególnym poście.
- Liczba wszystkich postów generowana dynamicznie.
- Łatwe wstawianie Google AdSense.
- Wstawienie grupy podobnych artykułów (tak jak w tym artykule na dole).
- Wygenerowanie okienka, które umożliwia pobranie materiałów z posta po zapisaniu się na listę mailingową.