Совершенствуем форму комментариев в теме Twenty Eleven

Привет всем читателям блога “Записки о WordPress”! Многие блогеры используют в качестве шаблона для своего блога стандартные WordPress темы Twenty Eleven или Twenty Ten. Эти темы выбирают, потому что они стильные, красивые, минималистичные. Но вот форма комментирования выглядит громоздкой. В этой статье я расскажу, как поменять вид формы комментирования в теме Twenty Eleven.

Вот так форма комментирования в теме Twenty Eleven выглядит по-умолчанию. При нажатии на картинку можно посмотреть ее в 100% масштабе. Не кажется ли вам, что если сделать поля ввода “имя”, “email” и “сайт” в одну строку, то форма станет намного компактнее?

Twenty Eleven форма комментариев

Конечно, про изменение формы комментариев писали уже много, но для современных тем, таких как Twenty Eleven и Twenty Ten, не подходят рекомендации для других, более старых тем.

Шаг 1. Разбираем стандартный код формы

Вывод формы комментирования в теме Twenty Eleven осуществляется функцией <?php comment_form(); ?> из файла comments.php.

Стилизация осуществляется строками с 2039 по 2191 файла стилей.

Давайте с помощью FireBug посмотрим html-код формы комментариев:

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

Как можно заметить, поля ввода input заключены внутрь тегов p. Именно эти теги нам и надо стилизовать.

Шаг 2. Редактируем CSS

Сначала найдем и удалим ненужный код:

Теперь удалим отступы, добавив margin: 0 для полей ввода. Установим ширину поля в 85% от ширины тега p, в котором оно находится. При необходимости, поменяйте высоту input’а.

Изменим ширину полей input до 30%, добавим следующий код после 2187 строки:

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

Теперь форма комментирования выглядит почти как надо. Правда, лейбл “Комментарий” не на месте. Давайте это исправим.

Шаг 3. Редактируем вывод формы комментариев

В файле comments.php найдите функцию comment_form, о которой я говорила в начале статьи. Замените ее на следующее:

Мы добавили div, сбрасывающий обтекание, перед выводом формы для текста комментария.

Шаг 4. Последние штрихи

Давайте немного изменим положение звездочки, которая указывает на обязательные поля:

Новый стиль формы комментариев в Twenty Eleven

В итоге, у вас должно было получиться примерно следующее:

новая форма комментариев в Twenty Eleven

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

Полный CSS код формы комментариев, который у меня получился, привожу ниже:

Может, вы также захотите поменять форму поиска в своем блоге?

Если возникли вопросы, пишите, я обязательно отвечу!




13 комментариев к “Совершенствуем форму комментариев в теме Twenty Eleven”

  1. Дмитрий ДМ

    Как изменить цвет фона всего блока от меню до подвала? Не подскажете?

    Ответить
  2. Анна

    почему-то не отразилась новая форма комментария на странице. я скопировала полный код css, который указан у Вас, и исправила в комментариях функцию comment_form. что я сделала не так? подскажите.

    Ответить
  3. pikeev

    Здравствуйте!  А моно ли убрать форму комментариев  вообще?

    Ответить
  4. pikeev

    Спасибо большое Ирина!  Извините, пожалуйста, что вопрос не по теме  –  у меня проблема одна появилась – никак не могу ее исправить:  когда я добавляю новую запись  –  а потом просматриваю – нажимаю читать далее  – а там страницы не существует))  Буду  очень благодарен, если подскажете

    Ответить
  5. Вова

    Спасибо) пробный сайт создал на всяк случай чтобы там проверить работает ли. вроде всё нормально. сейчас буду добавлять на главный сайт) +1 сайту 😀

    Ответить
  6. Анна

    Ирина, здравствуйте!
    Подскажите пожалуйста, как можно в Twenty Eleven убрать пространство справа и слева от текста в посте? (Чтобы текст был вплотную к краю блока)
    Заранее большое спасибо!

    Ответить
    • Ирина

      Анна,
      Найдите вот такой код где-то в районе 211 строки файла стилей:

      и выставьте 100% в ширине.

      Ответить
  7. Илья

    Здравствуйте! Подскажите, а как форму комментирования убрать со страницы комментирования и вынести ее в отдельно всплывающее окно?
    Т.е. нажал на ссылку, всплыло окно, написал каммент, он и добавился…

    Ответить
  8. nurgaf

    Круто-круто! Но как убрать поле урл?! 😉

    Ответить

Оставить комментарий