Учебное пособие по WordPress: создание бесконечного прокручиваемого сайта WP

Статья написана:
  • WordPress
  • Обновлено: июль 29, 2014

Вы, безусловно, много работаете, чтобы улучшить удобство использования своего сайта, чтобы ваши пользователи были счастливее и чаще возвращались часто, не так ли? Ну, одним из улучшений, которые вы могли бы реализовать, является бесконечная техника прокрутки. Это в основном то же самое, что и у нас в Twitter или Facebook, где сначала отображается только базовый контент, и добавляется больше контента при прокрутке вниз. Это очень полезно, чтобы улучшить производительность вашего сайта (сокращение времени загрузки) и улучшить работу пользователей (так как никаких действий не требуется для загрузки большего количества элементов, таких как нажатие кнопки).

Здесь мы увидим, почему и как использовать его на вашем собственном сайте

Примеры неограниченного сайта прокрутки

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

Feedly

twitter

Бесконечный свиток - что нужно и что нельзя делать

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

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

Это руководство не требует навыков программирования, и, честно говоря, вы наверняка немного узнаете, как немного подправить тему WordPress.

Активы

Мы будем использовать Плагин JS от Paul Irish, Загрузите его и установите в папку js вашей темы. Мы будем использовать Twenty Twelve для обучения, но не стесняйтесь использовать его в любой теме (и отправляйте вопросы, если они не работают для вас).

Также вам понадобится хорошее GIF-изображение для вашего «загрузочного» сообщения. Вы можете найти их там много, но AjaxLoad сайт имеет довольно потрясающий инструмент, который поможет вам с множеством предустановленных стилей, и вы можете выбрать цвет, который лучше соответствует вашей цветовой гамме.

Когда у вас есть сценарий и ваше хорошее изображение gif под Wp-content / themes / 20thtwelve / js, мы можем начать!

Код PHP

Хорошо, не пугайтесь, мы дадим вам фрагмент копирования и вставки, но вот что нам нужно сделать, чтобы он заработал:

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

Файл functions.php является сердцем вашей темы. Вся функциональность обычно там или там называется из других файлов. Таким образом, мы можем добавить этот код в ваш файл функций, чтобы добавить бесконечную поддержку прокрутки (добавьте его в конец файла):

<? php / ************************* ВЕБ-РЕЙТИНГ БЕСКОНЕЧНОГО ПРОКРУТКИ ***************** ******** / / * Функция, которая будет регистрировать и ставить в очередь скрипт бесконечного сколлинга, который будет использоваться в теме. * / function fiftytwelve_script_infinite_scrolling () {wp_register_script ('infinite_scrolling', // имя сценария get_template_directory_uri (). '/ js / jquery.infinitescroll.min.js', // где файл является массивом ('jquery'), // для этого сценария требуется jquery-скрипт null, // номер версии скрипта не имеет true // скрипт будет помещен в нижний колонтитул); if (! is_singular ()) {// только когда у нас больше, чем сообщение 1 // мы загрузим этот скрипт wp_enqueue_script ('infinite_scrolling'); }} // Зарегистрируйте наши собственные скрипты! add_action ('wp_enqueue_scripts', 'fiftytwelve_script_infinite_scrolling'); / * Функция, которая установит бесконечную прокрутку для отображения на странице. * / function set_infinite_scrolling () {if (! is_singular ()) {// опять же, только когда у нас больше, чем 1 post // добавить скрипт js ниже?> <script type = "text / javascript"> / * Это параметр прокрутки inifinite, вы можете изменить его по своему желанию * / var inf_scrolling = {/ * img: это путь загрузки изображения, добавьте туда красивый значок загрузки gif msgText: сообщение загрузки FinishMsg: сообщение о завершении загрузки * / loading: { img: "<? echo get_template_directory_uri ();?> / images / ajax-loading.gif", msgText: "Загрузка следующих сообщений ....", finishMsg: "Сообщения загружены !!",}, / * Следующий элемент установить nextSelector. NextSelector - это класс CSS для навигации по страницам. В нашем случае это # ​​nav-under .nav-previous a * / "nextSelector": "# nav-under .nav-previous a", // navSelector - это идентификатор css навигации по страницам "navSelector": "# nav-under ", // itemSelector - это div, в котором отображается post" itemSelector ":" article ", // contentSelector - это div, в котором отображается содержимое страницы (posts)" contentSelector ":" # content "}; / * Последнее, что нужно сделать, - настроить contentSelector на бесконечную прокрутку с помощью функции jquery из infinite-scroll.min.js * / jQuery (inf_scrolling.contentSelector) .infinitescroll (inf_scrolling); </ script> <? }} / * нам нужно добавить это действие в нижний колонтитул страницы. 100 - это номер приоритета, который соответствует последующему выполнению. * / add_action ('wp_footer', 'set_infinite_scrolling', 100); ?>

Альтернативный подход - загрузка страниц и пользовательских типов сообщений

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

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

while (has_posts ()):

Итак, как только вы его нашли, вы можете использовать этот волшебный код:

<div id = "content" role = "main"> <? php / * Показывать только страницы бесконечного прокрутки! Вот секрет: вы можете установить post_type для того, что вам нужно, это просто! Некоторые post_types могут быть: портфолио, проект, продукт. Мы могли бы добавить столько типов сообщений, сколько хотим, разделив их запятыми, например «post», «page», «product» * / $ args = array (// настроить аргументы 'post_type' => 'page', // Only Pages); query_posts ($ арг); // загружать сообщения if (has_posts ()):?> <? php / * Запустить Loop * /?> <? php while (has_posts ()): the_post (); // «обычный» код цикла для отображения этих элементов?>

Вывод

Это просто «разогревающая» статья. Есть много вещей, которые вы могли бы сделать с таким подходом. Например, вы можете загружать продукты в свой магазин (используя WooCommerce, возможно) в качестве пользовательских прокруток или даже добавлять еще JS и CSS-код для создания и удивительного похожа на параллакс загрузчика для почтовых изображений.

Что вы думаете об этой технике? Вам это нравится? Вы бы использовали его? Поделитесь своими мыслями, используя раздел комментариев!

О Рочестер Оливейра

Я веб-дизайнер и предприниматель из Итажуба (МГ), Бразилия. Я люблю писать на непонятные темы и делать интересные вещи.

Подключение: