Использование 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
.
Я не вижу никаких странных ошибок на консоли, но это тоже не работает. Ценю любую помощь!
5 ответов
смотрите сюда:https://github.com/nikolas/pjax-menu Надеюсь, это поможет:)
редактировать : http://wordpress.org/extend/plugins/pjax-menu/
- скачать плагин меню pjax для wordpress.
-
архив, который вы загружаете, будет иметь папку с именем Николас-pjax-меню-XXXXXXX, скопируйте эту папку в папку плагинов вашего приложения wordpress
/ your-wordpress-app-root / wp-content / Плагины/
переименовывая его в pjax-menu например.
активировать плагин из папки плагинов меню в Панели управления WordPress.
-
отредактируйте файл javascript
/ your-wordpress-app-root / wp-content / Плагины/pjax-menu / pjax_menu.js
для размещения ваших ссылок (например:
'#access .menu a'
) и главный контейнер содержимого ('#main'
). -
я использовал следующий код на WordPress ' Twenty Eleven theme v1.2:
var $j = jQuery; $j(document).ready ( function() { $j('#access .menu a').pjax('#main').live ( 'click', function() { } ); } );
теперь, когда вы видите, что он работает на знакомой теме, измените его в соответствии с вашими потребностями
Я посмотрел на ряд подходов к этому и не смог найти тот, который был достаточно простым или гибким, чтобы сделать его реалистичным для темы WordPress с даже умеренным разнообразием в макете.
Я djax плагин jquery именно для этой цели, который позволяет мне определить, какие элементы на странице динамически загружать, назначая им определенный класс. Он будет по умолчанию ajaxifying все внутренние ссылки и принимает массив фрагментов url для исключения как параметр. Конечно, он использует pushstate для поддержания истории браузера и изящно деградирует, если API истории недоступен. Существует пример установки ajaxified WordPress с использованием темы WordPress Bones в разделе "живые примеры" ссылки выше.
эта тема заняла примерно 30 строк кода модификация для ajaxify с djax. Посмотрите на первую ссылку для документации и ссылки для загрузки.
меню PJAX - отличная концептуальная отправная точка, но вам все равно нужно вручную определить макет(ы) (в пределах вашего динамического содержимого div) для каждого типа страницы, который вы пытаетесь поддержать PJAX.
трудность в PJAXifying WordPress заключается в том, что макеты и контент должны выглядеть одинаково, независимо от статических или AJAX нагрузок. Я взял широко используемый тематические тема (хорошо определенная структура, сильно расширяемая) и расширенный его для поддержки PJAX:тематический PJAX
аналогично, если вы хотите использовать другую тему для PJAX, я выпустил код с открытым исходным кодом в качестве ссылки (github.com/wayoutmind/thematic-pjax), и следующие методы будут применяться:
- определить макет(ы) (т. е. Шаблон) для использования на всем сайте WordPress
- извлеките только необходимые элементы (сообщение, боковая панель и т. д.), которые будут отображаться в динамике div
-
создать специализированные PJAX шаблоны, крючок в Цикл для отображения содержимого, например:
// Load after template initialized, so we can use widgets and sidebar add_filter('get_header', 'myPJAXTemplate');
при необходимости ваш клиентский JavaScript должен будет обновить родительские, нединамические узлы вашего динамического контента div (например.
#wrapper
,body
и т. д.) В ответ на нагрузки PJAX, поэтому все выглядит правильно (например. добавление/удаление классов CSS)- чтобы облегчить это, вам придется испускают какой-то индикатор (т. е. пользовательские X-заголовки) в вашем шаблоне PHP
хороший плагин. Пример использования на тему (пробовал с двадцатью пятнадцатью):
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