Уроки по программированию

Подгрузка контента (кнопка показать еще) wordpress(ajax)

Один из заказчиков попросил меня сделать на сайте динамическую подгрузку контента(постов, записей) или под другому «кнопка показать еще». Дизайн с таким решением становится очень популярным. Подобный прием можно увидеть в твиттере, вконтакте. Для wordpressa к сожалению плагинов способных решить эту задачу очень мало, я нашел только один плагин, но он мне не очень понравился поэтому  я продолжил искать решение. И наткнулся на тему sight, там для создания динамической подгрузки постов используется библиотека jquery.

Для создания динамической подгрузки контента нам понадобится два файла: jquery.cookie , script

Файлы jquery.cookie , script надо будет загрузить в папку js которая находится в папке с вашим шаблоном если такой папки нет, то ее нужно создать. Далее необходимо в файле header.php прописать пути к скриптам.

//поместить между тегами <head></head>
<?
wp_enqueue_script('cookie', get_template_directory_uri() . '/js/jquery.cookie.js', 'jquery', false);
wp_enqueue_script('script', get_template_directory_uri() . '/js/script.js', 'jquery', false);
?>

После того как вы прописали пути к скриптам надо не много подправить файл index.php или любой другой файл, где вы планируете сделать динамическую подгрузку постов. Необходимо добавить id = «loop» в контейнере постов,class = «post» в блоке вывода поста, id = «pagination» в том месте где вы хотите разместить кнопку «Показать еще». Код должен выглядеть примерно вот так:

<div id="loop">
	<?php while(have_posts()) : the_post(); ?>
		<div class="post">
			****
			<?php the_excerpt(); ?>	
			****
		</div>	
	<?php endwhile; ?>
	<div id="pagination"><?php next_posts_link(__('Показать еще')); ?></div>
</div>

Результат работы:

load-posts

Для работы скрипта необходима библиотека jquery библиотеку можно подключить так

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

Шаблон для тестирования подгрузки контента Скачать

Для того чтобы протестировать подгрузку нужно скачать шаблон закачать в папку wordpress с шаблонами затем выбрать в панели администратора шаблон с названием test

