Melhorar a navegação do seu site pode aprimorar a experiência do usuário, facilitando a navegação eficiente pelo conteúdo pelos visitantes.
Adicionar navegação por teclado com teclas de seta no WordPress permite que os usuários naveguem pelas postagens do seu site usando apenas as teclas de seta. No entanto, o WordPress não oferece esses recursos de navegação por padrão.
Na WPBeginner, focamos em criar uma experiência de usuário suave e agradável. Ao longo do tempo, testamos vários métodos para melhorar a usabilidade do nosso site, incluindo navegação com teclas de seta. Embora esse recurso não seja importante para o nosso blog, entendemos como ele pode ser benéfico para autores de e-books e blogs menores que buscam aprimorar a experiência do leitor.
Neste artigo, mostraremos como adicionar facilmente navegação por teclado com teclas de seta no WordPress.
Por que Adicionar Navegação por Teclado com Teclas de Seta no WordPress?
Adicionar navegação por teclado permite que os usuários naveguem facilmente pelas postagens do blog no seu site WordPress.
Os usuários podem visualizar as postagens de blog anteriores e seguintes clicando nas teclas de seta direita e esquerda em seus teclados.
Esse recurso é útil quando você deseja que os usuários naveguem facilmente pelas postagens em ordem sequencial. Por exemplo, se você estiver usando postagens de blog para publicar capítulos de um livro, itens de portfólio, eventos históricos ou mais.
Adicionar navegação por teclado com as teclas de seta também pode ser uma ótima maneira de melhorar a experiência do usuário em seu blog WordPress, incentivando os usuários a explorar mais seu site.
Dito isso, vamos ver como adicionar facilmente navegação por teclado com as teclas de seta no WordPress, passo a passo:
- Método 1: Adicionar Navegação por Teclado com Teclas de Seta Usando WPCode (Recomendado)
- Método 2: Adicionar Navegação por Teclado com Teclas de Seta Usando o Plugin Arrow Keys Navigation
- Navegação por Teclas de Seta para Slider e Galerias de Imagens do WordPress
Método 1: Adicionar Navegação por Teclado com Teclas de Seta Usando WPCode (Recomendado)
Você pode facilmente adicionar navegação por teclas de seta em seu site WordPress adicionando código ao arquivo functions.php do seu tema WordPress.
Ao fazer isso, os usuários poderão alternar entre diferentes páginas e posts em seu site usando as teclas de seta em seus teclados.
No entanto, lembre-se de que adicionar código personalizado aos arquivos principais do WordPress pode ser arriscado, e um pequeno erro pode quebrar seu site.
É por isso que sempre recomendamos o uso do WPCode. É o melhor plugin de snippets de código para WordPress do mercado que torna seguro e fácil adicionar código ao seu site.
Primeiro, você precisa instalar e ativar o plugin WPCode. Para detalhes, consulte nosso guia para iniciantes sobre como instalar um plugin WordPress.
Observação: O WPCode também tem uma versão gratuita que você pode usar para este tutorial. No entanto, a atualização para o plano pago desbloqueará mais recursos, como biblioteca de snippets de código, lógica condicional e muito mais.
Após a ativação, acesse a página Code Snippets » + Add Snippet no painel de administração do WordPress.
Em seguida, você pode clicar no botão ‘Use Snippet’ na opção ‘Add Your Custom Code (New Snippet)’.
Isso o levará à página ‘Criar Trecho Personalizado’, onde você pode começar digitando um nome para seu trecho de código.
Aqui, basta selecionar ‘Universal Snippet’ como o ‘Code Type’ no menu suspenso no canto direito da tela.
Observação: Por favor, não selecione ‘JavaScript’ como seu tipo de código. Mesmo que seja código JavaScript, o código só funcionará em seu site se você selecionar a opção ‘Universal Snippet’.
Em seguida, basta copiar e colar o seguinte código na caixa ‘Pré-visualização do Código’:
<script type="text/javascript">
document.onkeydown = function (e) {
var e = e || event,
keycode = e.which || e.keyCode;
if (keycode == 37 || keycode == 33)
location = "<?php echo get_permalink(get_previous_post()); ?>";
if (keycode == 39 || keycode == 34)
location = "<?php echo get_permalink(get_next_post()); ?>";
}
</script>
Depois disso, role para baixo até a seção ‘Insertion’ para escolher um local para o snippet de código.
Aqui, selecione a opção ‘Site Wide Footer’ no menu suspenso ao lado da opção ‘Location’.
Em seguida, escolha ‘Auto Insert’ como o método de inserção para o código personalizado.
O código agora será executado automaticamente em seu site após a ativação.
Depois disso, role de volta para o topo da página e alterne o interruptor de ‘Inactive’ para ‘Active’.
Então, tudo o que você precisa fazer é clicar no botão ‘Save Snippet’.
Pronto! Você adicionou com sucesso a navegação com as teclas de seta esquerda e direita em seu site.
Método 2: Adicionar Navegação por Teclado com Teclas de Seta Usando o Plugin Arrow Keys Navigation
Se você não quiser adicionar código ao seu site, pode usar o plugin Arrow Keys Navigation.
Este plugin permite que você navegue pelos posts anteriores e próximos do seu site usando as teclas de seta direita e esquerda do seu teclado.
Primeiro, você precisa instalar e ativar o plugin Arrow Keys Navigation. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.
Observação: Este plugin não foi atualizado recentemente. No entanto, nós o testamos com a versão mais recente do WordPress e ele ainda está funcionando. Para mais detalhes, você pode ver nosso guia sobre o uso de plugins desatualizados.
Como é um plugin muito simples, ele não requer nenhuma configuração adicional. Assim que você ativar o plugin, poderá alternar para posts diferentes em seu site usando as teclas de seta.
Lembre-se de que este plugin permite apenas alternar entre posts diferentes em seu site, portanto, você não poderá usar as teclas de seta para ir de uma página para outra.
Por exemplo, você não pode alternar de sua página 'Início' para sua página 'Fale Conosco' usando as teclas de seta.
Após ativar o plugin, você pode adicionar uma barra de alerta ou um popup em seu site que informa aos usuários que eles agora podem navegar por vários posts do blog simplesmente usando as teclas de seta para se mover de um post para o próximo.
Para instruções detalhadas, consulte nosso tutorial sobre como criar uma barra de alerta no WordPress.
Navegação por Teclas de Seta para Slider e Galerias de Imagens do WordPress
As duas soluções acima permitirão que os usuários naveguem pelos seus posts de blog com as teclas de seta. No entanto, às vezes você pode querer adicionar outras funcionalidades, como permitir que os usuários movam imagens com as teclas de seta ou talvez movam seu slider com as teclas de seta.
Nesses casos, você precisará usar um plugin de galeria do WordPress e/ou um plugin de slider do WordPress. A maioria dos plugins populares de slider e galeria vêm com recursos de navegação por teclas de seta integrados.
Recomendamos o uso do Envira Gallery porque é o melhor plugin de galeria que permite personalizar suas imagens de acordo com seu gosto, incluindo marcas d'água, teclas de seta e texto alternativo.
Para detalhes, consulte nosso tutorial sobre como criar uma galeria de imagens no WordPress.
Esperamos que este artigo tenha ajudado você a aprender como adicionar navegação por teclado com as teclas de seta no WordPress. Você também pode querer ver nossas principais recomendações para os melhores construtores de temas do WordPress para projetar um site bonito ou os atalhos de teclado mais úteis para o WordPress.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Jiří Vaněk
Tentei usar o snippet no site do meu amigo e funcionou muito bem. Ele tem um blog de viagens projetado como um diário de viagem e esta foi uma ótima maneira de tornar o site mais agradável para as pessoas. Obrigado pelo código fornecido.
Brian
Funciona perfeitamente, para a primeira opção do WP Code. Mas alguma ideia de como fazer isso 'loop' em todos os posts disponíveis em um tipo de post? Atualmente, no primeiro ou último post, a implementação apenas recarrega a página desse post.
WPBeginner Support
No momento não, mas vamos analisar a possibilidade para uma futura atualização do artigo!
Admin
Shiran
Por que isso funciona ao contrário? Ou seja, tenho que apertar a seta "para trás" para avançar...
WPBeginner Support
Pode haver um problema com o seu próprio teclado, você já tentou usar um teclado na tela para ver se o problema ocorre ao usar um teclado diferente?
Admin