WordPress widget tutorial – piszemy własny widget – część 3

WordPress widget tutorial – piszemy własny widget. Witajcie w trzeciej i ostatniej części kursu dla początkujących, dotyczącej tworzenia widgetów dla WordPress zupełnie od zera.

Zanim przejdziesz dalej, upewnij się, że przerobiłeś dwie ostatnie części:

• W części pierwszej tego kursu, mówiliśmy podstawach tworzenia widgetów dla WordPress. Utworzyliśmy plik z klasą naszego widgetu, na której oparliśmy część drugą i trzecią tego kursu. Plik został podpięty pod motyw, tak byśmy mogli śledzić na bieżąco postępy.
• W części drugiej natomiast, utworzyliśmy kompletny formularz do zarządzania opcjami widget-u z poziomu kokpitu WordPress-a. Uzupełniliśmy także metodę update(), służącą do walidacji danych przesłanych przez wspomniany formularz.

Część 3 – WordPress widget tutorial – piszemy własny widget

Przechodząc do części trzeciej powinniśmy mieć już w pełni funkcjonalny widget od strony kokpitu – dodawanie do sidebarów, zapis i odczyt opcji z bazy danych.

W tej części zajmiemy się widgetem od strony frontend-u, czyli tej widocznej dla użytkowników witryny.

Zanim przejdziemy do kodowania, proponuję umieścić nasz nowy widget na wybrany sidebar i wstępnie skonfigurować, tak abyśmy mogli sprawdzać, czy wszystko działa jak należy (np. wybierzmy kategorię w której na pewno mamy jakieś wpisy).

Możemy teraz przejść do metody widget() w naszym pliku. Na tym etapie chciałbym ją minimalnie zmodyfikować, tak by nie zrobić zbyt dużo bałaganu, a tylko sprawić, że będziemy widzieć, czy idziemy dobrą drogą i czy spodziewany rezultat pokaże się na ekranie.

Mamy taki kod:

public function widget( $args, $instance ) {
    $title = apply_filters('widget_title', $instance['title']);

    if (empty($title))
    {
        $title = __('Najnowsze Posty', 'NajnowszePosty');
    }

    echo $args['before_widget'];

        echo $args['before_title'] . esc_html($title) . $args['after_title'];
        echo 'Tutaj testowa zawartość';

    echo $args['after_widget'];
}

Teraz pytanie skąd to wszystko się wzięło? Jak widzisz funkcja widget() przyjmuje dwa argumenty:

• $args – tutaj znajdują się argumenty dla widgetu przesłane z motywu, ustawione podczas rejestrowania sidebara. Jeżeli pamiętasz wpis o widgetach w sidebarach, to możliwe, że pamiętasz też jak rejestruje się sidebar i jakie opcje można tam ustawić. Chodzi mi o before_widget, after_widget, before_title, after_title.
• $instance – w skrócie jest to tablica z ustawieniami widget-u pobranymi z bazy danych.

Generalnie, możliwe że z drobnymi przeróbkami, ale powyższy fragment kodu uznać można za punkt bazowy, do którego dodajemy resztę. Ważne, aby pamiętać o dodaniu znaczników, które mają się pojawić przed i po widget-cie, oraz tych pomiędzy nimi – linijka z tytułem ujętym w before_title i after_title, a poniżej dodajemy resztę kodu – pobranie wpisów z bazy (custom query), odpowiednio je formatujemy i wyświetlamy uzytkownikowi (the loop).

Oto, co się wyświetliło w tym momencie:

Chodzi o widget znajdujący się w prawej kolumnie. Znaczy, że wszystko jest na dobrym tropie i idziemy w dobrym kierunku. 🙂

Chyba najlepiej będzie jak wkleję od razu cały kod:

public function widget( $args, $instance ) {
    $title = apply_filters('widget_title', $instance['title']);

    if (empty($title))
    {
        $title = __('Najnowsze Posty', 'NajnowszePosty');
    }

    echo $args['before_widget'];

        echo $args['before_title'] . esc_html($title) . $args['after_title'];

        $query_args = array(
            'cat' => implode(",", $instance['categories']),
            'posts_per_page' => $instance['number'],
            'post_status' => 'publish',
            'ignore_sticky_posts' => true,
            'orderby' => 'date',
            'order' => 'DESC'
        );
    
        $my_query = new WP_Query($query_args);

        if($my_query->have_posts()): ?>

            <ul>

                <?php while ($my_query->have_posts()): $my_query->the_post(); ?>

                    <li class="clearfix">
                        <?php if ($instance['show_thumbnail'] == TRUE && has_post_thumbnail()): ?>
                            <div class="thumbnail">
                                <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('post-icon'); ?></a>
                            </div>
                        <?php endif; ?>

                        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                        
                        <?php if( $instance['show_excerpt'] == TRUE ): ?>
                            <div class="post-excerpt">
                                <?php echo substr(get_the_content(), 0, $instance['excerpt_length']); ?>
                             </div>
                        <?php endif; ?>
                    </li>
                <?php endwhile; ?>

            </ul>

        <?php else: ?>
            <p><?php _e('Nie znaleziono postów spełniających podane kryteria.'); ?></p>
        <?php endif;

        /* Restore original Post Data */
        wp_reset_postdata();

    echo $args['after_widget'];
}

Jeżeli napiszemy do tego kawałek CSS, to otrzymamy prawie gotowy widget wyświetlający ostatnie posty. Jak widzisz dodane zostało zapytanie do bazy z argumentami realizującymi nasze potrzeby, a dalej znajduje się pętla wyświetlająca wyniki zapytania. U mnie wygląda to tak:

 

 

Chodzi o prawą kolumnę. I jesteśmy prawie u celu.

Uwagi końcowe

Na uwagę zasługują tutaj jeszcze dwie sprawy:

<?php echo substr(get_the_content(), 0, $instance['excerpt_length']); ?>

Proszę zauważyć, że używamy get_the_content() zamiast the_content(). Różnica jest taka, że pierwsza tylko zwraca zawartość posta, a nie ją wyświetla. Funkcją substr() określamy widoczną długość treści posta. Jako trzeci argument wstawiamy ustaloną przez nas wcześniej w formularzu zmienną przechowującą wartość opcji z wymaganą długością wypisu. Można to zrobić na kilka sposobów, np. zamiast ilości znaków brać ilość słów, ale wszystko zależy od aktualnych potrzeb.

Wyświetlanie tak małych miniaturek wykonałem dzięki dodaniu dodatkowego rozmiaru miniatury do motywu:

add_image_size('post-icon', 60, 60, array('center', 'center'));

Dzięki tej instrukcji, podczas wczytywania nowych obrazków do galerii, WordPress sam wykonuje dodatkowy rozmiar miniatury zdjęcia.

Mam nadzieję, że reszta jest zrozumiała, ale oczywiście bardzo chętnie odpowiem na wszystkie pytania. 🙂

No i właściwie jest to już wszystko w tym wpisie i kursie. W najbliższych wpisach chciałbym jeszcze pokazać kilka przykładów związanych z widgetami w WordPress-ie.

Dziękuję za przeczytanie mojego kursu – WordPress widget tutorial – i mam nadzieję, że okazał się pomocny!

Pełny plik php tego przykładu (najnowsze-posty).