Добрый день, сегодня я пишу пост, специально для самых начинающих читателей моего блога, которые просто замучили меня в теме про компактные формы комментариев.
Проблема: Сделать форму комментариев для блога с тремя вкладками (контакт, фэйсбук, стандартные wordpress комментарии). Вкладки плавно переключались на jQuery и выглядели более менее компактно и красиво.
Подключение социальных комментариев на сайт
Как получить коды форм комментариев Vkontakte и Facebook, читайте тут, главное ширину указывайте около 500 – 600 px, потому что, чаще всего контентная часть у блога имеет такую ширину.
Добавление кода на сайт
Теперь открываем файл single.php вашей темы и ищем строчку в которой записан код для вывода стандартных сообщений comments_template();, у вас он может быть не много другим.
Сохраните эту строчку в отдельном файле (нам ещё надо будет её вставить для вывода во вкладке), а потом удалите и на её место в файле single.php вставьте вот такой код:
<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), вы можете посмотреть.
