Янв
14
2012

Вывод комментариев в WordPress с помощью табов

Вывод комментариев в WordPress с помощью табов

Многие известные люди в сети на своих личных сайтах предоставляют посетителям возможность комментировать новый материал не только с помощью стандартной системы комментирования на вордпресс, но и с виджетами фейсбука и вконтакте. Единственное, что мне не понравилось так это оформления вывода комментариев. Комментарии с фейсбука, вконтакта и обычные на WordPress идут после статьи какой-то лесенкой дурачков. Сегодня я напишу публикацию о том, как их красиво офрмить с помощью табов.

При первоначальном поиске я не нашёл подходящего плагина для вордпресс, который будет выводить комментарии в виде табов. Возможно, плохо искал. Но в любом случае лучше все сделать самому и не перегружать блог лишними плагинами.
Табы будем выводить с помощью технологии jquery. Для этого нужно сперва подключить её к блогу.
Идём в файл текущей темы header.php и перед закрывающимся тегом head добавляем строку:


В новых темах вордпресс jquery часто уже подключена поэтому внимательно смотрите.
Дальше нужно скачать и поместить в папку с текущей темой такой скрипт. Скрипт подключения табов с помощью jquery
Чтобы скачать его по ссылке выше нажмите правую кнопку мишки и выберите «Сохранить объект как…».
Дальше подключаем его в теге head сразу после подключения jquery.


Эту строку измените соответственно с расположением файла tabs.js у Вас на хостинге. Большая часть дела по установке табов на ВордПресс сделана. Теперь осталось вывести код в нужном месте и настроить с помощью css стилей отображение табов. Ниже подаю свой html код.

    • Комментарии WordPress
    • Комментарии вконтакте
    • Комментарии фейсбук
    • Тут код комментариев Вордпресс
    • Тут код виджета комментариев фейсбук

    А вот сам каркас таблиц стилей. Этот кусок нужно поместить в файл style.css вашей темы.

    /* tabs */
    .section {
    }
    ul.tabs {
    }
    .tabs li {
    }
    .tabs li span {
    }
    .tabs li.current {
    }
    .tabs li.current span {
    }
    .tabs li:hover span {
    }
    .tabs li:hover span {
    }
    div.box {
    }
    div.box.visible {
    }
    div.box:hover {
    }
    /* end tabs */
    

    Я специально не указал в этом куске ни одного правила так как под каждую тему его нужно настраивать отдельно, как дизайн ногтей, чтоб табы вписались по оформлению. Найти готовый css для табов в интернете можно без проблем.
    После этого осталось только установить в нужном месте виджеты комментирования вконтакте и фейсбука.
    Вот, что у меня в итоге получилось на одном из сайтов.
    Табы комментариев вконтакте
    Вскоре и на этом приделаю такую нужную в плане социализации блога вещь.



    Метки: ,


    • samstudio

      хотелось бы увидеть «приделаю такую нужную в плане социализации блога вещь»
      особенно как вставить собственно контакты от вордпресса

    •  не понял комментария
      какие контакты от вордпресса?

    • samstudio

      ну смотрите: со структурой кода для организации табов в принципе — понятно.

      li>Тут код комментариев Вордпресс

      вото тут что вставлять, чтоб таб показывал коменты введенные не через социалки (ВК и ФБ), а средствами вордпресс

      пример: med.te.ua/відгуки/ — третья вкладка (Коментарь через сайт)

    • теперь понял 🙂
      туда я вставлял стандартну функцию вывода комментариев на вордпресс
       

    • samstudio

      пока стили еще не подгонял, сами табы работают: переключаются, показывают содержимое. Кроме таба с комментами ВП. Код  <?php comments_te…. вставил. Ничего не выводится

    • samstudio

      код comments — вставил, но ничего не выводит

    • Да вроде работает. Протестировал только-что. Единственное, что комментарии в вордпресс можно тоже установить во вкладку. Посмотрите как у меня вот там vsoci.ru сделано

    • samstudio

      на vsoci.ru  — гуд, точ то надо
      а у меня — как раз коменты worpress не показываются. Только если в админке для страницы включить опцию «Позволить коментирование». Но тогда — единственный тестовый комент показываетсяв конце страницы и независимо от выбранной табы.

    • samstudio

      или нужно подключать Disqus?

    •  Я такое пробовал только на Disqus пока. Скоро попробую табы подключить на сайте, где коменты вордпреса и отпишусь.

    •  Сейчас попробую на локалке потестировать.

    • samstudio

      вижу ваш комент в ФБ, но он не сохраняется на сайте, комменты социалок лежат на сайтах социалок.

    • samstudio

      еслм можна, на аську 310775736

    • samstudio

      привет, не дождался ответа и поставил виджет  табов пока, 
      так и не смотрел за комментирование не дискусом?

    • А как DISQUS прикрутить на wordpress? 

      И как его настроить?

    • Извини. Пока времени свободного не нашел. Даже забыть успел, что обещал. С понедельника точно посмотрю. Добавил задание в свой список на понедельник.

    • Для вордпреса есть одноименный плагин DISQUS. Просто установить его стандартно нужно и активировать. Возможно, сделаю вскоре детальную публикацию об этом. Там есть свои нюансы в настройке, которые помогут бороться с ручным спамом.

    • Sad

      lefweweg

    Читайте, не отвлекайтесь! =)

    © Интернет дом ленивца - личный блог о сео, смо, сайтостроению. Построен на небольших заметках автора. Копирование материалов без активной ссылки на darmoid.ru запрещается и преследуется законом об авторском праве!
    Вверх!