Як налаштувати нескінченну прокручування WordPress сайту

"НескінченнаПрокрутка сторінок у блозі була свого часу створена під впливом інтерфейсу таких соціальних медіа, як Facebook та Twitter. Щоб прочитати старі пости, у такій системі перегортання достатньо прокрутити сторінку вниз.

З одного боку, така система перегортання сторінок суттєво покращує досвід використання сайту, але при неправильному налаштуванні вона може зіпсувати враження відвідувачів вашого сайту. Так що якщо ви збираєтеся впровадити "нескінченну" прокручування, переконайтеся, що в нижній частині сторінки в поточному дизайні немає важливих навігаційних посилань. Тому що при нескінченному прокручуванні сторінки спроба натиснути на одне з таких посилань буде призводити до появи нових постів, а саме посилання буде "втікати" від користувача. Щоб уникнути таких негативних наслідків, важливі посилання доведеться перенести в бічну панель або зафіксувати розташування футера у вашому блозі. Отже, приступимо до налаштування.

| Завантажити вихідні |

Крок 1. Плануємо поділ на сторінки при новому прокручуванні

Важливо спланувати поділ блогу на сторінки перед тим, як налаштувати новий тип прокручування та навігації. Зазвичай поділ на сторінки відбувається шляхом перерахування номерів сторінок у нижній частині головної сторінки. Але тепер за умови, що прокручування буде динамічним, вам така нумерація та розбивка на номери не знадобиться.

Наша нескінченна прокручування використовує функціональність jQuery и Аякса для обробки запитів до сторінки та постів, які відображаються для користувача, як тільки він досягає видимого "днасторінки. У цьому посібнику користувача я розповім вам, як налаштувати динамічне прокручування на прикладі теми Twenty Ten.

Крок 2. Створюємо функцію Ajax

Ми скористаємось функцією WordPress ajax, щоб створити процедуру обробки виклику нових постів під час розбивки на сторінки з ефектом "нескінченної" прокручування. Спочатку треба задати основну функцію для нашого поділу на сторінки, для цього наступний код знадобиться додати functions.php

function wp_infinitepaginate(){ 
    $loopFile        = $_POST['loop_file'];
    $paged           = $_POST['page_no'];
    $posts_per_page  = get_option('posts_per_page');
 
    # Load the posts
    query_posts(array('paged' => $paged )); 
    get_template_part( $loopFile );
 
    exit;
}

Ця функція буде використовуватися для виклику нашої процедури поділу на сторінки, і зазвичай у нас тут відбувається відправка двох змінних за допомогою Аякса: одна задає номер сторінки, а інша - файл шаблону, який використовує таку нову прокручування. Щоб увімкнути цю функцію та використовувати її спільно за допомогою WordPress ajax, нам знадобиться наступний код:

add_action('wp_ajax_infinite_scroll', 'wp_infinitepaginate');           // for logged in user
add_action('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate');    // if user not logged in

Стандартна дія для WordPress ajax буде wp_ajax_(our action name), оскільки ім'я infinite_scroll використовується в коді теми, яка є прикладом у даному пості. Нам треба додати 2 дії: одне – для авторизованих користувачів сайту, а інше – для тих, хто не авторизований на сайті.

Далі нам треба створити ajax-функцію, яка відправлятиме 2 змінних, необхідні для нашої процедури поділу на сторінки. Ви можете використовувати такі приклади коду WordPress для вставки jQuery ajax-функції або безпосередньо додати цей код у файл header.php вашої теми:

<script type="text/javascript">
function loadArticle(pageNumber) {
    $.ajax({
        url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php",
        type:'POST',
        data: "action=infinite_scroll&page_no="+ pageNumber + '&loop_file=loop', 
        success: function(html){
            $("#content").append(html);    // This will be the div where our content will be loaded
        }
    });
    return false;
}
</script>

Перед нами основний виклик Аякса, який буде здійснюватися, і ми використовуємо "infinite_scrollяк ім'я виробленої дії. WordPress буде автоматично викликати функцію wp_infinitepaginate(); тому що ми задали її у нашому файлі functions.php.

Крок 3. Визначаємо дію у момент, коли користувач досягає "дна" сторінки

Щоб увімкнути "нескінченну прокрутку", нам треба визначити той момент, в який користувач досягає видимого "днасторінки. Домогтися цього можна за допомогою jQuery, використовуючи наступний код:

<script type="text/javascript">
            $(window).scroll(function(){
                    if  ($(window).scrollTop() == $(document).height() - $(window).height()){
                          // run our call for pagination
                    }
            }); 
</script>

Тепер ми можемо дізнатися, коли користувач досягне прокручування видимої нижньої межі на сторінці. Далі треба викликати функцію loadArticle у межах функції прокручування. Для цього я додаю лічильник, який визначає номер сторінки для подальшого виклику функції:

<script type="text/javascript">
            var count = 2;
            $(window).scroll(function(){
                    if  ($(window).scrollTop() == $(document).height() - $(window).height()){
                       loadArticle(count);
                       count++;
                    }
            }); 
 
            function loadArticle(pageNumber){    
                    $.ajax({
                        url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php",
                        type:'POST',
                        data: "action=infinite_scroll&page_no="+ pageNumber + '&loop_file=loop', 
                        success: function(html){
                            $("#content").append(html);   // This will be the div where our content will be loaded
                        }
                    });
                return false;
            }
