Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

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

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

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

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

Крок 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
inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 36

mirus:

Дякую за статтю. Добре та цікаво розписана, не для бездумного копіпаста. Тільки один момент: навіть якщо хочеш скопіювати фрагмент коду, Ваш SyntaxHighlighter люб'язно підсовує в буфер нумерацію рядків, що не дуже зручно. Що я роблю не так?)

WordPresso:

При наведенні курсору на код праворуч з'являється 3 кнопочки, якщо натиснути на першу — відкриється чистий код у новому вікні без нумерації та форматування спеціально для того, щоб можна було відразу копіювати.

mirus:

А скринька просто відкривалася :) Дякую :)

Олександр (AKart):

Не думаю, що це зручно, т.к. я, наприклад, переглядаючи сторінку сайту і маючи намір туди повернутися, запам'ятовую, на якій сторінці зупинився. А так при нескінченній прокрутці як знайти те саме місце ...?

mirus:

Мій улюблений спосіб - контрл + ф :) Але так, сама ідея нескінченного прокручування не завжди виправдовує себе, не потрібно її ліпити скрізь :)

Сергій:

Я зробив щоб у мене на головній виводилися анонси з першими картинками і під ними соціальні кнопки =) весь цей цикл кинув у луп все як треба вставив, але пости не підвантажуються, а замість них під першою картинкою по новій завантажуються соціальні кнопки =) І що ставити у налаштуваннях читання?

Сергій:

Прибрав соціальні кнопки і тепер коли скролл на дні під першим анонсом порожня область додається = (Допоможіть плз =)

Олег:

На localhost все працює, але на хостингу немає: (підкажіть пліз у чому може бути проблема:) заздалегідь вдячний:)

WordPresso:

Можливо, в обмеженнях хостинг-провайдера, спробуйте протестувати на іншому хостингу.

Олег:

Сьогодні раптом підвантаження почало працювати:) Дякую вам за чудову статтю та за оперативність:)

Олег:

Схоже, я рано радів=( на одному браузері вона не працює і ще при підвантаженні після нових постів за ними знову підвантажуються старі=(

Олег:

Вибачаюсь=) я просто лох неуважний=)

Bejan Sichinava:

Відмінний пост. Підкажете як зробити, щоб підвантаження приблизно за 250 пікселів до низу спрацьовувало?

Роман Панкратов:

Добрий вечір. У мене питання виникло. Я зробив нескінченну прокручування, все чудово працює. Тільки я не можу зробити ось це:
if (!is_single() || !is_page()):
// jQuery function here
ENDIF;
куди і як це записати, прохання відповісти докладно. Заздалегідь дякую.

WordPresso:

Це додаткова функція перевірки, яка викликає скрипт функцію у тому випадку, якщо ви зараз перебуваєте на будь-якій Записи, або Сторінка. Усередині функції перевірки має бути сам
jQuery код. Розмістити цю перевірку можна у файлі footer.php

Роман Панкратов:

Доброго дня, дякую, що відповіли. Якщо чесно, то мені не вдалося так реалізувати, швидше треба було зробити щось типу if (!is_single() || !is_page()):
echo("our jQuery function here");
ENDIF;
Але для зменшення навантаження на сервер я зробив просто кнопочку внизу сторінки, яка просто підвантажує контент за допомогою jQuery.
Дякую ще раз за відповідь.

iliy:

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

кит:

А де це потрібно прописати
function wp_infinitepaginate(){
2 $loopFile = $_POST['loop_file'];
3 $paged = $_POST['page_no'];
4 $posts_per_page = get_option('posts_per_page');
5
6 # Load the posts
7 query_posts(array('paged' => $paged ));
8 get_template_part ($ loopFile);
9 exit;
10/XNUMX/XNUMX}

WordPresso:

Наприкінці файлу теми functions.php

Антон-Буланов:

Добрий день, а як зробити все те саме, тільки з кнопкою, ПОКАЗАТИ ЩЕ ЗАПИСИ. і якщо вони закінчуються, записів більше немає.

WordPresso:

Це питання окремої статті, т.к. алгоритм відпрацювання там буде інший.

Unzero:

Доброго дня. При спуску на дно сторінки після постів просто з'являється «0» без видачі нових постів і так щоразу при досягненні низу. Чи не підкажете, в чому причина?

WordPresso:

Дуже складно так відповісти, можливо, налаштування вашого хостера щось блокують.

Олівія:

