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

Есть несколько способов побудить пользователей оставить комментарий в вашем блоге. Один из таких способов - создать красивую, удобную и доступную форму комментариев.

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

Но раньше, если вы никогда не устанавливали WordPress, откройте для себя Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге 

Тогда вернемся к тому, почему мы здесь.

Как изменить стиль комментариев WordPress

Когда мы говорим о стиле, мы имеем в виду CSS сторона дела. Ниже я покажу вам, как настроить внешний вид формы комментариев в WordPress. Каждый элемент по умолчанию в WordPress имеет код CSS, это случай списка комментариев, навигационные меню, форма комментариев, виджеты и многое другое.

Среди файлов Темы WordPress, у нас есть файл с именем comments.php который используется для отображения комментариев и формы комментариев в сообщениях и на страницах блога. Чтобы отобразить форму комментариев WordPress, " comment_form () Используется.

Откройте для себя Как найти ссылку на WordPress страницу входа

По умолчанию эта функция генерирует вашу форму комментария с тремя текстовыми полями (имя, адрес электронной почты и веб-сайт), большим текстовым полем для содержания комментария и кнопкой отправки.

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

#respond {#} ответ титульный {#} отменить-хау-ответ-ссылку {} {} #commentform #author #email {} {} {} #url #comment #submit .comment Примечания {} {} .required .как форм-автор {} .comment форм-почта} {.how форм-гиперссылка} {.how форм-как {} .FORM разрешенному-теги {} .form подать

Просто настроив эти классы CSS, вы можете полностью изменить внешний вид формы комментариев. Давайте попробуем что-нибудь изменить, чтобы дать вам представление о том, что мы можем сделать.

Откройте для себя Как заменить ссылки на изображения после установки SSL на WordPress

Сначала мы начнем с выделения активного поля в форме. Выделив активные поля, пользователи могут легко увидеть, что они меняют, и это придаст вашему сайту немного динамизма.

#respond {фон: #ececec; обивка: 0 5 0px 5px; } / * Выделение активного текстовое поле * / #respond ввода [тип = текст] {текстового поля -webkit-переход: все 0.30s легкость входа-выхода; -moz-переход: все 0.30s легкость в выкатывания; -ms-переход: все 0.30s легкость в выкатывания; -о-переход: все 0.30s легкость в выкатывания; не очертить: нет; обивка: 3px 0px 3px 3px; Маржа: 5px 1px 3px 0px; границы: твердый 1px #dddddd; } #respond ввод [тип = текст]: фокус, текстовое поле: фокус {коробчатой ​​тень: 0 0 5px RGBA (81, 203, 238, 1); Маржа: 5px 1px 3px 0px; границы: твердый 1px RGBA (81, 203, 238, 1); }

Вот как будет выглядеть ваша форма комментария с Двадцать Двенадцатью.

выделить активные формы-поле

С помощью этих классов вы можете изменить способ отображения текста внутри полей. Это то, что мы сделаем в следующем примере.

#author {семейство шрифтов: Лобстер "Лобстер 1.4", "Droid Sans", Arial; Размер шрифта: 16px; цвет: #1d1d1d; письмо-интервал: .1em; #url} {цвет: #21759b; семейство шрифтов: "Luicida Консоль", "Courier New", "Курьер", минивэн; } 

Вот результат, полученный в предыдущем коде.

как форм-вход-стиль

Вы также можете изменить стиль кнопки формы комментария. В следующем примере мы добавим ему градиентный фон.

#submit {семейство шрифтов: Arial; цвет: #ffffff; Размер шрифта: 20px; обивка: 10px; текст-отделка: нет; коробчатого тень: 0px 1px 3px #666666; -webkit-бокс-тень: 0px 1px 3px #666666; -moz-бокс-тень: 0px 1px 3px #666666; Текст-тень: 1px 1px 3px #666666; фон: -webkit-градиент (линейный, 0 0, 0 100%, из (#006ad4) до (#003366)); фон: -moz-линейный градиент (верхний, #006ad4, #003366); } #submit: парения {фон: -webkit-градиент (линейный, 0 0, 0 100%, из (#003366) до (#006ad4)); фон: -moz-линейный градиент (верхний, #003366, #006ad4)}

