Как сделать тему WordPress виджет совместимой за 3 шага

В комментариях к последней статье «Виджеты — это очень просто!» попросили рассказать, как же сделать тему виджет совместимой. Честно говоря, я думал, что на офф.сайте это описано, а как выяснилось написано то оно написано, да не совсем там.

В общем, отрыл я пошаговое описание того, как нужно «грамотно» виджетизировать свою тему, которое ниже предлагаю вам в своём переводе с небольшими корректировками и дополнениями.


Шаг 1. Редактируем functions.php

Сперва необходимо удостоверится в том, что в папке с вашей темой находится файл function.php, а если таковой отсутствует, то создайте его сами.
Следующим шагом нам необходимо определиться — как у нас формируется сайдбар. Откройте свой sidebar.php и попытайтесь вникнуть в код и понять, что используется для формирования сайдбара — списки (<ul>) или дивы (<div>).
Например, у Артема сайдбар стандартный, из списков и заголовков второго уровня, что видно по коду:

А вот у Максима напротив, сайдбар состоит из последовательных блоков div, обрамленных изображениями «скругленных углов», а уже внутри дива находится контент виджета. Кусок кода, чтобы было (возможно) проще понять, о чём я говорю:

Так вот — первый вариант, как я уже и писал, можно обозвать стандартным или скорее классическим, а следовательно и встраивание в сайдбар по «классической схеме» будет проходить максимально безболезненно.

Достаточно в functions.php добавить блок кода, чтобы в итоге получить сайдбар на основе списков с заголовками 2 уровня:

Если файл functions.php вы не создавали с нуля, то советую сперва просмотреть его на наличие указанного выше кода, чтобы не получилось дублирования.

Если же, вы используете, какой-то более извращенный метод (ничего личного, Макс:-)), то код может принять устрашающий вид, аля:

Дам небольшие пояснения, строка, передаваемая в параметр ‘before_widget’ будет выводится как начало любого виджета, а ‘after_widget’ — конец. Т.е. тут мы задаём тэги обрамления виджета. ‘before_title’ и ‘after_title’ соответственно определяют обрамление заголовка виджета (это все те «Рубрики» и «Самое читаемое»). В итоге мы получим дивный сайдбар с заголовками 4 уровня.

Для особо замороченных существует возможность получить при выводе виджета его id (генерится из имени виджета) и класс (получается в процессе обработки виджета). Т.к. ‘before_widget’ пропускается через sprintf, то в любое место строки можно передать %1$s и %2$s, чтобы при выводе получить соответствующие параметры. Надеюсь «замороченные» поняли, о чём я.

Шаг 2. Проверяем сайдбар и добавляем на него виджеты

Чтобы понять работает наш сайдбар или нет, нужно добавить на него несколько виджетов.
Идём в админ панель, далее «Внешний вид > Виджеты» и лицезреем (или нет, если забыли сохранить и/или загрузить functions.php в свою тему) панель сайдбара, куда можно (и даже нужно) натаскать пару-тройку виджетов. И главное нажать «Сохранить», после чего перейти к третьему шагу.

Шаг 3. Добавление сайдбара в шаблон

Ну и наконец-то то, ради чего всё делалось — подключение сайдбара в шаблон.
Тут есть простой и очень простой способ. Оба заключаются в редактировании файла sidebar.php вашей темы.
Простой способ:
Вставить сразу после строки <div id=»sidebar»> следущий код

а перед последним </div> код — <?php endif; ?>
Очень простой способ заключается в том, чтобы понять для себя раз и навсегда, что никто уже не использует шаблоны без виджетов и, стерев предварительно ВЕСЬ код из sidebar.php, скопипастить туда:

Чем меньше кода в подключаемом файле, тем быстрее у нас всё работает (хотя на таком уровне это конечно «мёртвому припарки», но всё же).

Теперь заходим в свой блог и наблюдаем работающие виджеты.


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

И ещё, я думаю — писать пост про создание темы с несколькими виджетами или нет? Пригодится тебе такая статья, читатель, или нет?