Комментарии к статье

  • Аватарка 18.08.2013

    хорошая статья

  • Аватарка 20.12.2013

    Меня просто перенаправляет на следующую страницу и все, никакой динамической подгрузки на той же странице…(:cry:)

    • Аватарка 21.12.2013

      Для этого скрипта нужна библиотека jquery можете ее так подключить

      • Аватарка 18.06.2015
        Ответить Влад

        Метод .live заменен на .on в поздних версиях jquery.
        По этому не работает.

        • Аватарка 11.10.2015
          Ответить Grand Torino

          jquery 1.11.2 метод live из скрипта нормально работает

  • Аватарка 05.01.2014
    Ответить Серега Сталин

    Здравствуйте! Реализация очень понравилась. Попробовал «прикрутить» к выводу комментариев, комментарии выводятся но не сохраняется «дерево», дочерние комментарии (ответы) падают не в родительский li а под него (если нужно могу прикрепить скрин, с наглядным пояснением) .
    Спасибо!

    • Аватарка 05.01.2014

      Отправьте сюда support@pro-cod.ru я посмотрю если у меня получится, то подскажу

      • Аватарка 06.01.2014
        Ответить Серега Сталин

        Описание отправил на почту.
        Спасибо!

        • Аватарка 06.01.2014

          Ответил надеюсь один из ответов поможет.

  • Аватарка 05.03.2014
    Ответить Ilyas Faizov

    Добрый день,у меня такой вопрос,почему при нажатии на кнопку загружаются эти же 10 статей которые были изначально показаны? и еще не работает когда выводишь статьи одной категории

  • Аватарка 31.03.2014
    Ответить Роман

    А если я вывожу записи в main_page.php посредством:



    Должно работать? Просто у меня не работает, направляет на /page/2 это из-за неправильно подключённых скриптов или из-за того, что подключаю не в категории, а в page Как думаете?

    • Аватарка 31.03.2014

      Разницы нет где подключать скрипты в категорий или на главной странице. Прочтите внимательнее

      Следующий абзац:

      Необходимо добавить id = «loop» в контейнере постов,class = «post» в блоке вывода поста, id = «pagination» в том месте где вы хотите разместить кнопку «Показать еще». Код должен выглядеть примерно вот так:

      • Аватарка 01.04.2014
        Ответить Роман

        Да я так и пишу, просто элементы вёрстки удалил, чтоб вам пиэйчпи был виднее и понятнее. Ну теперь я сделаю, спасибо! Может конфликт скриптов…

        • Аватарка 01.04.2014

          Если не получится пришлите шаблон на почту я посмотрю

  • Аватарка 12.05.2014
    Ответить Богдан Балабанов

    Спасибо добрый человек)
    Метод просто отличный, работает и с постами и с комментами.

  • Аватарка 20.10.2014
    Ответить Верочка
    • Аватарка 20.10.2014
      Ответить Верочка

      И если в файле скрипт заменять значения на container_masonry и block_masonry все равно не работает

    • Аватарка 21.10.2014

      Можно просто создать доп.блоки.
      К примеру у вас есть

      создайте внутри него или над ним еще один div

      это будет выглядеть так

  • Аватарка 16.11.2014
    Ответить Андрей

    Спасибо за скрипт, все работает. Скажите, можно ли поставить какой-либо рисунок на ссылку подгрузки вместо текста «Показать еще»?

    • Аватарка 17.11.2014

      Да можно используя css

      • Аватарка 18.11.2014
        Ответить Андрей

        Спасибо, странно, что сам не догадался. Последний вопрос — можно ли использовать данный скрипт не только с записями, но и с любым другим контентом?

        • Аватарка 18.11.2014

          Один из читателей использовал скрипт для вывода комментариев. Так что думаю можно выводить что угодно.

          • Аватарка 23.11.2014
            Андрей

            Хорошо, будем пробовать, спасибо!

  • Аватарка 25.03.2015
    Ответить Павел

    Показываю изначально 2 записи, всего их 10. Нажимаю загрузить еще — появляется эти же, то есть просто дублируется. В чем может быть причина? Вывел категорию через query_posts в page.php

    • Аватарка 26.03.2015

      Возможно, конфликт в query_posts. Рекомендуется после каждого query_posts очищать wp_reset_postdata();

  • Аватарка 28.03.2015
    Ответить Сергей Чепиков

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

    • Аватарка 29.03.2015

      Через стандартный вывод регулируется через админку wordpress

      • Аватарка 29.03.2015
        Ответить Сергей Чепиков

        Это в настройках чтения?

        • Аватарка 29.03.2015

          Да

          • Аватарка 29.03.2015
            Сергей Чепиков

            Спасибо!

          • Аватарка 29.03.2015
            Сергей Чепиков

            Это должно быть применимо к специально выделенной странице записей? Но у меня записи выводятся на нескольких страницах. И меняя значение «На страницах блога отображать не более … записей » — у меня вообще ничего не меняется.

          • Аватарка 29.03.2015
            TSergey

            можно еще в самом запросе поменять.

  • Аватарка 26.06.2015

    З цього великого скрипта script.js потрібен тільки маленький кусочок. jquery.cookie.js також не потрібні

    $(‘#pagination a’).live(‘click’, function(e){
    e.preventDefault();
    $(this).addClass(‘loading’).text(‘LOADING…’);
    $.ajax({
    type: «GET»,
    url: $(this).attr(‘href’) + ‘#loop’,
    dataType: «html»,
    success: function(out){
    result = $(out).find(‘#loop .post’);
    nextlink = $(out).find(‘#pagination a’).attr(‘href’);
    $(‘#loop’).append(result.fadeIn(300));
    $(‘#pagination a’).removeClass(‘loading’).text(‘LOAD MORE’);
    if (nextlink != undefined) {
    $(‘#pagination a’).attr(‘href’, nextlink);
    } else {
    $(‘#pagination’).remove();
    }
    $(‘#loop’).find(‘.post’).removeAttr(‘style’);
    }
    });
    });

  • Аватарка 14.09.2015
    Ответить Сергей Пятков

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

    • Аватарка 12.10.2015

      Добавить цикл с выводом статей на одну страницу

  • Аватарка 11.10.2015
    Ответить Grand Torino

    Косячный скрипт

  • Аватарка 12.10.2015

    Меня просто перебрасывает на page 2. Что можна зделать?

    • Аватарка 12.10.2015

      Скачайте тестовый шаблон и проверьте

  • Аватарка 12.10.2015
    Ответить рома

    Ураа всё получилось. Просто я подключил скрипты выше чем саму библиотеку ajax))) Спасибо автор!!!!!!(:joy:)(:joy:)

  • Аватарка 12.10.2015
    Ответить рома

    библиотеку jquery)))

  • Аватарка 12.10.2015
    Ответить РОМАН

    Появилась ещё 1 проблема: при подгрузке посты получают новые классы и все летит к чертям) Какой файл отвечает за это? То есть сначала посты имеют один блок а когда нажимаю «показать ещё» уже посты в другом блоке. Какая функция отвечает за вывод новых постов?

    • Аватарка 14.10.2015

      Все зависит от того где выводить. Если это главная, то в файле index.php есть такой фрагмент кода

  • Аватарка 04.11.2015
    Ответить Илья

    Очень полезная статья. У меня получилась добавить в записи а как добавить отдельно на страницу?

    • Аватарка 08.11.2015

      Точно таким же способом, нужно использовать цикл.

    • Аватарка 08.11.2015

      Точно таким же способом используя цикл.

  • Аватарка 01.12.2015
    Ответить Олег Неважно

    помогите решить ситуацию для подключения кода в index.php вставляю в нужном мне месте код:

    ****

    ****

    и при нажатии на сайте появляются *** то есть вместо них надо ввести данные для вывода поста ? я просто не селен в php помогите плиз

  • Аватарка 05.01.2016
    Ответить Аноним

    Не подгружает статьи. Выкидывает на 2 страницу

  • Аватарка 05.01.2016
    Ответить Аноним

    не подгружает статьи. переходит на 2 страницу

  • Аватарка 06.08.2016

    Хороший наверное метод, еще бы работал, а не просто на следующую страницу закидывал — цены бы не было

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

Ваш адрес email не будет опубликован.