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

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

В этом руководстве мы покажем вам, как стилизовать форму комментариев 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  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Как отобразить описание категорий на WordPress
• Как оптимизировать файл WordPress Robots.txt для идеального SEO
• Как создать Торговую площадку с WordPress
• Как добавить виджет в заголовок вашего блога WordPress

Заключение

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

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

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

...