top of page

Tworzymy własne WordPress pointers

Zdjęcie autora: Piotr BartczakPiotr Bartczak

Jedną z nowości, jakie pojawią się w WordPressie 3.3 są tak zwane pointers (wskazówki). Czym są chyba najlepiej wyjaśnię wam pokazując zrzut ekranu:


Otóż to. Od teraz WordPress będzie wyświetlać takie chmurki z podpowiedziami co nowego pojawiło się w danej wersji, będą też prezentowane w ten sposób mini tutoriale jak coś zrobić krok po kroku.

A co ważne dla nas – developerów rozwiązań opartych na wordpressie – także i my możemy dodać takie chmurki do naszych produktów. I jest to naprawdę bardzo proste.

Ładujemy pliki pointera

W pierwszej kolejności musimy załadować plik wp-pointers.js oraz plik z definicjami wyglądu takiej wskazówki wp-pointers.css. Prawidłowy sposób dołączenia tych plików wygląda tak:

add_action( 'admin_enqueue_scripts', 'my_admin_enqueue_scripts' );
function my_admin_enqueue_scripts() {
 wp_enqueue_style( 'wp-pointer' );
 wp_enqueue_script( 'wp-pointer' );
 add_action( 'admin_print_footer_scripts', 'my_admin_print_footer_scripts' );
}

Piszemy kod naszego pointera

W ostatniej linijce powyższego kodu dodaliśmy do skryptów JS ładowanych w stopce Kokpitu nasz własny kod wskazówki. Za jego wypisanie odpowiedzialna będzie funkcja my_admin_print_footer_scripts() więc musimy ją teraz stworzyć:

function my_admin_print_footer_scripts() {
// tworzymy kod HTML, jaki ma się wyświetlić w chmurce
$pointer_content = '<h3>To jest ikonka kokpitu</h3>';
$pointer_content .= '<p>Przyznaj się, nigdy wcześniej nie
przyjrzałeś się jej uważnie, czyż nie? Teraz masz okazję to nadrobić';
?>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready( function($) {
// przypinamy naszą wskazówkę do elementu z identyfikatorem icon-index
$('#icon-index').pointer({
  content: '<?php echo $pointer_content; ?>',
  position: 'top',
  }).pointer('open');
});
//]]>
</script>
<?php
}

I to wszystko. Po zapisaniu wszystkich zmian w Kokpicie powinniśmy ujrzeć wskazówkę:


Proste? Pewnie, że proste, a już na pewno proste dla osób, które zaznajomione są w jQuery; wp-pointers to nic innego jak plugin do tego frameworka.

Problemy

Podstawowym problemem jest to, że kodu tego jeszcze nie możecie wykorzystać: działać będzie dopiero w wersji 3.3 (ja testowałem go na dzisiejszym nightly build).

Nie ma żadnej pewności, że powyższy kod będzie cały czas działał, widzę bowiem, że co chwila wprowadzane są zmiany. Ale ogólny zarys dodawania pointera na pewno się nie zmieni.

Z powyższego powodu nie podałem kodu odpowiedzialnego za zapamiętywanie czy user zamknął pointera, tak by ponownie mu już go nie wyświetlać. Deweloperzy właśnie zastanawiają się jaka metoda będzie najlepsza i co chwila to się zmienia. Jeśli ktoś chce podejrzeć jak to się dzieje teraz, proszę zajrzeć do /wp-admin/includes/template.php (a jeśli ktoś nie chce grzebać: przy zamknięciu pointera wysyłane jest zapytanie ajax, które w bazie zapisuje o tym informacje; przy ponownym odwiedzeniu kokpitu sprawdzana jest ta wartość).

I na koniec: całość działa jeszcze dość niestabilnie i posiada błędy. Nawet jeden pozwoliłem sobie zgłosić do naprawy.

Możliwości

Pliki do obsługi pointerów umieszczone są w katalogu wp-includes. Oznacza to, że chmurki będzie można pokazywać nie tylko w Kokpicie, ale i na stronie odwiedzanej przez internautów.

Ręka do góry, kto z was wdroży je w swoich rozwiązaniach? A może uważacie, że to będzie kolejny przeszkadzacz? Zapraszam do komentowania.

2 wyświetlenia0 komentarzy

Ostatnie posty

Zobacz wszystkie

Comments


bottom of page