Делаем слайдер для комментариев

Автор:
(Людмила Лунева)

Веб-дизайнер и разработчик сайтов на wordpress

Вы, наверное, уже обратили внимание на слайдер, перемещающий комментарии в сайдбаре моего блога. В сегодняшнем уроке я расскажу, как сделать такой же для вашего сайта.

  • Первым делом выбираем, что именно должен перемещать наш слайдер - это могут быть не только комментарии, но и анонсы статей, новости сайта, да и просто картинки.
    Если вы, все же, остановились на комментариях, вывести их можно так:

    <div id="listticker">
    <?php
    global $wpdb;
    $sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID,
    comment_post_ID, comment_author, comment_author_email, comment_date_gmt, comment_approved,
    comment_type,comment_author_url,
    SUBSTRING(comment_content,1,70) AS com_excerpt
    FROM $wpdb->comments
    LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID =
    $wpdb->posts.ID)
    WHERE comment_approved = '1' AND comment_type = '' AND
    post_password = ''
    ORDER BY comment_date_gmt DESC LIMIT 50";
    $comments = $wpdb->get_results($sql);
    $output = $pre_HTML;
    foreach ($comments as $comment) {
    ?>
        <li>
            <a href="<?php echo get_permalink($comment->ID); ?>#comment-<?php echo $comment->comment_ID; ?>" title="<?php echo $comment->post_title; ?>"><?php $email = $comment->comment_author_email; echo get_avatar( $comment, 40 ); ?>
            </a>
            <?php echo strip_tags($comment->comment_author); ?>. <?php single_month_title('prefix', display) ?><br />
    <a href="<?php echo get_permalink($comment->ID); ?>#comment-<?php echo $comment->comment_ID; ?>" title="<?php echo $comment->post_title; ?>"><?php echo strip_tags($comment->com_excerpt); ?>...</a>
        </li>
    <?php
    }
    ?>
    </ul>
    </div>

    Обратите внимание на эту часть кода:

    DESC LIMIT 50

    DESC или ASC – это способ сортировки комментариев по дате их добавления.
    50 – это количество выводимых комментариев.
    Конечно, очень соблазнительно было бы выводить в нашем слайдере все комментарии, но если их окажется 500 или 1000 - представьте, как это будет грузить сайт. Поэтому, лучше ограничиться небольшим количеством последних комментариев.
    Код вывода поместите в файл ticker.php, бросьте этот файл в папку с темой и подключите его в нужном месте шаблона таким образом:

    <?php include (TEMPLATEPATH . '/ticker.php'); ?>
  • Далее подключаем java-скрипты. Сначала библиотеку jquery:
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

    А затем скрипт, который, собственно, и будет двигать наши комментарии.

    <script type="text/javascript">
    $(document).ready(function(){
        var first = 0;
        var speed = 700;
        var pause = 3500;
            function removeFirst(){
                first = $('#listticker li:last').html();
                $('#listticker li:last').remove();
                addLast(first);
            }
            function addLast(first){
                last = '<li style="display:none">'+first+'</li>';
                $('#listticker ul').find("li:eq(4)").animate({opacity: "0"}, "800", function() {
                    $('#listticker ul').prepend(last);
                    $('#listticker li:first').css({opacity: "0"}).slideDown(function(){
                           $(this).css({opacity: "1"});
                    });
                })
            }
        interval = setInterval(removeFirst, pause);
    });
    </script>

    Все это нужно вставить в файл header.php между тегами < head>< /head>.

  • Осталось дописать стили для нашего слайдера. Файл со стилями находится в архиве.

Cкачайте все файлы слайдера по ссылке ниже ↓

Уже скачали 288 раз(а)
Открыть ↓
Для разблокировки содержимого, введите код из последнего, присланного вам письма.
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1

(1 голос, в среднем: 5 из 5)

Комментарии

  1. В оформлении вашего слайдера слово "Присоединяйтесь..." можно сделать ссылкой на "Здесь вы можете написать отзыв"

    • Спасибо за подсказку - сделала.

      • Сколько людей, столько и мнений! 🙂
        Я всего лишь предложил перемещение в пределах страницы, для удобства пользователей.
        То есть примерно так:
        Присоединяйтесь...
        или другой якорь добавить

  2. Что-то описанный способ не работает так как у Вас на блоге: никакого движения комментариев не - просто удаляются по одному комментарию снизу.
    Опишите пожалуйста, каким образом реализовано движение комментариев в сайдбаре на этом блоге.

  3. у меня тоже самое, комменты просто удаляются по одному. ааа help

    • Значит, вы неправильно что то сделали.
      У меня работает.

    • Michael, многое зависит от того, как вы написали стили для этого блока.
      Ошибка, которая у вас появилась, скорее всего вызвана некорректным css.

  4. Как реализовать вывод последние десять анонсов или рейтинговых постов с моим кодом?

    • Взять и сделать, руководствуясь, указанным выше способом.

      • Вышеуказанный способ только для комментариев, а мне надо для анонсов. Я пхп толком не знаю, помогите.
        Спасибо!

        • Андрей, чтобы выводились анонсы, замените указанный код обычным циклом, в котором вместо тега content поставьте exerpt.

          • Напишите пример, я просто не знаю что такое цикл и как его написать.
            Буду очень признателен Вам.
            Я еще этого не знаю.
            Спасибо заранее!

          • Что такое цикл, читайте здесь - _http://codex.wordpress.org/Цикл_WordPress

            А пример цикла вы можете взять из файла index.php вашей темы.

          • Кстати, то не делал ничего не выходит.., а именно пробовал даже ваши настройки css копировать, но ничего так и не выходит все равно убирается по очереди начиная с низа комментарии и после этого список становится пустой.
            Да, еще посмотрел Ваш исходный код и вообще удивился увидев, что скрипт подключен после блока комментариев и все работает!
            Это как так?
            Что я делаю не так?

          • Чтобы выяснить, что вы делаете не так, нужно посмотреть что именно вы делаете, а также код подключения, код файлов и пр.
            К сожалению, бесплатно, я такие услуги не оказываю - нет на это времени.

  5. А подскажите пожалуйста, как такой вывод анонсов комментариев можно вывести постранично, с пагинацией? Уже неделю пытаюсь найти решение, в PHP не силен. Заранее спасибо.


    • 1. Создаете шаблон страницы.


      2. В цикл этой страницы вставляете функцию для вывода комментариев:

          <?php comments_template(); ?>


      3. В файл comments.php добавляете навигацию:

      <div class="alignleft"><?php previous_comments_link() ?></div>
      <div class="alignright"><?php next_comments_link() ?></div>


      4. В настройках wordpress указываете

      - Разбивать комментарии на страницы по 50 штук (или по сколько захотите).

      5. Все!

  6. Здравствуйте! Сделал наконец-то все как положено и все стало работать, но теперь после подключения библиотеки отказался работать плагин Lightbox Plus.
    Может есть чем заменить эту библиотеку?
    Пробовал и делать так до все равно плагин Lightbox Plus не работатет, а если отключить jquery-1.2.6.js, то тогда комментарии не работают, т.е. не перемещаются (нет ротации).
    Помогите решить проблему.

    • Судя по описанной вами проблеме, библиотека jquery у вас подключается дважды.
      Один раз с помощью плагина, а другой раз вы подключаете ее сами.
      Но это только догадка, чтобы ее проверить, нужно смотреть по месту.

  7. Кстати если в заголовке статьи присутствуют кавычки, то всплывающая подсказка не выводится полностью и для этого надо заменить их на одиночные.
    <a href="ID); ?>#comment-comment_ID; ?>" title='post_title; ?>'>comment_author_email; echo get_avatar( $comment, 40 ); ?>
    И тогда все работает как надо.
    Спасибо!

  8. Уважаемая Ксана, у вас на главной странице портфолио в виде слайдера ( очень классно как раз то что мне нужно, и стилевое оформление самое то - в общем лучше я не видел), не поделитесь опытом, как это можно реализовать. Я перепробовал кучу плагинов, везде какие то неувязки... Несколько скриптов попробовал - то же чем то не устраивают. У Вас же просто идеальный вариант.

    • Это самописный jquery-плагин.
      Таких плагинов в сети миллион. Поищите по запросу "jquery-плагин карусели".

  9. Отключил все плагины, стиль взял прямо с вашего сайта. Все равно не работает. Убираются снизу по одному и все...

    • убираются потому, что пропущен открывающий тег
      <?php

      • А где именно пропущен?

  10. Здрасьте, а сколько будет стоить денег если вы сами мне все это хозяйство вставите в шаблон?

  11. Оксана, подскажите пожалуйста, установил плагин local avatar как подружить его с данными комментариями.

    • Разобрался, сделал этот слайдер в готовом виде плагина (виджет), чтоб без заморочек и код не пилить 😉

      • 1. если не подключена библиотека jqwery то подключается с google
        2. по умолчанию крутятся 20 комментариев, можно изменить в настройках виджета.
        last_comments_jqwery.rar.html

        • Спасибо, что поделились :).
          Я думаю, что кому-нибудь обязательно пригодится.

    • Не знаю - я не пользуюсь этим плагином.

  12. Ксана, подскажите, мне бы хотелось установить такой же слайдер, как и у вас (с книгами), который бы переводил посетителей на определённые страницы, каким вы плагином для этого пользовались. Заранее спасибо.

    • Это jquery плагин с этого сайта http://slidesjs.com.

  13. Ксана, а вот у меня такой вопрос. Зачем подключать библиотеку jquery если в wordpress она уже существует? Можно же как-то использовать именно ее.

    • Это зависит от вашего шаблона.
      В некоторых шаблонах библиотека jquery уже подключена правильно, а в некоторых "правильное" подключение просто не работает.

  14. Здравствуйте! Всё работает, но почему то через некоторое расстояние вниз по странице появляется еще несколько комментариев, которые потом уменьшаются на 1 и исчезают, что делать?

    • Неправильно указаны стили для этого блока.
      Можете вытащить стиль слайдера с моего сайта - разрешаю :).

  15. перед
    foreach ($comments as $comment) {
    нужно дописать
    ?> <?php
    иначе неработает

  16. Вот еще вопрос добавить, кнопы перелистывания, чтобы слайды листать самому
    возможно ? иль ток под заказ ?

    • Не получится, даже, под заказ - нет времени.

  17. Все сделала точно по описанию. Комменты просто удаляются. addLast просто не работает.

    • Значит, не правильно прописали стили.
      У меня то работает :).

      • А можно вернуть стили, жму на кнопку но не скачивается. Да и причем тут стили в работе?

Ответ на комментарий

Войти, чтобы написать отзыв.

Внимание: все отзывы проходят модерацию.

Топ комментаторов
АватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватар
Самые комментируемые записи
Самые читаемые записи

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

В каждом письме публикуется код разблокировки.

Пользуйтесь кодом только из последних, пришедших вам на Email, писем. Закрыть »

Постов 204
Отзывов 5298