Что нового будет в админ панели WordPress 2.5

Обещали WordPress 2.4 в январе, а получим WordPress 2.5 в конце марта. Придётся ждать, хотя пока не сильно понятно чего именно.

Ах, вспомнил. Одной из главных «фич» очередного релиза объявлена переделанная Admin Panel, где вроде как всё стало «лучше, удобнее, просто сказка»… Ну не знаю, не знаю, любой желающий может протестировать рабочую бета-версию админки на предмет вкусностей, для тех же, кому лень, сделаю небольшой обзорчик. Он, конечно, не тянет на эпичность, потому что, по словам разработчиков, пока что готово только 20-30% от конечного функционала админ панели, но общее представление сложить можно.

Список нововведений в администраторской панели WordPress 2.5

  1. Новая цветовая гамма
  2. Первое что бросается в глаза — новые цвета: «Прощай надоевший синий, да здравствуют более благородный голубой и агрессивный оранжевый!» Ну что тут скажешь? Довольно мило, не напрягает, но учитывая, что все кому было нужно уже сто лет назад переделали свою админку, то одной лишь обёрткой нас — пользователей — не купить.

  3. Панель Right Now и стартовая страница

  4. Похоже, разработчики решили сменить акцент на стартовой странице с новостей (которые редко кто читает, но зато все от них бесятся) на действительно актуальную для блоггера информацию, а так же предоставить быстрый доступ к наиболее используемым функциям.
    Статистика выведена по постам/страницам и рубрикам, так же указано количество задействованных виджетов.
    В саму же панельку впихнули кнопки для быстрого перехода к созданию страницы или поста, ну и сразу можно перейти к смене темы (ну вот это уже конечно несколько сомнительная возможность, чтобы выводить её в быстрый доступ).
    Ниже под «Right Now» панелью расположили списки последних комментариев, входящих ссылок и последних постов. В общем, из узенького и незаметного блока в нынешнем Dashboard, эти списки развернулись во всём своём величии.

    Что же мы потеряли по сравнению с тем, что есть сейчас на стартовой странице?
    Ссылку на редактирование профиля (зачем оно там вообще, если в правом верхнем углу всегда есть линк на «My profile»), ссылку на переход в управление блогроллом (ответьте, только честно, часто вы на неё нажимали? да и вообще часто ли редактируете свой blogroll?) и конечно же 70% объёма страницы с новостями о WordPress (дружно похлопаем в ладоши, теперь этот блок в самом низу и не так мозолит глаза).

    Больше всего конечно интригуют кнопки «Edit» рядом с каждым блоком, но пока что доступа к редактированию не дали (во всяком случае, в тестовом блоге), если можно будет настроить отображение/скрытие каждого из них, то мы получим «админку мечты».

  5. «Пузырь» в комментариях.
  6. Вы, должно быть, заметили «комиксовый бабл» над ссылкой «Comments» c цифрой 0? Я сперва подумал, что там отображается количество оставленных пользователями комментариев, но не тут то было — после небольшого изучения выяснилось, что «пузырь» показывает количество комментариев, ожидающих модерации. И, знаете, мне очень нравится эта ненавязчивая напоминалка, которая сразу бросается в глаза, в отличие от того, как это реализовано сейчас.
    У меня это вообще постоянная проблема — Акисмет помечает как спам некоторые нормальные комментарии, я их оттуда, при помощи Spam Viewer, вытаскиваю, а вот отмодерировать порой забываю, и висят они пару дней неприкаянные.

  7. Создание и редактирования постов
  8. Тут всё ещё явно сыро и недоделано, во всяком случае мне показалось несколько неудобным, что совсем все разделы выстроены в список, друг за другом, но думаю это временно.
    Зато понравилась работа с тэгами, которые теперь представляют собой не просто слова через запятую, а действительно интерактивные элементы, что упрощает и ускоряет работу с ними. Но вот сможет ли это заменить Simple Tags — сложный вопрос, особенно, если не будет возможности выбирать из списка уже использованных тэгов.
    Визуальным редактором я не пользуюсь, но выглядит он не в пример приятнее, хотя и не работает пока что вообще) А вот HTML-редактор посмотреть нельзя, а жаль.

    Со страницами всё почти то же самое, только в другом порядке — видимо по убыванию важности пунктов, хотя я не особо это прочувствовал. Так же в раздел «Write» поместили добавление ссылок в блогролл.

    В разделе «Manage» особо изменений я не заметил. Поэтому перейду к тому, что мне очень понравилось.

  9. Управление виджетами

  10. Во-первых, добавили возможность фильтровать виджеты, чтобы скрыть уже использованные.
    Во-вторых, теперь можно добавлять любое количество одинаковых плагинов, если они сами это поддерживают, просто нажав «Add», например, RSS-виджет.
    В-третьих, наконец-то сделали действительно удобное и функциональное редактирование виджетов, потому как существующий ныне вариант, меня несколько бесит, а тут всё наглядно и можно просматривать одновременно настройки всех добавленных в сайдбар виджетов. В общем зачОт.