Добрий день. Інтегрувала все у код теми TwentyEleven. Створила окремий loop для категорії «Портфоліо», функція працює, проте є баг і я не зрозумію чи це до функції відноситься, чи до вордпресу. У категорії всього 3 записи, я ставлю висновок по 1й - все ок, ставлю висновок по 2, виводить перші два записи з Портфоліо і наступних 2 записи, один з Портфоліо, другий - наступний пост з іншої категорії.
Чи є думки як це можна вирішити?
Заранее спасибо

WordPresso:

Щиро кажучи, з такою проблемою не стикалися.

Mihail Chumachkin:

Невеликий додаток до статті.

Нормально не спрацював ваш варіант javascript код автоматичного запит нових записів при досягненні кінця сторінки.
На Stack Overflow знайшов кращий варіант, ніж у вас + доповнив його з урахуванням, якщо сайт має футер (треба враховувати і його висоту).

var footer_height = $('footer').height();

if ($(window).scrollTop() >= ($(document).height() — $(window).height()-1) — $('footer').height() ) {
...
}

Також, при динамічному завантаженні записів, треба блокувати повторний запит нових даних, інакше ми можемо мати кілька несподіваних варіантів поведінки:
1. Декілька запитів можуть надіслати та отримати ті самі дані.
2. Кілька запитів будуть паралельно додавати дані та вийде сміття.
3. При наведеному вище варіанті скрипта може кілька запитів відправити і отримати дані послідовно.

І щоб відображати або приховувати картинку ajax завантаження можна скористатися наступним кодом.

$.ajaxSetup({
beforeSend:function(){
$(«#[id елемента]»).show();
},
complete:function(){
$(«#[id елемента]»).hide();
}
});

WordPresso:

Дякуємо за доповнення! Думаю, це буде багатьом цікавим.

добрий підказчик:

у вас у демці не працює скрипт

Максим:

а є рішення для дозавантаження сторінки, а не записів, у мене просто сторінка на сайті, ну дуже довга і вантажиться довго

Павло Усов:

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

Павло Інглсміт:

Максиме, потрібна допомога у питанні? Я дивлюся на сайті у тебе, як і раніше, гальма.

Максим:

ну як розібрався, поставив модуль для дозавантаження зображень при прокручуванні, начебто швидше стало вантажитися

Алекс:

Чи міг розширити статтю для «бездумного копіпаста»? Те, що вставляти в функціон пхп, зрозуміло, футер теж. А що таке Джквері? Де його взяти ? І куди вставляти ось це:

ту функцію та використовувати її спільно за допомогою WordPress ajax, нам знадобиться наступний код:

1

2add_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

Спасибі за відповідь!

Антон:

Дякуємо автору за статтю!
І на додаток для тих, хто виводить статті у категоріях. При цьому підході пагінація «ламається». Довелося трохи повозитися, і знайшов одне рішення.

В аякс запиті необхідно передавати ID поточної категорії в поле дата.

Наприклад, для категорії 1 це виглядатиме так:
Тобто. data:»action=infinite_scroll&page_no=»+ pageNumber + «&loop_file=loop&cat=1»

Ось функція для визначення поточної категорії, її треба просто впхнути у файл functions.php

function getCurrentCatID(){
глобальний $ wp_query;
if(is_category() || is_search()){
$cat_ID = get_query_var('cat');
}
return $cat_ID;
}

Далі, зробимо динаміку, і зможемо отримувати id категорії автоматично:
Тобто. data:»action=infinite_scroll&page_no=»+ pageNumber + «&loop_file=loop&cat=»

А в самому файлі functions.php все виглядатиме так:
function wp_infinitepaginate(){
$cat = $_POST['cat'];
$loopFile = $_POST['loop_file'];
$paged = $_POST['page_no'];
$posts_per_page = get_option('posts_per_page');
query_posts(array('cat' => $cat, 'paged' => $paged, 'post_status' => 'publish')));
get_template_part($loopFile);
exit;
}
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

Цілком робоче рішення. Випробовано на собі)

Олексій:

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

Дмитро:

Здравствуйте.
До якої версії цей скрипт підтримується?
у мене стоїть кастомна версія на базі WP2.9, як я зрозумів там проблема у файлі admin-ajax.php
коли сторінка намагається підвантажити нові дані замість них йдуть 0000000000.
Можна щось з цим зробити чи потрібна нова версія WP?

Додати коментар або відгук