Ajax пагинация с сохранением ссылок

Есть 2 вида Ajax пагинации: с сохранением ссылок и без сохранения. В этой статье расскажу как сделать первый вариант. Решение по второму варианту смотрите у Миши Рудастых. Для любителей поковырятся в коде, в той же статье есть решение по бесконечному скроллу.

Теперь к делу. Итак Ajax пагинация с сохранением — ссылок (решение не мое, я его из премиум темы вытащил). Про разницу в видах и установку, смотрим в видео

к содержанию

Шаг 1. Подключаем функцию

Для начала следует в файл function.php добавить такую функцию

Надписи можете поменять на свои, если есть желание…

Шаг 2. Устанавливаем привязку для ajax пагинации

Если у вас используется не штатная функция вордпресс по выводу постраничной навигации такого вида the_posts_pagination();, то можно использовать такую конструкцию

Ее располагаем в нужных файлах: index.php, archive.php и тд. Одним словом все файлы, где выводит лента записей.

Шаг 3. Загружаем нужные файлы

Для правильной работы, требуется загрузить в файлы темы 2 js-плагина. Итак, скачиваем архив с файлами

Скачать: Ajax Paginations
Скачано: 181, размер: 9.5 KB, дата: 20.Мар.2017

Распаковываем архив и файлы ajax.js, history.js заливаем в файлы тему в папку js

Внимание! Если вы скопировали файлы в другую папку, то следует изменить путь подключения в первом шаге

Шаг 4. Настраиваем файл ajax.js

Полный разбор файла ajax.js смотрим в видео. Есть пара важных моментов.

Первый момент

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

ajax-1

к содержанию

Второй момент

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

ajax-3

Берете класс, который встречается во всех тегах article  и указываете в файле ajax.js

ajax-2

При правильном подключении все должно работать и вам останется только кнопку стилями разукрасить)

Вопросы пишем в комментариях. Всем удачи!

Ваш, Артем.

