Янв
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 для табов в интернете можно без проблем.
    После этого осталось только установить в нужном месте виджеты комментирования вконтакте и фейсбука.
    Вот, что у меня в итоге получилось на одном из сайтов.
    Табы комментариев вконтакте
    Вскоре и на этом приделаю такую нужную в плане социализации блога вещь.



    Метки: ,


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

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