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

Вопрос или проблема

Как создать бесконечную прокрутку в WordPress для блога и пользовательского типа записи. Я пробовал бесконечную прокрутку от Jetpack, но она не работает на пользовательском шаблоне страницы WordPress для пользовательского типа записи. Я посмотрел этот учебник, но он кажется старым.

http://code.tutsplus.com/tutorials/how-to-create-infinite-scroll-pagination–wp-24873

А также посмотрел этот https://github.com/infinite-scroll/infinite-scroll, но этот проект больше не поддерживается.

Пожалуйста, скажите мне или порекомендуйте какие-нибудь новые учебники, которые совместимы с WordPress 4.5 для создания бесконечной прокрутки.

Спасибо

Вам, вероятно, нужно определить новую функцию цикла для пользовательского типа записи, чтобы передать её параметру render.

Как в примере с https://jetpack.com/support/infinite-scroll/

/**
 * Добавляет поддержку темы для бесконечной прокрутки
 */
function twenty_ten_infinite_scroll_init() {
    add_theme_support( 'infinite-scroll', array(
        'container' => 'content',
        'render'    => 'twenty_ten_infinite_scroll_render',
        'footer'    => 'wrapper',
    ) );
}
add_action( 'after_setup_theme', 'twenty_ten_infinite_scroll_init' );

/**
 * Устанавливает код, который будет отображаться для вызываемых записей,
 * подключается к частям шаблона, когда это возможно.
 *
 * Примечание: необходимо определить цикл.
 */
function twenty_ten_infinite_scroll_render() {
    get_template_part( 'loop' );
}

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

Ответ или решение

Чтобы реализовать бесконечную прокрутку (infinite scroll) на сайте WordPress для блога и пользовательских типов записей, можно воспользоваться встроенными возможностями темы WordPress или использовать сторонние плагины. Ниже приведено пошаговое руководство, которое поможет вам настроить бесконечную прокрутку, даже если вы работали с пользовательскими шаблонами записей.

Шаг 1: Убедитесь, что ваша тема поддерживает бесконечную прокрутку

Сначала вам нужно добавить поддержку бесконечной прокрутки в файл functions.php вашей темы. Убедитесь, что ваш файл functions.php содержит следующий код:

/**
 * Добавление поддержки бесконечной прокрутки
 */
function mytheme_infinite_scroll_init() {
    add_theme_support( 'infinite-scroll', array(
        'container' => 'content', // контейнер для загрузки контента
        'render'    => 'mytheme_infinite_scroll_render', // функция рендеринга
        'footer'    => 'wrapper', // идентификатор footer
    ) );
}
add_action( 'after_setup_theme', 'mytheme_infinite_scroll_init' );

/**
 * Функция для рендеринга следующих постов.
 *
 * Заметьте: должна быть определена цикл.
 */
function mytheme_infinite_scroll_render() {
    if ( have_posts() ) {
        while ( have_posts() ) {
            the_post();
            get_template_part( 'template-parts/content', get_post_type() ); // Подключаем нужный шаблон для каждого типа записи
        }
    }
}

Шаг 2: Создайте или отредактируйте файл content.php

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

Шаг 3: Проверьте настройки JavaScript

Jetpack использует JavaScript для реализации бесконечной прокрутки. Убедитесь, что JQuery загружен на ваш сайт. Вы можете добавить следующий код в файл functions.php вашей темы, чтобы гарантировать, что JQuery активен:

function my_enqueue_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

Шаг 4: Настройте классы элементов

Убедитесь, что у элементов, которые вы загружаете, есть правильные классы, указанные в параметрах container и footer. Например, если ваш контент находится внутри элемента с id #content, он должен быть прописан в параметре container.

Шаг 5: Стиль и адаптивность

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

Альтернативные решения

Если способ с использованием Jetpack не работает, рассмотрите возможность использования плагинов, таких как Ajax Load More или WP Infinite Scroll and AJAX Pagination. Эти плагины могут предложить более простую настройку и различные опции для реализации без необходимости программирования.

Рекомендации

При создании бесконечной прокрутки в WordPress важно не только корректно настраивать функциональность, но и проверять работу на различных устройствах и в браузерах. Также полезно следить за производительностью сайта, так как бесконечная прокрутка может увеличивать нагрузку на сервер при большом количестве запросов.

Заключение

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

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

Капча загружается...