AJAXing пользовательская тема WordPress
Я пытаюсь создать собственную тему для блога моей девушки по кулинарии и выпечке. Я хотел бы сделать так, чтобы при нажатии ссылки на миниатюру поста в блоге страницы не обновлялись. Вместо этого я хочу, чтобы содержимое сообщения в блоге динамически загружалось с помощью ajax в статью с id="main-content" внутри home.php, и я также хотел бы включить глубокую ссылку на отдельные сообщения. Вот как будет выглядеть сайт (все еще не завершено): http://natalija.co.nf/ каждой категории есть слайдер, внутри которого будут отображаться 3 миниатюрные ссылки на сообщения, а также раздел со статьей, внутри которой находятся сообщения. Если загрузка будет отображаться в нижней части страницы, непосредственно перед нижним колонтитулом. Вот код для моих страниц home.php и single.php:
home.php
<?php get_header(); ?>
<?php
$args = array(
'orderby' => 'id',
'order' => 'ASC',
'hide_empty' => '0',
'exclude' => '1'
);
$categories = get_categories($args);
foreach($categories as $category) {
?>
<section id="<?php echo $category->slug; ?>" data-stellar-background-ratio="0.5">
<article class="<?php echo $category->slug; ?>" data-stellar-ratio="1.5">
<h1><?php echo $category->name; ?></h1>
<div class="wrapper">
<ul class="slider">
<?php
$args = array (
'post_status' => 'publish',
'category_name' => $category->slug,
'nopaging' => true,
);
$custom_query = new WP_Query( $args );
if ( $custom_query->have_posts() ) {
while ( $custom_query->have_posts() ) {
$custom_query->the_post();
// begin your slider loops in here
?>
<li class="slide">
<a href="<?php echo get_permalink(); ?>">
<?php the_post_thumbnail(); ?>
<div class="bubble">
<h5><?php echo get_the_title(); ?></h5>
</div>
</a>
</li>
<?php } // end $custom_query loop
} else {
// no posts found
}
// reset the postdata
wp_reset_postdata();
?>
</ul>
<img class="previous" src="wp-content/themes/Natalija/images/arrow-transparent.png" alt="random" data-stellar-ratio="1.7">
<img class="next" src="wp-content/themes/Natalija/images/arrow-transparent.png" alt="random" data-stellar-ratio="1.7">
</div>
</article>
</section>
<?php
} // end $categories loop
?>
<section>
<article id="main-content">
</article>
</section>
<?php get_footer(); ?>
single.php
<div class="post-wrap">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h1><?php the_title(); ?></h1>
<?php include (TEMPLATEPATH . '/inc/meta.php' ); ?>
<div class="entry">
<?php the_content(); ?>
<?php wp_link_pages(array('before' => 'Pages: ', 'next_or_number' => 'number')); ?>
<?php the_tags( 'Tags: ', ', ', ''); ?>
</div>
<?php edit_post_link('Edit this entry','','.'); ?>
</div>
<?php comments_template(); ?>
<?php endwhile; endif; ?>
</div>
Я попытался следовать нескольким онлайн-учебникам по ajax, но я просто не мог справиться с этим. Кто-нибудь может мне помочь с этим?