Исправление ошибок пользователями без плагина на WordPress
Очень часто бывает, что при размещении статьи в тексте проскакивают ошибки, и можно дать возможность пользователям самим отправлять запрос об ошибке. Решение отлично подойдет для статейника, я кстати на одном из своих и сделал.
Добавляем модальное окошко
Простое модальное окно с одним полем для необязательного комментария пользователя. А в диве <div class="orphus-text"></div>
выводится текст выделенной ошибки.
Код окошка:
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> |
Добавляем скрипт на сайт
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.
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
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; } |
Вот и все, должно работать.