Меню

WordPress Использование PJAX. Подгрузка контента без перезагрузки страницы

Наконец то, я наткнулся на плагин PJAX для jQuery и решил его протестировать.

pjax – это плагин jQuery, который использует ajax и pushState, чтобы обеспечить быстрый просмотр страниц с реальными постоянными ссылками, заголовками страниц и кнопкой возврата назад.

pjax работает, извлекая HTML с вашего сервера через ajax и заменяя содержимое элемента контейнера на вашей странице загруженным HTML. Затем он обновляет текущий URL в браузере, используя pushState. Это приводит к более быстрой навигации по страницам по двум причинам:

  • Никакие ресурсы страницы (JS, CSS) не выполняются повторно или повторно;
  • Если сервер настроен для pjax, он может визуализировать только частичное содержимое страницы и, таким образом, избежать потенциально дорогостоящего полного рендеринга макета.

Более подробно Вы можете ознакомиться на странице GitHub PJAX .

Для нормальной работы требуется:

1. Скачать сам плагин jquery.pjax.js с GitHub PJAX и поместить в то место где у  вас все JS. У меня это /js/jquery.pjax.js

2. В файле functions.php подключить сам скрипт

 wp_enqueue_script( 'pjax', get_template_directory_uri() . '/js/jquery.pjax.js', array(), null, true );

3. В header.php до закрытия </head> поместить следующий код

  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    $(function () {
       $(document).pjax('a', '#pjax-container', {
        fragment: '#pjax-container'
    });
});
</script>

4. И соответственно во всех причастных файлах archive.php, category.php, index.php, page.php, single.php  в месте где загружается контент ( <div id=”content”> или
<main id=”content”>) необходимо обернуть все в <div id=”pjax-container”>

Пример:

<!DOCTYPE html> 
<html> 
<head> 
<title>Index</title> 
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="jquery.pjax.js"></script>
<script src="script.js"></script>
 </head> 

<body>
 
<div id="pjax-container">

<div id="content">
<h1>Заголовок сайта</h1>
<p> Привет мир! 
<a href="page.html">перейдите по этой ссылке</a>. 
</p> 
</div>

</div> 

<footer>2015+</footer> 
</body> 
</html>

 

➤