Текстовый редактор для комментариев WordPress без плагина

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

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

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

Устанавливаем текстовый редактор для комментариев

Первая часть кода, как ничто другое, является самим текстовым редактором. Он содержит обычные ссылки с индивидуальным именованием, а внутри ссылок находиться иконки, обозначающие смысл «визуальных» кнопок. Весь этот код добавьте в файл comments.php, допустим, сразу перед формой ввода текста комментария.

<div id="editor_tools">
        <div id="editor">
                <a href="javascript:SIMPALED.Editor.strong()" title="Жирный шрифт"><i class="fa fa-bold" aria-hidden="true"></i></a>
                <a href="javascript:SIMPALED.Editor.em()" title="Курсив"><i class="fa fa-italic" aria-hidden="true"></i></a>
                <a href="javascript:;" id="font-color" title="Цвет шрифта"><i class="fa fa-tint" aria-hidden="true"></i></a>
                <a href="javascript:SIMPALED.Editor.quote()" title="Цитата"><i class="fa fa-quote-right" aria-hidden="true"></i></a>
                 <a href="javascript:SIMPALED.Editor.ahref()" title="Вставить ссылку"><i class="fa fa-link" aria-hidden="true"></i></a>
                <a href="javascript:SIMPALED.Editor.del()" title="Зачеркнуть текст"><i class="fa fa-strikethrough" aria-hidden="true"></i></a>
                <a href="javascript:SIMPALED.Editor.underline()" title="Подчеркнуть текст"><i class="fa fa-underline" aria-hidden="true"></i></a>
                <a href="javascript:SIMPALED.Editor.code()" title="Код"><i class="fa fa-code" aria-hidden="true"></i></a>
                <a href="javascript:SIMPALED.Editor.img()" title="Вставить картинку"><i class="fa fa-picture-o" aria-hidden="true"></i></a>
        </div>
</div>
<div id="fontcolor">
        <a href="javascript:SIMPALED.Editor.red()" style="background-color: red"></a>
        <a href="javascript:SIMPALED.Editor.fuchsia()" style="background-color: fuchsia"></a>
        <a href="javascript:SIMPALED.Editor.purple()" style="background-color: purple"></a>
        <a href="javascript:SIMPALED.Editor.orange()" style="background-color: orange"></a>
        <a href="javascript:SIMPALED.Editor.yellow()" style="background-color: yellow"></a>
        <a href="javascript:SIMPALED.Editor.gold()" style="background-color: gold"></a>
        <a href="javascript:SIMPALED.Editor.olive()" style="background-color: olive"></a>
        <a href="javascript:SIMPALED.Editor.lime()" style="background-color: lime"></a>
        <a href="javascript:SIMPALED.Editor.aqua()" style="background-color: aqua"></a>
        <a href="javascript:SIMPALED.Editor.deepskyblue()" style="background-color: deepskyblue"></a>
        <a href="javascript:SIMPALED.Editor.teal()" style="background-color: teal"></a>
        <a href="javascript:SIMPALED.Editor.green()" style="background-color: green"></a>
        <a href="javascript:SIMPALED.Editor.blue()" style="background-color: blue"></a>
        <a href="javascript:SIMPALED.Editor.maroon()" style="background-color: maroon"></a>
        <a href="javascript:SIMPALED.Editor.navy()" style="background-color: navy"></a>
        <a href="javascript:SIMPALED.Editor.gray()" style="background-color: gray"></a>
        <a href="javascript:SIMPALED.Editor.silver()" style="background-color: silver"></a>
        <a href="javascript:SIMPALED.Editor.black()" style="background-color: black"></a>
</div>

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

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

