Reverted edits

Hi, I've reverted your edits to get_avatar. Please use the relevant language namespace for page edits in non-English languages. Thanks! mrmist 06:51, 3 June 2011 (UTC)

1 Динамический архив блога с использованием jQuery (Ajax)
- 1.1 Описание
2 1. Подключение jQuery в WordPress
3 2. Загрузим картинку пред-загрузчик
4 3. Создание шаблона постоянной страницы
- 4.1 Теперь, заполним этот файл необходимым кодом.
- 4.2 Полные код шаблона постоянной страницы
5 4. Создание файла-обработчика

Динамический архив блога с использованием jQuery (Ajax)

Описание

Все мы видели архивы, в которых при выборе месяца нас перекидывало на страницу с записями за этот месяц. В WordPress такой вывод архивных ссылок реализуется с помощью функции wp_get_archives(). Аналогичный архив записей получается и при выводе обычных рубрик WordPress, только записи группируются по категориям. Сегодня я хочу рассказать вам, как сделать динамическую архивную страницу. "Динамическая" значит, что при выборе месяца, результаты будут показываться на той же странице, при помощи AJAX — технологии Javascript. Так как библиотека jQuery предоставляет удобный API по работе с Ajax, то будем использовать этот фреймворк. К тому же, куда сегодня без jQuery? Он ведь используется сплошь и рядом, и наверняка в вашем проекте он уже подключен. Итак, чтобы реализовать динамический архив нам нужно пройти 4 этапа:

Подключить jQuery;

Загрузить картинку "ожидание загрузки" (ajax-loader.gif);

Создать шаблон постоянной страницы, на которой будет выводиться архив

Создать файл-обработчик запроса ajax.

1. Подключение jQuery в WordPress

Если у вас еще не подключен jQuery, то сделать это можно в файле шаблона header.php. Внутри тега </head> вставляем такой html код: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> Так, мы подключим jQuery из репозитории Google.

Если нужно подключить jQuery, который находится в WordPress (со своего сервера и с учетом что плагины тоже могут подключать jQuery), то вставляем такой код:

<code style="color: #000000"><span style="color: #0000BB"><?php wp_enqueue_script</span><span style="color: #007700">( </span><span style="color: #DD0000">'jquery' </span><span style="color: #007700">); </span><span style="color: #0000BB">?></span></code>

Вставлять его нужно также в секцию </head>, но обязательно до вызова функции wp_head(), так как wp_enqueue_script( 'jquery' ); — это указание, чтобы wp_head() вывела ссылку на jQuery.

2. Загрузим картинку пред-загрузчик

В период ожидания, когда запрос отправляется серверу с помощью AJAX нам нужно показать картинку, уведомив пользователя, что что-то происходит. Такие картинки вы наверняка видели в сети и не раз, альтернативой такой картинки выступает текст: "Загрузка...".

Чтобы в дальнейшем у нас была такая картинка, давайте скачаем её, например, от сюда: Анимированные gif (сервис мне понравился), переименуем её в ajax-loader.gif и загрузим в папку images, которая находится в каталоге нашей темы WordPress. В итоге у нас получиться такой пусть до картинки: http://site.ru/wp-content/themes/twentyten/images/ajax-loader.gif. Ниже мы его используем в коде.

3. Создание шаблона постоянной страницы

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

<code style="color: #000000"><span style="color: #0000BB"><?php
</span><span style="color: #FF8000">/*
    Template Name: Шаблон архивов
*/
</span><span style="color: #0000BB">?></span></code>

"Шаблон архивов" — это название нашего шаблона, которое мы увидим в админ-панели WordPress, при создании постоянной страницы. Давайте создадим новый файл в папке темы, с названием tpl_archive.php и вставим туда вышеприведенный код. Затем зайдем в админ-панель WordPress и создадим постоянную страницу, назначив ей, только что созданный, шаблон.

Теперь, заполним этот файл необходимым кодом.

1. В первую очередь, нам нужно вывести выпадающие списки, создадим мы их с помощью функций WordPress: wp_get_archives() и wp_dropdown_categories():

<code style="color: #000000"><span style="color: #0000BB"><?php
</span><span style="color: #FF8000">/*
    Template Name: Шаблон архивов
*/
</span><span style="color: #0000BB">?>
</span>
<span style="color: #0000BB"><?php get_header</span><span style="color: #007700">(); </span><span style="color: #0000BB">?>
</span>
<div id="archive_browser">
    <div>
        <h4>Месяцы</h4>
        <select id="month-choice">
            <option val="no-choice"> — </option>
            <span style="color: #0000BB"><?php wp_get_archives</span><span style="color: #007700">(array(
                </span><span style="color: #DD0000">'type' </span><span style="color: #007700">=> </span><span style="color: #DD0000">'monthly'</span><span style="color: #007700">,
                </span><span style="color: #DD0000">'format'  </span><span style="color: #007700">=> </span><span style="color: #DD0000">'option'
            </span><span style="color: #007700">)); </span><span style="color: #0000BB">?>
</span>        </select>
    </div>
    <div>
        <h4>Рубрики</h4>
        <span style="color: #0000BB"><?php wp_dropdown_categories</span><span style="color: #007700">(</span><span style="color: #DD0000">'show_option_none= -- '</span><span style="color: #007700">); </span><span style="color: #0000BB">?>
</span>    </div>
</div>

<div id='archive_pot'></div>

<span style="color: #0000BB"><?php get_footer</span><span style="color: #007700">(); </span><span style="color: #0000BB">?></span></code>

get_header(); и get_footer(); получают шапку и подвал шаблона соответственно. get_sidebar(); я вырезал намеренно, чтобы он не мешался в понимании кода. Остальная часть кода выводит выпадающие списки Месяцев и Рубрик.

Пустой блок — это контейнер куда будут выводится результаты запроса, т.е. записи.

2. Оформим выпадающие списки через CSS, для этого добавим такой код сразу после вызова шапки (<?php get_header(); ?>):

<code style="color: #000000"><style type="text/css" rel="stylesheet" >
#archive_browser > div { display: inline-block; padding-right: 10px; }
#archive_pot { min-height:150px; }
#archives_table { border-collapse:collapse; margin:15px 0 0 0; width:100%; }
#archives_table td { min-height:25px; padding:4px; border-top:1px solid #eee; border-bottom:1px solid #eee; }
</style></code>

3. Добавим JavaScript код, который будет выполнять запрос к серверу и выводить его в блок archive_pot (код добавляем после css стилей):

