SEO продвижение » Компактные формы комментариев, Часть 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 прописываем строчку:

<script type=«text/javascript» src=«http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js&quot;>script>

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

Заключение

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


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

Оценить статью post

Похожие статьи

Написать комментарий