Загружайте содержимое Wordpress в DIV с помощью AJAX

Question

Пару дней назад я опубликовал вопрос о том, как Выделить одну запись в пользовательском шаблоне Wordpress, который я разрабатываю.В скорлупе Nut мне нужно загрузить один пост в определенный DIV при нажатии на конкретную ссылку, а затем прокрутить вниз до этого DIV, содержащего только что загруженный контент.Учитывая динамический контент Wordpress или любой другой CMS, URL этой ссылки не может быть абсолютным.

К сожалению, в тот момент не было никакого конкретного ответа, поэтому я решилнемного присмотреться.И так как основной проблемой была динамическая загрузка контента, я решил увеличить, как я могу сделать это с AJAX на Wordpress:

Пока что я получил небольшую идею из отличного поста ( Загрузка сообщений WordPress с помощью Ajax и jQuery ) Эмануэле Феронато.Он в основном сохраняет идентификатор сообщения в атрибуте rel кликабельной ссылки, а затем вызывает его.Ну, есть несколько других шагов, чтобы сделать эту работу, но причина, по которой я сейчас упоминаю только идентификатор сообщения, состоит в том, что кажется, что это единственная часть уравнения, которая не верна;идентификатор записи загружается в атрибут rel ссылки, но не загружается в функцию .load.

Просто чтобы дать вам лучшее представление о том, что я получил в своей разметке:

AJAX / JQUERY IN 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>

SINGLE-HOME.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-->

Только для записи: Когда не удалось загрузить идентификатор сообщения, я попытался установить эту конкретную тему Кубрика, использованную в демонстрации Эмануэле Феронато, и внес необходимые изменения в соответствии сего руководство, но ничего не помогло.

Кто-нибудь знает, что происходит, или есть ли другой способ динамически загрузить идентификатор сообщения в функцию .load?

Answer 1

Ну, благодаря удаче и кофе с сигаретами мне удалось решить проблему:

Вот что я сделал:

1. Проверьте, зафиксирован ли идентификатор записи в атрибуте rel и правильно ли он загружен в переменную post_id

Я вставил предупреждающий обратный вызов во фрагмент AJAX / JQUERY, чтобы посмотреть, загружался ли даже идентификатор записи в переменную 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;
    });

});

Поэтому, когда я нажал на ссылку, при обратном звонке был указан точный идентификатор сообщения, связанного с сообщением. Это как бы изолировало проблему вплоть до URL, определенного в функции .load (). Казалось, что идентификатора сообщения было недостаточно для загрузки сообщения в определенный DIV.

2. Изменить атрибут rel ссылки с идентификатора сообщения на постоянную ссылку сообщения

Я решил, что, поскольку идентификатор сообщения явно не работает, я вместо этого использовал бы постоянную ссылку на сообщение в атрибуте 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, чтобы он больше не использовал идентификатор записи:

$(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 ссылки (которое теперь является постоянной ссылкой сообщения) и бросил его в переменную post_link. Это позволяет мне просто взять эту переменную и поместить ее в функцию .load (), заменив http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id}, который явно не работал.

VOILA! Проблема решена.

Хотя мне еще предстоит проверить это, я считаю, что использование постоянной ссылки в этом случае фактически исключает необходимость изменения структуры постоянной ссылки в Wordpress, как это указывал Эмануэле Феронато в своем посте .

Так что, если у кого-то есть намерение динамически загружать записи Wordpress в определенный DIV, вы, вероятно, можете попробовать это!

Answer 2

Вместо использования:

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

вы должны непосредственно получить href.Они оба одинаковы.

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

Это помогает с двумя вещами:

1. Меньше разметки в вашем HTML
2. Вы не используете rel какАтрибут data, который в настоящее время не очень разумный выбор для HTML5.( читайте здесь )