Tworzenie pluginu WordPress – krok po kroku
W ostatnim czasie postanowiłem zapoznać się z tworzeniem wtyczek pod WordPressa – stworzenie kilku pluginów przyspieszy i ułatwi codzienną pracę :). Zaskoczyło mnie lekko to, że w polskim internecie jest mało tutoriali na ten temat (znalazłem raptem dwa), a więc postanowiłem dodać coś od siebie…
Założenia pluginu
Stworzona przez nas wtyczka będzie umożliwiała:
- skonfigurowanie slidera;
- dodanie i edycję wyświetlanych obrazków;
- wyświetlanie slidera;
Założenia już znamy, a co musi zawierać takki plugin?
- opis pluginu;
- funkcję instalującą;
- funkcję usuwającą;
- funkcję do zmiany konfiguracji;
- funkcję do dodawania / usuwania obrazków;
- funkcję wyświetlającą slider na stronie
No to tworzymy…
W teorii wszystko już wiemy. Pora na napisanie kodu :)
Na początek musimy stworzyć folder zawierający plugin oraz główny plik (ważne jest, by główny plik miał taką samą nazwę jak folder), ja go nazwałem wp-logo-carousel-by-racy-mind. Następnie musimy opisać naszą wtyczkę:
<?php /* Plugin Name: WP logo carousel created by Racy Mind Version: 0.1 Description: Plugin adds logo carousel Author: Racy Mind Author URI: http://www.racymind.pl/ */
Chyba nie muszę nic tu tłumaczyć :). Teraz stworzymy funkcję instalującą.
/** * Tworzy tabele bazy danych dla pluginu * * @global $wpdb */ function rmlc_install() { global $wpdb; $prefix = $wpdb->prefix; $rmlc_tablename = $prefix . "rm_logo_carousel"; $rmlc_db_version = "1.0"; if ($wpdb->get_var("SHOW TABLES LIKE '" . $rmlc_tablename . "'") != $rmlc_tablename) { $query = "CREATE TABLE " . $rmlc_tablename . " ( id int(9) NOT NULL AUTO_INCREMENT, image varchar(250) NOT NULL, link varchar(250) NOT NULL, title varchar(250) NOT NULL, PRIMARY KEY (id) )"; $wpdb->query($query); add_option("rmlc_db_version", $rmlc_db_version); add_option( 'rmlc_speed', '2000' ); add_option( 'rmlc_interval', '2000'); add_option( 'rmlc_type', 'vertical'); } }
Obiekt $wpdb służy do obsługi bazy danych, na stronach WordPress znajduje się dokumentacja tej klasy. W 8 i 9 linijce pobieramy prefix tabel w bazie danych i przypisujemy do zmiennej nazwę naszej tabeli. W kolejnej linii przypisujemy wersję bazy danych pluginu (może się przydać przy aktualizacjach). W kolejnych wierszach sprawdzamy czy taka tabela już nie istnieje, jeżeli nie, tworzymy ją. Na koniec dodajemy opcję z informacją o wersji bazy danych wtyczki. Funkcja gotowa, musimy jeszcze poinformować WordPress, że funkcja ta ma być uruchamiana podczas aktywacji wtyczki.
register_activation_hook(__FILE__, 'rmlc_install');
Jak mamy funkcję do instalacji to i potrzeba nam do od instalowania…
/** * Usuwa tabele bazy danych * @global $wpdb $wpdb */ function rmlc_uninstall() { global $wpdb; $prefix = $wpdb->prefix; $rmlc_tablename = $prefix . "rm_logo_carousel"; $query ='DROP TABLE '.$rmlc_tablename; $wpdb->query($query); } register_deactivation_hook(__FILE__, 'rmlc_uninstall');
Kolejnym krokiem będzie dodanie naszej wtyczki do menu w panelu administracyjnym.
/** * Dodaje Logo carousel do menu w PA */ function rmlc_plugin_menu() { add_menu_page('Logo Carousel', 'Logo Carousel', 'administrator', 'rmlc_settings', 'rmlc_display_settings'); add_submenu_page('rmlc_settings', __('Images'), __('Images'), 'edit_themes', 'rmlc_images', 'rmlc_images'); } add_action('admin_menu', 'rmlc_plugin_menu');
Nasza wtyczka jest już widoczna w WordPressie. Zajmijmy się teraz napisaniem kodu odpowiedzialnego za administrację sliderem. Zacznijmy od stworzenia modelu w nowym pliku.
<?php /** * Model pluginu * * @author Łukasz Socha <biuro@racymind.pl> */ class LogoCarousel { private $tableName; private $wpdb; public function __construct() { global $wpdb; $prefix = $wpdb->prefix; $this->tableName = $prefix . "rm_logo_carousel"; $this->wpdb = $wpdb; } /** * Pobiera wszystkie obrazki * @global $wpdb $wpdb * @return array Tablica z obrazkami */ public function getAll() { $query = "SELECT * FROM " . $this->tableName . " ORDER BY id DESC;"; return $this->wpdb->get_results($query, ARRAY_A); } /** * Dodaje obrazki * @global $wpdb $wpdb * @param array $data */ public function add($data) { $this->wpdb->insert($this->tableName, $data, array('%s', '%s', '%s')); } /** * Usuwa wszystkie obrazki * @global $wpdb $wpdb */ public function deleteAll() { $sql = "TRUNCATE TABLE " . $this->tableName; $this->wpdb->query($sql); } } ?>
Myślę, że tu nie trzeba nic tłumaczyć. Korzystając z klasy wpdb tworzę podstawowe zapytania do bazy danych. Mając gotowy plik z modelem, dodajmy go na początku głównego pliku.
define( 'RMLC_PATH', plugin_dir_path( __FILE__ ) ); require RMLC_PATH.'model/logo-carousel.php';
No to teraz możemy wykorzystać model do funkcji zarządzającej obrazkami.
/** * Wyswietla formularz do edycji obrazkow */ function rmlc_images() { $model=new LogoCarousel(); if (isset($_POST['rmlc_images'])) { $model->deleteAll(); foreach ($_POST['rmlc_images'] as $img) { $model->add(array('image' => $img['image'], 'link' => $img['link'], 'title' => $img['title'])); } } $results = $model->getAll(); echo '<h2>' . __('Images') . '</h2>'; echo '<form action="?page=rmlc_images" method="post">'; echo '<table class="form-table" style="width:auto;" cellpadding="10"> <thead> <tr> <td>' . __('Image') . '</td><td>' . __('Link') . '</td><td>' . __('Title') . '</td><td>' . __('Delete') . '</td> </tr> </thead> <tbody class="items">'; $i=0; foreach ($results as $row) { echo '<tr> <td><input name="rmlc_images['.$i.'][image]" type="text" value="' . $row['image'] . '" /></td>'; echo '<td><input name="rmlc_images['.$i.'][link]" type="text" value="' . $row['link'] . '" /></td>'; echo '<td><input name="rmlc_images['.$i.'][title]" type="text" value="' . $row['title'] . '" /></td>'; echo '<td><a class="delete" href="">' . __('Delete') . '</a></td> </tr>'; $i++; } echo '</tbody><tr><td colspan="4"><a class="add" href="">' . __('Add') . '</a></td></tr>'; echo '<tr><td colspan="4"><input type="submit" value="' . __('Save') . '" /></td></tr>'; echo '</table>'; echo '</form>'; echo ' <script type="text/javascript"> jQuery(document).ready(function($) { $("table .delete").click(function() { $(this).parent().parent().remove(); return false; }); $("table .add").click(function() { var count = $("tbody.items tr").length+1; var code=\'<tr><td><input type="text" name="rmlc_images[\'+count+\'][image]" /></td><td><input type="text" name="rmlc_images[\'+count+\'][link]" /></td><td><input type="text" name="rmlc_images[\'+count+\'][title]" /></td><td><a class="delete" href="">' . __('Delete') . '</a></td></tr>\'; $("tbody.items").append(code); return false; }); }); </script> '; }
Jeżeli przesłano do skryptu zmienną POST, czyszczę bazę danych i dodaję dane od nowa. W kolejnych liniach znajduje się formularz do dodawania z elementami JS.
W panelu administracyjnym brakuje nam jeszcze tylko funkcji do konfiguracji.
/** * Wyswietla formularz do modyfikacji ustawien pluginu */ function rmlc_display_settings() { $slider_horizontal = (get_option('rmlc_type') == 'horizontal') ? 'selected="selected" ' : ''; $slider_vertical = (get_option('rmlc_type') == 'vertical') ? 'selected="selected" ' : ''; $interval = (get_option('rmlc_interval') != '') ? get_option('rmlc_interval') : '2000'; $speed = (get_option('rmlc_speed') != '') ? get_option('rmlc_speed') : '2000'; $html = ' <div class="wrap"><form action="options.php" method="post" name="options"> <h2>Select Your Settings</h2> ' . wp_nonce_field('update-options') . ' <table class="form-table" width="100%" cellpadding="10"> <tbody> <tr> <td scope="row" align="left"> <label>Slider type: </label> <select name="rmlc_type"> <option '.$slider_horizontal.' value="horizontal">Horizontal</option> <option '.$slider_vertical.' value="vertical">Vertical</option></select></td> </tr> <tr> <td scope="row" align="left"> <label>Transition Interval: </label><input type="text" name="rmlc_interval" value="' . $interval . '" /></td> </tr> <tr> <td scope="row" align="left"> <label>Speed: </label><input type="text" name="rmlc_speed" value="' . $speed . '" /></td> </tr> </tbody> </table> <input type="hidden" name="action" value="update'.__('Update').'" /> <input type="hidden" name="page_options" value="rmlc_speed,rmlc_type,rmlc_interval" /> <input type="submit" name="Submit" value="Update" /></form></div> '; echo $html; }
Do określenia ustawień slidera wykorzystuję mechanizm opcji.
Mamy już gotową całą część administracyjną, teraz zajmijmy się wyświetlaniem wtyczki na stronie. Na początek załadujmy pliki JS.
function rmlc_scripts() { wp_enqueue_script('jquery'); wp_register_script('jcarousel_core', plugins_url('js/jcarousellite_1.0.1.min.js', __FILE__), array("jquery")); wp_enqueue_script('jcarousel_core'); wp_register_script('jcarousel_init', plugins_url('js/rmlc_slider_init.js', __FILE__)); wp_enqueue_script('jcarousel_init'); $type = (get_option('rmlc_type') == '') ? "horizontal" : get_option('rmlc_type'); $interval = (get_option('rmlc_interval') == '') ? 2000 : get_option('rmlc_interval'); $speed = (get_option('rmlc_speed') == '') ? 500 : get_option('rmlc_speed'); $vertical=($type == 'vertical') ? 'true' : 'false'; $config_array = array( 'interval' => $interval, 'speed' => $speed, 'vertical' => $vertical, ); wp_localize_script('jcarousel_init', 'setting', $config_array); }
W pluginie tym wykorzystuję tę wtyczkę jQuery. W kolejnych liniach dodaję plik JS z ustawieniami slidera. Korzystam do tego z wcześniej dodanych opcji. Tak wygląda plik JS:
jQuery(document).ready(function($) { $("#rmlc_logo_carousel div").jCarouselLite({ auto: parseInt(setting['interval']), speed: parseInt(setting['speed']), vertical: parseBool(setting['vertical']), }); }); function parseBool(str) { if (str.toLowerCase() === 'true') return true; else return false; }
Ostania funkcja stworzona przez nas będzie służyć do wyświetlania obrazków z bazy danych.
function rmlc_show_logo() { rmlc_scripts(); $model=new LogoCarousel(); $results = $model->getAll(); echo '<div id="rmlc_logo_carousel"><div><ul>'; foreach ($results as $result) { echo '<li>'; if ($result['link'] != '') { echo '<a href="' . $result['link'] . '" title="' . $result['title'] . '"><img src="' . $result['image'] . '" alt="' . $result['title'] . '" /></a>'; } else { echo '<img src="' . $result['image'] . '" alt="' . $result['title'] . '" />'; } echo '</li>'; } echo '</ul></div></div>'; }
Na koniec dodajemy wywołanie powyższej funkcji w naszym szablonie i gotowe :)
<?php rmlc_show_logo(); ?>
Gotową wtyczkę możecie pobrać stąd.