Уроки по программированию

Подгрузка контента (кнопка показать еще) wordpress(ajax)

Один из заказчиков попросил меня сделать на сайте динамическую подгрузку контента(постов, записей) или под другому «кнопка показать еще». Дизайн с таким решением становится очень популярным. Подобный прием можно увидеть в твиттере, вконтакте. Для wordpressa к сожалению плагинов способных решить эту задачу очень мало, я нашел только один плагин, но он мне не очень понравился поэтому  я продолжил искать решение. И наткнулся на тему sight, там для создания динамической подгрузки постов используется библиотека jquery.

Для создания динамической подгрузки контента нам понадобится два файла: jquery.cookie , script

Файлы jquery.cookie , script надо будет загрузить в папку js которая находится в папке с вашим шаблоном если такой папки нет, то ее нужно создать. Далее необходимо в файле header.php прописать пути к скриптам.

//поместить между тегами <head></head>
<?
wp_enqueue_script('cookie', get_template_directory_uri() . '/js/jquery.cookie.js', 'jquery', false);
wp_enqueue_script('script', get_template_directory_uri() . '/js/script.js', 'jquery', false);
?>

После того как вы прописали пути к скриптам надо не много подправить файл index.php или любой другой файл, где вы планируете сделать динамическую подгрузку постов. Необходимо добавить id = «loop» в контейнере постов,class = «post» в блоке вывода поста, id = «pagination» в том месте где вы хотите разместить кнопку «Показать еще». Код должен выглядеть примерно вот так:

<div id="loop">
	<?php while(have_posts()) : the_post(); ?>
		<div class="post">
			****
			<?php the_excerpt(); ?>	
			****
		</div>	
	<?php endwhile; ?>
	<div id="pagination"><?php next_posts_link(__('Показать еще')); ?></div>
</div>

Результат работы:

load-posts

Для работы скрипта необходима библиотека jquery библиотеку можно подключить так

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>

Шаблон для тестирования подгрузки контента Скачать

Для того чтобы протестировать подгрузку нужно скачать шаблон закачать в папку wordpress с шаблонами затем выбрать в панели администратора шаблон с названием test

Комментарии к статье

    ValueError thrown

    Unknown format specifier "a"