Связаться со мной можно через Вконтакте или почту evexa@mail.ru

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

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

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

Добавляем модальное окошко

Простое модальное окно с одним полем для необязательного комментария пользователя. А в диве <div class="orphus-text"></div> выводится текст выделенной ошибки.

Код окошка:

HTML
1
2
3
4
5
6
7
8
9
<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>

Добавляем скрипт на сайт

JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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">Ваше сообщение успешно отправлено');
$('.orphus-submit').hide();
$('.orphus-comment').hide();
}
});
});
});

А также добавляем код в function.php, письмо прогоняется через фильтр wp_mail_content_type, и устанавливает тип письма в формате HTML.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// отправка опечаток администратору
function codyshop_orphus(){
 
$comment = $_POST['comment'];
$error = $_POST['error'];
$url = $_POST['url'];
$mail_text = '<b>Орфографическая ошибка найдена в тексте:</b>
' . $error . '
 
<b>Текст комментария:</b>
' . $comment . '
 
<b>Адрес страницы:</b>
' . $url . '
 
<hr />
 
Это письмо было сгенерировано роботом. Пожалуйста, не отвечайте на него.';
$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');

После чего когда юзер будет выделять текст и нажимать CTR+ENTER у него будет выскакивать модальное окошко

Модальное окошко для запроса об ошибке

А письмо будет такого вида

Письмо об ошибке

Стили для формы

Чуть не забыли навести красоту, добавляем в css

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/* Стили для модального окна */
.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;
}

Вот и все, должно работать.

Опубликовано: 19.08.2017
Категория: Wordpress
Комментарии отключены. Есть вопросы? Пишите в Вконтакте или почту evexa@mail.ru.
Всего комментариев: 0

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

Наверх