Uvod

WordPress widget nastaje instanciranjem klase koja ima prilično veliki kod, pa se pri pravljenju novog widgeta koristi pripremljeni šablon koji se lako prilagodjava potrebama. Custom klasa nasledjuje WordPress-ovu klasu za widgete WP_Widget(). Više o klasi WP_Widget() možete pogledati na oficijelnoj stranici https://developer.wordpress.org/reference/classes/wp_widget/.

Osnovni kostur widget klase

Kostur nove klase se sastoji od četri funkcije i izgleda ovako:

Kačenje widget-a na udicu:

ili na drugi način ali sa istim rezultatom:

Pojašnjenje funkcija unutar klase

slika

slika ×

Funkcija “__construct”

Funkcija “__construct()” je zadužena za pojavljivanje našeg widget-a u delu “Available Widgets”, zajedno sa ostalim standardnim widgetima. Pored aktiviranja funkcija odredjuje ime, kratak opis i identifikacioni string. Takodje u okviru ove funkcije mogu da se registruju i aktiviraju udice za druge funkcije. Funkcija __construct() se nadovezuje na konstruktor unutar superklase WP_Widget.

Parametri konstruktorske funkcije u okviru WP-Widget klase su:

Ove parametre definišemo iz naše custom widget klase preko parent::__construct():

Primer

Radi veće automatizacije šablona možemo da definišemo vrednosti promenjive $widget_slug i obezbedimo lako pozivanje promenjive u okviru naše klase koristeći funkciju get_widget_slug().

Funkcija “form”

Ova funkcija je zadužena za štampanje sadržaja widget forme na admin stranici (kad se prevuče u widget area). Osobine instanciranog widgeta se čuvaju u nizu $instance. Ovom nizu možemo da pridodamo defaultne vrednosti, dok se sve ostale vrednosti dobijaju kroz unos polja forme. Da bi promenjiva $instance bila niz koristimo izraz “(array) $instance” tzv. kastovanje (eng.casting).

Vrednosti polja forme su članovi niza $instance i može im se pristupiti koristeći key niza npr. $instance[‘title’]

  • Defaultne vrednosti u formi u vidu niza $defaults

    Definišu se defaultne vrednosti u vidu key/value niza (npr. $defaults):

  • Sjedinjenje dva niza

    Nakon toga spojimo ta dva niza koristeći wordpress-ovu funkciju “wp_parse_args($instance, $defaults)”. Ova funkcija će spojiti nizove ($instance i $defaults) tako što će vrednosti niza $defaults biti pregažene ako postoje u nizu $args.

  • Forma widgeta

    slika

    slika ×
    • Dinamički elementi forme

      Unutar forme je potrebno da neki parametar (npr.ID polja) ima dinamičke vrednosti koje će biti različite za svaku novu instancu widgeta. To se postiže sa metodam
      a WP_Widget klase:

      • get_field_id().
      • get_field_name()
    • Radio button i Check box

      Ukoliko se u formi koristi check box ili radio button onda se koristi naredba checked($checked, $current) koja poredi dve vrednosti: poslednju sačuvanu vrednost i trenutnu vrednost polja. Ukoliko su obe čekirane dodaje atribut checked-“checked”. Više o ovoj funkciji pogledajte na codex.wordpress.org/Function_Reference/checked

    • Dropdown meni

      Pri korišćenju dropdown menija se koristi selected( $selected, $current) koja poredi dve vrednosti: poslednju sačuvanu vrednost i trenutnu vrednost polja. Ukoliko su obe čekirane dodaje atribut selected=”selected”. Više o ovoj funkciji na codex.wordpress.org/Function_Reference/selected

    • Sprečavanje XSS napada (eng.escaping)

      Pri pisanju koda forme obratiti pažnju da se uradi escaping unosa

Primer

Funkcija “update”

Ova funkcija se aktivira svaki put kada stisnemo save. Ona čuva neki podatak u polju ako je unet i ispisuje ga u formi. Koriste se dva parametra roditeljske klase WP_Widget():

  • niz $new_instance – New settings for this instance as input by the user via WP_Widget::form()
  • niz $old_instance – Old settings for this instance

Unutar ove funkcije se pored čuvanja unetih podataka paralelno radi validacija (eng.validation) i čišćenje (eng.sanitize) unosa iz forme.

Primer

Funkcija “widget”

Ova Funkcija je zadužena za štampanje widgeta na javnoj stranici korisnika. U okviru superklase WP_Widget, parametar $args je niz (key/value) čiji su članovi:

  • ‘before_title’=> ‘ ‘
  • ‘after_title’=> ‘ ‘
  • ‘before_widget’=> ‘ ‘
  • ‘after_widget’=> ‘ ‘

Članove ovog niza prebacujemo u promenjive sa funkcijom extract():

Nakon čega možemo da koristimo promenjive:

  • $before_title
  • $after_title
  • $before_widget
  • $after_widget

Sve što treba da se štampa čuvamo u okviru promenjive $widget_string”. Možemo da koristimo funkcije “ob_start() i ob_get-clean()” ili jednostavnu konkatenaciju string-a.

Šablon klase za izradu widget-a

Ovaj šablon klase za pravljenje custom widget-a je nastao modifikacijom koda originalnog šablona “Widget Boilerplate” od autora Tom McFariln-a. Ceo kod šablona može da se iskopira u functions.php ali je bolje rešenje da se izdvoji u poseban fajl, pa da se pozove u functions.php sa naredbom:

Nakon kopiranja koda šablona treba prilagoditi kod našim potrebama, promeniti nazive na mestima gde se pojavljuje reč “prosistem”,a dodati deo koda na mestima “dodati_kod”.

Widget unutar plugina

Struktura plugina

Ukoliko widget pravimo u sklopu plugina, šablon je dopunjen dodatnim elementima vezanim za plugin. Pa struktura foldera plugin-a izgleda ovako:

  • css
    • admin.css
    • widget.css
    • sass
      • admin.scss
      • widget.scss
  • js
    • admin.js
    • widget.js
  • lang
    • plugin.po
  • views
    • admin.php
    • widget.php
  • Prosistem-Widget-Boilerplate.php

Css fajlovi stilizuju izgled plugina, na administratrskoj strani admin.css dok widget.php stilizuje krajnji izgled widget-a na javnoj stranici sajta. Slično važi za javascript fajlove, admin.js sadrži skripte koje se koriste za prikaz na admin stranici dok widget.js sadrži skripte za prikaz na javnoj korisničkoj stranici sajta. Folder “lang” čuva fajlove vezane za prevodjenje plugin-a.

Folder “view” sadrži fajlove u kojima se nalaze izdvojeni delovi php koda. U fajlu admin.php je izdvojen deo iz funkcije “form” koji je zadužen za štampanje sadržaja unutar widget forme kad se prevuče u widget area u okviru admin stranici. Dok je u widget.php fajlu izdvojen deo iz funkcije “widget”.

Šablon Widget klase za plugin

Ovaj šablon sadrži sav kod prethodno objašnjen ali poseduje dodatni deo koji će da registruje i učitava script-e, css fajlove i fajlove vezane za prevodjenje plugin-a.

Originalni kod od autora Tom McFarlina možete pogledti na njegovom github nalogu github.com/tommcfarlin/WordPress-Widget-Boilerplate/tree/master/widget-boilerplate

Podelite:

Ostavite komentar