17 12 10 Rotator banerów dla Wordpresa w 50 liniach kodu

Jak zawsze dodany przez : Sylwek, komentarze: ( 0 )

W tym wpisie przedstawię jak w kilkudziesięcu liniach kodu napisać malutką w obsłudze wtyczkę dla Wordpresa, która umożliwia płynna i dość efektowną rotację graficznymi banerami. Na potrzeby wpisu wykorzystane zostaną trzy obrazki, bliblioteka jQuery oraz wtczka dla niej o nazwie Cycle. Wtyczka uruchamiania będzie poprzez dodanie pojedyńczej funkcji do pliku motywu lub makrokodu gdzieś w treści wpisu lub strony.

Rotator banerów

Końcowy efekt pracy będzie wyglądał jak ten poniżej:

Banery

Aby mieć czym rotować, potrzebujemy kilku (co najmniej dwóch) plików graficznych. W moim przypadku są to trzy obrazki zrobione na szybko w Inkscape i bezwstydnie promujące tego bloga. Wszystkie one mają wymiary 469x60px, czyli mniej więcej tyle co mały, poziomy baner prosto od Google.

Struktura i kod rotatora banerów

Wtyczkę roboczo nazwałem Banner rotator. Znajduje się ona w katalogu wp-content/plugins/banner_rotator.
Zawartość głównego katalogu wtyczki składa się z dwóch katalogów oraz jednego pliku. Katalog banners zawiera pliki obrazków, które chcemy wyświetlić (w moim przypadku są to: banner_blue.png banner_green.png banner_red.png ).

Katalog js zawiera wtyczkę Cycle dla bliblioteki jQuery.

Pozostaje jeszcze napisać kilka słów na temat pliku banner_rotator.php. Jest to główny plik wtyczki, w którym zawarty jest cały jej kod PHP. Zawartość tego pliku wygląda jak następuje:

 /*
Plugin Name: Banner rotator
Plugin URI: http://wojnowski.net.pl/
Description: Rotate your banners easily
Author: S.Wojnowski
Author URI: http://wojnowski.net.pl/
License: GPLv3
*/

// add your images here
$banners = array(
  'banner_blue.png',
  'banner_green.png',
  'banner_red.png'
);

class BannerRotator{
  var $banners = array();
  function __construct($new_banners = array()){
    $this -> base_url = site_url().'/';
    $this -> banners = $new_banners;
    $this -> banner_rotator_dir = PLUGINDIR.'/banner_rotator/';
    $this -> banners_dir = $this -> banner_rotator_dir.'banners/';
    $this -> js_dir = $this -> base_url . $this -> banner_rotator_dir.'js/';
  }

  // enqueue scripts
  function enqueue_scripts(){
    wp_enqueue_script('jquery_cycle',$this -> js_dir.'jquery.cycle.all.min.js',array('jquery'));
    wp_enqueue_script('jquery_cycle_init',$this -> js_dir.'rotator_init.js');
  }

  // get html
  function get_banners(){
    $html = '';
    $html .= '<div class="slideshow">';
    foreach($this -> banners as $b){
      $html .= '<img src = "'. $this -> base_url . $this -> banners_dir.'/'.$b.'" alt = "" />';
    }
    $html .= '</div>';
    return $html;
  }

  // display html
  function display_banners(){
    echo $this -> get_banners();
  }
}

$pr = new BannerRotator($banners);
add_action('init',array(&$pr,'enqueue_scripts'));
add_action('display_banners',array(&$pr,'display_banners'));
add_shortcode('display_banners',array(&$pr,'get_banners'));

Zmienna $banners jest tablicą PHP, która zawiera nazwy obrazków z katalogu banners.

Jak widać jest to prościutka klasa PHP, która zawiera w sobie metody umożliwiające dodanie skryptów JavaScript oraz wyświetlenie i zwrócenie niezbędnego kodu HTML.

Ostatnie cztery linijki kodu PHP powyżej inicjalizuję nowy obiekt klasy BannerRotator, dołączają skrypt JavaScript do nagłówka dokumentu a także dodają kod do haka display_banners oraz aktywują makrokod display_banners.

Pozostaje jeszcze powiedzieć kilka słów na temat użytego kodu JavaScript. Jest on zawarty w pliku js/rotator_init.js

jQuery(document).ready(function($) {
  $('.slideshow').cycle({
    fx: 'turnDown'
  });
});

Wtyczka Cycle dla jQuery posiada sporo opcji konfiguracyjnych, ja, aby nie komplikować zanadto tego przykładu, wykorzystałem tylko jedną z nich. Opcja fx umożliwa określenie w jaki sposób zajdzie zmiana obrazków.

Uruchomienie wtyczki

Wtyczkę można uruchomić na dwa sposóby (zakładam, że została ona wcześniej aktywowana w panelu administracyjnym).

Po pierwsze, gdzieś w kodzie szablonu możemy umieścić kod jak poniżej:

<?php do_action('display_banner') ?>

Jeżeli chcemy uruchomić rotator banerów dla pojedyńczego wpisu, w jego treści możemy dodać makrokod display_banners.

Podsumowując

Wtyczka przedstawiona w tym wpisie jest bardzo prosta, napisana została z wykorzystaniem mniej więcej 50 – u linii kodu. Całkiem niewiele, mimo to znajduje się w nim kilka użytecznych technik. Polecam poświęcić kilka chwil na analizę.

50 linii kodu oznacz, że kod choć funkcjonalny, pozbawiony jest dodatkowych udogodnień (jak choćby strona z konfiguracją w panelu administracyjnym).

Jak wczęśniej napisałem, na potrzeby tego wpisu wykorzystałem znakomitą wtyczkę jQuery o nazwie Cycle. Więcej szczegółów na jej temat można znaleźć odwiedzając tą stronę.

Wtyczkę można pobrać tu.

Kategorie: wordpress
Tagi: akcja, hak, makrokod