在Wordpress中使用PJAX

Using PJAX in Wordpress

本文关键字：PJAX Wordpress      更新时间：2023-09-26

我正在尝试将PJAX集成到我的Wordpress安装中，下面是我使用的代码:

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

我只是跟随他们在PJAX演示页面上的演示，但将他们使用的容器(#main)替换为我的Wordpress主题，这是#middlewrap。

我在控制台上没有看到任何奇怪的错误，但是它也不能工作。感谢任何帮助!

看这里:https://github.com/nikolas/pjax-menu希望有帮助:)

编辑: http://wordpress.org/extend/plugins/pjax-menu/

    下载pjax菜单插件

  1. 你下载的存档文件将有一个名为nikolas-pjax-menu-XXXXXXX的文件夹，将该文件夹复制到你的wordpress应用程序的插件文件夹

    /your-wordpress-app-root/wp-content/插件/

    而重命名为pjax-menu例如

  2. 从你的WordPress Dashboard的Plugins菜单中激活插件

  3. 编辑javascript文件

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

    容纳您的链接(例如:'#access .menu a')和内容主容器('#main')。

  4. 我在WordPress' Twenty - Eleven theme v1.2上使用了以下代码:

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

  5. 现在当你看到它在一个熟悉的主题上工作时，修改它以适应你的需要

我看了很多方法，但没有找到一个简单或足够灵活的方法来实现一个WordPress主题，即使在布局上有适度的变化。

我把jax jquery插件放在一起就是为了这个目的，它允许我通过给页面上的元素分配一个特定的类来指定要动态加载的元素。它将默认ajax化所有内部链接，并接受一个url片段数组作为参数来排除。当然，它使用pushstate来维护浏览器历史记录，如果历史API不可用，它会优雅地降级。在上面链接的Live Examples部分有一个使用WordPress Bones主题的ajax化WordPress安装的例子。

这个主题花了大约30行代码修改来使用jax进行ajax化。查看文档和下载链接的第一个链接

PJAX菜单是一个很好的概念起点，但您仍然必须手动定义布局(在动态内容div范围内)为您试图支持PJAX的每种页面类型。

pjaxify WordPress的困难在于布局和内容必须看起来相同，无论静态还是AJAX加载。我采用了广泛使用的Thematic主题框架(结构明确，可扩展性强)，并将其扩展为支持PJAX: Thematic PJAX

同样，如果您希望使用不同的PJAX主题，我已经发布了开源代码作为参考(github.com/wayoutmind/thematic-pjax)，下面的技术将适用:

  1. 确定布局(例如:模板)用于整个WordPress站点
  2. 只提取必要的元素(post，侧边栏等)显示在动态div

  3. 创建专门的PJAX模板，与The Loop挂钩以呈现内容，例如:

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

  4. 如果有必要，您的客户端JavaScript将不得不更新父，动态内容div的非动态节点(例如;#wrapper, body等)响应PJAX加载，所以一切看起来都是正确的(例如。添加/删除CSS类)

  5. 为了方便这一点，你必须发出某种类型的指示器(即。在你的PHP模板

不错的插件。主题的用法示例(以Twenty Fifteen为例):

<标题> 1。自定义模板页

在主题内创建文件 page-pjax.php
在admin，创建一个页面并使用这个模板。它只是显示存档链接，并在它们周围显示一个span。

<?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。指出h1> anchor是存档链接和具有ID #recent-posts-2的小部件Recent Posts。为这个测试删除它，或者根据需要添加另一个链接容器。

TARGET在模板上是硬编码的。

选项，片段是必不可少的，因为pjax不加载完整的HTML页面，我们必须告诉它我们想要的目标页面的哪一部分。
在2015，内容在这个div: <main id="main" class="site-main" role="main">中。根据使用的主题进行调整。
参见pjax注释:https://github.com/defunkt/jquery-pjax#response-types-that-force-a-reload

相关文章：