Все записи на одной странице wordpress
Сегодня расскажу вам, как вывести все записи на одной странице или как сделать бесконечную прокрутку. Живым примером является мой собственный блог. Как я это сделал? Не буду утомлять вас ненужными объяснениями функций, как и на чем это реализовано, просто приведу куски кода и расскажу куда их распихать.
Для начала открываем файл header.php. В начало, до тега </head>, но после <?php wp_head(); ?> (!это важно) вставляем следующее:
<!-- start infinite scroll function --> <?php if (!is_single() || !is_page()): ?> <script type="text/javascript"> jQuery(document).ready(function($) { var count = 2; var total = <?php echo $wp_query->max_num_pages; ?>; $(window).scroll(function(){ if ($(window).scrollTop() == $(document).height() - $(window).height()){ if (count > total){ return false; }else{ loadArticle(count); } count++; } }); function loadArticle(pageNumber){ $('a#inifiniteLoader').show('fast'); $.ajax({ url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php", type:'POST', data: "action=infinite_scroll&page_no="+ pageNumber + '&loop_file=loop', success: function(html){ $('a#inifiniteLoader').hide('1000'); $("#content").append(html); // This will be the div where our content will be loaded } }); return false; } }); </script> <?php endif; ?> <!-- end infinite scroll pagination -->
Далее открываем index.php. Находим строки вывода ваших записей (может быть по-разному - нет единого решения, поэтому приведу свой). Скажу только, что это те строки, которые отвечают за вывод записей. Обычно они располагаются в каком-то блоке. Так вот. Если вы знаете, где эти строки, то их нужно заключить в контейнер <div id="content">ТУТ СТРОКИ ВЫВОДА ЗАПИСЕЙ</div>. Это тоже важно! Есть один нюанс! Для работы скрипта нам понадобится эти строки, которые между <div id="content"></div>, вынести в отдельный файл loop.php, который придется создать. Запутал? Привожу код index.php:
<?php get_header(); ?> <div id="content"> <?php get_template_part( 'loop', 'index' ); ?> </div> <?php get_footer(); ?>
где
<?php get_template_part( 'loop', 'index' ); ?>
как раз указание, что надо сходить в файл loop.php и забрать его содержимое.
Теперь содержимое файла loop.php (строки вывода записей):
<?php while ( have_posts() ) : the_post(); ?> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <?php the_content( __( 'Читать далее...' ) ); ?> </div> <?php endwhile; ?>
Теперь идем в functions.php и вставляем туда следующее:
<?php /*infinite scroll pagination */ add_action('wp_ajax_infinite_scroll', 'wp_infinitepaginate'); // for logged in user add_action('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate'); // if user not logged in function wp_infinitepaginate(){ $loopFile = $_POST['loop_file']; $paged = $_POST['page_no']; $posts_per_page = get_option('posts_per_page'); query_posts(array('paged' => $paged )); get_template_part( $loopFile ); exit; } function my_scripts_method() { wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'); wp_enqueue_script( 'jquery' ); } add_action('wp_enqueue_scripts', 'my_scripts_method'); ?>
Осталось всего 3 шага и все будет работать:) Итак, следующий шаг - идем в footer.php и перед </body> добавляем строку:
<a id="inifiniteLoader">Loading... <img src="<?php bloginfo('template_directory'); ?>/images/ajax-loader.gif" /></a>
Это картинка, которая будет появляться, когда мы достигаем низа страницы на то время, пока остальные записи загрузятся. Кстати, о картинке. Берем её и сохраняем, затем закидываем в папку images своей текущей темы.
И, наконец, последний штрих - стили для этой ссылки, которую мы добавили перед картинкой. Идем в style.css и добавляем следующее:
a#inifiniteLoader{ position: fixed; z-index: 2; bottom: 15px; right: 10px; display:none; }
Вот и все:)
Исходники - для тех кому тяжело, прикрепил необходимые файлы с необходимым содержимым.