Tworzymy własne WordPress pointers

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.


Opublikowano

w

przez

Komentarze

5 odpowiedzi na „Tworzymy własne WordPress pointers”

  1. […] Co ważniejsze dla nas – twórców wordpressowych skórek, wtyczek i wdrożeń – pointery mają swoje API, z którego będziemy mogli skorzystać konstruując wskazówki do naszych własnych dodatków. Zobacz artykuł o tym jak tworzyć własne wordpress pointers. […]

  2. Awatar Marcin Biegun

    Dobre – można wrzucić klientom mającym pierwszy raz do czynienia z WP mini tutorial wbudowany bezpośrednio w stronę.

    1. Awatar Konrad Karpieszuk

      dokładnie :) choć znając reakcje klientów na Kokpit nie jestem do konca pewien czy nawet takie pointery sprawią, że kokpit będzie dla nich przyjaźniejszy

  3. Awatar Marcin Biegun

    Pokazuj kokpit edytora – zazwyczaj mają tam wszystko, czego potrzebują i nic, czego mogliby się bać :]

  4. Awatar Damian

    Fajny gadżet tylko jak tego się trochę nazbiera to będzie to dziwnie wyglądało, gdy po wejściu kokpit będą zasypywać te dymki. Dlatego proponuję używać kodu w liniach 11-14 wewnątrz takiego wywołania:

    $('#dashboard_right_now').mouseenter(function() {

    i dodać coś takiego:


    $('#dashboard_right_now').mouseleave(function() {
    $('#dashboard_right_now').pointer('close');
    });

    Wtedy dymek wyświetli się tylko po najechaniu a po wyjechaniu z elementu zniknie.