클릭 시 Ajax를 사용하여 Wordpress Post를 로드하는 방법

클릭 시 Ajax를 사용하여 Wordpress Post를 로드하는 방법

저는 몇 시간 동안 튜토리얼을 읽고 시도했습니다.효과가 있는 솔루션을 찾을 수 없을 것 같고, 매우 간단하다는 것을 알고 있습니다만, AJAX에 고민하고 있습니다.

Div의 링크에서 Post 콘텐츠를 로드하고 싶습니다.제가 가지고 있는 것은 다음과 같습니다.JavaScript 쪽 도와줄 사람 없나요?감사합니다!

<ul>
    <?php query_posts('post_type=artwork&posts_per_page=-1'); ?>
    <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
    <li class="mytab">
      <span>
         <h3><?php the_title(); ?></h3>
         <a href="#"><?php the_post_thumbnail('Project'); ?></a>
      </span>
    </li>
    <?php endwhile; endif; wp_reset_query(); ?>
</ul>

<div id="loadAjaxHere"></div>

이 코드를 div #loadAjaxHere에 로드합니다.

<div class="myArtwork">
   <h2><?php the_title(); ?></h2>
   <div class="text"><?php the_content(); ?></div>
</div>

도와주셔서 감사합니다!!

좋아, 오랜 시행착오 끝에 이 문제를 해결한 것 같아.

이것은 효과가 있는 것 같습니다만, 이것이 올바른 방법이 아닐 경우 알려 주십시오.

Javascript:

jQuery.noConflict();
jQuery(document).ready(function($){
    $.ajaxSetup({cache:false});
    $("a.ajax").click(function(){
        var post_url = $(this).attr("href");
        var post_id = $(this).attr("rel");
        $("#tabs").html('<div class="loading">loading...</div>');
    $("#tabs").load(post_url);
    return false;
    });
});

투고 내용을 표시하는 페이지(「artwork」라고 하는 커스텀 투고 타입을 사용하고 있습니다).

<ul class="container">
  <?php query_posts('post_type=artwork&posts_per_page=-1'); ?>
  <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
  <li class="mytab">
    <h3><?php the_title(); ?></h3>
    <a href="<?php the_permalink(); ?>" rel="<?php the_ID(); ?>" class="ajax"><?php the_post_thumbnail('Project'); ?></a>
  </li>
  <?php endwhile; endif; wp_reset_query(); ?>
</ul>

<!-- LOAD SINGLE POST CONTENT IN #TABS -->
<div id="tabs"></div>

그리고 싱글 포스트 "single-artwork.php".주의: get_header 또는 get_footer 등은 사용하지 마십시오.

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
  <div class="tabcontent" id="tab-<?php the_ID(); ?>">
    <?php the_content(); ?>
  </div>
<?php endwhile; endif; ?>

감사합니다!

덧붙이자면, 1개의 투고 중 일부만 로드하고 싶다면 수정할 수 있습니다.

$("#tabs").load(post_url);

로.

$("#tabs").load(post_url + ".tabcontent" );

div.tabcontent의 모든 것에 로드됩니다.

URL 끝에 css 셀렉터 식을 추가하여 부분 페이지를 로드할 수 있다는 Barry의 답변은 정확합니다. 단, 다음과 같이 URL과 셀렉터 사이에는 공백이 필요합니다.

$("#tabs").load(post_url + " .tabcontent" );

그렇지 않으면 문자열이 에 전달됩니다..load()되지요http://example.com.tabscontent하지만 그래야 한다.http://example.com .tabscontent.

또한 이 방법을 사용하면 jQuery가 내부 코드를 로드하고 실행하는 것을 중지합니다.<script>태그입니다. 단,.load(post_url);셀렉터가 없으면 정상적으로 코드를 로드하여 실행할 수 있습니다.<script>태그를 지정합니다.

자세한 내용은 여기를 참조하십시오.

언급URL : https://stackoverflow.com/questions/15402239/how-to-load-wordpress-post-with-ajax-onclick