[WP] 워드프레스에 키보드 단축키 추가 플러그인

현재 이 블로그에는 기본 워드프레스 단축키 외에 관리자페이지로 접속하는 키보드 단축키가 적용되어 있다. 키보드의 Q 를 타이핑하면 관리자페이지로 이동하고 관리자페이지에서 Q 를 타이핑하면 메인페이지로 이동한다. input, textarea, select 등에서는  Q 를 타이핑해도 이동이 되지 않는다. 아래는 플러그인의 코드이다.

<?php

/**
 * @package WP Keyboard Shortcut
 * @version 1.0
 */
/*
Plugin Name: WP Keyboard Shortcut
Plugin URI: https://ncube.net/
Description: This plugin add shortcut on WordPress.
Author: Seongho Jang
Version: 1.0
Author URI: https://ncube.net/
*/

add_action('wp_footer', 'add_footer_javascript', 100);
add_action('admin_footer', 'add_admin_footer_javascript', 100);

function add_footer_javascript() {
?>
<script type="text/javascript">
function processShortcut(event) {
    event = event || window.event;
    event.target = event.target || event.srcElement;

    if (event.altKey || event.ctrlKey || event.metaKey)
        return;
    switch (event.target.nodeName) {
        case "INPUT":
        case "SELECT":
        case "TEXTAREA":
            return;
    }
    switch (event.keyCode) {
        case 81: //Q
            window.location = "<?php echo home_url(); ?>/wp-admin";
            break;
    }
}
document.onkeydown = processShortcut;
</script>
<?php
}

function add_admin_footer_javascript() {
?>
<script type="text/javascript">
function processShortcut(event) {
    event = event || window.event;
    event.target = event.target || event.srcElement;

    if (event.altKey || event.ctrlKey || event.metaKey)
        return;
    switch (event.target.nodeName) {
        case "INPUT":
        case "SELECT":
        case "TEXTAREA":
            return;
    }
    switch (event.keyCode) {
        case 81: //Q
            window.location = "<?php echo home_url(); ?>";
            break;
    }
}
document.onkeydown = processShortcut;
</script>
<?php
}
?>

위 코드를 워드프레스 플러그인 디렉토리에 php 파일을 생성 후 붙여놓기 하고 관리자페이지에서 플러그인을 활성화 해주면 된다.

웹사이트에 키보드 단축키를 제공하는 건 어떨까

이전부터 조금씩 생각해왔던 것이 있는데.. 웹접근성과 관련해서 웹사이트 자체에 키보드 단축키를 제공하는 건 어떨까 하는 것이다. 웹접근성 간담회에서도 키보드 조작성이라는 것에 대해서 이야기가 나왔는데 키보드를 이용해서 메뉴에 접근할 때 메뉴가 많을 때는 한참 탭키를 누르거나 해야한다고 하는데 이런 부분에서는 단축키가 도움이 되지 않을까 싶은 생각이 들었다.

K810_01

일반 사이트보다는 쇼핑몰 같은 곳에서는 많은 도움이 될 것이라 생각하고 있다. 예를 들어 상품상세 페이지에서 선택옵션으로 바로 이동한다거나 아니면 상단의 메인 메뉴로 바로 이동한다거나 하는 기능을 제공하면 좀 더 편하게 이용할 수 있지 않을까 하는 생각을 하게 된다. 대신 너무 많은 단축키를 제공하면 혼란을 줄 수 있기 때문에 지양해야할 것으로 생각이 되고 또 하나 문제는 키보드 단축키 안내를 어떤 식으로 할지이다. 시작장애인에게는 스크린리더를 이용하게 되므로 음성안내를 추가하면 되지만 다른 장애인들에게는 어떤 식으로 제공을 해야할지 아직 잘 모르겠다.

그리고 이런 정보를 화면에 보여줌으로 인해서 디자인적으로 문제가 되지 않을까 하는 생각도 든다. 어제 간담회에서도 이상훈팀장님께 문의를 해봤어야 하는데 왜 미처 생각이 나지 않을까 하는 아쉬움이 남는다. 제대로 준비를 하고 갔어야 하는데 그러지 못한 게 지금에서야 후회가 된다. 근데 이것도 받아들이는 사람들에 따라서 불편하다고 생각할 수도 있기 때문에 꼭 제공해야하는 것인지도 잘 모르겠다. 실제 사용하시는 분들의 의견을 들을 수 있는 기회가 좀 더 많았으면 하는 생각이 든다.

워드프레스에 키보드 단축키 적용하기

키보드 단축키? 그건 또 뭐냐?? 이렇게 생각할 수도 있습니다. 굳이 필요는 없는데 있으면 편한 것이라고 해야할까요? 티스토리를 사용할 때 관리자에 접속하기 위해서는 키보드의 Q 키를 누르면 됐습니다. 그 편한 것을 잊을 수가 없어서 결국 또 오늘.. 지금 이 시간에 또 삽질을 하고 있습니다. ㅋ 삽질이라기 보다 티스토리의 자바스크립트 코드를 워드프레스에 사용할 수 있도록 수정해서 적용한 것 뿐입니다. 키보드 단축키는 익숙한 Q를 그대로 사용했습니다. 아래는 적용한 코드입니다.

<script type="text/javascript">
function processShortcut(event) {
    event = event || window.event;
    event.target = event.target || event.srcElement;

    if (event.altKey || event.ctrlKey || event.metaKey)
        return;
    switch (event.target.nodeName) {
        case "INPUT":
        case "SELECT":
        case "TEXTAREA":
            return;
    }
    switch (event.keyCode) {
        case 81: //Q
            window.location = "/wp-admin";
            break;
    }
}
document.onkeydown = processShortcut;
</script>

위 코드를 테마의 footer.php 파일에 추가해주면 됩니다. 그런 후 블로그에서 Q를 눌러보세요.