7

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

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

我只是关注他们在PJAX 演示页面上的演示，但将他们使用的容器 ( #main) 替换为我的 Wordpress 主题的容器，即#middlewrap.

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

4

5 回答 5

3

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

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

于 2011-08-22T16:26:38.007 回答
2
  1. 下载wordpress 的 pjax 菜单插件。

  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 的 211 主题 v1.2 上使用了以下代码：

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

  6. 现在，当您看到它适用于熟悉的主题时，请对其进行修改以满足您的需求

于 2011-10-13T20:06:29.027 回答
2

我查看了许多解决方法，但找不到一种简单或灵活的方法，以使其对于 WordPress 主题具有现实意义，即使在布局上也有适度的变化。

为了这个目的，我将djax jquery 插件放在一起，它让我可以通过为页面上的哪些元素分配特定的类来指定要动态加载的元素。它将默认对所有内部链接进行 ajaxifying，并接受要排除的 url 片段数组作为参数。当然，它使用 pushstate 来维护浏览器历史记录，如果历史 API 不可用，它会优雅地降级。上面链接的实时示例部分中有一个使用 WordPress Bones 主题的 ajaxified WordPress 安装示例。

该主题需要大约30 行代码修改才能使用 djax 进行 ajaxify。查看文档和下载链接的第一个链接。

于 2012-02-20T05:36:30.210 回答
1

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

PJAXifying WordPress 的困难在于布局和内容必须看起来相同，无论静态或 AJAX 加载如何。我采用了广泛使用的Thematic 主题框架（定义明确的结构，高度可扩展）并将其扩展为支持 PJAX：Thematic PJAX

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

  1. 确定要在整个 WordPress 站点中使用的布局（即模板）
  2. 仅提取要在动态 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 模板中发出某种类型的指标（即自定义 X-Headers）
于 2011-12-19T16:13:37.370 回答
0

不错的插件。一个主题的使用示例（用二十五尝试）：

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 和我们的自定义脚本

在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
);

ANCHORS 是存档链接和具有 ID 的小部件最近的帖子#recent-posts-2。为此测试删除它或根据需要添加另一个链接容器。

TARGET 在模板上是硬编码的。

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

于 2017-05-11T19:09:03.677 回答