Ну вот собственно и всё, что нового мне удалось разглядеть в довольно сырой, но между тем многообещающей бетке админ-панели.

Какие выводы и ощущения?
Ждать определенно стоит, а так же стоит почаще заходить и проверять — не добавилось ли на этой тестовой страничке что-нибудь нового? Пока что нельзя оценить заявленную возможность настраивать Dashboard widget-style, т.е. подключать сторонние виджеты и самому выбирать, что и как показывать на стартовой странице, да и вообще, пока что админка выглядит скорее как «рыба», которую надо хорошо обработать напильником, подкрасить там и тут CSS-ками и навешать побольше AJAX-интерактивности, ну а тогда уж «WordPress ещё всем покажет!»

Выпадающее меню “имени Suckerfish” в WordPress

За последнее время сразу несколько человек поинтересовались у меня, а не в курсе ли я, как делать выпадающие меню в WordPress? Я честно отвечал «Нет», потому что с содроганием вспоминал, как когда-то, на заре изучения web-кодинга, пытался сделать более-менее нормальное выпадающее меню. Триста раз проклял я тогда и java-script, и html, и, конечно же, все браузеры.

Но раз люди спрашивают, то появляется жгучее желание им помочь, вот и полез раскапывать, как дела обстоят сейчас и что новенького умные дядьки намутили, и даже, знаете ли, нашёл. Причём нашёл и очень сильно удивился тому, как это было сделано — вот что значит мало практиковать вёрстку и работать с CSS, потому что, по сути, для того, чтобы намудрить ОТЛИЧНОЕ выпадающее меню, достаточно знать:
а) как делать ненумерованные списки в html (<ul></ul>)
б) уметь копипастить файл-стилей

Ну что же, если эти два пункта и то вызывают у вас сомнения, то буду предельно доступно излагать по шагам, а нетерпеливые могут сразу перейти сюда и посмотреть/пощупать своими руками, итак

Шаг 1. Готовим список пунктов меню руками

Сейчас объясню суть создания выпадающего меню из списков и после этого мы сделаем простейший список, который и будем мучить.

Как известно, выпадающее меню состоит из элементов/ссылок, при наведении на которые, мы получаем доступ к дополнительному списку с под-элементами. В обычной ситуации главные пункты меню располагаются в строку, а каждая группа под-элементов представляет собой столбец ссылок, появляющийся после наведения на элемент главного меню.
Вот мы и будем делать именно списки — внешний для главного меню и внутренние — для каждого набора под-разделов.

Всё просто и, я думаю, дополнительные разъяснения не требуются, главное не забыть указать у внешнего меню class=»nav» и id=»nav-one».

Шаг 2. Стилизуем списки

Сам файл стилей не слишком большой, но между тем целиком код в блоге я приводить не хочу, поэтому советую для дальнейшей беседы скачать файл стилей, а я буду просто рассказывать про принцип работы, ссылаясь на него.
Берём файл sfstyle.css и открываем блокнотом или любым другим редактором (если кому интересно, то я использую Zend Development Environment или, проще говоря, ZDE).
Ну что же, приступим.

Первым делом уберём у всевозможных списков все отступы и прочие списочные атрибуты, это делается в .nav, .nav ul. После чего выводим их в строчку, а не как обычно, за это у нас отвечает float:left; в .nav li. Сразу обращу внимание на то, что мы везде применяем относительное (relative) позиционирование (position), чтобы элементы появлялись в строго заданных им местах, относительно родительских элементов.

Теперь нам необходимо спрятать внутренние списки с глаз долой и отображать их только при наведении. Тут мне попалось два способа:
1) Найденый на A List Apart — для вложенных ul элементов устанавливаем атрибут display:none;, а при наведении (li :hover ul) возвращаем в нормальное значение block.
2) Попавшийся на одном Ajax-ориентированном сайте — прятать список за экран (top:-999em;), а потом устанавливать позицию при наведении.

Так как я взял CSS из второго варианта (почему станет ясно позже), то с первым предлагаю поэкспериментировать самостоятельно.

В принципе на этом можно было бы и закончить, если бы не всеми любимый Internet Explorer (будь он неладен), который плохо обрабатывает псевдо-класс :hover, поэтому переходим к следующему шагу.

Шаг 3. Немного java-script и jQuery

Как это не прискорбно, но java-script придётся применять в любом случае, но я имею вам предложить целых два варианта (ну на самом деле их, наверное, больше), а вы уж сами решайте каким воспользоваться. Объяснять как именно ЭТО работает, не буду, скажу только, что всё сводится к прицеплению обработчкиков при наведении для всех li внешнего списка.
Способ 1 — Чистый java-script

Способ 2 — C применением jQuery

Кому как, а мне визуально больше нравится второй вариант, к сожалению, тут есть одно «НО» — необходимость подключения библиотеки jQuery. Не скажу, что это огромный минус, потому что: а) она идёт в комплекте с WordPress, так что ничего дополнительно скачивать не придётся; б) возможно какой-то из установленных у вас плагинов уже ею пользуется. Сама библиотека весит 20-30кб, поэтому особо не обременит пользователя, к тому же грузится она только первый раз, а потом подгружается из кэша. И не стоит забывать, что она позволяет делать многие интересные вещи, о чём ниже, в пункте 4.

Сейчас я объясню как её подключить:
1. Проверьте, не подключена ли она уже каким-нибудь плагином, для этого откройте любой пост в своём блоге и в html коде поищите слово «jQuery».
2. Если его нет, то лезем в файл темы header.php и где-нибудь перед </head> вставьте
<script type=»text/javascript» src=»http://ваш_домен/wp-includes/js/jquery/jquery.js»></script>

Кстати, если кто не знает, то приведенные выше java-script листинги нужно тоже вставить в хэдер до </head>, обрамив с обоих сторон <script type=»text/javascript»>…</script>

Шаг 4. jQuery-бонус — плавное меню

Раз уж мы вынудили пользователя скачать лишних целых 25кб, то надо его за это как-то наградить:)
Как вы смотрите на то, чтобы сделать появление меню плавным? Думаете сложно? А как вам вот такой код?

Помоему просто отлично, а главное понятно) Добавлю лишь, что вместо «fast» можно добавить «slow» или любое число в миллисекундах.

Тем, кто всё это прочёл думаю стоит посетить эту страничку с примером, где теперь должно быть всё понятно, а если остались какие-то вопросы или я что-то не точно написал — прошу в комменты.

Теперь думаю при помощи этой методики не составит труда делать различные меню — при помощи всяких там wp_list_categories и иже с ним.

ПыЦ: Только не спрашивайте меня, почему SuckerFish. Как я понимаю — это означает рыбу прилипалу или я ошибаюсь? Есть среди читателей знатоки ангельского языка?