WordPress. Создаем сайдбар в стиле Apple — Очередной блог фрилансера

Компания Apple отлично умеет представлять себя и свои продукты. Мне очень нравится сайдбар, расположенный на стартовой странице Apple, и сегодня, я собираюсь создать такой же, с помощью плагина Accordion к JQuery UI. Но это еще не все. Я также, хочу иметь возможность, скрывать и отображать сайдбар, по своему усмотрению. Читайте далее, я расскажу, как все это можно сделать.

Демо версию можно посмотреть здесь.

Введение

Это руководство предполагает наличие у вас установленного на сервере, WordPress-блога, доступа к загрузке файлов и их просмотру. Если вы хотите запустить локальный сервер с установленным WordPress, можете прочитать инструкцию по установке для Windows и для OS X.

Файлы, которые нам понадобятся

Всего нам понадобится 6 файлов:

functions.php – Он будет содержать несколько строк, регистрирующих сайдбар.
index.php – Нам обязательно понадобится этот файл. Догадываетесь для чего?
jQuery – Вот здесь можно скачать версию 1.2.6.
jQuery UI (accordion) – Нам понадобится только плагин Accordion и UI core, не вся UI библиотека.
sidebar.js – Содержащий весь код jQuery для сайдбара.
style.css – необходимый для активации темы, и содержащий весь CSS.
папка с картинками – Вы получите список изображений, для загрузки в папку, чуть позже, в CSS-части. Сейчас же, мы просто загрузим одну картинку – иконку для RSS. Скопируйте его в папку «images», и давайте начнем.

Не забудьте активировать вашу WordPress-тему (которую, кстати, мы должны назвать sidebarTheme) в панели управления. Для начала нам понадобится только HTML и WordPress. Мы создадим необходимую структуру, затем добавим нужный WordPress-код, который отобразит записи, а также зарегистрирует и выведет сайдбар. После этого добавим немного CSS, что сделает нашу тему похожей на стартовую страницу apple, и сделаем такой же сайдбар. Все это мы сделаем до подключения JS, так что даже без ява-скрипта, все будет смотреться отлично. Затем, наконец-то, мы перейдем к моей любимой части – JQuery. Мы используем его для анимации разворачивания/сворачивания сайдбара, а также accordion() и его параметры для эффекта наведения.

Шаг 1- HTML

Откройте файл functions.php, и вставьте следующий код:

<?php   
    if(function_exists('register_sidebar')){   
        register_sidebar(array('name' => 'appleQuery'));   
    }    
?>

functions.php автоматически обрабатывается PHP/WordPress, и выполняет существующие функции. Эта функция информирует WordPress, о необходимости зарегистрировать новый сайдбар в Панели управления, с возможностью добавления виджетов. Это еще не все, нам нужно расположить соответствующий код в нашей теме. Я все подробно разъясню, после следующего примера кода.

Что касается вышеприведенного примера, массив (array) в данном случае используется для именования нашего сайдбара, так что вы легко сможете выбрать нужный сайдбар для редактирования, в панели управления.

Скопируйте и вставьте следующий код в файл index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
<head profile="http://gmpg.org/xfn/11">   
  
    <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>   
  
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />   
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />   
  
    <?php wp_head(); ?>   
       
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery-1.2.6.min.js"></script>   
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery-accordion-1.5.2.min.js"></script>   
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/sidebar.js"></script>   
</head>   
<body>   
    <div id="wrapper">   
        <h1><?php bloginfo('name'); ?></h1>   
        <div id="sidebar">   
            <ul>   
                <?php if(function_exists('dynamic_sidebar') && dynamic_sidebar()) : ?>   
                <?php endif; ?>   
            </ul>   
        </div><!-- end div#sidebar -->   
        <div id="content">   
            <div id="topStories">   
                <span id="sidebarToggleButton" class="sidebarOpen"></span>   
                <strong>Top Stories</strong>   
                <?php echo date('F j, Y H:i A e'); ?>   
                <a href="<?php bloginfo('rss2_url'); ?>" title="RSS 2 feed"><img src="<?php bloginfo('template_directory'); ?>/images/rssIcon.gif" alt="" /></a>   
            </div>   
            <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>   
                <div class="post">   
                    <span class="postDate"><?php the_date('F j, Y'); ?></span>   
                    <h3><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>   
                    <div class="entry">   
                        <?php the_content('(read more...)'); ?>   
                    </div>   
                </div>   
            <?php endwhile; ?>   
            <?php endif; ?>   
        </div><!-- end div#content -->   
    </div>   
