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

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

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

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

...