Budowa wtyczki do WordPress. Własna wtyczka WordPress część 3.

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.

wtyczka-300x158 Budowa wtyczki do Wordpress. Własna wtyczka Wordpress część 3.Ź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.

wlasna-wtyczka-300x144 Budowa wtyczki do Wordpress. Własna wtyczka Wordpress część 3.Ź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 &raquo;</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">&laquo;  (<?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">&raquo;  (<?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.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.