Sử dụng PJAX trong Wordpress

Question

Tôi đang cố gắng để tích hợp PJAX vào Wordpress của tôi cài đặt, và đây là đoạn code tôi đang sử dụng cho nó:

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

Tôi chỉ sau bản demo họ có trên PJAX demo page, nhưng thay thế các container họ sử dụng (#main) với một cho chủ đề Wordpress của tôi, đó là #middlewrap.

Tôi không thấy bất kỳ lỗi lạ nào trên bảng điều khiển, nhưng nó cũng không hoạt động. Đánh giá cao sự giúp đỡ nào!

Answer 1

xem ở đây: https://github.com/nikolas/pjax-menu hy vọng nó sẽ giúp :)

EDIT: http://wordpress.org/extend/plugins/pjax-menu/

Answer 2

1. Tải pjax menu plugin for wordpress.

2. Lưu trữ mà bạn tải về sẽ có một thư mục có tên Nikolas-pjax-menu-XXXXXXX, sao chép thư mục đó vào thư mục plugins ứng dụng wordpress của bạn

   /bạn-wordpress-app-root/wp-content/plugins/

   trong khi đổi tên thành pjax-menu chẳng hạn.

3. Kích hoạt plugin từ trình đơn Plugin trong Trang tổng quan WordPress của bạn.

4. Chỉnh sửa các tập tin javascript

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

   để chứa các liên kết của bạn (ví dụ : '#access .menu a') và thùng chứa chính nội dung ('#main').

5. tôi đã sử dụng đoạn mã sau vào WordPress' Hai mươi Eleven chủ đề v1.2:

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

6. Bây giờ khi bạn nhìn thấy nó hoạt động trên một chủ đề quen thuộc, sửa đổi nó để phù hợp với nhu cầu của bạn

Answer 3

PJAX menu là điểm bắt đầu khái niệm tuyệt vời, nhưng bạn vẫn phải xác định bố cục theo cách thủ công (trong phạm vi nội dung động div) cho từng loại trang bạn đang cố gắng hỗ trợ PJAX.

Khó khăn trong PJAXifying WordPress là bố cục và nội dung phải giống nhau, bất kể tải tĩnh hoặc AJAX.Tôi đã sử dụng rộng rãi Thematic theme framework (cấu trúc được xác định rõ ràng, có khả năng mở rộng cao) và mở rộng nó để hỗ trợ PJAX: Thematic PJAX

Tương tự, nếu bạn muốn sử dụng một chủ đề khác cho PJAX, tôi đã phát hành mã nguồn mở làm tham chiếu (github.com/wayoutmind/thematic-pjax), và các kỹ thuật sau đây sẽ được áp dụng:

1. Xác định bố cục (s) (. tức là Template) được sử dụng trong suốt WordPress site
2. Extract chỉ các yếu tố cần thiết (bưu điện, sidebar, vv) để được được hiển thị trong div động của bạn

3. Tạo mẫu PJAX chuyên ngành mà móc vào The Loop để render nội dung, ví dụ:

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

4. Nếu cần thiết, phía khách hàng JavaScript sẽ phải update parent, non-dynamic nodes of your dynamic content div (ví dụ. #wrapper, body, v.v.) để đáp ứng với tải PJAX để mọi thứ có vẻ đúng (ví dụ: thêm/xóa lớp CSS)

5. Để tạo điều kiện này, bạn sẽ phải emit some type of indicator (ví dụ: X-Header) trong PHP của bạn mẫu

Answer 4

Tôi đã xem xét một số cách tiếp cận và không thể tìm thấy một cách đơn giản hoặc linh hoạt để làm cho nó trở nên thực tế cho một chủ đề WordPress với sự đa dạng vừa phải trong bố cục.

Tôi kết hợp các plugin jquery djax chỉ cho mục đích này, cho phép tôi chỉ định yếu tố nào trên trang để tải động bằng cách chỉ định cho chúng một lớp nhất định. Nó sẽ mặc định để ajaxifying tất cả các liên kết nội bộ, và chấp nhận một mảng các đoạn url để loại trừ như là một tham số. Tất nhiên nó sử dụng pushstate để duy trì lịch sử trình duyệt và giảm xuống một cách duyên dáng nếu API lịch sử không có sẵn. Có một ví dụ về cài đặt WordPress được giải phóng bằng cách sử dụng chủ đề WordPress Bones trong phần Live Examples của liên kết ở trên.

Chủ đề đó mất khoảng 30 lines of code sửa đổi để ajaxify với djax. Hãy xem liên kết đầu tiên cho tài liệu và liên kết tải xuống.

Answer 5

Plugin hay. Cách sử dụng ví dụ về một chủ đề (thử với Hai mươi mười lăm):

1. Mẫu Tùy chỉnh trang

Tạo file page-pjax.php bên trong chủ đề.
Tại quản trị viên, tạo trang và sử dụng mẫu này. Nó chỉ hiển thị các liên kết lưu trữ với một khoảng xung quanh chúng.

<?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. Thêm pjax plugin và một kịch bản tùy chỉnh

Bên trong thư mục /js trên theme thêm jquery.pjax.js và kịch bản sau đây my-pjax.js.

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

3.Tải jQuery, pjax và tập lệnh tùy chỉnh của chúng tôi

Trong functions.php. Chỉ tải trên trang mẫu.

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. GHI CHÚ

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

neo được lưu trữ liên kết và widget bài viết gần đây có ID #recent-posts-2. Loại bỏ nó cho thử nghiệm này hoặc thêm một container liên kết như mong muốn.

MỤC TIÊU được mã hóa cứng trên mẫu.

TÙY CHỌN, đoạn là điều cần thiết vì pjax không tải các trang HTML đầy đủ, chúng tôi phải cho biết phần nào của trang mục tiêu mà chúng tôi muốn.
Vào hai mươi lăm phút, nội dung nằm trong div này: <main id="main" class="site-main" role="main">. Điều chỉnh theo chủ đề được sử dụng.
_{Xem ghi chú pjax: https://github.com/defunkt/jquery-pjax#response-types-that-force-a-reload}