Вот результат, который будет отображаться.

как подать кнопки

Как добавить социальное взаимодействие в комментарии

Начнем с добавления логинов социальных сетей в форму комментариев WordPress. Первое, что вам нужно сделать, это установить и активировать плагин. Социальная Войти

Откройте для себя Как установить плагин в WordPress Чтобы активировать этот плагин, вы должны создать бесплатную учетную запись, перейдя по следующему адресу: https://app.oneall.com

Как только это будет сделано, вам не придется настраивать API для каждой сети, которую вы хотите использовать, чтобы ваши пользователи могли подключаться через них.

Хотя API-интерфейсы различных социальных сетей постоянно меняются, вам не нужно ничего делать, разработчики этого плагина обновят свои API-интерфейсы для вас. Все, что вам нужно сделать, это войти в OneAll API.

Так будут отображаться ваши формы.

как настроить форму комментариев WordPress 2как настроить форму комментариев WordPress 

Откройте для себя также несколько премиальных плагинов WordPress  

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

Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.

1. Мгновенный поиск WP и автоматическое предложение

Плагин «WP Instant Search & Auto Suggest» позволяет мгновенно получать предложения для статей, страниц и настраиваемых типов сообщений при поиске в вашем блоге WordPress. Работает с WPBakery et Cornerstone. сор-время-поиск-WordPress-плагин-для-поиска

Его функции включают в себя:Поиск в полноэкранном режимеМгновенный поиск пользовательских типов публикаций, совместимость с Визуальный Композитор, ттри интегрированных стиля дизайна, цветовые схемы 5 на выбор, рподдержка клавиатуры и мыши, еполностью настраиваемый с помощью параметров и т. д.

скачать | Демонстрация | веб-хостинг

2. Страница ошибки 404, перенаправленная на домашнюю или пользовательскую страницу

Вот один из лучших способов легко добавить страницу с ошибкой 404, которая будет перенаправлять посетителя на домашнюю страницу или пользовательскую страницу после включения этого Плагин Wordpress.Страница ошибки 404, перенаправленная на домашнюю или пользовательскую страницу

Все страницы с ошибкой 404 будут перенаправлены на домашнюю страницу или на пользовательский URL. Используя это Плагин Wordpress, вы позволите Google снизить рейтинг страницы вашего веб-сайта, если на нем много страниц с ошибкой 404.

Ce Плагин Wordpress не просто выполняет перенаправление, но также может быть подходящим решением для улучшения рейтинга вашего веб-сайта в результатах поисковых систем.

скачать | Демонстрация | веб-хостинг

3. Похожие сообщения Pro 

Похожие сообщения Pro предоставляет простое, но мощное решение для всех видов подобного контента в WordPress. Он поддерживает настраиваемые типы сообщений, мультисайты, категории, смешанный контент, настраиваемый контент и многое другое ...Связанный пост Pro

Как функции, которые он предлагает среди других: 3 разные типы раскладок, Предопределенные шаблоны 65 для каждого макета,без кодирования будет необходимо, поддержка тпросмотр и автоигра, совместимость с настраиваемыми типами сообщений, используемыми плагинами WooCommerceWP электронной коммерции bbPress и т.д ..., а панель поиска с фильтром, дочень описательная документация и многое другое.

скачать | Демонстрация | веб-хостинг

Рекомендуемые ресурсы

Узнайте о других рекомендуемых ресурсах, которые помогут вам создать и управлять своим сайтом.

Заключение

Вот ! Это все для этого урока. Мы надеемся, что эта статья помогла вам сделать ваши формы обратной связи более интересными. Не стесняйтесь также предлагать нам свои советы по настройке WordPress, и особенно поделитесь этой статьей с друзьями в ваших любимых социальных сетях

Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress.

Если у вас есть предложения или замечания, оставьте их в нашем разделе Комментарии.

...