AJAX를 사용하여 DIV에 Wordpress 게시물 로드

AJAX를 사용하여 DIV에 Wordpress 게시물 로드

며칠 전 개발 중인 커스텀 워드프레스 템플릿에서 싱글 포스트로 스크롤하는 방법에 대한 질문을 올렸습니다.너트 셸에서 필요한 것은 특정 링크를 클릭했을 때 정의된 DIV에 1개의 포스트를 로드한 후 새로 로드된 콘텐츠를 보유하고 있는 DIV까지 스크롤 다운하는 것입니다.Wordpress 또는 다른 CMS의 동적 콘텐츠 특성을 고려할 때 해당 링크의 URL은 절대적인 것이 될 수 없습니다.

아쉽게도 그 시점에서는 구체적인 답변이 없었기 때문에 조금 기웃거리기로 했습니다.그리고 주요 문제는 콘텐츠를 동적으로 로딩하는 것이었기 때문에, Wordpress에서 AJAX를 사용하는 방법을 확대하기로 결정했습니다.

지금까지 Emanuele Feronato의 훌륭한 투고(Ajax와 jQuery로 WordPress 투고를 로드한다)에서 약간의 아이디어를 얻었습니다.기본적으로 Post ID를 클릭 가능한 링크의 rel 속성에 저장한 후 호출합니다.이 작업을 수행하기 위한 몇 가지 다른 단계가 있지만, 여기서 Post ID만 언급하는 이유는 Post ID가 유일하게 잘못된 것 같기 때문입니다.Post ID는 링크의 Rel 속성에 로드되지만 .load 함수에 로드되지 않습니다.

지금까지의 마크 업에 대해 좀 더 알기 쉽게 설명하겠습니다.

헤더의 AJAX/JQUERYPHP

$(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;
    });

});

인덱스.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>

싱글 홈PHP(커스텀 템플릿)

<?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-->

참고로:POST ID가 로드되지 않았을 때, Emanuele Feronato의 데모에 사용된 특정 Kubrick 테마를 설치하고 그의 가이드에 따라 필요한 변경을 시도했지만 아무런 효과가 없었습니다.

무슨 일이 일어나고 있는지, 게시 ID를 .load 함수에 동적으로 로드할 수 있는 다른 방법이 있는지 알고 있는 사람이 있습니까?

음, 운이 좋았고 담배가 든 커피를 마셔서 그 문제를 해결할 수 있었어요.

제가 한 일은 다음과 같습니다.

1. post ID가 rel 속성으로 캡처되어 post_id 변수에 올바르게 로드되었는지 테스트합니다.

AJAX/JQUERY 스니펫에 경보콜백을 삽입하여 포스트 ID가 post_id 변수 우측에 로드되어 있는지 확인했습니다.다음과 같이 되어 있습니다.

$(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;
    });

});

그래서 링크를 클릭했을 때 콜백은 투고와 관련된 정확한 투고 ID를 알려줬습니다.이로 인해 .load() 함수에 정의된 URL까지 문제가 특정되었습니다.포스트 ID가 정의된 DIV에 포스트를 로드하기에 충분하지 않은 것 같습니다.

2. 링크의 rel 속성을 post ID에서 post permalink로 변경합니다.

Post ID가 확실히 기능하지 않기 때문에 대신 링크의 Rel 속성에 있는 Post의 permalink 태그를 사용하기로 결정했습니다.링크의 rel은 다음과 같습니다.

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

현재 상황은 다음과 같습니다.

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

3. .load() 함수의 URL/값을 편집합니다.

그 후 AJAX/JQUERY 스니펫을 변경하여 포스트 ID를 사용하지 않도록 했습니다.

$(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;
        });

    });

위에서 알 수 있듯이 링크의 rel 속성값(현재는 포스트의 permalink)을 post_link 변수에 입력했습니다.를 통해 를 .하고 .load()를 대체할 수 .http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id}츠키노

VOILA! 문제가 해결됐어.

아직 테스트하지 않았지만, 이 경우 Permalink를 사용하면 Emanuele Feronato가 게시한 Wordpress의 Permalink 구조를 변경할 필요가 없다고 생각합니다.

Wordpress 투고를 정의된 DIV에 동적으로 로드하려는 사용자가 있다면 이 기능을 사용해 보십시오.

사용하는 대신:

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

href를 직접 가져와야 합니다.둘 다 똑같아요.

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

이것은, 다음의 2개의 점에 도움이 됩니다.

1. HTML 마크업 감소
2. 데이터 속성으로서 rel을 사용하는 것은 피하고 있습니다.이것은 HTML5에서는 현재 그다지 현명한 선택이 아닙니다.(여기를 참조해 주세요.)

언급URL : https://stackoverflow.com/questions/7526113/load-wordpress-post-content-into-div-using-ajax