</body>   
</html>

Разъяснение

Я разъясню наиболее интересные моменты, чтобы вам было понятно.

Блок с сайдбаром – это самая важная, основная часть. Здесь мы спрашиваем WordPress, знает ли он о существовании функции dynamic_sidebar (которая находится в файле functions.php), и если она ему известна, просим исполнить ее. Строка appleQuery определяет имя сайдбара, которое мы назначили (в файле functions.php, помните?).
<?php echo date('F j, Y H:i A e'); ?> — Это PHP-строчка, выводящая текущую дату и время пользователя.
<?php bloginfo('rss2_url'); ?> — Записи блога в формате XML
<span id="sidebarToggleButton" class="sidebarOpen"></span> — Ничего особенного, просто кнопка-переключатель для сайдбара. Я сделал ее элементом span, так что она не будет кликабельна в браузерах, с отключенным ява-скриптом.

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

Рубрики
Архивы
Ссылки
Страницы
Мета

В результате, у вас должно получится, что-то вроде этого:

Не очень-то красиво, правда? Не беспокойтесь, далее следует CSS.

Шаг 2 – CSS

Да, CSS здесь, чтобы спасти ситуацию. С помощью стилей, мы должны получить макет, похожий на этот:

Как вам, мой небольшой эффект размытия? Конечно, он появится, только после подключения JavaScript, о котором я расскажу далее, что же касается 1% пользователей, с браузерами, не поддерживающими JS, для них сайдбар останется статическим, но все равно будет отлично выглядеть. CSS-стили получились довольно объемными, поэтому я не буду приводить их пример в тексте статьи. Просто скопируйте и вставьте этот CSS, в свой CSS-файл. Вам также понадобятся следующие картинки:

Кое-что к сведению

Я постарался назначить все размеры текста в относительных единицах, так что 75% уменьшает текст до 12px, что в дальнейшем становится 1em.
Для заголовка h1, я использовал CSS3-свойство text-shadow.
Блоку #content , назначен белый цвет фона. Вы спросите почему, ведь фоновый цвет и так всегда остается белым. Все дело в том, что когда у нас заработает JavaScript, нам понадобится, чтобы #content накрывал сайдбар, и если у него не будет задан цвет фона, он останется прозрачным, и сайдбар будет просвечиваться под ним.
#sidebarToggleButton – этот блок используется для отображения кнопки-переключателя отображения сайдбара, в нужное состояние, а также становится невидимым в браузерах с отключенным JavaScript.

Я тестировал этот код в Firefox, Safari 3 и Opera 9, и он отлично работает. Вот как все это должно выглядеть:

Далее нам понадобится jQuery.

Шаг 3 – Время jQuery

Вот основная идея того, что должен уметь наш скрипт.

Прятать сайдбар
При клике по элементу c классом «.sidebarOpen», переключать следующее:
— удалять класс «sidebarOpen».
— добавлять класс «sidebarClose» (который мы назначим далее).
— добавлять анимацию во время появления сайдбара
Инициировать Accordion.

На первый взгляд может показаться что это слишком много (хотя на самом деле это не так), поэтому я проведу вас шаг за шагом. Откройте, ранее созданный файл sidebar.js, и начинайте печатать.

Шаг 3.1

Как обычно, не забывайте весь код jQuery, заключать в document.ready:

$(document).ready(function(){   
  
    //jQuery code goes here   
  
});

Весь код должен находиться внутри этой конструкции.

Шаг 3.2

$("#sidebar").css({ left: "205px"});

Этот код прячет сайдбар, путем манипулирования DOM, на уровне CSS. На самом деле, это конечно не так, просто сайдбар спрячется под блок #content. Это не будет работать, пока мы не добавим немного CSS, о котором я расскажу далее.

Шаг 3.3

$(".sidebarOpen").toggle(function(){   
    $(this)   
        .removeClass("sidebarOpen")   
        .addClass("sidebarClose")   
        .animate({right: "205px"}, 500);   
    $("#sidebar").animate({left: "0px"}, 500);   
}, function(){   
    $(this)   
        .removeClass("sidebarClose")   
        .addClass("sidebarOpen")   
        .animate({right: "0px"}, 500);   
    $("#sidebar").animate({left: "205px"}, 500);   
});

