Kurs WordPress (10)

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 &lt; oraz &gt;.

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

część 11