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

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

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

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

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

...