Nawigowanie Gmaila i innych aplikacji klawiaturą jest super wydajne, prawda?

Czemu więc WordPress nie ma nawigacji skrótami klawiaturowymi?

Po ogromnych poszukiwaniach znalazłem wreszcie niszowy (zaledwie 130 pobrań), ale bezpieczny (przejrzałem kod) plugin, który pozwala poruszać się po panelu administracyjnym samą klawiaturą.

Szybka administracja WordPressem

Plugin nazywa się WP Keyboard Navigation i jest do pobrania z repozytorium WP.

Po instalacji, będąc na dowolnej stronie, wciskamy znak zapytania (czyli Shift + /). Pokaże się okienko z informacjami, jak działają skróty klawiszowe (fragment tego okna widać powyżej na screenshocie). Zamykamy je, wciskając Esc na klawiaturze.

Skróty (w tym pytajnik) oczywiście nie zadziałają, jeśli będziemy ustawieni kursorem w jakimś polu tekstowym lub innym formularza - trzeba kliknąć myszą w tło strony lub użyć przycisku Tab, by zmienić focus.

Dla mnie najważniejszymi skrótami są: przejście do tworzenia nowego wpisu (małe p i potem n) i nowej strony (duże P, czyli shift + p, a potem n).

Czy to faktycznie przyspiesza pracę?

Jak to ze skrótami klawiszowymi - trzeba wyrobić sobie nawyk. Ja go jeszcze nie mam, bo w sumie zapomniałem, że tą wtyczkę na jednym z blogów zainstalowałem.

Wiemy jednak po Gmailu, Google Readerze i Feedlym, że skróty klawiszowe znacznie przyspieszają pracę.

Własne skróty klawiszowe w WP

Na swoje potrzeby musiałem lekko zmodyfikować skrypt. Ta część wpisu będzie trochę techniczna, dla geeków.

Do przypisywania skrótów klawiaturowych wtyczka używa biblioteki Mousetrap (na tej stronie jest informacja o syntaxie).

Zedytować trzeba plik keyboard-nav/mouse.js (tam są faktyczne przypisania klawiszy do zdefiniowanych komend) oraz keyboard-nav/key-nav.php (tam są definicje komend i powiązanych z nimi adresów podstron, do których się przechodzi, zaś u dołu pliku jest lista, która wyświetla się po wpisaniu pytajnika (funkcja kn_help_helper tylko wyświetla tekst, a nie definiuje skrótów klawiszowych!)).

Ważne: trzeba zmusić skrypt, by używał nie wersji skompresowanej keyboard-nav/mousetrap.min.js, tylko tej normalnej - keyboard-nav/mouse.js. Z tego, co widzę, dokonałem tego prawopodobnie zmieniając w pliku keyboard-nav/key-nav.php drugą z tych linii:

wp_enqueue_script('mice', plugins_url('mousetrap.min.js', __FILE__));
wp_enqueue_script('mouse', plugins_url('mouse.js', __FILE__));

Nie pytajcie, od czego jest pierwsza linia, bo nie pamiętam :) Widzę tylko, że działa, a to jedyne odwołanie do mouse.js.

Nie wdając się w szczegóły, ja to sobie ustawiłem następująco:

keyboard-nav/key-nav.php (zauważ nową wartość 'cache' od czyszczenia cache'u oraz zmianę themes na edycję, a nie wybieranie szablonu - o ile dobrze pamiętam):

 wp_localize_script('mouse', 'mouse', array(
        'home' => home_url('/'),
        'dashboard' => admin_url('/'),
        'settings' => admin_url('options-general.php?page=wpsupercache&tab=contents'),
        'plugins' => admin_url('plugins.php'),
        'themes' => admin_url('theme-editor.php'),
        'cache' => admin_url('options-general.php?page=wpsupercache&tab=contents'),
        'pages' => admin_url('edit.php?post_type=page'),
        'post_all' => admin_url('edit.php'),
        'post_new' => admin_url('post-new.php'),
        'page_all' => admin_url('edit.php?post_type=page'),
        'page_new' => admin_url('post-new.php?post_type=page'),
        'edit_link' => get_edit_post_link( $post_id ),
        'users' => admin_url('users.php'),
        'permalinks' => admin_url('options-permalink.php'),
        'login' => is_user_logged_in() ? wp_logout_url() : wp_login_url(),
        'current_page' => get_permalink(),
        'edit_comments' => admin_url('edit-comments.php'),
    ) );

keyboard-nav/mouse.js:

    Mousetrap.bind('r', function() { location.reload();});

    Mousetrap.bind('g h', function() { _goto(mouse.home);}); //homepage
    Mousetrap.bind('g l', function() { _goto(mouse.login);}); //login page
    Mousetrap.bind('g d', function() { _goto(mouse.dashboard);}); //dashboard
    Mousetrap.bind('g t', function() { _goto(mouse.themes);}); //themes page
    Mousetrap.bind('g p', function() { _goto(mouse.plugins);}); //plugins page
    Mousetrap.bind('g u', function() { _goto(mouse.users);}); //users page
    Mousetrap.bind('g c', function() { _goto(mouse.cache);}); //cache page

    Mousetrap.bind('a p', function() { _goto(mouse.post_all);}); //all posts
    Mousetrap.bind('n p', function() { _goto(mouse.post_new);}); //new post
    Mousetrap.bind('a P', function() { _goto(mouse.page_all);}); //all page
    Mousetrap.bind('n P', function() { _goto(mouse.page_new);}); //new page

Jak widać, wolę klikać n a potem P lub p żeby stworzyć nowy wpis lub stronę, niż - według mnie mniej intuicyjnie - p n oraz P n.

Oczywiście nasze zmiany zostaną nadpisane, gdy autor zaktualizuje wtyczkę (póki co była tylko jedna - oryginalna - wersja z sierpnia 2013), więc lepiej trzymać to sobie gdzieś w notatniku, by do nowej wersji móc wkleić.