Пропустить

Как добавить подтверждение всплывающего на WordPress

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 701.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

Случайное закрытие страницы без отправки наполовину заполненной формы раздражает. Недавно один из наших пользователей спросил нас, можно ли отображать всплывающее окно, подтверждающее действия пользователя в формах? Это крошечное маленькое оповещение пользователей и предотвращает их случайное закрытие страниц с наполовину заполненными формами.

В этом руководстве мы покажем вам, как отобразить окно подтверждения закрытия для форм вашего блога WordPress.

подтверждение закрытия окна на WordPress

Что такое всплывающее окно подтверждения просмотра

Предположим, пользователь пишет комментарий в вашем блоге. он уже написал большое количество строк, но они отвлекаются и забывают оставить комментарий. Теперь, например, при нажатии на ссылку весь контент, который он начал писать, будет утерян.

Подтверждение просмотра дает им возможность завершить свой комментарий.

Вы можете увидеть эту функцию в интерфейсе редактора статей / страниц. Если у вас есть несохраненные изменения, и вы пытаетесь закрыть страницу или браузер, вы увидите всплывающее предупреждение.

Давайте посмотрим, как мы можем добавить эту функцию предупреждения в комментарии WordPress и другие формы в вашем блоге.

Как отобразить всплывающее окно подтверждения на неотправленных формах в WordPress

Для этого урока мы будем создать собственный плагинМы уже показали вам, как быстро создать плагин для WordPress.

Давайте начнем.

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

Сначала вам нужно создать новую папку на вашем компьютере и назвать ее «confirm-action». В этой папке вам нужно создать другую папку и назвать ее js.

Теперь откройте текстовый редактор, например Блокнот, и создайте новый файл. Внутри просто вставьте следующий код:

<?php
/**
 * Confirmer Action
 * Plugin Name: Confirmer Action
 * Plugin URI:  https://blogpascher.com
 * Description: This plugin shows a warning to users when try they forget to hit submit button on a comment form. 
 * Version:     1.0.0
 * Author:      VotreNOM
 * Author URI:  https://blogpascher.com
 * License:     GPL-2.0+
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */
 
function bpc_confirm_leaving_js() { 

     wp_enqueue_script( 'Confirm Leaving', plugins_url( 'js/confirm-leaving.js', __FILE__ ), array('jquery'), '1.0.0', true );
} 
add_action('wp_enqueue_scripts', 'bpc_confirm_leaving_js');

Эта функция php просто добавляет файл javascript в интерфейс вашего веб-сайта.

Продолжайте и сохраните этот файл как «confirm-action.php" в папке подтвердить действие "(Корень вашего плагина).

Теперь нам нужно создать файл JavaScript, который будет загружать этот плагин. Создайте новый файл и вставьте этот код внутрь:

JQuery (документ) .ready (функция ($) {$ (документ) .ready (функция () {needToConfirm = ложь; window.onbeforeunload = askConfirm;}); функция askConfirm () {если (needToConfirm) {// Поместите свой пользовательские сообщения здесь вернуться "Ваши несохраненные данные будут потеряны.";}} $ ( "# CommentForm") обмен (функция () {needToConfirm = истина;}).})

Переименовать этот файл подтвердить-leaving.js", Переместите в" подпапку " js «Из» подтвердить действие".

Этот код JavaScript определяет, есть ли у пользователя несохраненные изменения в форме комментариев. Если пользователь попытается закрыть страницу, отобразится всплывающее предупреждение.

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

Все, что вам нужно сделать, это загрузить файл на сервер с помощью клиента. FTP избранное. После этого все, что вам нужно сделать, это активировать плагин на панели инструментов.

Действие подтвердить WordPress плагин

Вот и все. Теперь вы можете посетить статью на своем веб-сайте, попытаться написать комментарий, затем щелкнуть ссылку, вы увидите всплывающее окно, подобное этому.

закрытие демо-подтверждение

Добавление предупреждения в другие формы WordPress

Вы можете использовать один и тот же код для таргетинга всех форм на вашем сайте WordPress. Здесь мы покажем вам пример в контактной форме.

В этом примере мы используем плагин WPForms создать контактную форму. Инструкции будут такими же, если вы используете другой Форма контакта плагин на вашем сайте.

Перейдите на страницу, на которой вы добавили свою контактную форму. Наведите указатель мыши на первое поле в контактной форме, щелкните правой кнопкой мыши и выберите " инспектировать«, Чтобы получить доступ к исходному коду.

восстановление кода из текстового поля WordPress

Найдите строку, которая начинается с тега <form>. В теге формы вы найдете атрибут ID. В этом примере идентификатор нашей формы formulaire . Вы должны скопировать атрибут ID.

Теперь отредактируйте confirmer-leaving.js файл и добавьте атрибут ID после " #commentform Разделяется запятой.

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

Ваш код должен выглядеть так:

JQuery (документ) .ready (функция ($) {$ (документ) .ready (функция () {needToConfirm = ложь; window.onbeforeunload = askConfirm;}); функция askConfirm () {если (needToConfirm) {// Поместите свой пользовательские сообщения здесь вернуться "Ваши несохраненные данные будут потеряны.";}} $ ( "# CommentForm, форма #") обмен (функция () {needToConfirm = TRUE;}).})

Сохраните изменения и установить плагин на свой блог WordPress.

Это все для этого урока. Надеюсь, это поможет вам добавить всплывающее окно подтверждения в свой блог. Не стесняйтесь задавать вопросы, если вам что-то непонятно.

Эта статья содержит комментарии 2

  1. Привет,
    закрывать только php файл не обязательно (даже не рекомендуется).
    Нажмите CTRL + U, чтобы увидеть исходный код. В появившемся новом окне нажмите CTRL + F, чтобы найти выражение «js / confirm-leave.js». Если у вас есть результат, значит проблема в коде javascript, иначе файл не был правильно поставлен в очередь.

    Desole пур ле ретард.

    Bonne journée à Vous.

  2. Привет,

    Что ж, не работает: я отправил файлы на ftp, и… ничего нового в моих расширениях на панели инструментов wp.

    Разве не обязательно добавлять?> В конец первого файла, файла .php?

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
2 акции
доля
чирикать
Регистрация2