在 WordPress 中使用 PJAX

发布于 2024-11-30 10:51:03 字数 509 浏览 6 评论 0原文

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

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

我只是遵循他们在 PJAX 演示页面上提供的演示，但将他们使用的容器 (#main) 替换为一个是我的 WordPress 主题，它是#middlewrap。

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

原文

I'm trying to integrate PJAX into my Wordpress install, and here's the code I am using for it:

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

I am just following the demo they have on the PJAX demo page, but replacing the container they used (#main) with the one for my Wordpress theme, which was #middlewrap.

I don't see any weird errors on the console, but it doesn't work either. Appreciate any help!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

趁年轻赶紧闹 2024-12-07 10:51:03

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

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

回复收藏 0 原文

微凉徒眸意 2024-12-07 10:51:03

下载用于 WordPress 的 pjax 菜单插件。
您下载的存档将有一个名为 nikolas-pjax-menu-XXXXXXX 的文件夹，将该文件夹复制到您的 WordPress 应用程序的插件文件夹中
<块引用>
/your-wordpress-app-root/wp-content/plugins/
例如，将其重命名为pjax-menu。
从 WordPress 仪表板的插件菜单激活插件。
编辑 JavaScript 文件
<块引用>
/your-wordpress-app-root/wp-content/plugins/pjax-menu/pjax_menu.js
以容纳您的链接（例如：'#access .menu a'）和内容主容器（'#main'）。

我在 WordPress 的 211 主题 v1.2 上使用了以下代码：

var $j = jQuery;
$j(文档).ready
（
    功能（）
    {
        $j('#access .menu a').pjax('#main').live
        （
           '点击'，
            功能（）
            {
            }
        ）；
    }
）；

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

Download pjax menu plugin for wordpress.
The archive you download will have a folder named nikolas-pjax-menu-XXXXXXX, copy that folder to your wordpress application's plugins folder
/your-wordpress-app-root/wp-content/plugins/
while renaming it to pjax-menu for example.
Activate the plugin from the Plugins menu in your WordPress Dashboard.
Edit the javascript file
/your-wordpress-app-root/wp-content/plugins/pjax-menu/pjax_menu.js
to accommodate your links (for example: '#access .menu a') and content main container ('#main').

I used the following code on WordPress' Twenty Eleven theme v1.2:

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

Now when you see it works on a familiar theme, modify it to fit your needs

回复收藏 0 原文

伊面 2024-12-07 10:51:03

我研究了多种方法，但找不到一种足够简单或灵活的方法，足以使其适合布局适度变化的 WordPress 主题。

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

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

回复收藏 0 原文

如若梦似彩虹 2024-12-07 10:51:03

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

PJAX 化 WordPress 的困难在于布局和内容必须看起来相同，无论静态或 AJAX 负载如何。我采用了广泛使用的Thematic主题框架（结构定义良好，可扩展性强）并将其扩展为支持PJAX：< a href="http://fredrickgaloso.me/projects/thematic-pjax/" rel="nofollow">Thematic PJAX

同样，如果您想使用与 PJAX 不同的主题，我已经发布了代码开源作为参考（github.com/wayoutmind/thematic-pjax），以及将应用以下技术：

识别要在整个 WordPress 站点中使用的布局（即模板）
仅提取要在动态 div 中显示的必要元素（帖子、侧边栏等）
创建挂钩的专用 PJAX 模板<一href="http://codex.wordpress.org/The_Loop" rel="nofollow">循环渲染内容，例如：
```
// 模板初始化后加载，这样我们就可以使用小部件和侧边栏
add_filter('get_header', 'myPJAXTemplate');
```
如有必要，您的客户端 JavaScript 必须更新动态内容的父非动态节点 div（例如#wrapper、body等）以响应PJAX加载，以便一切看起来都正确（例如添加/删除 CSS 类）
为了实现这一点，您那么就会必须发出某种类型的指示器（即PHP 模板中的自定义 X-Headers）

PJAX menu is a great conceptual starting point, but you still have to manually define the layout(s) (within the scope of your dynamic content div) for each page type you are trying to support PJAX.

The difficulty in PJAXifying WordPress is that layouts and content must look the same, regardless of static or AJAX loads. I took the widely used Thematic theme framework (well defined structure, highly extensible) and extended it to support PJAX: Thematic PJAX

Similarly, if you wish to use a different theme to PJAX, I've released the code open source as a reference (github.com/wayoutmind/thematic-pjax), and the following techniques would apply:

Identify layout(s) (ie. Template) to be used throughout WordPress site
Extract only the necessary elements (post, sidebar, etc) to be displayed within your dynamic div

Create specialized PJAX templates that hook into The Loop to render content, for example:

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

If necessary, your client side JavaScript will have to update parent, non-dynamic nodes of your dynamic content div (eg. #wrapper, body, etc) in response to PJAX loads so everything looks right (eg. adding/removing CSS classes)
To facilitate this, you'll then have to emit some type of indicator (ie. custom X-Headers) in your PHP template

回复收藏 0 原文

可可 2024-12-07 10:51:03

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

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'})
});

加载 jQuery、pjax 和我们的自定义脚本

3.在 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 的最近帖子小部件。在此测试中删除它或根据需要添加另一个链接容器。

TARGET 是硬编码在模板上的。

选项，该片段至关重要，因为 pjax 不会加载完整的 HTML 页面，我们必须告诉它我们想要目标页面的哪一部分。
在 25 号，内容位于此 div 内：

。根据使用的主题进行调整。
_{参见 pjax 注释：https: //github.com/defunkt/jquery-pjax#response-types-that-force-a-reload}

Nice plugin. Usage example on a theme (tried with Twenty Fifteen):

1. Custom Template page

Create the file page-pjax.php inside the theme.
At admin, create a page and use this template. It simply displays archive links with a span around them.

<?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. Add pjax plugin and a custom script

Inside the folder /js on the theme add jquery.pjax.js and the following script my-pjax.js.

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

3. Load jQuery, pjax and our custom script

In functions.php. Loads only on the template page.

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. NOTES

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

ANCHORS are the archive links and the widget Recent Posts that has the ID #recent-posts-2. Remove it for this test or add another links container as desired.

TARGET is hardcoded on the template.

OPTIONS, the fragment is essential as pjax doesn't load full HTML pages, we have to tell it which part of the target page we want.
On Twenty Fifteen, the content is inside this div: <main id="main" class="site-main" role="main">. Adjust according to theme used.
_{See pjax notes: https://github.com/defunkt/jquery-pjax#response-types-that-force-a-reload}

回复收藏 0 原文

~没有更多了~