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

Что это такое?

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

Всплывающее окно (pop-up) позволяет завершить написание комментария.

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

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

Показываем всплывающее окно для неотправленных форм в WordPress

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

Начнём!

Для начала вам необходимо создать новую папку на вашем компьютере и назвать её  confirm-leaving. В этой папке создайте ещё одну папку и назовите её js.

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

<?php

function wpb_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', 'wpb_confirm_leaving_js'); 

<?php

 jQuery(document).ready(function($) { 

$(document).ready(function() {
    needToConfirm = false; 
    window.onbeforeunload = askConfirm;
});

function askConfirm() {
    if (needToConfirm) {
        // Put your custom message here 
        return "Your unsaved data will be lost."; 
    }
}
 
$("#commentform").change(function() {
    needToConfirm = true;
});

 })

Вам необходимо сохранить данный файл под именем confirm-leaving.js  в папку js.

После сохранения обоих файлов, структура вашей папки должна выглядеть так:

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

Как только вы подключитесь, необходимо загрузить папку confirm-leaving в папку /wp-contents/plugins/ на вашем сайте.

После этого, вам надо войти в панель администратора WordPress и зайти на страницу с плагинами. Найдите плагин под названием ‘Confirm Leaving’ в списке установленных плагинов и нажмите на ‘activate’ под названием.

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

Добавляем оповещения к остальным формам в WordPress

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

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

Перейдите на страницу, где вы добавили контактную форму. Наведите мышь на первое поле в контактной форме, нажмите правую кнопку мыши и из выпадающего меню выберите Inspect.

Найдите строку, которая начинается с тега <form> . В этом теге вы найдёте атрибут ID.

В этом примере, ID нашей формы — wpforms-form-170. Нужно скопировать этот атрибут.

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

Удостоверьтесь, что вы разделили запятой #commentform и ID вашей формы. Также необходимо добавить знак # в качестве префикса к ID атрибуту вашей формы.

В итоге, ваш код будет выглядеть так:

jQuery(document).ready(function($) { 

$(document).ready(function() {
    needToConfirm = false; 
    window.onbeforeunload = askConfirm;
});

function askConfirm() {
    if (needToConfirm) {
        // Put your custom message here 
        return "Your unsaved data will be lost."; 
    }
}

$("#commentform,#wpforms-form-170").change(function() {
    needToConfirm = true;
});

 })

Сохраните все изменения и загрузите этот файл на ваш вебсайт.

Теперь вы можете ввести любой текст в любое поле вашей контактной формы и попробовать покинуть страницу без отправки данных. Появится pop-up окно с предупреждением, что у вас есть несохранённые данные.

Также вы можете скачать плагин confirm-leaving. Он действует лишь по отношению к формам комментариев, но вы можете отредактировать код, чтобы он действовал и на остальные формы.

Вот и всё, надеемся, что эта статья помогла вам разобраться, как делать всплывающие окна для форм WordPress. Также вы возможно захотите ознакомиться с 8 лучшими пособиями по jQuery для новичков в WordPress.

Если вам понравилась эта статья, то милости просим подписаться на наш канал в YouTube, где вы найдёте видеоучебники по WordPress. Также нас можно найти на Twitter или Facebook.

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520

Знали ли вы, что существует возможность установить WordPress прямо на ваш компьютер для изучения и тестирования? Процесс установки WordPress на ваш ПК также называется установкой локального сервера (localhost). Зачастую дизайнеры тем и разработчики плагинов устанавливают WordPress на локальный сервер, чтобы ускорить процесс разработки. Обычный пользователь может использовать локальный сервер, чтобы тестировать плагины и/или делать изменения на сайте, перед тем как данные изменения увидят посетители. В этой статье мы покажем вам, как установить WordPress на ваш компьютер с помощью WAMP.

Помните, что если вы установите WordPress локально на ваш компьютер, то вы будете единственный, кто увидит этот сайт. Если вы хотите иметь публичный сайт WordPress, то вам необходимо иметь доменное имя и хостинг. Мы рекомендуем вам посмотреть данное руководство: Как установить WordPress.

Что такое WAMP?

