Исправление опечаток пользователями без плагина на Wordpress

Для борьбы с опечатками на сайте, владельцы часто прибегают к сторонним сервисам, позволяющим пользователям отправлять уведомления об ошибках администратору сайта. Что и говорить, популярный некогда сервис Orphus был установлен более чем на 10 тысяч сайтов.

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

Шаг 1: Создаем модальное окно вывода контактной формы

В отличие от обычных контактных форм, в нашей форме мы разместим только поле для комментария (сделаем его не обязательным) и кнопку отправить.

<div id="orphus-modal" class="orphus-modal">
	<div class="orphus-box">
		<h3>Отправьте сообщение об ошибке, мы исправим</h3>
		<div class="orphus-text"></div>
		<input class="orphus-comment" type="text" placeholder="Комментарий для автора (не обязательно)" />
		<span class="orphus-submit">Отправить</span>
		<span class="orphus-close" title="Закрыть"></span>
	</div>
</div>

Кроме того, мы подготовили блок <div class=”orphus-text”></div> для вывода в нем текста с опечатками.

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

Шаг 2: пишем скрипт, для отлавливания события Ctrl+Enter

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

jQuery(function($){
	// отлавливаем событие нажатия ctrl + enter
	$('body').keydown(function(e) {
		if (e.ctrlKey && e.keyCode == 13) {
			// как только пользователь нажимает заветные Ctrl+Enter, показываем модальное окно
			$('#orphus-modal').addClass('showing');
			if (window.getSelection) {
				text = window.getSelection();
			}else if (document.getSelection) {
				text = document.getSelection();
			}else if (document.selection) {
				text = document.selection.createRange().text;
			}
			// вставляем выделенный текст в подготовленное поле
			$('.orphus-text').text(text);
			$('.orphus-submit').show();
			$('.orphus-comment').show();
		}
	});
	// закрываем модальное окно
	$('.orphus-close').click(function(){
		$('#orphus-modal').removeClass('showing');
	});
	// обрабатываем событие отправки сообщения об опечатке на ajax
	$('.orphus-submit').click(function(){
		$('.orphus-submit').text('Работаем...');
		var error = $('.orphus-text').text();       // текст ошибки
		var comment = $('.orphus-comment').val();   // комментарий пользователя
		var url = window.location.href;             // уведомляем, с какой страницы отправлен запрос
		var data = {
			'action' : 'orphus',
			'error'  : error,
			'url'    : url,
			'comment': comment,
		};
		$.ajax({
			type: 'POST',
			url: '/wp-admin/admin-ajax.php',
			data: data,
			success: function(data) {
				$('.orphus-text').html('<span class="good">Ваше сообщение успешно отправлено<span>');
				$('.orphus-submit').hide();
				$('.orphus-comment').hide();
			}
		});
	});
});

Если пользователь выделит текст и нажмет на Ctrl+Enter, появится модальное окно (если конечно вы еще выполните шаг 4).

Шаг 3: отправляем сообщение на почту администратора

// отправка опечаток администратору
function codyshop_orphus(){
	
	$comment = $_POST['comment'];
	$error   = $_POST['error'];
	$url     = $_POST['url'];
	$mail_text = '<b>Орфографическая ошибка найдена в тексте:</b><br>' . $error . '<br><br><b>Текст комментария:</b><br>' . $comment . '<br><br><b>Адрес страницы:</b><br>' . $url . '<br><hr><br>Это письмо было сгенерировано роботом. Пожалуйста, не отвечайте на него.';
	$mail = get_bloginfo('admin_email');
	
	add_filter('wp_mail_content_type', create_function('', 'return "text/html";'));
	wp_mail( $mail, 'Найдена орфографическая ошибка', $mail_text );

}
add_action('wp_ajax_nopriv_orphus','codyshop_orphus');
add_action('wp_ajax_orphus','codyshop_orphus');

Пропустим наше письмо через фильтр wp_mail_content_type, чтобы установить тип письма в формате HTML. Разместите код выше в файле function.php

Шаг 4: оформляем модальное окно

Делаем форму красивой.

/* Стили для модального окна */
.orphus-modal{
	display: none; 
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,.5);
	z-index:9999;
}
.orphus-modal .orphus-box{
	width:450px;
	background:#fff;
	position:relative;
	margin:9% auto;
	padding:30px;
	display: table;
}
.orphus-modal h3{
	font-size:23px;
	margin: 10px 0;
}
.orphus-modal span{
	cursor: pointer; 
	position:absolute;
	right:0;
	top:0;
}
.orphus-modal .good{
	position: relative;
}
.orphus-modal .orphus-close:after{
	border-radius: 3px;
	content:'×';
	display:block;
	position:absolute;
	right:-9px;
	top:-9px;
	width:27px;
	padding:1px;
	text-decoration:none;
	text-shadow:none;
	text-align:center;
	font-weight:bold;
	background: #fd3768;
	color:#fff;
}
.orphus-modal .orphus-text {
	margin: 10px 0;
	width: 100%; 
	display: inline-block; 
	position: relative;
}
.orphus-modal .orphus-submit{
	float:left; 
	margin-top: 10px; 
	border-radius: 3px; 
	position:relative; 
	text-align: center; 
	padding: 15px 25px; 
	color: #fff; 
	background-color: #fd3768;
	width: 100%; 
	box-sizing: border-box;
}
.orphus-modal .orphus-comment {
	padding: 10px;
}
.showing {
	display: block !important;
}

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