Kurs WordPress (8)

Autor: Damian Chodorek • Opublikowany: 15 grudnia 2014 • Ostatnia aktualizacja: 8 lutego 2015 • Kategoria: kursy, wordpress

Tworzenie własnego widgetu.

Istnieje kilka sposobów na stworzenie własnego widgetu. Pierwszy i najprostszy to napisanie funkcji i umieszczenie jej w pliku functions.php. To właśnie na tym sposobie się skupię.

Druga metoda polega na napisaniu pluginu. To całkiem dobry sposób, ale wymaga od użytkownika dodatkowych czynności. Nie dosyć, że musi zainstalować szablon, to potem powinien znaleźć i zainstalować odpowiedni widget.

Własny widget

Stworzenie własnego widgetu zaczniemy od zdefiniowania klasy, która dziedziczy po WP_Widget oraz napisania 4 metod:

  • konstruktora,
  • widget(),
  • update(),
  • form().

Poniżej przykładowe ciało.

class My_Widget extends WP_Widget {

  function My_Widget() {
    //  konstruktor
  }

  function form( $instance ) {
    //  metoda generuje opcje widgetu dostępne w panelu
  }

  function update( $new, $old ) {
    //  aktualizacja parametrów widgetu
  }

  function widget( $args, $instance ) {
    //  metoda odpowiada za WYŚWIETLENIE WIDGETU NA STRONIE
  }

}

Po zdefiniowaniu ciała widgetu, należy go zarejestrować w WP.

register_widget( 'My_Widget' );

Trochę konkretniej

W jednej z poprzednich lekcji pokazałem Ci jak obchodzić się z zaczepami oraz filtrami. Przy pomocy tych drugich dodaliśmy opis autora pod każdym postem. Zróbmy z tego widget.

Czas, aby stworzyć puste ciało naszej klasy, a potem zarejestrować ją jako nowy widget. Wszystko zgodnie z kodem, który podałem wcześniej. Należy umieścić go w functions.php.

Zacznijmy od konstruktora. Powinien on wywołać konstruktor klasy bazowej wraz z parametrami.

function Author_Info_Widget() {
  $widget_ops = array(
    'description' => 'Widget wyświetlający dane o autorze.'
  );
  $this->WP_Widget('author_info', 'Author Info', $widget_ops);
}

Pierwszy parametr WP_Widget() to id, drugi to nazwa widgetu, a trzeci to jego opis (jako tablica). Istnieje jeszcze czwarty, opcjonalny, który pominę.

Od tego momentu nasz widget jest widoczny w panelu admina, ale nie posiada żadnych użytecznych właściwości. Czas na określenie metody form().

function form( $instance ) {
  $title = esc_attr($instance['title']);
  ?>
  <p>
    <label for="<?php echo $this->get_field_id('title'); ?>">Tytuł:
      <input class="widefat"
        id="<?php echo $this->get_field_id('title'); ?>"
        name="<?php echo $this->get_field_name('title'); ?>"
        type="text"
        value="<?php echo attribute_escape($title); ?>" />
    </label>
  </p>
  <?php
}

WP pomaga nam w stworzeniu formularza opcji dla widgetu. Korzystamy z metod get_field_id() oraz get_field_name(), aby uzyskać dostęp do odpowiednich danych. $instance to nic innego jak instancja naszego widgetu, który aktualnie edytujemy.

Po dokonaniu zmian, przy pomocy metody update() zmiany powinny zostać zapisane na stałe.

function update($new, $old) {
  $instance = $old;
  $instance['title'] = strip_tags($new['title']);
  return $instance;
}

Dokonujemy więc zamiany odpowiednich pól w obiekcie starej instancji na podstawie obiektu nowej. Musimy wynik naszych prac zwrócić, aby WP mógł dokonać reszty niezbędnych działań. My zrobiliśmy już wszystko co do nas należało.

Jeśli masz więcej niż 1 pole, po prostu działaj analogicznie z jego aktualizacją. Jeśli coś nie będzie Ci się zgadzać, to zwróć false, a widget nie zostanie zaktualizowany. Na tym etapie możesz zobaczyć działający widget w panelu admina.

Wyświetlanie widgetu

Niestety nasz widget nie jest jeszcze widoczny na stronie docelowej (front end). Zdefiniujmy więc ciało metody widget().

function widget( $args, $instance ) {
  extract($args, EXTR_SKIP);
  if ( is_single() ) {
    echo $before_widget;
    $title = apply_filters('widget_title', $instance['title']);
    if ( !empty( $title ) ) {
      echo $before_title.$title.$after_title;
    }
    echo '<div class="author-info">';
    echo '<h4>' . the_author_meta('display_name') . '</h4>';
    if ( get_the_author_meta('description') ) {
      echo '<div class="description"><p>'
      .get_the_author_meta('description')
      .'</p></div>';
    }
    echo '</div>';
    echo $after_widget;
  }
}

Pierwszy argument to tablica, która przekazywana jest do wszystkich widgetów. Zawiera takie dane jak before_widget, before_title itd. Drugi parametr to instancja widgetu z aktualnymi danymi (które ustawił admin). W naszym przypadku jest to tylko tytuł.

Przy pomocy funkcji extract() sprawiamy, że wartości z tablicy stają się pojedynczymi zmiennymi. Warta uwagi jest linijka $title = apply_filters('widget_title', $instance['title']). Przy jej pomocy aktywujemy wszystkie filtry, które związane są z tytułami widgetów.

Reszta kodu powinna być zrozumiała.

Gotowe! Twój widget jest w pełni funkcjonalny.

część 9

Zobacz również
Kurs WordPress (4)Przeszukiwanie i dołączanie plików szablonu. Wstrzykiwanie treści. Mechanizm zaczepów i filtrów.
Kurs WordPress (5)Przeszukiwanie i dołączanie plików szablonu. Wstrzykiwanie treści. Mechanizm zaczepów i filtrów.
Kurs WordPress (6)Dodawanie filtrów. Własna pętla oraz szablon podstrony.
Kurs WordPress (7)Dodawanie własnego kontenera na widgety.
Kurs WordPress (9)Dodanie możliwości edycji szablonu.
Kurs WordPress (10)Dynamiczne wstawianie treści, czyli shortcodes.
Projektowanie stron WWW (1)10 heurystyk Jakoba Nielsena – Twoja ściąga.
Kurs obiektowego JavaScript (1)Wstęp, historia i zastosowanie języka. Dla kogo jest ten kurs?

1 komentarz

  • Tomek napisał(a):

    Świetna ta Twoja strona, dużo ciekawych i wartościowych informacji:)
    Z chęcią zapoznam się z większością artykułów.
    Dziękuję za włożoną pracę oraz chęć dzielnie się wiedzą;)

  • Dodaj komentarz

    Twój adres e-mail nie zostanie opublikowany.