SdelaemBlog

Создание Сайтов и их настройка

Создание формы комментариев для сайта wordpress

Главная Статьи WordPress Создание формы комментариев для сайта wordpress
#WordPress

7 августа 2012

Доброго времени суток, друзья, приветствую вас на страницах своего блога для начинающих вебмастеров — SdelaemBlog.ru. Сегодня я хотел бы поставить точку в одном вопросе — касается он формы комментариев. В последнее время были вопросы по данному функционалу на моем блоге, поэтому я решил дать полный ответ на этот вопрос, возможно это еще кому-нибудь пригодится.

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

Итак, чем же отличается моя comment form от стандартной?

Создание формы комментариев для сайта wordpress

Правильно — ничем :smile: Здесь все дело в небольших изменениях в файле темы style.css. Вообщем, давайте вместе создадим форму комментариев на основе стандартной, из темы Twenty Eleven.

Инструменты для создания формы комментариев

Для создания, нам понадобятся две вещи — это веб-браузер (для статьи использован Google Chrome, но можно и другой) и любой текстовый редактор, например NotePad ++. Думаю вы сможете организовать самостоятельно эти два инструмента, для облегчения своей жизни.

Далее, я опишу свои действия, на основе которых вы сможете самостоятельно изменить внешний вид формы комментирования на wordpress.

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

Стандартная форма добавления комментариев wordpress

 Теперь используя браузер Хром, можно узнать из чего состоит данный элемент и еще много полезного. Вообщем, чтобы узнать, что редактировать, нажимаю на элементе правую кнопку мыши и выбираю из списка «просмотр кода элемента». Кстати, веб-браузеры Мозила и Опера тоже на это способны.

После выбора, можно увидеть примерно следующую картину. С выехавшим внизу окошком и предстоит работать.

Инструменты для вебмастеров

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

Создание или изменение формы комментариев

Итак, первый блок — это respond, с него и начнем. Respond — это основной блок div.

Как найти div блок

Теперь, чтобы изменить фон, я открываю файл style.css, нажимаю ctrl+F, и в поиск ввожу respond, после чего жму «искать далее».

Поиск в текстовом редакторе

Как вы можете видеть, Notepad нашел далеко не один блок respond, поэтому чтобы сориентироваться, вернитесь на сайт и обратите внимание на стили прописанные в правой колонке и по этим стилям уже будет проще понять тот объект мы нашли или нет.

Стили CSS

Теперь в этот блок  прописываю свои стили.

#respond {
 width: 600px;
 font: 14px "Comic sans MS";
 background: #DCCEA7;
 border: 1px solid #C3B17F;
 border-radius: 10px;
 box-shadow: 0px 5px 5px #C3B17F;
 margin-bottom:25px;
 color: #81734F;
}

Как вы можете заметить внешний облик объекта уже немного изменился.

Форма комментирования вордпресс

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

Для заголовка. Было так.

#reply-title {
 color: #373737;
 font-size: 24px;
 font-weight: bold;
 line-height: 30px;}

Стало так.

#reply-title {
 font-size: 24px;
 height: 40px; background: #fffff9;
 text-shadow: 1px 1px 0px #DCCEA7;
 box-shadow: 0px 5px 5px #C3B17F;
 border-radius: 10px;
 text-align: center;
 color: #81733F;}

Теперь, я изменю внешний вид и местонахождение названий полей, для заполнения. Так было до изменения.

#respond .comment-form-author label,
 #respond .comment-form-email label,
 #respond .comment-form-url label,
 #respond .comment-form-comment label {
 background: #eee;
 -webkit-box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
 -moz-box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
 box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
 color: #555;
 display: inline-block;
 font-size: 13px;
 left: 4px;
 min-width: 60px;
 padding: 4px 10px;
 position: relative;
 top: 40px;
 z-index: 1;
 }

Стало, после моего вмешательства.

#respond .comment-form-author label,
#respond .comment-form-email label,
#respond .comment-form-url label,
#respond .comment-form-comment label {
 font-size: 14px;
 margin: 10px 10px;
 font-style:italic;
}

После этого, нужно немного подровнять все поля. Для этого

#respond p {
 margin: 10px 0;
}

Заменил на

#respond p {
 padding: 20px 10px;
}

Теперь, на промежуточной стадии редактирования, форма комментирования уже на что-то похожа.

Форма комментариев для сайта

Осталось подредактировать текстовые поля. То есть изменить вот этот код

#respond input[type="text"],
 #respond textarea {
 background: #fff;
 border: 4px solid #eee;
 -moz-border-radius: 5px;
 border-radius: 5px;
 -webkit-box-shadow: inset 0 1px 3px rgba(204,204,204,0.95);
 -moz-box-shadow: inset 0 1px 3px rgba(204,204,204,0.95);
 box-shadow: inset 0 1px 3px rgba(204,204,204,0.95);
 position: relative;
 padding: 10px;
 text-indent: 80px;
 }

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

Первый — это для ввода имени, электронного адреса и веб-сайта.

#respond input[type="text"] {
 background:url(images/картинка.png) no-repeat;
 width: 560px;
 height: 25px;
 margin-bottom: 10px;
 padding: 0px 10px;
 line-height:32px;
 font:14px "Comic sans MS";
 border:none;
 box-shadow: none;
}

Второй — для ввода сообщения.

#respond textarea {
 background: url(images/картинка.png) no-repeat;
 padding: 10px 10px;
 width: 560px;
 height: 106px;
 resize: none;
 overflow: auto;
 font: 14px "Comic sans MS";
 border: none;
 box-shadow: none;
}

