X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

Своя кнопка, в форме комментариев для вставки тегов html без плагинов WordPress

Приклад
  • 2024-04-19
  • 4004 переглядів

  • Дизайн та розробка сайту

Доброго времени суток. 🙂

В прошлой статье, я расписал как можно добавить возможность на своем блоге WordPress вывести код в виде обычного текста без плагинов. Также там я писал о том, что использую тег code и что его нужно вставлять в текстовое поле, а потом внутрь его поместить уже нужный для вывода код. Статья - Как вставить код в комментарий без плагина без плагинов WordPress

Кнопка с кодом

Мне было лень каждый раз, отвечая, вручную писать тег code. Да и посетителям, которые оставляют комментарии, нужно дать намек, что именно этот тег нужно писать, чтобы показать код в виде текста. Некоторые, опытные пользователи знают это, но остальные не в курсе. Я хотел чтобы была кнопка на подобии той, что в текстовом редакторе при записи.

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

Пример можете посмотреть в форме отправки комментария, под этой записью, нажав на кнопку КОД

Чтобы вывести такую кнопку мне понадобилось сделать следующие два шага:

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

<input type="submit" onclick="document.getElementById('comment').value+='<code></code>'; return false;" value = "КОД" /><span> Нажмите, чтобы добавить код в комментарий</span>

Это кнопка, которая при нажатии обращается к элементу с id - comment. Тут очень внимательно, у Вас может быть другой айди у текстового поля. Посмотрите через браузер или же в comments.php, если найдете.

Айди текстового поля

Далее видно value+='Тут любые теги или текст' все что в кавычках, при нажатии будет вставляться в текстовое поле, так что можно добавить несколько таких кнопок и в каждой прописать свои теги или вообще текст.

В конце есть value = "КОД", как вы поняли, так будет называться кнопка, по желанию меняйте на свое. span с текстом можно удалить если Вам не нужно объяснение.

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

На этом все, спасибо за внимание. 🙂

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 3, в среднем: 4.3 из 5
Читайте також