Один из заказчиков попросил меня сделать на сайте динамическую подгрузку контента(постов, записей) или под другому «кнопка показать еще». Дизайн с таким решением становится очень популярным. Подобный прием можно увидеть в твиттере, вконтакте. Для 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>
Результат работы:
Для работы скрипта необходима библиотека jquery библиотеку можно подключить так
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
Шаблон для тестирования подгрузки контента Скачать
Для того чтобы протестировать подгрузку нужно скачать шаблон закачать в папку wordpress с шаблонами затем выбрать в панели администратора шаблон с названием test
хорошая статья
Меня просто перенаправляет на следующую страницу и все, никакой динамической подгрузки на той же странице…(:cry:)
Для этого скрипта нужна библиотека jquery можете ее так подключить
Метод .live заменен на .on в поздних версиях jquery.
По этому не работает.
jquery 1.11.2 метод live из скрипта нормально работает
Здравствуйте! Реализация очень понравилась. Попробовал «прикрутить» к выводу комментариев, комментарии выводятся но не сохраняется «дерево», дочерние комментарии (ответы) падают не в родительский li а под него (если нужно могу прикрепить скрин, с наглядным пояснением) .
Спасибо!
Отправьте сюда support@pro-cod.ru я посмотрю если у меня получится, то подскажу
Описание отправил на почту.
Спасибо!
Ответил надеюсь один из ответов поможет.
Добрый день,у меня такой вопрос,почему при нажатии на кнопку загружаются эти же 10 статей которые были изначально показаны? и еще не работает когда выводишь статьи одной категории
А если я вывожу записи в main_page.php посредством:
Должно работать? Просто у меня не работает, направляет на /page/2 это из-за неправильно подключённых скриптов или из-за того, что подключаю не в категории, а в page Как думаете?
Разницы нет где подключать скрипты в категорий или на главной странице. Прочтите внимательнее
Следующий абзац:
Необходимо добавить id = «loop» в контейнере постов,class = «post» в блоке вывода поста, id = «pagination» в том месте где вы хотите разместить кнопку «Показать еще». Код должен выглядеть примерно вот так:
Да я так и пишу, просто элементы вёрстки удалил, чтоб вам пиэйчпи был виднее и понятнее. Ну теперь я сделаю, спасибо! Может конфликт скриптов…
Если не получится пришлите шаблон на почту я посмотрю
Спасибо добрый человек)
Метод просто отличный, работает и с постами и с комментами.
И если в файле скрипт заменять значения на container_masonry и block_masonry все равно не работает
Можно просто создать доп.блоки.
К примеру у вас есть
это будет выглядеть так
Спасибо за скрипт, все работает. Скажите, можно ли поставить какой-либо рисунок на ссылку подгрузки вместо текста «Показать еще»?
Да можно используя css
Спасибо, странно, что сам не догадался. Последний вопрос — можно ли использовать данный скрипт не только с записями, но и с любым другим контентом?
Один из читателей использовал скрипт для вывода комментариев. Так что думаю можно выводить что угодно.
Хорошо, будем пробовать, спасибо!
Показываю изначально 2 записи, всего их 10. Нажимаю загрузить еще — появляется эти же, то есть просто дублируется. В чем может быть причина? Вывел категорию через query_posts в page.php
Возможно, конфликт в query_posts. Рекомендуется после каждого query_posts очищать wp_reset_postdata();
Как регулировать количество изначально выводимых записей?
Через стандартный вывод регулируется через админку wordpress
Это в настройках чтения?
Да
Спасибо!
Это должно быть применимо к специально выделенной странице записей? Но у меня записи выводятся на нескольких страницах. И меняя значение «На страницах блога отображать не более … записей » — у меня вообще ничего не меняется.
можно еще в самом запросе поменять.
З цього великого скрипта script.js потрібен тільки маленький кусочок. jquery.cookie.js також не потрібні
$(‘#pagination a’).live(‘click’, function(e){
e.preventDefault();
$(this).addClass(‘loading’).text(‘LOADING…’);
$.ajax({
type: «GET»,
url: $(this).attr(‘href’) + ‘#loop’,
dataType: «html»,
success: function(out){
result = $(out).find(‘#loop .post’);
nextlink = $(out).find(‘#pagination a’).attr(‘href’);
$(‘#loop’).append(result.fadeIn(300));
$(‘#pagination a’).removeClass(‘loading’).text(‘LOAD MORE’);
if (nextlink != undefined) {
$(‘#pagination a’).attr(‘href’, nextlink);
} else {
$(‘#pagination’).remove();
}
$(‘#loop’).find(‘.post’).removeAttr(‘style’);
}
});
});
jquery.cookie.js
Нужен
Как сделать подгрузку на одной странице..не в рубрике или на главной а именно в самом посте
Добавить цикл с выводом статей на одну страницу
Косячный скрипт
Меня просто перебрасывает на page 2. Что можна зделать?
Скачайте тестовый шаблон и проверьте
Ураа всё получилось. Просто я подключил скрипты выше чем саму библиотеку ajax))) Спасибо автор!!!!!!(:joy:)(:joy:)
библиотеку jquery)))
Появилась ещё 1 проблема: при подгрузке посты получают новые классы и все летит к чертям) Какой файл отвечает за это? То есть сначала посты имеют один блок а когда нажимаю «показать ещё» уже посты в другом блоке. Какая функция отвечает за вывод новых постов?
Все зависит от того где выводить. Если это главная, то в файле index.php есть такой фрагмент кода
Очень полезная статья. У меня получилась добавить в записи а как добавить отдельно на страницу?
Точно таким же способом, нужно использовать цикл.
Точно таким же способом используя цикл.
помогите решить ситуацию для подключения кода в index.php вставляю в нужном мне месте код:
****
****
и при нажатии на сайте появляются *** то есть вместо них надо ввести данные для вывода поста ? я просто не селен в php помогите плиз
Не подгружает статьи. Выкидывает на 2 страницу
не подгружает статьи. переходит на 2 страницу
Хороший наверное метод, еще бы работал, а не просто на следующую страницу закидывал — цены бы не было
Похожие статьи: