Несколько дней назад я опубликовал вопрос о том, как прокручиваться до отдельной публикации в пользовательском шаблоне WordPress, который я разрабатываю. То, что мне нужно в оболочке ореха, – это загрузить отдельную запись в определенный DIV, когда нажимается конкретная ссылка, а затем прокручивается вниз до этого DIV, содержащего только что загруженный контент. Учитывая динамический характер контента WordPress или любого другого CMS, URL-адрес этой ссылки не может быть абсолютным.
К сожалению, в тот момент времени не было никакого конкретного ответа, поэтому я решил немного пощупать. И поскольку основная проблема заключалась в том, чтобы динамически загружать контент, я решил увеличить масштаб работы с AJAX на WordPress:
До сих пор я получил небольшую идею из большой публикации ( загрузка сообщений WordPress с помощью Ajax и jQuery ) Эмануэле Феронато. Он в основном сохраняет идентификатор сообщения в атрибуте rel кликаемой ссылки, а затем вызывает его. Ну, есть еще несколько шагов, чтобы сделать эту работу, но причина, по которой я сейчас упоминаю только идентификатор сообщения, состоит в том, что кажется, что это единственная часть уравнения, которая неправильна; идентификатор post загружается в атрибут 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-->
Только для записи: когда идентификатор сообщения не загрузился, я попытался установить эту тему Kubrick, использованную в демо-версии Emanuele Feronato, и внес необходимые изменения в соответствии с его руководством, но ничего не получилось.
Кто-нибудь знает, что происходит, или есть ли другой способ динамически загружать идентификатор сообщения в функцию .load?
Ну, с удачей и кофе с сигаретами мне удалось решить проблему:
Вот что я сделал:
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 link из post ID, чтобы опубликовать постоянную ссылку
Я решил, что, поскольку идентификатор сообщения явно не работает, я вместо этого использовал бы тег permalink post в атрибуте 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} http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id} который, очевидно, не работает.
VOILA! Задача решена.
Хотя мне еще предстоит проверить это, я считаю, что использование постоянной ссылки в этом случае фактически исключает необходимость изменения структуры permalink в WordPress, как указано Эмануэле Феронато в его сообщении .
Поэтому, если у кого есть намерение динамически загружать сообщения WordPress в определенный DIV, вы, вероятно, можете попробовать это!
Вместо того, чтобы использовать:
var post_id = $(this).attr("rel");
вы должны непосредственно получить href. Они оба одинаковые.
var post_id = $(this).attr("href");
Это помогает с двумя вещами: