Список статей и рубрик с постраничной навигацией на ajax

Опубликовано: 13 Июнь 2012Автор ratemir

В этой статье я постараюсь объяснить как можно вывести в виде списка различную информацию из базы данных WordPress, прибегнув к помощи технологии ajax. Если вкратце, какие действия нам нужно будет для этого предпринять:

1. Сначала прописываем нужный запрос к базе, откуда вытаскиваем необходимую нам информацию.
2. Всё это я решил прикрутить к скрипту постраничной навигации, использующей в своей работе ajax для вывода информации на экран. Конечно, пришлось изменить там некоторые моменты.

Кстати, никаких плагинов использовать не будем. Для того чтобы создать список записей, рубрик, кол-ва комментариев и т.д., перейдите в папку с шаблоном сайта и создайте там файл, например post-list.php. Далее, скопируйте туда следующий код и адаптируйте его в соответствие с дизайном Вашего сайта:

<?php
/*
Template Name: Archive List
*/
?>
<?php get_header(); ?>
 
        <script type="text/javascript">
            $(document).ready(function(){
                function loading_show(){
                    $('#loading').html("<img src='/wp-content/themes/ratemir/images/loading.gif'/>").fadeIn('fast');
                }
                function loading_hide(){
                    $('#loading').fadeOut('fast');
                }                
                function loadData(page){
                    loading_show();                    
                    $.ajax
                    ({
                        type: "POST",
                        url: "/wp-content/themes/ratemir/scripts/archilist.php",
                        data: "page="+page,
                        success: function(msg)
                        {
                            $("#archilist").ajaxComplete(function(event, request, settings)
                            {
                                loading_hide();
                                $("#archilist").html(msg);
				$('.data').hide().fadeIn(1000);	
                            });
                        }
                    });
                }
                loadData(1);  // For first time page load default results
                $('#archilist .pagination li.active').live('click',function(){
                    var page = $(this).attr('p');
                    loadData(page);
                });           
                $('#go_btn').live('click',function(){
                    var page = parseInt($('.goto').val());
                    var no_of_pages = parseInt($('.total').attr('a'));
                    if(page != 0 && page <= no_of_pages){
                        loadData(page);
                    }else{
                        alert('Введите значение между 1 и '+no_of_pages);
                        $('.goto').val("").focus();
                        return false;
                    }
                });
            });
        </script>
 
        <style type="text/css">
            #loading{
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
            }
	    #archilist .pagination ul{list-style:none;padding:0;}
            #archilist .pagination ul li.inactive,
            #archilist .pagination ul li.inactive:hover{
                background-color:#ededed;
                color:#bababa;
                border:1px solid #bababa;
                cursor: default;
            }
            #archilist .data ul li{
                list-style: none;
                font-family: verdana;
                margin: 5px 0 5px 0;
                color: #000;
                font-size: 13px;
            }
            #archilist .pagination{height: 25px;margin: 10px 0 10px 50px;}
            #archilist .pagination ul li{
                list-style: none;
                float: left;
                border: 1px solid #006699;
                padding: 2px 6px 2px 6px;
                margin: 0 3px 0 3px;
                font-family: arial;
                font-size: 14px;
                color: #006699;
                font-weight: bold;
                background-color: #f2f2f2;
            }
            #archilist .pagination ul li:hover{color: #fff;background-color: #006699;cursor: pointer;}
	    .goto{border: 1px solid #CCCCCC;margin-left: 60px;margin-top: -1px;padding: 3px 6px;}
	    .go_button{background-color:#f2f2f2;border:1px solid #006699;color:#cc0000;padding:2px 6px 2px 6px;cursor:pointer;position:absolute;margin-top:-1px;}
	    .total{float:right;font-family:arial;color:#999;}
	     #archilist .firsttd{border-left: 1px solid #EEEEEE;}
	     #archilist td { min-height:25px; padding:4px; /*border-top:1px solid #eee;*/ border-bottom:1px solid #eee;border-right: 1px solid #EEEEEE;}
</style>
 
<div id="container">
<div id="content">	
<div class="single sitemap" id="post-map">
<div class="entry">
<h1>Опубликованные статьи</h1>
<div id="loading"></div>
  <div id="archilist">
      <div class="data"></div>
      <div class="pagination"></div>
  </div>
<div class="clear"></div>
</div>
</div>
	</div><!-- #content-->
</div><!-- #container-->
<?php get_sidebar(); ?>
	<div class="clear"></div>
    </div>
</div><!-- #middle-->
<?php get_footer(); ?>

Как Вы заметили, в начале файла указываем строчку(Template Name: Archive List), специально для WordPress. Подробнее о применении этой строки и создании статичной страницы можно узнать на примере этой статьи.

Далее идут javascript и css. Их можно вытащить в отдельные файлы, добавить к основным или оставить как есть.

В блоке container будут выводиться данные списка и нумерация страниц(постраничная навигация), полученные с помощью ajax, из файла обработчика, который будет лежать в созданной нами папке scripts в теме нашего сайта. А сам файл назовём, например так archilist.php. И обязательно пропишите путь к нему в том куске кода где у нас javascript.

Вот часть содержимого archilist.php. Полный набор файлов скачиваем здесь.

<?php
// подгружаем среду WP
require($_SERVER['DOCUMENT_ROOT'].'/wp-load.php');
 
if((int)$_POST['page'])
{
$page = (int)$_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = 12; //выводим нужное количество строк
$start = $page * $per_page;
$previous_btn = true; //кнопка Пред. Убрать - false
$next_btn = true; //кнопка След. Убрать - false
$first_btn = true; //кнопка Первый. Убрать - false
$last_btn = true; //кнопка Послед. Убрать - false
global $wpdb; //подключаем класс WordPress для работы с базой данных
$query_pag_data = "SELECT p.id, p.post_title, p.post_name, p.post_date, p.comment_count, t.term_id, t.name
                   FROM $wpdb->posts p
                   LEFT JOIN $wpdb->term_relationships rs ON (rs.object_id = p.id)
		   LEFT JOIN $wpdb->terms t ON (rs.term_taxonomy_id = t.term_id)
                   WHERE p.post_status = 'publish' AND p.post_type = 'post' AND t.term_id IN(3,10,4,45,15) ORDER BY t.term_id, p.post_date LIMIT %d, %d";
//Значения id категорий(3,10,4....) нужно поменять на свои
$results = $wpdb->get_results($wpdb->prepare($query_pag_data,$start,$per_page));
if( !$results ) return false;

Не забудьте о том, что значения id категорий(3,10,4...) в запросе к базе нужно поменять на свои. Их можно найти в админке записи->рубрики, выбираем и кликаем на рубрики, которые хотим увидеть в списке, и в адресной строке браузера ищем значение tag_ID.

Так как код требует подключения jQuery, следовательно если данный фреймворк отсутствует, между тегами <head>...</head> обязательно пропишем строки

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

Вот кажется и всё. Ещё нужно отметить, что таким образом можно сделать запрос к любой таблице базы данных WordPress.

Метки: Рубрика: Хаки и секреты WordPress


Опубликовать в twitter.comПоделиться ВКонтактеПоделиться в FacebookПоделиться В Моем МиреОпубликовать в своем блоге livejournal.com
Если Вам понравилась статья, Вы можете получать новые материалы Ratemir.ru по: RSS или можете просто получать обновления блога на e-mail:

Один комментарий к “Список статей и рубрик с постраничной навигацией на ajax”

  • Sergey
    13 Август, 2013, 20:26

    $('#archilist .pagination li.active').live не работает — yf на новых версиях jQuery, скачанных с сайта разработчика.

    Рекомендуют использовать вместо этого:

    $('#archilist .pagination li.active').on

Оставить комментарий

Наверх