1. Главная
  2. Блог
  3. Полезные статьи
  4. Компактные формы комментариев, Часть 2

Компактные формы комментариев, Часть 2

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

Проблема: Сделать форму комментариев для блога с тремя вкладками (контакт, фэйсбук, стандартные wordpress комментарии). Вкладки плавно переключались на jQuery и выглядели более менее компактно и красиво.

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

Подключение социальных комментариев на сайт

Как получить коды форм комментариев Vkontakte и Facebook, читайте тут, главное ширину указывайте около 500 – 600 px, потому что, чаще всего контентная часть у блога имеет такую ширину.

Добавление кода на сайт

Теперь открываем файл single.php вашей темы и ищем строчку в которой записан код для вывода стандартных сообщений comments_template();, у вас он может быть не много другим.

WordPress - вывод стандартных комментариев

Сохраните эту строчку в отдельном файле (нам ещё надо будет её вставить для вывода во вкладке), а потом удалите и на её место в файле single.php вставьте вот такой код:

<div id="tabb">
<h1>Оставь свой комментарий:</h1>
<ul class="tabs">
<li><a href="#vk">Контакт</a></li>
<li><a href="#fb">Facebook</a></li>
<li><a href="#wp">WprdPress</a></li>
</ul>

<div class="tab_container">

<div id="vk" class="tab_content">
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "600", attach: "*"});
</script>
</div>

<div id="fb" class="tab_content">
<div class="fb-comments" data-href="" data-num-posts="5" data-width="600"></div>
</div>

<div id="wp" class="tab_content">

</div>

</div>
</div>

Как видите, всё очень просто – добавилась дополнительная вкладка и всё.

Теперь надо подключить jQuery и скрипт для обработки табов (вкладок), для этого в header.php прописываем строчку:

И таким же образом подключаем файл tab.js, который также как и оформление (style.css) есть в исходниках.

Заключение

Ничего сложного нет, в этот раз я сразу добавлю исходники, чтобы те, кому очень сложно разобраться, сразу могли скачать и простым копипастом сделать у себя, что-то подобное. Со стилями я сильно не игрался, поэтому можно всё на много красивее оформить.



Так же демо версию, на две вкладки (без WordPress), вы можете посмотреть.

+7 495 175-40-25
Консультации по вопросам
info@cospi.ru
Электронная почта