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

Обновлено: 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 дважды загружать его и нарушать функциональность темы
  • Загружайте скрипт только в том случае, если у вас есть страница, на которой нет одного сообщения - только страницы, на которых у вас есть более одного сообщения, должны будут загружать больше элементов.

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

    
                    
            /*
                This is the inifinite scrolling setting, you can modify this at your will
            */
            var inf_scrolling = {                
                /*
                    img: is the loading image path, add a nice gif loading icon there                    
                    msgText: the loading message                
                    finishedMsg: the finished loading message
                */
                loading:{
                    img: "/images/ajax-loading.gif",
                    msgText: "Loading next posts....",
                    finishedMsg: "Posts loaded!!",
                },

                /*Next item is set nextSelector. 
                NextSelector is the css class of page navigation.
                In our case is #nav-below .nav-previous a
                */
                "nextSelector":"#nav-below .nav-previous a",

                //navSelector is a css id of page navigation
                "navSelector":"#nav-below",

                //itemSelector is the div where post is displayed
                "itemSelector":"article",

                //contentSelector is the div where page content (posts) is displayed
                "contentSelector":"#content"
            };

            /*
                Last thing to do is configure contentSelector to infinite scroll,
                with a function jquery from infinite-scroll.min.js
            */
            jQuery(inf_scrolling.contentSelector).infinitescroll(inf_scrolling);
                
    

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

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

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

while (has_posts ()):

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

'page', // Только страницы); query_posts ($ args); // загружаем сообщения if (have_posts ()):?> 

Заключение

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

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

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

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

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