在WordPress的

Question

使用PJAX

我想PJAX融入我的WordPress安裝，這裏是我使用它的代碼：

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

我只是想他們對PJAX demo page演示，但將他們使用的容器（#main）與我的Wordpress主題之一，這是#middlewrap。

我在控制檯上看不到任何奇怪的錯誤，但它也不起作用。感謝任何幫助！

Answer 1

看這裏：https://github.com/nikolas/pjax-menu希望它能幫助:)

編輯：http://wordpress.org/extend/plugins/pjax-menu/

Answer 2

1. 下載pjax menu plugin for wordpress。

2. 你下載的存檔將有一個文件夾命名爲尼古拉 - pjax菜單-XXXXXXX，將該文件夾複製到你的WordPress應用程序的插件文件夾

   /您 - WordPress的-APP-根/可溼性粉劑內容/ 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的二十十一主題V1.2下面的代碼：

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

6. 現在，當你看到它工作在一個熟悉的主題，對其進行修改以滿足您的需求

Answer 3

PJAX menu是一個很好的概念出發點，但是您仍然必須爲您試圖支持PJAX的每種頁面類型手動定義佈局（在動態內容div的範圍內）。

PJAXifying WordPress的難點在於佈局和內容必須看起來相同，無論靜態或AJAX加載如何。我把廣泛使用的Thematic theme framework（明確的結構，高度可擴展），並擴展它來支持PJAX：Thematic PJAX

同樣，如果你想使用一個不同的主題，以PJAX，我已經發布的代碼開源作爲參考（github.com/wayoutmind/thematic-pjax），並以下技術將適用：

1. 確定佈局（S）（即模板）在整個WordPress站點使用
2. 只提取必要的元素（郵局，側邊欄等）是顯示在你的動態分區內

3. 打造專業化PJAX模板掛鉤到The Loop呈現內容，例如：

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

4. 如果必要的話，你的客戶端的JavaScript將不得不update parent, non-dynamic nodes of your dynamic content格（如（例如，添加/刪除CSS類）

5. 爲了方便這一點，您將不得不在PHP中使用emit some type of indicator（即自定義X標頭）模板

Answer 4

我看了很多方法，找不到一個簡單或足夠靈活的方法，使其在佈局中適用於WordPress主題，甚至適中。

爲了達到這個目的，我整理了一個djax jquery插件，它可以讓我指定頁面上的哪些元素通過分配給他們某個類來動態加載。它將默認對所有內部鏈接進行Ajax化，並接受一個url片段數組作爲參數排除。當然，它使用pushstate來維護瀏覽器歷史記錄，並且如果歷史API不可用，則會優雅地降級。在上面的鏈接的Live Examples部分中，有一個使用WordPress Bones主題進行ajaxified WordPress安裝的示例。

這個主題花了大約30 lines of code用djax修改ajaxify。看看文檔和下載鏈接的第一個鏈接。

Answer 5

不錯的插件。一個主題使用實例（以二十五試過）：

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小部件最近的帖子。將其移除以進行此測試或根據需要添加其他鏈接容器。

TARGET在模板上被硬編碼。

選項，該片段是必不可少的，因爲pjax不會加載完整的HTML頁面，我們必須告訴它我們想要的目標頁面的哪一部分。
在二十五，內容是在這個div：<main id="main" class="site-main" role="main">。根據使用的主題進行調整。
_{見pjax筆記：https://github.com/defunkt/jquery-pjax#response-types-that-force-a-reload}