Понимаю ваше недоумение, вам кажется, что это слишком сложно. На самом деле, здесь выполняются две простые функции. Первая функция .toggle() выполняет следующее:

Удаляет класс “sidebarOpen” (эти CSS-стили будут описаны в следующем разделе).
Добавляет класс “sidebarClose”.
Анимирует маленькую кнопку, скрывающую сайдбар
Скрывает сайдбар, со скользящим эффектом, добавленным с помощью jQuery.

Вторая функция почти такая же, только делает все наоборот:

Удаляет класс «sidebarClose»
Добавляет класс «sidebarOpen»
Анимирует маленькую кнопку, выдвигающую сайдбар
Отображает сайдбар, со скользящим эффектом.

Видите, все не так уж сложно.

Шаг 3.4

Настало время для представления JQuery UI. Пользоваться им довольно просто:

$("#sidebar ul").accordion({   
        header: 'h2',   
        event: 'mouseover',   
        activeClass: 'selected'   
    });

Всего лишь одна функция .accordion(), применяется к элементам ul в блоке #sidebar. Функция принимает следующие параметры (под одному в каждой строке):

header – определяет «ручку» для каждого «ящика» аккордеона – в нашем случае это заголовок каждого виджета h2.
event – определяет, при каком событии изменять состояние «ящика», и поскольку нам необходим эффект наведения как у Apple, мы указываем mouseover
activeclass – определяет, какой класс мы должны применить в активном состоянии. Мы применяем к развернутому виджету класс “selected”.

Вот и весь JavaScript-код, который нам необходим. Его очень просто можно изменить, в зависимости от того, что именно вы хотите получить.

Шаг 4 – JQuery CSS

Итак, практически все готово, осталось добавить немного CSS. Нам понадобится настроить стили для следующих элементов:

#sidebarToggleButton – используя классы, которые нам предоставляет JQuery, мы спокойно можем настроить отображения картинок ‘sidebarClose.png’ и ‘sidebarOpen.png’, которые вы скачали ранее.
Аккордеон нуждается в небольшой доработке. Нам необходимо сгладить квадратные углы, с помощью CSS3-свойств, и настроить стиль для активного класса.

/* jQUERY CSS */   
  
#sidebar>ul{   
    border-radius: 5px;   
    -moz-border-radius: 5px;   
    -webkit-border-radius: 5px;   
    -opera-border-radius: 5px;   
}   
  
span.sidebarOpen{   
    background: url(images/sidebarOpen.png) no-repeat center;   
}   
  
span.sidebarClose{   
    background: url(images/sidebarClose.png) no-repeat center;   
}   
  
h2.selected{   
    background: url(images/activeBg.png) repeat-x !IMPORTANT;   
    color: white !IMPORTANT;   
}

2 вещи, на которые стоит обратить внимание:

#sidebar>ul – здесь ко всем элементам ul, являющимся дочерними элементами блока #sidebar, применяются закругленные углы – с помощью CSS3. Углы будут корректно работать в Firefox, Opera и Webkit-браузерах.
!IMPORTANT – эта директива необходима для переопределения установленных значений, так как по умолчанию будет установлен серый фоновый цвет.

Вот и все, в результате у нас должна получится вот такая страничка (в закрытом виде):

и в открытом виде:

Архив с темой для WordPress.

Перевод статьи «WordPress Sidebar Turned Apple-Flashy Using jQuery UI«, автор Harley

5 комментариев

Дмитрий:

21.08.2009 в 13:04

Обожаю такие подробно-структурированные туториалы! Прям глаз не нарадуется. А я всегда ленюсь делать такую большую работу на настолько узкую тему, попробую вдохновиться вашим примером и меньше лениться :-)

Ответить
wicked_kiD:

25.08.2009 в 15:30

обалденный мануал, спасибо большое..!

Ответить
Unter:

02.03.2010 в 08:59

Спасибо и шаблон красивый и очень толково и подробно все изложено — написал Вам письмо.

Ответить
Apple:

29.09.2011 в 19:47

Мануал отличный, правда не многие справятся с составлением кода.

Ответить
Mar:

12.01.2013 в 23:56

Отличный туториал !! Спасибо

Ответить