Путь к статье: Главная » WordPress

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

Проблема: Сделать форму комментариев для блога с тремя вкладками (контакт, фэйсбук, стандартные 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><!-- Новая вкладка для WP коментов -->
</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="<?php the_permalink(); ?>" data-num-posts="5" data-width="600"></div>
 </div>
   
 <div id="wp" class="tab_content">
 <?php comments_template( '', true ); ?><!-- Вместо этой строчки, вставьте ваш код вывода комментариев WP -->
 </div>
   
</div>
</div>

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

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

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

Заключение

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

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


Поделитесь записью:
Комментарии
  1. Александр Прокудин

    Была у меня идея сделать такие табы, но я ее отмел. Красиво конечно, но не функционально. Табы — это лишние клики. А когда каменты с формами идут друг за другом — никаких лишних кликов делать не нужно, все и так видно. Любой клик, от которого можно избавиться я считаю обязан быть исключен. Юзабилити превыше красоты!

  2. admin

    В конце поста есть ссылка на демо страницу. Только там для двух вкладок.

  3. Cospi

    Да, минус такого способа в том, что не видно комментарии из других вкладок. Но когда формы идут друг под другом, это тоже не красиво смотрится. Например, как у Шакина — чтобы оставить комментарий в стандартной форме, надо пролистать лапоть коментов от Контакта и Фейсбука и только где-то внизу будет форма комментирования.

  4. admin

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

  5. admin

    Как уже писали выше — для комментариев подобное будет не совсем удобно, т.к. нужно листать все закладки, чтобы прочитать их. Мало кто захочет подобное делать. А вот для сайдбара подобное в самую пору: можно заменить плагин табуляторов. У себя на киношном сайте аналогичное применяю давно, правда речь идет о вкладках: Описание, Саундтреки, Интересно о фильме, Трейлер и прочее. Существенно сократилась длина статьи и дизайн стал лучше. Теперь человек видит в одном окне всю инфомрацию

  6. Cospi

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

  7. admin

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

  8. admin

    А это причина, по которой я вообще не сделал комментирования через соцести 🙂

  9. admin

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

  10. admin

    Есть страница «Демо», можно на ней увидеть. Пока не хочу на сайт вешать, может быть в будущем.

  11. Delpix

    Спасибо большое. Как раз именно это я и искал, очень зачетно. В благодарность подпишусь на вас.

  12. admin

    Соц сети это очень удобно, оставить комментарий через них быстрее, удобнее, и не нужно ждать модерации.

  13. admin

    Классная вещенция! Хотелось бы на эту тематику, только не для Вордпресс. Просто для страниц, чтобы в хтмл встроить. Такое существует?

  14. Cospi

    Да, возможно. Просто вы уберите код вывода комментраив WP и оставте социальные. Только хостинг должен php поддерживать.

  15. Филипп

    Доброй ночи. Вопрос такой. Я настроил такую форму, но со стилями вышла неразбериха, нет оформленных столбцов, только внизу маленькие надписи вконтакте, facebook и wordpress — по сути то уже переключается, всё кликается, не где не глючит, а вот именно самого оформления не получается сделать. Я скрипт tab добавил в корень темы и ничего. В стилях CSS тоже не понял как длеать. Помогите пожалуйста оформить.

  16. admin

    Шалом! У меня уже мозг выкипает! два дня пытаюсь сделать и никак, все делаю как прописано, но! Только стоит мне прописать подключение jQuery и у меня вылетает работа шаблона, не понять что твориться, в шаблоне используется мутулс. Чё делать то?

  17. admin

    Сложно ответить на ваш вопрос, надо больше конкретики с вашей стороны. По-пробуйте отключать скрипты на JS сторонние и методом перебора вы найдёте конфликтный скрипт.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *