Tải nội dung bài Wordpress vào DIV bằng cách sử dụng AJAX

Question

Tôi đã đăng câu hỏi cách đây vài ngày về cách Scroll to Single Post trong mẫu Wordpress tùy chỉnh mà tôi đang phát triển. Những gì tôi cần trong vỏ hạt là tải một bài đăng duy nhất vào một DIV được xác định khi một liên kết cụ thể được nhấp và sau đó cuộn xuống DIV đó để giữ nội dung mới tải. Xem xét bản chất nội dung động của Wordpress hoặc của bất kỳ CMS nào khác, URL của liên kết đó không thể là một liên kết tuyệt đối.

Thật không may, không có bất kỳ câu trả lời cụ thể nào vào thời điểm đó, vì vậy tôi quyết định tìm hiểu thêm một chút. Và vì vấn đề chính là tải nội dung theo cách động, tôi quyết định phóng to cách tôi có thể thực hiện với AJAX trên Wordpress:

Cho đến nay, tôi đã có một ý tưởng nhỏ từ một bài đăng tuyệt vời (Loading WordPress posts with Ajax and jQuery) của Emanuele Feronato. Về cơ bản, anh ta lưu trữ ID bài đăng trong thuộc tính rel của liên kết có thể nhấp và sau đó gọi nó. Vâng, có một vài bước khác để thực hiện công việc này, nhưng lý do tôi chỉ đề cập đến ID bài đăng ngay bây giờ là vì có vẻ như đó là phần duy nhất của phương trình không đúng; ID bài đăng tải vào thuộc tính rel của liên kết nhưng không tải được vào hàm .load.

Chỉ cần để cung cấp cho bạn một ý tưởng tốt hơn về những gì tôi đã nhận được trong đánh dấu của tôi cho đến nay:

THE AJAX/jQuery trong header.php

$(document).ready(function(){ 

    $.ajaxSetup({cache:false}); 
    $(".trick").click(function(){ 
     var post_id = $(this).attr("rel"); 
     $("#single-home-container").html("loading..."); 
     $("#single-home-container").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id}); 
    return false; 
    }); 

}); 

index.php

<?php get_header();?> 

<!--home--> 
<div id="home"> 

<!--home-bg--> 
<img class="home-bg" src="<?php bloginfo('template_url');?>/images/home-bg.jpg" /> 
<!--home-bg--> 

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 

    <a class="trick" rel="<?php the_ID(); ?>" href="<?php the_permalink();?>"> 

     <div class="box element col<?php echo rand(2,4); ?>" id="<?php $category = get_the_category(); echo $category[0]->cat_name; ?>">    

      <?php the_post_thumbnail(); ?> 

      <span class="title"><?php the_title(); ?></span>  

      <span class="ex"><?php the_excerpt(); ?></span> 

     </div> 

    </a> 

    <?php endwhile; endif; ?> 

</div> 
<!--home--> 

<div id="single-home-container"></div> 

SI NGLE-HOME.PHP (đây là một mẫu CUSTOM)

<?php 

    /* 
    Template Name: single-home 
    */ 

?>  

<?php 

    $post = get_post($_POST['id']); 

?> 

    <!--single-home--> 
    <div id="single-home post-<?php the_ID(); ?>"> 

    <!--single-home-bg--> 
    <div class="single-home-bg"> 

    </div> 
    <!--single-home-bg--> 

    <?php while (have_posts()) : the_post(); ?> 

     <!--sh-image--> 
     <div class="sh-image"> 

      <?php the_post_thumbnail(); ?> 

     </div> 
     <!--sh-image--> 

     <!--sh-post--> 
     <div class="sh-post"> 

      <!--sh-cat-date--> 
      <div class="sh-cat-date"> 

       <?php 

        $category = get_the_category(); 
        echo $category[0]->cat_name; 

       ?> 

       - <?php the_time('l, F jS, Y') ?> 

      </div> 
      <!--sh-cat-date--> 

      <!--sh-title--> 
      <div class="sh-title"> 

       <?php the_title();?> 

      </div> 
      <!--sh-title--> 

      <!--sh-excerpt--> 
      <div class="sh-excerpt"> 

       <?php the_excerpt();?> 

      </div> 
      <!--sh-excerpt--> 

      <!--sh-content--> 
      <div class="sh-content"> 

       <?php the_content();?> 

      </div> 
      <!--sh-content--> 

    </div> 
    <!--sh-post-->   

    <?php endwhile;?> 

    <div class="clearfix"></div>  

    </div> 
    <!--single-home--> 

Chỉ cần cho các hồ sơ: Khi bài ID không tải, tôi đã cố gắng cài đặt mà chủ đề Kubrick đặc biệt được sử dụng trong bản demo Emanuele Feronato và đưa ra những thay đổi cần thiết theo hướng dẫn của mình nhưng không có gì làm việc.

Có ai có bất kỳ ý tưởng gì đang xảy ra hoặc nếu có cách nào khác để tự động tải ID bài đăng vào hàm .load?

Answer 1

Vâng, bởi một cơn đột quỵ của may mắn và một số cà phê với thuốc lá, tôi quản lý để giải quyết vấn đề:

Dưới đây là những gì tôi đã làm:

1. Kiểm tra xem bài ID được chụp trong các thuộc tính rel và được tải đúng cách trong biến post_id

Tôi đã chèn một cuộc gọi cảnh báo trở lại đoạn mã AJAX/JQUERY để xem liệu ID bài đăng có được tải ngay vào biến post_id hay không. Đây là hình thức của nó:

$(document).ready(function(){ 

    $.ajaxSetup({cache:false}); 
    $(".trick").click(function(){ 
     var post_id = $(this).attr("rel"); 
     alert(post_id); 
     $("#single-home-container").html("loading..."); 
     $("#single-home-container").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id}); 
    return false; 
    }); 

}); 

Vì vậy, khi tôi nhấp vào liên kết, cuộc gọi lại cung cấp ID bài chính xác được liên kết với bài đăng. Loại này đã phân tách vấn đề ngay xuống URL được định nghĩa trong hàm .load(). Dường như ID bài đăng không đủ để tải bài đăng vào DIV đã xác định.

2.Thay đổi thuộc tính rel của liên kết từ ID bài đăng để đăng permalink

Tôi quyết định rằng vì ID bài đăng rõ ràng là không hoạt động, thay vào đó tôi sẽ sử dụng thẻ permalink của bài đăng trong thuộc tính rel của liên kết. Đây là cách nó rel liên kết của trông giống như trước đây:

<a class="trick" rel="<?php the_ID(); ?>" href="<?php the_permalink();?>"></a> 

Và đây là cách có vẻ như bây giờ:

<a class="trick" rel="<?php the_permalink ?>" href="<?php the_permalink();?>"></a> 

3. Sửa .load() chức năng URL/giá trị

Sau đó, tôi phải thay đổi đoạn mã AJAX/JQUERY để nó không sử dụng ID bài đăng nữa:

$(document).ready(function(){ 

     $.ajaxSetup({cache:false}); 
     $(".trick").click(function(){ 
      var post_link = $(this).attr("rel"); 
      $("#single-home-container").html("loading..."); 
      $("#single-home-container").load(post_link); 
     return false; 
     }); 

    }); 

Như bạn có thể thấy từ bên trên, tôi đã lấy giá trị thuộc tính rel của liên kết (hiện giờ là liên kết cố định của bài đăng) và đưa nó vào biến post_link. Điều này cho phép tôi chỉ cần lấy biến đó và đặt nó vào hàm .load(), thay thế http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id} mà rõ ràng là không hoạt động.

VOILA! Đã giải quyết được sự cố.

Mặc dù tôi chưa thử nghiệm điều này, tôi tin rằng việc sử dụng liên kết cố định trong trường hợp này thực sự làm giảm nhu cầu thay đổi cấu trúc liên kết cố định trong Wordpress theo hướng dẫn của Emanuele Feronato trong số post.

Vì vậy, nếu có ai có ý định tải động các bài đăng Wordpress vào một DIV đã xác định, bạn có thể thử điều này!

Answer 2

Thay vì sử dụng:

var post_id = $(this).attr("rel"); 

bạn nên trực tiếp lấy href. Cả hai đều giống nhau.

var post_id = $(this).attr("href"); 

này giúp với 2 điều:

1. Ít đánh dấu trong HTML của bạn
2. Bạn hãy tránh xa cách sử dụng rel như một thuộc tính dữ liệu, mà không phải là một lựa chọn rất khôn ngoan hiện nay với HTML5. (read here)