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

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

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

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

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

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

Только для записи: когда почтовый идентификатор не загрузился, я попытался установить эту тему Kubrick, используемую в демо-версии Emanuele Feronato, и внес необходимые изменения в соответствии с его руководством, но ничего не получилось.

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

Ответ 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 ссылки из post ID, чтобы отправить постоянную ссылку

Я решил, что, поскольку идентификатор сообщения явно не работает, я вместо этого использовал бы тег постоянной ссылки в атрибуте rel 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() function URL/value

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

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

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

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

Ответ 1

Ответ 2