Web Design Blog / Programowanie:

Tworzenie makr w WordPress (Shortcode API)

Data publikacji: 28 czerwca 2019

Środowisko WordPress udostępnia Shortcode API, które stanowi zestaw funkcji umożliwiających tworzenie własnych makropoleceń (dokładna nazwa: shortcode). Makro w Informatyce to zestaw instrukcji przeznaczony dla konkretnej aplikacji, która wyręcza użytkownika z manualnej interakcji z GUI.

Funkcjonalność ta umożliwia wstawianie wewnątrz treści witryny, kodów HTML, które wcześniej zostały zdefiniowane w szablonie motywu (albo w pliku functions.php lub we wtyczce). Dzięki temu, osoba tworząca treść witryny za pomocą edytora w panelu administratora może wygodnie wstawiać w treści elementy składające się z niestandardowych tagów np. takie, które nie występują w standardowym edytorze tekstowym systemu WordPress.

Przykład użycia Shortcode

Jak zwykle najlepiej to pokazać na przykładzie. Częstą potrzebą osób redagujących treść może być umieszczenie wyróżniającego się w niej bannera. Można co prawda przełączyć się na widok HTML i dodać jego kod, ale jest to mało wygodne:

<div class="banner" style="background:url(tlo.png)">
   <p>Tutaj treść bannera....</p>
   <a href="">Zobacz więcej</a>
</div>

Zadeklarowane w szablonie makro wywołuje się przy edycji tekstu poleceniem w nawiasach kwadratowych, które obiekt content zastępuje dynamicznie przy generowaniu kodu HTML strony. Przykład wstawienia takiego banneru może wyglądać tak:

[banner]

W nowym edytorze Gutenberg istnieje nawet dedykowany blok do wstawienia kodów Shortcode:

Programowanie i tworzenie własnego shortcode

Deklaracja tego przytoczonego makra [banner] wyglądałaby następująco:

function banner_sc( $atts ){
return '
<div class="banner" style="background:url(tlo.png)">
<p>Tutaj treść bannera….</p>
<a href="#jakis_link">Zobacz więcej</a>
</div>
';
}
add_shortcode( 'banner', 'banner_sc' );

Niestety w tym rozwiązaniu nie mamy możliwości edytowania zawartości bannera na zasadzie [banner]Tutaj treść bannera…[/banner], aby tego dokonać należy użyć następującej funkcji:

function banner_sc( $atts, $content = null ) {
   return '
        <div class="banner" style="background:url(tlo.png)">
            <p>$content</p>
            <a href="">Zobacz więcej</a>
      </div> 
   ';
 }
 add_shortcode("banner", "banner_sc"); 

Idealnym rozwiązaniem byłoby mieć możliwość edycji linki w przycisku i anchora. Użytkownik może użyć opcjonalnych atrybutów:

[banner link=”#jakis_link” napis=”Zobacz wiecej”]
Tutaj przykładowy tekst
[/banner]

Aby to obsłużyć nasz kod musi wyglądać tak:

function banner_sc( $atts, $content = null ) {
   extract(shortcode_atts(array(
      "link" => 'link',
      "napis" => 'napis'
 ), $atts));
     return '
        <div class="banner" style="background:url(tlo.png)">
            <p>$content</p>
            <a href="$link">$napis</a>
      </div> 
';
 }
 add_shortcode("banner", "banner_sc"); 

Makra możemy zagnieżdżać. Wystarczy przed returnem dodać dodać $mycontent = do_shortcode($content); Jeżeli kod będzie rozbudowany i aby nie mieć problemów ze znakami ucieczki można użyć <<EOT. Poniżej kompletny przykład:

function banner_sc( $atts, $content = null ) {
    extract(shortcode_atts(array(
       "link" => 'link',
       "napis" => 'napis'
    ), $atts));
    $mycontent = do_shortcode($content);
        return <<<EOT
         <div class="banner" style="background:url(tlo.png)">
          <p>$mycontent</p>
          <a href="$link">$napis</a>
      </div>
EOT;
    }
add_shortcode("banner", "banner_sc");

Zalety Shortcode API:

  • Możliwość łatwego rozszerzania treści o niestandardowe elementy HTML,
  • łatwe dodawanie nowych makr do obecnych szablonów WordPress,
  • prostota użycia (można zarówno korzystać z bloku Gutenberg lub dodawać je w innych edytorach WYSIWYG),
  • wysoka wydajność,
  • możliwość zagnieżdżania i tworzenia złożonych konstrukcji.

Wady Shortcode API:

  • Trzeba pamiętać komendy i nazwy atrybutów,
  • mało wygodne i nieintuicyjne dla początkujących i nietechnicznych użytkowników WordPressa,
  • nieużyteczne przy powtarzalnych i skomplikowanych konstrukcjach lub komponowaniu całych sekcji.

Podsumowanie

Shortcode w WordPress to bardzo przydatna funkcja rozszerzania funkcjonalności wizualnego edytora bez konieczności instalowania dodatkowych wtyczek i dodawania kontrolek do jego interfejsu. Makra shortcode to świetny sposób na dodawanie przycisków, automatyzacji pracy lub tworzenia całych lecz nieskomplikowanych sekcji. Choć jest możliwe tworzenie całych layoutów przy ich pomocy, na dłuższą metę zdecydowanie się do tego nie nadają bo kod w edytorze staje się po czasie nieczytelny.

Tworzenie makr w WordPress (Shortcode API) Tworzenie makr w WordPress (Shortcode API) 4.6 na 5 na podstawie 5 ocen Tworzenie makr w WordPress (Shortcode API)


Komentarze

Brak komentarzy.

Dodaj swój komentarz