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

Рубрикатор статьи

Доброго времени суток, друзья, приветствую вас на страницах своего блога для начинающих вебмастеров — 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

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

1
2
3
4
5
6
7
8
9
10
#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;
}

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

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

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

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

1
2
3
4
5
#reply-title {
 color: #373737;
 font-size: 24px;
 font-weight: bold;
 line-height: 30px;}

Стало так.

1
2
3
4
5
6
7
8
#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;}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#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;
 }

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

1
2
3
4
5
6
7
8
#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;
}

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

1
2
3
#respond p {
 margin: 10px 0;
}

Заменил на

1
2
3
#respond p {
 padding: 20px 10px;
}

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
#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;
 }

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

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

1
2
3
4
5
6
7
8
9
10
11
#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;
}

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

1
2
3
4
5
6
7
8
9
10
11
#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;
}

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

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

 

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

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

 

1
2
3
4
#respond textarea {
 resize: vertical;
 width: 95%;
 }

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#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);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Видеокурс "Технические секреты групп Вконтакте" доступен для скачивания!

Не получается сделать меню в группе Вконтакте? Устали платить другим за добавление меню в Вашу группу? Хотели бы научится всем техническим тонкостям и экономить свои деньги? Тогда скачайте курс прямо сейчас!

VN:F [1.9.22_1171]
Оценка статьи: 9.0/10 (5 голосов)
Автор: Михаил Веб Дата публикации: 07.08.2012