WAMP или WampServer это сборка для Windows из веб-сервера Apache, PHP и MySQL. Другими словами, вам нужно установить WAMP, чтобы установить вам собственный локальный сервер и установить WordPress на Windows. Существуют также другие клиенты для Windows, например XAMPP, но мы рекомендуем использовать WAMP. Он бесплатен и прост в освоении.

Установка Wampserver на ваш ПК

Первым делом, необходимо перейти на сайт WampServer и скачать последнюю версию WampServer. Вы увидите различные опции скачивания на данной странице, просто выберите ту, которую подходит для вашего Windows (64-bit или 32-bit). Если не знаете, что выбрать, качайте 32-битную версию, она будет работать также и на 64-битном Windows.

Как только вы скачали WampServer, запустите инсталлятор и следуйте инструкциям на экране. В какой-то момент, установщик попросит указать местонахождение браузера по умолчанию. По умолчанию он будет использовать Internet Explorer, но вы можете изменить браузер на любой другой, указав его в папке Program Files.

Как только закончите, запускайте WampServer.

Установка базы данных для WordPress

WampServer идёт в комплекте с phpMyAdmin, это веб-приложение, которое позволяет управлять базами данных MySQL. Нажмите на иконку WampServer в панели задач и запустите phpmyadmin.

phpMyAdmin откроет новое окно в браузере. Нажмите на Databases в phpmMyAdmin, чтобы создать новую базу данных для WordPress. Выберите имя для базы данных и нажмите кнопку Create.

Installing WordPress on Windows with WAMP Установка WordPress для Windows с помощью WAMP

Скачайте WordPress c сайта WordPress.org. Извлеките zip файлы и скопируйте папку wordpress. Перейдите в C:\wamp\www и вставьте папку wordpress туда. Вы можете переименовать эту папку, например в mojsajt и так далее. Мы решили переименовать эту папку в mysite. Теперь откройте браузер и перейдите:

http://localhost/mysite/

WordPress проинформирует вас, что он не может найти файл  wp-config.php . Нажмите на кнопку Create a Configuration File, чтобы создать его.

На следующей странице, вам необходимо предоставить информацию о вашей базе данных. В нашем случае, мы назвали её test_db.

Следует знать, что стандартный логин БД является root, а пароль отсутствует. Нажмите кнопку отправки данных и WordPress создаст файл конфигурации для вас.

После этого, вы увидите страницу, на которой будет написано, что WordPress успешно создал файл конфигурации и вы можете перейти к установке. Нажмите на кнопку Run Install.

На следующей странице, необходимо ввести требующуюся информацию. Нужно ввести название вашего сайта, выбрать имя администратора, пароль, а также e-mail администратора. В конце нажмите на кнопку Install WordPress.

WordPress быстро выполнит инсталляцию и создаст таблицы в базе данных. Как только он закончит, вы увидите сообщение об успешной установке. Далее вы можете зайти в WordPress, нажав кнопку Log in.

Устранение конфликта WAMP со Skype

Если у вас установлен Skype и у вас включен WampServer, у вас могут возникнуть неполадки из-за конфликта со Skype. Этот конфликт вызван тем, что Apache и Skype используют один порт — 80. Эту проблему легко решить. Зайдите в Skype и перейдите в Настройки » Опции. Кликните на Дополнительно, далее нажмите на Соединения. Уберите галочку со строки, где написано Использовать порт 80 и 443 в качестве альтернатив для входящих соединений. Сохраните изменения и перезагрузите Skype.

Активация постоянных ссылок в WAMP

По умолчанию, данная функция не работает на локальном сервере. Все ваши URL будут выглядеть в стиле localhost/mysite/?p=18. Если вы перейдёте в Настройки » Постоянные ссылки и используете одну из опций, то столкнётесь с ошибками «Страница не найдена». Мы уже писали о решении, узнайте, как включить постоянные ссылки в WAMP.

Переход из WAMP в интернет

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

Мы надеемся, что эта статья помогла вам установить WordPress на вашем компьютере Windows, используя WAMP. Иметь локальный сервер полезно для обучения и для тестирования. Помните, что если вы хотите запустить блог, который должны видеть другие люди, то вам не нужно устанавливать WordPress на ваш ПК. Вам нужно установить WordPress на хостинг. Если у вас есть какие-либо вопросы, смело задавайте их в комментариях.

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520