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

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

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

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

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

7
javascript jquery pjax wordpress

5 ответов

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

редактировать : http://wordpress.org/extend/plugins/pjax-menu/

3
  1. скачать плагин меню pjax для wordpress.

  2. архив, который вы загружаете, будет иметь папку с именем Николас-pjax-меню-XXXXXXX, скопируйте эту папку в папку плагинов вашего приложения wordpress

    / your-wordpress-app-root / wp-content / Плагины/

    переименовывая его в pjax-menu например.

  3. активировать плагин из папки плагинов меню в Панели управления WordPress.

  4. отредактируйте файл javascript

    / your-wordpress-app-root / wp-content / Плагины/pjax-menu / pjax_menu.js

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

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

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

  6. теперь, когда вы видите, что он работает на знакомой теме, измените его в соответствии с вашими потребностями

2

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

Я djax плагин jquery именно для этой цели, который позволяет мне определить, какие элементы на странице динамически загружать, назначая им определенный класс. Он будет по умолчанию ajaxifying все внутренние ссылки и принимает массив фрагментов url для исключения как параметр. Конечно, он использует pushstate для поддержания истории браузера и изящно деградирует, если API истории недоступен. Существует пример установки ajaxified WordPress с использованием темы WordPress Bones в разделе "живые примеры" ссылки выше.

эта тема заняла примерно 30 строк кода модификация для ajaxify с djax. Посмотрите на первую ссылку для документации и ссылки для загрузки.

2

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

трудность в PJAXifying WordPress заключается в том, что макеты и контент должны выглядеть одинаково, независимо от статических или AJAX нагрузок. Я взял широко используемый тематические тема (хорошо определенная структура, сильно расширяемая) и расширенный его для поддержки PJAX:тематический 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
1

хороший плагин. Пример использования на тему (пробовал с двадцатью пятнадцатью):

1. Пользовательский шаблон страницы

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

<?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 и наш пользовательский скрипт

на 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
);

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

цель жестко закодирована на шаблон.

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

0