Использование PJAX в Wordpress

Question

Я пытаюсь интегрировать PJAX в мою установку Wordpress, и вот код, который я использую для этого:

<script src="js/jquery.pjax.js"></script>
<script type="text/javascript">
    $(function(){
        // pjax
        $('ul a').pjax('#middlewrap')
    })
</script>

Я просто следую демонстрации, которую они имеют на демонстрационной странице PJAX , но заменяю контейнер, который они использовали (#main), на контейнер для моей темы Wordpress, который был #middlewrap.

Я не вижу странных ошибок на консоли, но она тоже не работает. Цени любую помощь!

Answer 1

посмотрите здесь: https://github.com/nikolas/pjax-menu надеюсь, это поможет:)

РЕДАКТИРОВАТЬ : http://wordpress.org/extend/plugins/pjax-menu/

Answer 2

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

Я собрал djax плагин jquery для этой цели, который позволяет мне определять, какие элементы на странице загружать динамически, назначая им определенный класс.По умолчанию будет применена адаптация ко всем внутренним ссылкам, и в качестве параметра будет принят массив фрагментов URL.Конечно, он использует pushstate для поддержки истории браузера и постепенно ухудшается, если API истории недоступен.Есть пример установки WordPress с использованием Ajaxified с использованием темы WordPress Bones в разделе Живые примеры приведенной выше ссылки.

Эта тема потребовала около 30 строк кода модификации для адаптации с помощью djax.Посмотрите первую ссылку для документации и ссылку для скачивания.

Answer 3

1. Скачать Плагин меню pjax для WordPress .

2. В загружаемом архиве будет папка с именем nikolas-pjax-menu-XXXXXXX скопируйте эту папку в папку плагинов вашего приложения Wordpress

   / your-wordpress-app-root / wp-content / plugins /

   , переименовав ее в pjax-menu , например.

3. Активируйте плагин из меню плагинов на панели инструментов WordPress.

4. Редактирование файла JavaScript

   / your-wordpress-app-root / wp-content / plugins / pjax-menu / pjax_menu.js

   для размещения ваших ссылок (например: '#access .menu a') и основной контейнер содержимого ('#main').

5. Я использовал следующий код в WordPress 'Twenty Eleven v1.2:

   var $j = jQuery;
   $j(document).ready
   (
       function()
       {
           $j('#access .menu a').pjax('#main').live
           (
              'click',
               function()
               {
               }
           );
       }
   );
   

6. Теперь, когда вы видите, что он работает на знакомую тему, измените ее под свои нужды

Answer 4

Меню PJAX является отличной концептуальной отправной точкой, но вам все равно придется вручную определять макеты (в рамках вашего динамического div содержимого) для каждого типа страниц, который вы пытаетесь поддерживать PJAX .

Сложность PJAXifying WordPress заключается в том, что макеты и содержимое должны выглядеть одинаково, независимо от статической загрузки или загрузки AJAX. Я взял широко используемую структуру тематической темы (четко определенную структуру, легко расширяемую) и расширил ее для поддержки PJAX: Thematic PJAX

Аналогично, если вы хотите использовать тему, отличную от PJAX, я выпустил код с открытым исходным кодом в качестве ссылки ( github.com / wayoutmind / thematic-pjax ), и следующие методы позволят применяются:

1. Определите макеты (т. Е. Шаблон), которые будут использоваться на всем сайте WordPress
2. Извлеките только те элементы, которые необходимы (пост, боковая панель и т. Д.) Для отображения в динамическом элементе div

3. Создание специализированных шаблонов PJAX, которые подключаются к Цикл для визуализации содержимого, например:

   // Load after template initialized, so we can use widgets and sidebar
   add_filter('get_header', 'myPJAXTemplate');
   

4. При необходимости ваш клиентский JavaScript должен будет обновить родительские, нединамические узлы вашего динамического содержимого div (например, #wrapper, body и т. Д.) В ответ на PJAX загружается, поэтому все выглядит правильно (например, добавление / удаление классов CSS)

5. Чтобы упростить это, вам нужно будет испустить индикатор какого-либо типа (т.е. пользовательские X-заголовки) в вашем шаблоне PHP

Answer 5

Хороший плагин.Пример использования по теме (пробовал с Twenty Fifteen):

1.Страница настраиваемого шаблона

Создайте файл page-pjax.php внутри темы.
На странице администратора создайте страницу и используйте этот шаблон.Он просто отображает ссылки на архивы с пролетом вокруг них.

<?php
/**
 * Template Name: Pjax Example
 */
get_header(); ?>
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">  
        <?php
        $args = array(
            'type'            => 'daily',
            'limit'           => '',
            'format'          => 'html', 
            'before'          => '<span class="a-pjax">',
            'after'           => '</span>',
            'show_post_count' => true,
            'echo'            => 1,
            'order'           => 'DESC'
        );
        wp_get_archives( $args );
        ?>
        <div id="pjax-container"></div>
        </main>
    </div>
<?php get_footer(); ?>

2.Добавьте плагин pjax и пользовательский скрипт

Внутри папки /js на тему добавьте jquery.pjax.js и следующий скрипт my-pjax.js.

jQuery(document).ready(function($) { 
    $(document).pjax('span.a-pjax a, #recent-posts-2 a', '#pjax-container', {fragment:'#main'})
});

3.Загрузите jQuery, pjax и наш собственный скрипт

In functions.php.Загружается только на странице шаблона.

add_action( 'wp_enqueue_scripts', 'load_scripts_so_43903250' );
function load_scripts_so_43903250() {
  if ( is_page_template( 'page-pjax.php' ) ) {
    wp_register_script( 'pjax', get_stylesheet_directory_uri() . '/js/jquery.pjax.js' );
    wp_enqueue_script( 'my-pjax', get_stylesheet_directory_uri() . '/js/my-pjax.js', array('jquery','pjax') );
  }
}

4.ЗАМЕЧАНИЯ

$(document).pjax(
    'span.a-pjax a, #recent-posts-2 a', // ANCHORS
    '#pjax-container', // TARGET
    {fragment:'#main'} // OPTIONS
);

Якорями являются ссылки на архивы и виджета Последние сообщения с идентификатором #recent-posts-2.Удалите его для этого теста или добавьте другой контейнер ссылок по желанию.

TARGET жестко задан в шаблоне.

ОПЦИИ, фрагмент важен, так как pjax не загружает полные страницы HTML, у нас естьсказать ему, какую часть целевой страницы мы хотим.
В Twenty Fifteen содержимое находится внутри этого div: <main id="main" class="site-main" role="main">.Настройте в соответствии с используемой темой.
_{См. Примечания pjax: https://github.com/defunkt/jquery-pjax#response-types-that-force-a-reload}