//редактор комментарий
<script>
jQuery(function(){
        jQuery("#fontcolor").hide(500);
        jQuery("#font-color").click(function(){
                jQuery("#fontcolor").toggle(500);
        });
});        
jQuery(function() {
        function addEditor(a, b, c) {
                if (document.selection) {
                        a.focus();
                        sel = document.selection.createRange();
                        c ? sel.text = b + sel.text + c: sel.text = b;
                        a.focus()
                } else if (a.selectionStart || a.selectionStart == '0') {
                        var d = a.selectionStart;
                        var e = a.selectionEnd;
                        var f = e;
                        c ? a.value = a.value.substring(0, d) + b + a.value.substring(d, e) + c + a.value.substring(e, a.value.length) : a.value = a.value.substring(0, d) + b + a.value.substring(e, a.value.length);
                        c ? f += b.length + c.length: f += b.length - e + d;
                        if (d == e && c) f -= c.length;
                        a.focus();
                        a.selectionStart = f;
                        a.selectionEnd = f
                } else {
                        a.value += b + c;
                        a.focus()
                }
        }
        
        var myDate = new Date();
        var mytime=myDate.toLocaleTimeString()
        
        var g = document.getElementById('comment') || 0;
        var h = {
                strong: function() {
                        addEditor(g, '<b>', '</b>')
                },
                em: function() {
                        addEditor(g, '<i>', '</i>')
                },
                del: function() {
                        addEditor(g, '<del>', '</del>')
                },
                underline: function() {
                        addEditor(g, '<u>', '</u>')
                },
                quote: function() {
                        addEditor(g, '<blockquote>', '</blockquote>')
                },
                ahref: function() {
                        var a = prompt('Ввести адрес ссылки', 'http://');
                        var b = prompt('Анкор ссылки', '');
                        if (a) {
                                addEditor(g, '<a href="' + a + '">' + b + '</a>', '')
                        }
                },
                img: function() {
                        var a = prompt('Ввести адрес изображения', 'http://');
                        if (a) {
                                addEditor(g, '<img src="' + a + '" />', '')
                        }
                },
                code: function() {
                        addEditor(g, '<code>', '</code>')
                },
                red: function() {
                        addEditor(g, '<span style="color: red">', '</span>')
                },
                fuchsia: function() {
                        addEditor(g, '<span style="color: fuchsia">', '</span>')
                },
                purple: function() {
                addEditor(g, '<span style="color: purple">', '</span>')
                },
                orange: function() {
                        addEditor(g, '<span style="color: orange">', '</span>')
                },
                yellow: function() {
                addEditor(g, '<span style="color: yellow">', '</span>')
                },
                olive: function() {
                addEditor(g, '<span style="color: olive">', '</span>')
                },
                lime: function() {
                addEditor(g, '<span style="color: lime">', '</span>')
                },
                maroon: function() {
                addEditor(g, '<span style="color: maroon">', '</span>')
                },
                aqua: function() {
                addEditor(g, '<span style="color: aqua">', '</span>')
                },
                teal: function() {
                  addEditor(g, '<span style="color: teal">', '</span>')
                },
                green: function() {
                addEditor(g, '<span style="color: green">', '</span>')
                },
                blue: function() {
                        addEditor(g, '<span style="color: blue">', '</span>')
                },
                navy: function() {
                        addEditor(g, '<span style="color: navy">', '</span>')
                },
                gray: function() {
                        addEditor(g, '<span style="color: gray">', '</span>')
                },
                deepskyblue: function() {
                        addEditor(g, '<span style="color: deepskyblue">', '</span>')
                },
                gold: function() {
                        addEditor(g, '<span style="color: gold">', '</span>')
                },                silver: function() {
                        addEditor(g, '<span style="color: silver">', '</span>')
                },
                black: function() {
                        addEditor(g, '<span style="color: black">', '</span>')
                }
        };
        window['SIMPALED'] = {};
        window['SIMPALED']['Editor'] = h
});
</script>

Третья часть она же последняя состоит из стилей оформления «визуальных» кнопок. Дизайн кнопок можете легко подстраивать под свой сайт. Откройте файл style.css и добавьте в него следующий код:

/* comment-editor */

#editor_tools {
    display: inline-block;
    height: 26px;
    line-height: 26px;
    overflow: hidden;
    width: auto;
    z-index: 99999;
        margin-top: 10px;
}

#editor_tools a i{
    font-size: 14px;
}
#editor_tools a {
    background: #A7CD5B;
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    height: 26px;
    padding: 0 8px;
        transition:0.3s;
        box-shadow: 0 -2px 0 rgba(0,0,0,0.2) inset;
}
#editor_tools a:hover {
    color: #333;
    text-decoration: none;
}
#fontcolor {
    height: 16px;
    line-height: 20px;
    padding: 2px 0 2px 0px;
    width: auto;
    z-index: 99999;
}
#fontcolor a {
    display: inline-block;
    height: 16px;
    width: 16px;
}

Результат.

текстовый редактор комментариев вордпресс

3 комментария
  1. Странно, сделал все как в уроке, но почему то при нажатии на кнопки, текст в комментариях не изменяеться.

    1. В смысле не изменяется? При нажатии должны добавляться теги в поле ввода.

  2. Что-то данный способ чересчур замудрён, есть более простой способ. Просто добавить данный код в functions.php

    function wp_editor_comment_form($field){ preg_match_all("/(? 1 ,'media_buttons' => 0 ,'textarea_name' => $string_value[0][0] ,'textarea_rows' => 5 ,'tabindex' => null ,'editor_css' => '' ,'editor_class' => '' ,'teeny' => 1 ,'dfw' => 0 ,'tinymce' => 1 ,'quicktags' => 0 ); ob_start(); wp_editor('', 'contentarea', $args); $editor = ob_get_contents(); ob_end_clean(); return $editor; } add_filter('comment_form_field_comment','wp_editor_comment_form');

    Единственный недочёт — это то что при нажатие на ссылку: ОТВЕТИТЬ. Текстовый редактор перестаёт работать должным образом! 😥

    Возможно вы сможете найти рещение данной проблемы.

Оставить ответ

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