Форма комментариев, необходимый атрибут вашего сайта
Приветствуем вас! Форма комментариев — необходимая часть дизайна блога, а также является одним из самых сложных разделов WordPress. Форма находится внизу страницы, и не видна до тех пор, пока посетители не захотят оставить отзыв о вашем сайте или статье.
Хороший стиль комментариев может отличать ваши проекты от конкурентов. Потратив время на разработку форму вывода комментариев, вы можете произвести впечатление на своих постоянных посетителей.
Это подсознательно подразумевает, что вы заботитесь о их мнении и хотите, чтобы они участвовали в обсуждении вашего сайта. В этой статье мы покажем вам, как создать форму комментария WordPress. Не переключайтесь, будет интересно)))
Способ 1
Изменение стиля формы комментария в WordPress
Каждая страница вашего детища содержит стандартные классы стиля CSS, созданные по WordPress. В большинстве тем WP есть файл «comments.php», который используется для отображения комментов на ваших блогах / страницах.
А с помощью функции «<?php «comment_form (); ?>» генерируется сама форма, по умолчанию с 3 текстовыми полями (имя, электронная почта и веб-сайт).
Вы можете с легкостью изменить каждое из этих полей, просто настроив классы CSS по умолчанию. Ниже приведен список классов CSS по умолчанию, которые Вордпресс добавляет к каждой форме.
#respond { } #reply-title { } #cancel-comment-reply-link { } #commentform { } #author { } #email { } #url { } #comment #submit .comment-notes { } .required { } .comment-form-author { } .comment-form-email { } .comment-form-url { } .comment-form-comment { } .form-allowed-tags { } .form-submit
Изменяя эти классы CSS, вы изменяете внешний вид формы. Давайте продолжим и попытаемся изменить несколько вещей. Сначала мы начнем с выделения активного поля формы. Это сделает ее более красивой и оживленной для людей с особыми требованиями.
#respond { background: #ececec; padding:0 5px 0 5px; } /* Highlight active form field */ #respond input[type=text], textarea { — webkit-transition: all 0.30s ease-in-out; — moz-transition: all 0.30s ease-in-out; — ms-transition: all 0.30s ease-in-out; — o-transition: all 0.30s ease-in-out; outline: none; padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid #DDDDDD; } #respond input[type=text]:focus, textarea:focus { box-shadow: 0 0 5px rgba (81, 203, 238, 1); margin: 5px 1px 3px 0px; border: 1px solid rgba (81, 203, 238, 1); }
Так выглядела наша форма в WordPress.
Используя эти классы, вы можете изменить отображение текста внутри полей ввода. Мы продолжим и изменим стиль текста поля имени автора и поле URL.
#author { font-family: Lobster, «Lobster 1.4», «Droid Sans», Arial; font-size: 16px; color:#1d1d1d; letter-spacing:.1em; } #url { color: #21759b; font-family: «Luicida Console», «Courier New», «Courier», monospace; }
Обратите внимание на скриншот ниже. Шрифт поля имени отличается от других. Если вы заметили изменился цвет ссылки в поле URL.
Вы также можете изменить стиль кнопки отправки. Вместо того, чтобы использовать кнопку отправки по умолчанию, давайте дадим ей градиент CSS3 и тень окна.
#submit { font-family: Arial; color: #ffffff; font-size: 20px; padding: 10px; text-decoration: none; box-shadow: 0px 1px 3px #666666; — webkit-box-shadow: 0px 1px 3px #666666; — moz-box-shadow: 0px 1px 3px #666666; text-shadow: 1px 1px 3px #666666; background: -webkit-gradient (linear, 0 0, 0 100%, from (#006ad4), to (#003366)); background: -moz-linear-gradient (top, #006ad4, #003366); } #submit:hover { background: -webkit-gradient (linear, 0 0, 0 100%, from (#003366), to (#006ad4)); background: -moz-linear-gradient (top, #003366, #006ad4) }
Добавить социальный вход в WordPress комментарии
Начнем с добавления социальных логинов в комментарии WP. Первое, что вам нужно сделать, это установить «Social Login WordPress».
После активации перейдите в «Настройки» плагина. Вам нужно будет предоставить идентификатор и ключ приложения для соц.сетей.
Плагин предоставит вам пошаговые инструкции о том, как настроить приложение на каждой из этих платформ. Не старайтесь от своей жадности добавить все существующие сети. Добавляйте только те, которыми пользуетесь, например, Твиттер и facebook.
После того как вы закончите и сохраните настройки. Далее, бежим на вкладку «Виджет» и прокручиваем вниз до «Расширенные настройки». Там вы можете выбрать, где вы хотите, чтобы кнопки входа в систему отображались. Вы также можете отредактировать стиль CSS для социальных кнопок входа на этой странице.
К примеру, это будет выглядеть вот так.
Добавляем подписку на комментарии
Когда пользователи оставляют отзывы на вашем веб-сайте и хотят знать, ответил ли кто-либо на их комментарий. Добавив флажок подписки на комменты, вы позволяете пользователям получать мгновенные уведомления, когда в сообщении появляется новый отзыв.
Чтобы добавить этот флажок, устанавливаем плагин «Subscribe To Comments». После проделанных шагов плагин добавит флажок с текстом «Уведомить меня о последующих комментариях по электронной почте» ниже формы комментирования.
Добавить Quicktags в форме комментирования
Quicktags — это кнопки, для редактирования комментов, например, простая кнопка для жирного выделенного текста. Итак, устанавливаем плагин «Basic Comment Quicktags». Далее, идем в «Настройки» - «Обсуждение». Возле опции «Кнопки редактирования» ставим галочку.
Сохраняем настройки. Теперь вы можете посетить одну запись на своем веб-сайте и перейти к форме комментирования. Вы увидите основную панель инструментов форматирования над текстовой областью комментов.
Способ 2
Чистый код для добавления комментариев WordPress
Вам наверняка известен файл с именем «comments.php». Он присутствует в каждой теме WordPress, который контролирует функционирование и структуру окна комментариев.
Если вы разрабатываете новую тему или добавляете окно комментариев к старой теме, то вам нужно создать новый файл «comments.php» в папке темы. Вы можете отредактировать тему в редакторе или с помощью «cPanel». Добавьте код в файл.
<?php if ( post_password_required () ) { return; } ?> <div id=”comments” class=”comments-area”> <?php if (have_comments () ) : //We have comments ?> <h2 class=”comment-title”> <?php printf ( esc_html ( _nx ( ‘One Comment’, ‘%1$s comments’, get_comments_number (), ‘comments title’, ‘blogginglovetheme’) ), number_format_i18n ( get_comments_number () ) ); ?> </h2> <ol class=”comment-list”> <?php $args =array ( ‘walker’ => null, ‘max_depth’ => ”, ‘style’ => ‘ol’, ‘callback’ => null, ‘end-callback’ => null, ‘type’ => ‘all’, ‘reply_text’ => ‘Reply’, ‘page’ => ”, ‘per_page’ => ”, ‘avatar_size’ => ’48’, ‘short_ping’ => false, ‘echo’ => true ); wp_list_comments ($args); ?> </ol> <?php if ( !comments_open () && get_comments_number () ): ?> <p class=”no-comments”><?php esc_html_e ( ‘Comments are closed.’, ‘blogginglovetheme’); ?></p> <?php endif; ?> <?php endif; ?> <?php comment_form (); ?> </div>
Важно добавить чистый код, чтобы любой мог его понять. Будет заголовок, показывающий количество комментариев. Автор комментария и возможные детали автора с датой.
Если вы хотите показать дату в соответствии с вашими требованиями, вы можете изменить ее, используя разные правила даты PHP.
Этот код будет генерировать форму и все ее функциональные возможности. Перед сохранением рекомендуется правильно расположить код.
Используйте кодировку «TAB» для поддержания интервала и размера файла.
Примечание: — этот код не будет показывать поле «комментария». Вы должны указать шаблон, где вы хотите, чтобы он отображался.
Добавьте этот код в файл «single.php», если вы хотите добавить окно комментов в отдельные сообщения WP. Если вы хотите показать форму всех на страницах, вы можете добавить этот код в файл «page.php».
<?php comments_template (); ?>
По нашему опыту, добавление комментария в тему WordPress является одной из сложных частей. Код, показанный в этом во втором способе, может быть использован в любой теме WordPress. Если что-то не поняли, или не можете справится, то вы можете воспользоваться помощью в нашем лице. У нас на этом все, всем пока!
С уважением Вячеслав и Валерия!
Вы правы, стиль комментария — это одна из отличительных черт. чем интересней, тем больше привлечет внимание посетителей.
I'm not sure where you're getting your info, but good topic.
I needs to spend some time learning more or understanding more.
Thanks for fantastic info I was looking for this info for my mission.
Спасибо за инфу! Интересно!