01 10 10 Instalacja Fancyboxa na Wordpresie

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

Fancybox to taki multimedialny kombajn, który pozawala nie tylko przeglądać zdjęcia ale również pliki video, czy flaszowe animacje. W tym wpisie przedstawię jak w łatwy sposób zainstalować tą wtyczkę dla jQuery tak aby działała pod Wordpresem.

Patrząc z technicznego punktu widzenia, instalacja Fancyboxa w Wordpresie wymaga kilku prostych czynności. Po pierwsze należy ściągnąć jej pliki, po drugie, włączyć skrypty z wtyczką i inicjalizujący do nagłówka strony, po trzecie stworzyć nowy wpis z odpowiednią zawartością i dodać do niego jedno własne pole.

Wtyczkę Fancybox można ściągnąć z tej strony. W tym przkładzie zostanie użyta wersja 1.3.1.
Pliki należy rozpakować do katalogu js/ aktywnego motywu ( cały kod jest specyficzny dla motywu ).

Kolejnym krokiem jest stworzenie kodu, który zajmie się włączeniem plików Fancyboxa do nagłówka strony. W moim przypadku wygląda on jak następuje:

if(function_exists('print_fancybox_scripts')){
  add_action('fancybox_initializer','print_fancybox_scripts');
}

function print_fancybox_scripts(){
  if( is_single()) {
    global $post;
    $should_include_fancybox = false;
    $post_id = intval($post -> ID);
    $vals = array();
    $vals = get_post_custom_values('fancybox',$post_id);
    if(isset($vals[0])){
      $should_include_fancybox = true;
    }
    if($should_include_fancybox){
      wp_enqueue_style('fancybox_styles',get_bloginfo('template_directory').'/js/jquery.fancybox-1.3.1/fancybox/jquery.fancybox-1.3.1.css',array(),'','screen');
      wp_enqueue_script( 'fancybox', get_bloginfo('template_directory') .'/js/jquery.fancybox-1.3.1/fancybox/jquery.fancybox-1.3.1.pack.js', array('jquery') );
      wp_enqueue_script( 'fancybox_init',get_bloginfo('template_directory').'/js/fancybox_init.js' );
    }
  }
}

Kod powyżej sprawdza czy we wpisie zostało ustawione własne pole o nazwie fancybox, jeżeli tak, wówczas kolejkuje jQuery, wtyczkę Fancybox, plik z konfiguracją i plik arkuszu styli wtyczki. Powyższy kod należy umieścić w pliku functions.php aktywnego motywu. To by było prawie wszystko jeżeli chodzi o PHP.

Kod javaScript z konfiguracją dla wtyczki Fancybox powinien znaleźć się w pliku /js/fancybox_init.js i przypominać ten poniżej:

jQuery(document).ready(function($){
  $("a.fancybox").fancybox();
  $("a.clip").click(function() {
	$.fancybox({
	  'padding'		    : 0,
	  'autoScale'		: false,
	  'transitionIn'	: 'none',
	  'transitionOut'	: 'none',
	  'title'			: this.title,
	  'width'		    : 680,
	  'height'		    : 495,
	  'href'			: this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
	  'type'			: 'swf',
	  'swf'			    : {
	    'wmode'		: 'transparent',
	    'allowfullscreen'	: 'true'
	  }
    });
	return false;
  });
})

Kilka słów objaśnienia do tego co powyżej. Wszystkie odnośniki z klasą fancybox w tekście wpisu zostaną potraktowane jako odnośniki do zdjęć. Odnośniki z klasą clip zostaną potraktowane jako pliki video z Youtube. Oczywiście możliwe są różne inne możliwości. Polecam zajrzeć do opisu opcji i API wtyczki, które można znaleźć na tej stronie.

Wracając do meritum, kolejnym krokiem jest uruchomienie kodu dodanego do akcji fancybox_initializer w pliku header.php. Aby tego dokonać należy w sekcji head dokumentu wstawić:

<?php do_action('fancybox_initializer') ?>

Pozostaje stworzyć nowy wpis w panelu administracyjnym, który bedzie zawierał odnośniki do obrazków i klipu z Youtube.com.

Aby dodać odnośnik do zdjęcia można użyć kodu jak poniżej:

<a id="single_image" href="tu_adres_obrazka" class = "fancybox" rel = "nofollow"><img src="/wp-content/uploads/2010/09/fancyimg.jpg" alt="fractal" style="width:200px"/></a>

W przypadku klipu video z Youtube odnośnik może wyglądać tak:

<a class="clip" title="tytul dla zawartosci" href = "tu_adres_klipu_video" rel = "nofollow">tu opis klipu</a>

Pozstaje jeszcze dodać własne pole do wpisu. Powinno ono mieć nazwę "fancybox" i przyjmować wartość 1.

Po zapisaniu wpisu, i otworzeniu go na blogu, wystarczy kliknąć jeden z wcześniej dodanych odnośników aby wyświetlić zawartość za pośrednictwem Fancyboxa.

Kliknij na obrazek lub odnośnik klipu.

kliknij

Ancient Rites – And The Horns Called For War (klip video znakomitej belgijskiej grupy metalowej z Youtube)

WordPress posiada dobrą wtyczkę o nazwie fancybox-for-wordpress, którą można znaleźć na tej stronie repozytorium. Mnie osobiście znaczna część kodu tej wtyczki nie jest do niczego potrzebna, mojemu serwerowi pewnie też nie, stąd pomysł na nieniejsze rozwązanie i wpis.

Kategorie: wordpress, wordpress - motywy
Tagi: fancybox, javascript