Ir para o conteúdo principal

Como adicionar uma confirmação pop-up no WordPress

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

O fechamento acidental de uma página sem enviar seu formulário meio preenchido é chato. Recentemente, um de nossos usuários nos perguntou se era possível exibir um pop-up que confirma a ação dos usuários nos formulários. Este pequenino alerta os usuários e os impede de fechar acidentalmente as páginas com formulários meio preenchidos.

Neste tutorial, mostraremos como exibir uma janela de confirmação de uma ação de fechamento para os formulários do seu blog WordPress.

confirmação de fechar uma janela no WordPress

O que é uma navegação de confirmação pop-up

Suponha que um usuário esteja escrevendo um comentário em seu blog. ele já escreveu muitas linhas, mas elas se distraem e esquecem de enviar o comentário. Agora, clicando em um link, por exemplo, todo o conteúdo que ele começou a escrever será perdido.

A confirmação de navegação dá a eles a chance de terminar o comentário.

Você pode ver esse recurso na interface de edição de artigos / páginas. Se você tiver alterações não salvas e estiver tentando sair da página ou fechar o navegador, verá um aviso pop-up.

Vamos ver como podemos adicionar esse recurso de aviso aos comentários do WordPress e outros formulários no seu blog.

Como exibir um pop-up de confirmação em formulários não enviados no WordPress

Para este tutorial, vamos crie um plugin personalizado. Já mostramos como criar um plugin WordPress rapidamente.

Vamos começar.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Você deve primeiro criar uma nova pasta no seu computador e nomeá-la "confirm-action". Nesta pasta, você precisa criar outra pasta e nome js.

Agora abra um editor de texto como o Bloco de Notas e crie um novo arquivo. Dentro, basta colar o seguinte código:

<? php / ** * Confirme a ação * Nome do plugin: Confirme a ação * Plugin URI: https://blogpascher.com * Descrição: Este plugin mostra um aviso para os usuários. * Versão: 1.0.0 * Autor: Autor OSEUNOME * URI: https://blogpascher.com * Licença: GPL-2.0 + * Licença URI: bpc_confirm_leaving_js http://www.gnu.org/licenses/gpl-2.0.txt * / function () {wp_enqueue_script ('Confirmar Deixando', plugins_url ('js / confirm-leaving.js', __FILE__), array ('jquery'), '1.0.0', true); } add_action ('wp_enqueue_scripts', 'bpc_confirm_leaving_js');

Essa função php simplesmente adiciona um arquivo JavaScript ao front end do seu site.

Vá em frente e salve este arquivo como "confirm-action.php " na pasta confirmar a ação "(Raiz do seu plugin).

Agora precisamos criar o arquivo JavaScript que este plug-in carregará. Crie um novo arquivo e cole este código dentro:

jQuery (document) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); função askConfirm () {if (needToConfirm) {// Coloque o seu personalizado mensagem aqui voltar "seus dados não salvos serão perdidos.";}} $ ( "# CommentForm") cambial (function () {needToConfirm = true;}).})

Renomeie este arquivo confirmar-leaving.js«, Para movê-lo para a subpasta« js »De« confirmar a ação".

Este código JavaScript detecta se o usuário possui alterações não salvas no formulário de comentários. Se o usuário tentar sair da página, ele exibirá um aviso pop-up.

Tudo o que você precisa fazer agora e enviar seu arquivo para o servidor usando seu cliente favoritos FTP. Depois, tudo o que você precisa fazer é ativar o plugin no seu painel.

Ação confirmar WordPress Plugin

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

Só isso. Agora você pode visitar um artigo em seu site, tentar escrever um comentário e clicar em um link; você verá um pop-up semelhante a este.

fechamento de confirmação de demonstração

Adicionado aviso em outro formulário do WordPress

Você pode usar o mesmo código para direcionar todos os formulários no seu site WordPress. Aqui, mostraremos um exemplo em um formulário de contato.

Neste exemplo, usamos o plugin WPForms para criar um formulário de contato. As instruções serão as mesmas se você usar outro contacto forma de encaixe em seu site.

Vá para a página onde você adicionou seu formulário de contato. Mova o mouse sobre o primeiro campo do formulário de contato, clique com o botão direito do mouse e selecione " inspecionar", Para acessar o código fonte.

recuperação de código no campo de texto WordPress

Encontre a linha que começa com a tag

. Na tag de formulário, você encontrará o atributo ID. Neste exemplo, o ID do nosso formulário é formulário . Você deve copiar o atributo ID.

Agora edite o confirmar-leaving.js e adicione o atributo ID como resultado de " #commentform Separado por vírgula.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

Seu código deve ficar assim:

jQuery (document) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); função askConfirm () {if (needToConfirm) {// Coloque o seu personalizado mensagem aqui voltar "seus dados não salvos serão perdidos.";}} $ ( "# CommentForm, forma #") cambial (function () {needToConfirm = true;}).})

Salve as alterações e instalar o plugin em seu blog WordPress.

É isso neste tutorial. Espero que ajude você a adicionar uma janela de confirmação pop-up ao seu blog. Não hesite em fazer perguntas se você não entender um ponto.

Este artigo contém comentários 2
  1. Bom Dia,
    fechar um arquivo php única não é obrigatória (que não é recomendado btw).
    Faça CTRL + U para ver o código fonte. Na nova janela que aparece, faça CTRL + F para procurar a expressão "js / confirm-leaving.js". Se você tiver um resultado, então o problema vem do código javascript, caso contrário, o arquivo não foi colocado corretamente na fila.

    Désolé pour le retard.

    Bonne journée à vous.

  2. Bom Dia,

    Bem ele não funciona: Enviei os arquivos para FTP, e ... nada de novo em minhas extensões no wp painel de bordo.

    Não se acidentalmente adicionar um?> No final do primeiro arquivo, o .php arquivo?

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
2 ações
ação
chilrear
Enregistrer2