<code style="color: #000000"><script type="text/javascript">
(function($){
    $(function(){

        $("#archive_browser select").change(function(){
            $("#archive_pot")
                .empty()
                .html("<div style='text-align:center; padding:30px;'><img src='<span style="color: #0000BB"><?php bloginfo</span><span style="color: #007700">(</span><span style="color: #DD0000">'template_url'</span><span style="color: #007700">) </span><span style="color: #0000BB">?></span>/images/ajax-loader.gif' /></div>");

            var dateArray = $("#month-choice").val().split("/");
            var y = dateArray[3];
            var m = dateArray[4];
            var c = $("#cat").val();

            $.post(
                "<span style="color: #0000BB"><?php bloginfo</span><span style="color: #007700">(</span><span style="color: #DD0000">'template_url'</span><span style="color: #007700">) </span><span style="color: #0000BB">?></span>/scripts/archive_getter.php",
                {
                    year : y,
                    month : m,
                    cat : c
                },
                function(data) {
                    $("#archive_pot").html(data).animate({ height: $("#archives_table").height()+40 });
                }

            );
        });
    });
})(jQuery)
</script></code>

Разберем немного код: Все что внутри $("#archive_browser select").change(function(){...} будет срабатывать при изменении выпадающих списков.

<?php bloginfo('template_url') ?>/images/ajax-loader.gif — путь до файла-картинки (загрузка...), которая будет подгружаться в период запроса.

<?php bloginfo('template_url') ?>/scripts/archive_getter.php — пусть до файла обработчика запроса, который мы создадим на следующем этапе.

$.post(...); — Функция jQuery, создающая запрос браузера к серверу, используя AJAX технологию.

Полные код шаблона постоянной страницы

Файл шаблона постоянной страницы (создаем файл в папке темы и копируем туда этот код):

<code style="color: #000000"><span style="color: #0000BB"><?php
</span><span style="color: #FF8000">/*
    Template Name: Шаблон архивов
*/
</span><span style="color: #0000BB">?>
</span>
<span style="color: #0000BB"><?php get_header</span><span style="color: #007700">(); </span><span style="color: #0000BB">?>
</span>
<style type="text/css" rel="stylesheet" >
#archive_browser > div { display: inline-block; padding-right: 10px; }
#archive_pot { min-height:150px; }
#archives_table { border-collapse:collapse; margin:15px 0 0 0; width:100%; }
#archives_table td { min-height:25px; padding:4px; border-top:1px solid #eee; border-bottom:1px solid #eee; }
</style>

<script type="text/javascript">
(function($){
    $(function(){

        $("#archive_browser select").change(function(){
            $("#archive_pot")
                .empty()
                .html("<div style='text-align:center; padding:30px;'><img src='<span style="color: #0000BB"><?php bloginfo</span><span style="color: #007700">(</span><span style="color: #DD0000">'template_url'</span><span style="color: #007700">) </span><span style="color: #0000BB">?></span>/images/ajax-loader.gif' /></div>");

            var dateArray = $("#month-choice").val().split("/");
            var y = dateArray[3];
            var m = dateArray[4];
            var c = $("#cat").val();

            $.post(
                "<span style="color: #0000BB"><?php bloginfo</span><span style="color: #007700">(</span><span style="color: #DD0000">'template_url'</span><span style="color: #007700">) </span><span style="color: #0000BB">?></span>/scripts/archive_getter.php",
                {
                    year : y,
                    month : m,
                    cat : c
                },
                function(data) {
                    $("#archive_pot").html(data).animate({ height: $("#archives_table").height()+40 });
                }

            );
        });
    });
})(jQuery)
</script>

<div id="archive_browser">
    <div>
        <h4>Месяцы</h4>
        <select id="month-choice">
            <option val="no-choice"> — </option>
            <span style="color: #0000BB"><?php wp_get_archives</span><span style="color: #007700">(array(
                </span><span style="color: #DD0000">'type' </span><span style="color: #007700">=> </span><span style="color: #DD0000">'monthly'</span><span style="color: #007700">,
                </span><span style="color: #DD0000">'format'  </span><span style="color: #007700">=> </span><span style="color: #DD0000">'option'
            </span><span style="color: #007700">)); </span><span style="color: #0000BB">?>
</span>        </select>
    </div>
    <div>
        <h4>Рубрики</h4>
        <span style="color: #0000BB"><?php wp_dropdown_categories</span><span style="color: #007700">(</span><span style="color: #DD0000">'show_option_none= -- '</span><span style="color: #007700">); </span><span style="color: #0000BB">?>
</span>    </div>
</div>

<div id='archive_pot'></div>

<span style="color: #0000BB"><?php get_footer</span><span style="color: #007700">(); </span><span style="color: #0000BB">?></span></code>

4. Создание файла-обработчика

AJAX подразумевает "общение" браузера с сервером без перезагрузки страницы, средствами Javascript. Скрипт сам по себе не может получить никаких данных, ведь он находится на компьютере пользователя, а данные на сервере, поэтому чтобы скрипт получил данные он должен обратится к серверу, в данном случае такой диалог будет поддерживать файл-обработчик.

Давайте создадим папку scripts в каталоге темы, в ней создадим файл archive_getter.php (/wp-content/themes/twentyten/scripts/archive_getter.php) и заполним этот файл следующим кодом:

<code style="color: #000000"><span style="color: #0000BB"><?php 

</span><span style="color: #FF8000">// подгружаем срезу WP
</span><span style="color: #007700">require(</span><span style="color: #0000BB">$_SERVER</span><span style="color: #007700">[</span><span style="color: #DD0000">'DOCUMENT_ROOT'</span><span style="color: #007700">].</span><span style="color: #DD0000">'/wp-load.php'</span><span style="color: #007700">);

</span><span style="color: #FF8000">// фильтруем данные, передаваемые этому файлу с Javascript (по post запросу)
</span><span style="color: #0000BB">$year </span><span style="color: #007700">= </span><span style="color: #0000BB">htmlspecialchars</span><span style="color: #007700">(</span><span style="color: #0000BB">trim</span><span style="color: #007700">(</span><span style="color: #0000BB">$_POST</span><span style="color: #007700">[</span><span style="color: #DD0000">'year'</span><span style="color: #007700">]));
</span><span style="color: #0000BB">$month </span><span style="color: #007700">= </span><span style="color: #0000BB">htmlspecialchars</span><span style="color: #007700">(</span><span style="color: #0000BB">trim</span><span style="color: #007700">(</span><span style="color: #0000BB">$_POST</span><span style="color: #007700">[</span><span style="color: #DD0000">'month'</span><span style="color: #007700">]));
</span><span style="color: #0000BB">$cat </span><span style="color: #007700">= </span><span style="color: #0000BB">htmlspecialchars</span><span style="color: #007700">(</span><span style="color: #0000BB">trim</span><span style="color: #007700">(</span><span style="color: #0000BB">$_POST</span><span style="color: #007700">[</span><span style="color: #DD0000">'cat'</span><span style="color: #007700">]));

</span><span style="color: #0000BB">?></span> 

<table id="archives_table">
    <span style="color: #0000BB"><?php
    </span><span style="color: #007700">if( (</span><span style="color: #0000BB">$year</span><span style="color: #007700">==</span><span style="color: #DD0000">''</span><span style="color: #007700">) && (</span><span style="color: #0000BB">$month</span><span style="color: #007700">==</span><span style="color: #DD0000">''</span><span style="color: #007700">) && (</span><span style="color: #0000BB">$cat</span><span style="color: #007700">==</span><span style="color: #DD0000">'-1'</span><span style="color: #007700">) ){
        echo </span><span style="color: #DD0000">"<tr><td style='text-align: center; font-size: 15px; padding: 5px;'>Пожалуйста, выберите дату/категорию из списка выше.</td></tr>"</span><span style="color: #007700">;
    }
    else
    {
        </span><span style="color: #FF8000">// Получаем данные с помощью query_posts
        </span><span style="color: #0000BB">query_posts</span><span style="color: #007700">(</span><span style="color: #DD0000">"posts_per_page=-1&cat=</span><span style="color: #0000BB">$cat</span><span style="color: #DD0000">&monthnum=</span><span style="color: #0000BB">$month</span><span style="color: #DD0000">&year=</span><span style="color: #0000BB">$year</span><span style="color: #DD0000">"</span><span style="color: #007700">);
        </span><span style="color: #FF8000">// выводим данные в Цикле WordPress
        </span><span style="color: #007700">if( </span><span style="color: #0000BB">have_posts</span><span style="color: #007700">() ){ while( </span><span style="color: #0000BB">have_posts</span><span style="color: #007700">() ){ </span><span style="color: #0000BB">the_post</span><span style="color: #007700">(); </span><span style="color: #0000BB">?>
</span>            <tr>
                <td><a href='<span style="color: #0000BB"><?php the_permalink</span><span style="color: #007700">(); </span><span style="color: #0000BB">?></span>'><span style="color: #0000BB"><?php the_title</span><span style="color: #007700">(); </span><span style="color: #0000BB">?></span></a></td>
                <td><span style="color: #0000BB"><?php comments_popup_link</span><span style="color: #007700">(</span><span style="color: #DD0000">' '</span><span style="color: #007700">, </span><span style="color: #DD0000">'1 Комментарий'</span><span style="color: #007700">, </span><span style="color: #DD0000">'% Комментариев'</span><span style="color: #007700">); </span><span style="color: #0000BB">?></span></td>
                <td><span style="color: #0000BB"><?php the_time</span><span style="color: #007700">(</span><span style="color: #DD0000">'j.m.Y'</span><span style="color: #007700">); </span><span style="color: #0000BB">?></span></td>
            </tr>
            <span style="color: #0000BB"><?php
        </span><span style="color: #007700">}}
        else </span><span style="color: #FF8000">// Если постов нет
            </span><span style="color: #007700">echo </span><span style="color: #DD0000">"<tr><td style='text-align: center; font-size: 15px; padding: 5px;'>Ничего не найдено.</td></tr>"</span><span style="color: #007700">;
    } </span><span style="color: #0000BB">?>
</span></table></code>

Небольшой разбор кода:

Сначала мы подгружаем среду WordPress (все настройки, функции, плагины). Делается это для того, чтобы нам стали доступны функции WordPress, в частности query_posts(), которую мы используем в этом файле для получения данных.

Условием if( ($year==) && ($month==) && ($cat=='-1') ){...} мы проверяем существуют ли какие-либо данные, которые мы позднее можем использовать в функции </code>query_posts()</code>, если дынных нет, то выводим сообщение.

query_posts("posts_per_page=-1&cat=$cat&monthnum=$month&year=$year"); и все что ниже это привычный Цикл WordPress.

Вот и все, страница готова!

Источник: http://wp-kama.ru/id_652/dinamicheskiy-arhiv-bloga-s-ispolzovaniem-jquery-ajax.html

Codex

User talk:Kalbac

Contents