Tworzenie widgetu do WordPressa. Własna wtyczka do WordPressa – podstawy tworzenia wtyczek.
To już ostatnia część poradnika dotyczącego budowania własnej wtyczki do WordPress. Zdobyliśmy już odpowiednią wiedzę, która pozwoli nam zbudować własną wtyczkę wyświetlającą newsy z wybranej kategorii na stronie głównej naszej strony internetowej.
Źródło: Źródło: Szablon HTML – czyli jak ma wyglądać plugin
Zadaniem wtyczki, którą chcemy stworzyć jest wyświetlanie newsów na stronie głównej. Chcemy aby newsy były wyświetlane w pewien uporządkowany sposób i w zdefiniowany przez nas wcześniej wygląd, dlatego na samym początku warto stworzyć dokument HTML, w którym zdefiniujemy jak mają wyglądać newsy na naszej stronie.
Źródło: Źródło: Ja zdefiniowałem sobie to w ten sposób, że pierwszy News ma pojawić się wraz z opisem, natomiast dla kolejnych newsów mają być wyłącznie linki z tytułem newsu. Jest to zwyczajny dokument HTML z arkuszem stylów CSS – możecie go zbudować jak Wam się podoba.
Budowa wtyczki WP – newsy
Skoro mamy już gotowy szablon, to przejdźmy teraz do budowy właściwej wtyczki dla systemu WP.
Na samej górze musimy umieścić nagłówek wtyczki:
<?php /* Plugin Name: Nowości IT Plugin URI: http://blogkomputerowy.com.pl Description: Widget przedstawiający Newsy IT Version: 1.0 Author: Przemo Author URI: http://blogkomputerowy.com.pl */
Nasza wtyczka będzie widgetem, a więc elementem, który znajdzie się w menu Wygląd -> Widgety, dlatego musimy go zarejestrować – robimy to w ten sposób:
function rejestracja_widget() { register_widget( 'Newsyit_widget' ); }
Nasz widget będzie wyposażony w zewnętrzny arkusz stylów, znajdujący się głównym folderze wtyczki podpisany jako styl.css :
function dodaj_styl() { wp_register_style( 'newsy_it', plugins_url('styl.css', __FILE__) ); wp_enqueue_style( 'newsy_it' ); }
Dodajemy teraz odpowiednie akcje, które aktywują funkcję „rejestracja_widget()”, a także „dodaj_styl()”:
add_action( 'widgets_init', 'rejestracja_widget' ); add_action( 'wp_enqueue_scripts', 'dodaj_styl' );
Należy jeszcze utworzyć klasę nawiązującą do WP_Widget:
class Newsyit_widget extends WP_Widget{ function Newsyit_widget(){ parent::WP_Widget('Newsyit_widget',"Newsy IT Widget"); }
Powyższa klasa dziedziczy po klasie Widget i służy do obsługi naszego Widgetu. Dodatkowo w naszym kodzie powinniśmy umieścić funkcje:
- update – zapis konfiguracji
- form – tworzy formularz widgetu widoczny w menu Wygląd -> Widgety
- widget – odpowiada za wyświetlanie widgetu
Tworzymy więc pierwszą wspomnianą funkcję form, która będzie wyświetlała formularz z możliwością wprowadzenia ustawień:
function form($instance) { $category = ""; $obrazek = ""; $ilosc = "5"; if($instance['category']) $category = $instance['category']; if($instance['obrazek']) $obrazek= $instance['obrazek']; if($instance['ilosc']) $ilosc= $instance['ilosc']; ?> <p><label for="<?php echo $this->get_field_id('category'); ?>">Kategoria: <input class="widefat" id="<?php echo $this->get_field_id('category'); ?>" name="<?php echo $this->get_field_name('category'); ?>" type="text" value="<?php echo $category; ?>" /> </label></p> <p><label for="<?php echo $this->get_field_id('obrazek'); ?>">Obrazek (alternatywny): <input class="widefat" id="<?php echo $this->get_field_id('obrazek'); ?>" name="<?php echo $this->get_field_name('obrazek'); ?>" type="text" value="<?php echo $obrazek; ?>" /> </label></p> <p><label for="<?php echo $this->get_field_id('ilosc'); ?>">Ilość postów: <input class="widefat" id="<?php echo $this->get_field_id('ilosc'); ?>" name="<?php echo $this->get_field_name('ilosc'); ?>" type="text" value="<?php echo $ilosc; ?>" /> </label></p> <?php }
Nasza wtyczka/widget będzie posiadał trzy pola tekstowe tj. Kategoria, Obrazek, oraz Ilość postów, które będziemy mogli ręcznie ustawić. W ten sposób wtyczka będzie uniwersalna – żadna z wartości nie będzie wpisana na stałe.
Kolejna funkcja, którą należy stworzyć to update, służąca za aktualizowanie i zapamiętywanie wprowadzonych danych:
function update($new_instance, $old_instance) { $instance = $old_instance; $instance['category'] = strip_tags($new_instance['category']); $instance['obrazek'] = strip_tags($new_instance['obrazek']); $instance['ilosc'] = strip_tags($new_instance['ilosc']); return $instance; }
Zamieniamy tutaj stare wartości na nowe – taki komentarz chyba wystarczy.
Ostatnią funkcją, którą należy stworzyć jest funkcja widget, służąca do wyświetlania newsów na stronie – tutaj przyda się wcześniej stworzony przez nas szablon – teraz należy go lekko zmodyfikować:
function widget($args, $instance) { extract($args); echo $before_widget; $query = new WP_Query(); $query->query(array( 'post_type' => 'post', 'category_name' => $instance['category'], 'posts_per_page' => $instance['ilosc'] )); $pierwszy = true; $category_id = get_cat_ID($instance['category'] ); $category_link = get_category_link( $category_id ); ?> <div id="newsy_it"> <div id="belka"/><span class="naglowek"><a href="<?php echo esc_url($category_link) ?>">Newsy IT »</a></span></div> <?php if($query->have_posts()) : while ($query->have_posts()): $query->the_post();?> <?php if($pierwszy){ ?> <div id ="pierwsza"> <?php if($instance['obrazek'] != ""){ ?> <a href="<?php echo esc_url($category_link) ?>"><img src="<?php echo $instance['obrazek'] ?>"/></a> <?php }else{ ?> <a href="<?php the_permalink();?>"><?php the_post_thumbnail('thumbnail'); ?></a> <?php } ?> <p id="odnosniki"><a href="<?php the_permalink(); ?>"><span class="data">« (<?php echo get_the_date() ?> ) </span><?php the_title()?></a></p> <span class="opis_pierwszy"><?php echo substr(get_the_excerpt(), 0,300)."..."; ?></span> </div> <div id="dolne_odnosniki"> <?php $pierwszy = false; continue;} ?> <p id="odnosniki"><a href="<?php the_permalink(); ?>"><span class="data">» (<?php echo get_the_date() ?> ) </span> <?php the_title()?></a></p> <?php endwhile; endif; ?> </div> </div> <?php echo $after_widget; } } ?>
Na samym początku pobieram posty należące do danej kategorii, a następnie wyświetlam je na stronie internetowej (w pętli While).
I to w zasadzie wszystko – mamy wtyczkę, która wyświetla newsy z danej kategorii. Dla tych, którzy nie poradzili sobie z zadaniem przygotowałem pliki pomocnicze, które można pobrać z tej strony.