36 комментариев
  • Виталий

    09.06.2016

    Отличный урок, большое Вам спасибо!!!

  • Денис

    04.07.2016

    Здравствуйте Артем! Хорошая статья, но у меня малость другая задача…У меня на странице выводятся блоки с товарами без навигации, не посты, а просто карточки товаров. Как их заставить подгружать при клике, хотелось бы по умолчанию показывать 9 карточек, а при клике еще 3 — 6 добавлять. С помощью Вашего скрипта можно это сделать?

    • Денис

      04.07.2016

      Карточки товара все на одной странице, выведены через произвольные поля…

    • Артем

      04.07.2016

      Добрый день! Если у вас карточки товаров (а похоже что так и есть) — это произвольные записи, то вполне можно использовать данное решение. Только при выводе ленты товаров надо подключить пагинацию и на нее уже вешать аякс-подгрузку

      • Денис

        04.07.2016

        Нет, это не записи…В том то и дело, все карточки созданы на одной странице через произвольные поля, просто каждый раз добавлял новую карточку на эту страницу. Мучаюсь уже неделю наверное. Пробовал разные варианты, где то срабатывало, но не так как нужно. Как мне сделать условие, чтобы вывод был только 9 карточек на страницу? Есть вот такой код, ничего не получается… Заранее благодарю!!!

        get( ‘prise_1’ );?>
        get( ‘prise_2’ );?>
        get( ‘prise_3’ );?>
        get( ‘prise_4’ );?>
        get( ‘prise_katalog’ );?>

        Сортировать: сначала дешевле | сначала дороже

        <?php if ($prise_katalog) {
        foreach ( $prise_katalog as $field_art ) {
        echo '’;
        echo » . $field_art[‘prise_3’] . »;
        echo » . $field_art[‘prise_1’] . »;
        echo ‘ОТ ‘ . $field_art[‘prise_2’] . ‘ РУБ.’;
        echo » . $field_art[‘prise_4’] . ‘Заказать‘ . ‘Или по телефону: +7(351) 776 10 60+7(951) 444 17 76’ . »;
        echo »;
        };?>

      • Денис

        04.07.2016

        Артем благодарю за помощь, буду дальше разбираться!!!

  • Fata Morgana

    26.07.2016

    Здравствуйте, скажите пожалуйста, возможно ли с данным вариантом как-то совместить постраничную навигацию, но только так, чтобы сохранялась возможность подсвечивать номер текущей страницы? Заранее спасибо!

    • Артем

      26.07.2016

      Добрый вечер! В принципе можно, только я не пробовал так делать. Например можно запускать параллельный цикл пагинации и его уже выводить цифрами, но не пробовал. На будет как-нить попробовать сделать

  • Fata Morgana

    27.07.2016

    Почему-то у меня уже на первых шагах проблемы: подключаю функцию в файле functions.php, добавляю файлы ajax.js и history.js — и ничего не происходит. По-прежнему выводится обычная пагинация. Путь задан верно, селекторы тоже правильные указаны.

  • Сергей

    04.12.2016

    Здравствуйте Артем. Огромное спасибо, искал такой вариант вывода пагинации неделю, всё перерыл ни чего не работало, Ваш способ работает. ))) Подскажи пожалуйста, как можно сделать, что бы аякс пагинация работала ещё и для комментариев?

    • Артем

      04.12.2016

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

      • Сергей

        04.12.2016

        Смысл в том, что комментариев много и приходиться их разбивать. У меня стоит постраничная навигация в статье для комментариев. Сделал кнопку по Вашей статье в файле index.php. Вот хочу ещё такую же кнопку для комментов поставить. Я так понимаю что с одним и тем же кодом кнопка Показать ещё работать не будет в файле index.php и singl.php. По этому и задаю вопрос?

        • Артем

          04.12.2016

          Нет, там аяксом надо передавать разные значения, так что код будет похожий, но другой. Честно говоря, не залезал с такие дебри. А не проще готовое решение использовать, типа Какле или Гиперкоментс https://www.youtube.com/watch?v=bgclZl1KEYk?

          • Сергей

            04.12.2016

            Спасибо конечно, но не хочется сторонними сервисами пользоваться. Артем может поможешь с кодом и подключение в аяксе для комментариев?

  • Сергей

    04.12.2016

    Артем, ну что поможешь, в долгу не останусь.

    • Артем

      04.12.2016

      Прямо сейчас не получится, сильно занят. Эт надо разбираться как пагинация на коментах работает. Будет время, посмотрю

  • Владимир

    25.03.2017

    Здравствуйте, с https не работает, в чем может быть дело?

    • Артем

      27.03.2017

      Доброго! Должно работать, разницы никакой нет какая там ссылка, кеш сбрасывали?

  • Евгений

    17.05.2017

    Добрый день. У меня все получилось, но подскажите пожалуйста, почему у меня после нажатия на «Показать еше» записи также отображаются ниже подвала? С чем это может быть связано.

    • Артем

      21.05.2017

      Добрый! Значит где-то контент дублируется, так сложно сказать

  • Мастер

    30.05.2017

    Все просто и понятно, любой кто захочет так сделать, после про читаного с легкостью сделает.

  • Анна

    04.08.2017

    Доброго времени суток! Подскажите, а можно сделать так, чтобы страницы подгружались автоматически?

  • Кирилл

    10.10.2017

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

  • Анатолий

    16.10.2017

    Здравствуйте Артем.
    Материал у Вас конечно же заслуживает ЗОЛОТОЙ МЕДАЛИ. И то что Вы так прекрасно приподносите злободневные темы и на канале Ютуб — это дорогого стоит.
    К Вам я обращаюсь с надеждой на решение маленькой проблемы. Я воспользовался Вашим методом по теме: Ajax пагинация с сохранением ссылок
    Все прекрасно работает. Но не подскажите, как закрыть от индексации кнопку ПОКАЗАТЬ ЕЩЕ… , когда при наведение курсором на её, в бразере, в нижнем левом углу появляется дублирующая ссылка.
    Буду Вам признателен.
    С уважением Анатолий

    • Артем

      23.10.2017

      Доброго! А зачем кнопку закрывать от индексации? Это же внутренняя ссылка? Не, если это так критично, можно использовать не ссылку, а просто спан

  • Анатолий

    24.10.2017

    Артем, доброе утро. прилагаю свой неудавшийся метод:
    было:.after(‘‘ + mts_ajax_loadposts.i18n_loadmore + ‘‘);
    стало:.after(‘<‘ + mts_ajax_loadposts.i18n_loadmore + ‘‘);
    Данный span обрабатываю скриптом. Ссылка пропала, но и нет действия. Т.е при нажатие, контент не добавляется.
    Если можно поправьте, иди подскажите.

  • Анатолий

    24.10.2017

    Артем, кода нет, если можно могу предоставить в личку, но Вы через личку не отвечаете
    В общих чертах, вместо тега «а «, я использую тег спан «хидден-линк — дата-линк» который обрабатывается скриптом.
    И далее по тексту. Что не так, и как решить.
    Благодарю за будущее содейтсвие.

    • Артем

      24.10.2017

      Код есть, просто надо тег pre использовать. Ну и просто заменой не получиться, надо еще в самом файле аякса менять, там клик ловиться именно на ссылку
      Соответственно и менять надо #load-posts a на #load-posts span

  • Анатолий

    24.10.2017

    Артем!!!!!!!!!!!!!!!!!!
    Все супер!!!!!!!!!!!!!!!!!!!!
    Получилось, как в мультике: «ЗАРАБОТАЛО»!!!!!!
    ОООООООчень БББББББББББольшая БЛАГОДАРНОСТЬ!!!
    Еще раз спасибо.
    С уважением Анатолий.

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

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

Подписывайся!

Подписывайся!

Подписывайтесь на новости сайта, чтобы ничего не пропустить

Спасибо, что подписались!