</script>

Щоразу, коли користувач прокручує сторінку до нижньої межі, значення лічильника зростає та включає передачу номера сторінки у функцію wp_infinitepage() у рамках файлу functions.php з нашої теми оформлення. За допомогою функцій прокрутки и loadArticle ми можемо здійснити виклик функції Аякса у нашій темі для WordPress; але результат не з'явиться, якщо ми не розмістили файл циклу в папці з нашою темою оформлення.

Крок 4. Налаштовуємо тему оформлення

Найважливіший етап: нам треба налаштувати значення DIV, яке містить новий контент, що запитується функцією Аякса. У темі оформлення Twenty Ten вже є DIVми можемо використовувати. Цей DIV має значення id="content"тому ми вкажемо ідентифікатор div у нашій функції Аякса. Якщо ви для оформлення використовуєте інші теми, які не оформлюють цикл DIV, Ви можете просто оформити функцію циклу так, як це зроблено в наведеному фрагменті коду, щоб отримати аналогічний результат:

<div id="content"> loop content </div>

Далі нам знадобиться файл циклу. В темі Twenty Ten вже є файл циклу, ось одна з причин, чому я взяв цю тему для нашого сьогоднішнього уроку. Якщо у вас в темі немає файлу loop.phpпросто створіть новий файл циклу і скопіюйте функцію циклу в рамках файлу index.php у новий файл, а потім новий файл циклу завантажте в папку з темою.

Для всіх, хто використовує тему Twenty Ten, можна ще "закоментувати" поділ на сторінки в рамках файлу, тому що нам воно більше не знадобиться (вивчіть вихідний файл посібника для того, щоб дізнатися, як це правильно зробити).

Крок 5. Додаємо завантажувач Ajax

Ця дія - необов'язкова, щоб просто "прикрасити" нашу нескінченну прокрутку сторінок. Для цього ми додамо образ завантажувача Аякса до нижньої межі нашої сторінки. Для цього просто вставте наступний фрагмент коду у файл footer.php:

<a id="inifiniteLoader">Loading... <img src="<?php bloginfo('template_directory'); ?>/images/ajax-loader.gif" /></a>

а потім вставте наступний CSS-код в аркуш стилів теми:

a#inifiniteLoader{
    position: fixed;  
    z-index: 2;  
    bottom: 15px;   
    right: 10px; 
    display:none;
}

Далі треба дописати пару рядків коду на нашу функцію jQuery, щоб показати та приховати елемент завантажувача Аякса:

<script type="text/javascript">
      jQuery(document).ready(function($) {
          var count = 2;
          $(window).scroll(function(){
                  if  ($(window).scrollTop() == $(document).height() - $(window).height()){
                     loadArticle(count);
                     count++;
                  }
          }); 
 
          function loadArticle(pageNumber){    
                  $('a#inifiniteLoader').show('fast');
                  $.ajax({
                      url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php",
                      type:'POST',
                      data: "action=infinite_scroll&page_no="+ pageNumber + '&loop_file=loop', 
                      success: function(html){
                          $('a#inifiniteLoader').hide('1000');
                          $("#content").append(html);    // This will be the div where our content will be loaded
                      }
                  });
              return false;
          }
   
      });
      
  </script>

Завантажувач Аякса буде відображатися відразу, як тільки користувач досягне нижньої межі на сторінці, і відразу зникне, як тільки завершиться ajax-запит на показ нової порції постів.

Крок 6. Додаткові обмеження для покращення нескінченного механізму прокручування

Ми написали цілком робочий механізм нескінченного прокручування, але чогось йому не вистачає. Ця функція спрацьовуватиме щоразу, як тільки користувач досягає "днасторінки, навіть якщо постів вже більше немає. А ось такого ефекту нам зовсім не треба. припинятися:

<script type="text/javascript">
var count = 2;
var total = <?php echo $wp_query->max_num_pages; ?>;
$(window).scroll(function(){
    if  ($(window).scrollTop() == $(document).height() - $(window).height()){
        if (count > total){
            return false;
        }else{
            loadArticle(count);
        }
        count++;
    }
}); 
</script>

Ми дописали var total у функцію: вона повертає сумарну кількість сторінок, доступних для перегляду нашому сайті. Таким чином щоразу перед спрацюванням функції нескінченного прокручування буде проводитися перевірка, чи не вичерпався ліміт постів і чи не досягнуто максимальної кількості сторінок на даному сайті.

Ще нам треба додати обмеження, яке вказує, де саме застосовується дана функція: на головній сторінці, на сторінках архіву чи може у пошуку – але не в рамках 1 посту чи окремо взятої сторінки блогу. Тому нам знадобиться досить простий PHP-Параметр функції if else у коді jQuery:

if (!is_single() || !is_page()):
// our jQuery function here
endif;

Ось і все, що вам знадобиться, щоб створити ефект нескінченного прокручування на вашому сайті. Будь ласка, користуйтеся даним посібником, а також файлами-вихідниками та прикладами коду з даного посту для того, щоб створити своє оформлення такого роду. Усі файли та приклади в цьому пості наведені на основі теми Twenty Ten для WordPress.

Джерело: WP.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/