Результат, согласитесь не очень.

Форма добавления комментариев

 

Для исправления этого недоразумения достаточно удалить лишние стили.

#respond input[type=text] {
 display: block;
 height: 24px;
 width: 75%;
 }

 

#respond textarea {
 resize: vertical;
 width: 95%;
 }

Теперь наша Она обрела почти нужный вид. Осталось отредактировать кнопку для отправки сообщения.

#respond input#submit {
 background: #222;
 border: none;
 -moz-border-radius: 3px;
 border-radius: 3px;
 -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
 -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
 box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
 color: #eee;
 cursor: pointer;
 font-size: 15px;
 margin: 20px 0;
 padding: 5px 42px 5px 22px;
 position: relative;
 left: 30px;
 text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}

После редактирования:

#respond input#submit {
 background: url(images/картинка.png) no-repeat;
 margin: 10px 0px 10px 0px;
 display: block;
 width: 115px;
 height: 26px;
 border: none;
}

Получилось следующее:

 Изменение внешнего вида полей формы комментариев

Кнопка не там находится, где надо. Чтобы это исправить нужно удалить лишние стили CSS.

#respond .form-submit {
 float: right;
 margin: -20px 0 10px;
}

И все встает на свои места. Осталось немного почистить код и форма комментирования для wordpress будет переделана со стандартной на подобие той, которую использую я на своем блоге.

Удаление лишних символов и слов из формы комментариев для wordpress

Для устранения этих проблем нужно открыть в текстовом редакторе файл comment-template.php и найти строчку:

'author' => '<p>' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span>*</span>' : '' ) .

И удалить звездочку между span и /span. То же самое я сделал со строчкой:

'email'  => '<p><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span>*</span>' : '' ) .

Вторая проблема находится в строке:

'label_submit'         => __( 'Оставить комментарий' ),

Я просто удалил «Оставить комментарий».

Теперь, чтобы изменить стандартный тайтл «оставить комментарий» на «ваш комментарий, понадобится следующий отрывок:

'title_reply'          => __( 'Оставить комментарий' ),

И здесь нужно вместо «оставить», прописать «ваш».

После этого, проверяем результат.

Результат редактирования формы комментирования

Ну вот и все, если вы проделали эти же действия, то у вас должен был получиться такой же результат. Надеюсь, с кодами ничего не напутал, если что сообщайте в комментах. До новых встреч, друзья — любите интернет и он полюбит вас :smile:

Оставьте свой коммент
ДОСТАВКА СТАТЕЙ ПОЧТОЙ, на дом

Комментарии

  1. alexzsoft

    Давно искал такую статью, спасибо!

    5 лет назад10.11.2012 Ответить
  2. zhiznvseti

    Смотрю форма комментариев с момента публикации поста значительно видоизменилась и пополнилась дополнительным функционалом. Кнопки форматирования текста тоже делали сами без плагинов?

    4 года назад06.02.2013 Ответить
  3. Михаил Веб

    @ zhiznvseti: Да, форма изменилась, как и вся тема в принципе. Функционал пока вывожу с помощью плагина, пока не добрался еще до этого момента, хотя мне и так нравится. Да и не факт, что если заменить станет лучше, может и оставлю, надо подумать. :!:

    4 года назад06.02.2013 Ответить
  4. Вахит

    @ Михаил Веб:
    Поделитесь пожалуйста какие плагины используете теперь для формы комментариев. Для сайта моего именно такая форма нужна. Не могу найти:-(

    4 года назад01.05.2013 Ответить
  5. Михаил Веб

    @ Вахит: Без проблем: Панелька над полем ввода комментария добавлена, с помощью плагина Comment Form Toolbar. А в остальном форма комментирования довольно обычная и для нее плагинов больше не использую.

    4 года назад01.05.2013 Ответить
  6. Вахит

    @ Михаил Веб:
    Вот у меня не получается создать такую же форму как у Вас с полями: имя, email, сообщение. У меня стоит так: для добавления комментариев необходимо авторизоваться, а мне это не нужно. Вот как реализовать, чтоб Гость зашел вбил свои данные(имя, емеил) написал сообщение и отправил?

    4 года назад01.05.2013 Ответить
  7. Вахит

    Использую вот эту тему [ссылка удалена]

    4 года назад01.05.2013 Ответить
  8. Вахит

    @ Михаил Веб:
    Извините за беспокойство :smile: разобрался с проблемой комментирования для неавторизованных пользовтелей. Только вот Comment Form Toolbar не работает с wp 3.5.1 почему-то

    4 года назад01.05.2013 Ответить
  9. Михаил Веб

    @ Вахит: Ничего страшного. проблема с комментированием, я так понимаю, заключалась в настройках комментариев? А по поводу Comment Form Toolbar — все должно работать в данной версии. Возможно дело в шаблоне.

    4 года назад02.05.2013 Ответить
  10. Вахит

    @ Михаил Веб:
    Спасибо Вам

    4 года назад02.05.2013 Ответить

Чтобы оставить комментарий, заполните, пожалуйста форму ниже:

Смайлы

Обязательно для Заполнения!

Обязательно для Заполнения!

Проверка комментариев включена. Прежде чем Ваши комментарии будут опубликованы пройдет какое-то время.

Отправить жалобу разработчику сайта

Если у Вас возникли проблемы, не стесняйтесь отправлять жалобу, она обязательно будет учтена и все будет исправлено.

[contact-form-7 404 "Not Found"]

Спасибо большое за поддержку проекта! :)

Для поддержки проекта, выберите убодный способ для оплаты: