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.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.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.

Przeczytaj również

Darmowe czcionki na stronę internetową. Bezpłatne ... Google udostępnia potężną bazę krojów czcionek, które możemy wykorzystać na własnej stronie internetowej. Zaletą Google Fonts jest to, że czcionek nie...
Jak wykonać logi programem OTL. Obsługa programu O... Wykonywanie logów OTL. Instrukcja wykonania logów OTL - krok po kroku. Gdzie umieszczać logi OTL i Extras ? OTL to program umożliwiający zebranie szc...
Regulamin sklepu, a prawo konsumenta. Jak skuteczn... Kupiłeś buty, które w niedługim czasie się rozleciały, albo zestaw komputerowy, z którym notorycznie są jakieś problemy, a może telefon, który raz dzi...
Podział łącza internetowego, czyli jak zapewnić mi... Jeżeli korzystasz ze współdzielonego dostępu do internetu, to pewnie zauważyłeś, że im więcej osób w tym samym czasie korzysta z sieci, to możesz licz...

Dodaj komentarz

Twój adres email nie zostanie opublikowany.