Работает система Orphus

WordPress для каждого на русском языке!

  • RSS

Учебник по WordPress

Полезные советы

Хитрости

Шоукейс

О проекте

Темы WordPress на русском!

Эволюция пользовательского интерфейса WordPress (2003 – 2009)

Четверг, 14 января 2010 - Рекомендуем, Статьи и советы

WordPress каким мы видим его сейчас – это продукт любви, которой наградило его сообщество. Без идей, пожеланий, рекоммендаций и советов пользователей и тяжелой работы команды разработчиков, которая воплощала это всё в жизнь, из него никогда бы не получилось того, что есть сейчас. Сегодня WordPress предстает перед нами мощной полноценной CMS, подходящей почти под любые нужды. [...]

читать дальше

Продвинутые советы по разработке сайтов на WordPress

Понедельник, 27 июля 2009 - Рекомендуем, Статьи и советы

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

читать дальше

5 полезных и оригинальных способов использования виджетов в WordPress

Четверг, 16 июля 2009 - Рекомендуем, Статьи и советы

Если вы создали хотя бы несколько сайтов на WordPress, то вы наверняка уже знаете, что WordPress это гораздо больше, чем просто блоггинговый движок. Он может быть также использован как и CMS, а виджеты WordPress – это мощный инструмент в арсенале WP-разработчика.

Многие думают, что WordPress виджеты это всего лишь способ реорганизовать структуру сайдбара вашего блога, не трогая код. Это действительно полезная способность видежтов, но это всего лишь верхушка айсберга всех возможностей, которые они предоставляют.

читать дальше

Урок №22 Стилизуем сайдбар

Четверг, 3 декабря 2009 - Создание тем

После стилизации сайдбара, мы выйдем на финишную прямую нашего курса. Уже? Да, но не волнуйтесь. Я продолжу публиковать учебные материалы по WordPress. Ведь всегда есть что-то новое, чему можно научиться. Да и сам курс можно расширить и улучшить, чем я и займусь.

Сегодня вам не понадобится ничего, кроме файла стилей - откройте style.css в вашем редакторе.

Шаг 1

Введите эти строки под .sidebar{}:

.sidebar ul{
list-style-type: none;
margin: 0;
padding: 0 10px 0 10px;
}

Тем самым мы придали стиль тэгу базового ненумерованного списка <ul> сайдбара, и теперь все вложенные UL-списки будут оформлены тем же стилем. В данном случае, это: никакого буллета, нулевые внешние margin и 10-пиксельные padding.

Например:

inheritance.gif

Стиль первого UL-списка будет присвоен списку второго порядка (вложенному списку). Если вы присваиваете границу первому списку, второй тоже будет иметь границу (border).

Cохраните и обновите браузер. Теперь элементы списка уже не маркированы с помощью буллетов.

Обратите внимание на то, как нужно добавлять padding сверху и снизу в шаге 2.

Шаг 2

Введите следующий код под .sidebar ul{}:

.sidebar ul li{
padding: 10px 0 10px 0;
}

Вот что вышло с padding:

no-top-padding top-padding

Почему мы не добавили 10-pх padding  UL-списку в первый раз. Вам необходимо отделить один элемент списка от другого. Перед тем как мы добавили padding к .sidebar ul li{}, между полем поиска и календарем не было промежутка, также его не было между Календарем и Страницами. Так вот, эти 10-пиксельные паддинги сверху и снизу от .sidebar ul li{} нужны для разбивки блоков. Если бы UL-тэг имел паддинг для всех четырех сторон, вместо всего лишь слева и справа (0 10px 0 10px), в итоге у вас бы вышел 20-рх паддинг сверху или 20-рх паддинг снизу, если бы вы старались разграничить элементы списка после применения паддинга к UL. Понимаете, о чем я говорю?

Если нет, ничего страшного, просто добавьте паддинг для .sidebar ul{} сверху и снизу и сами всё увидите.

Шаг 3

Введите данный код под .sidebar ul li{}:

.sidebar ul li h2{
font-family: Georgia, Sans-serif;
font-size: 14px;
}

Не забудьте, что стилизация подзаголовка под .post{} не имеет значения, потому что вы отметили подзаголовки только под .post{}. Сейчас же, вы придаете стиль незатронутым подзаголовкам в сайдбаре. Вот результат:

h2-and-unnecessary-padding

Вот как выглядит мой список ссылок Страницы. Наверное у вас всего одна ссылка, О себе (About). Я добавил несколько ссылок и вложенных уровней страниц в мою локальную версию WordPress, чтобы посмотреть, как будут выглядеть ссылки нижних уровней. Обратите внимание на ненужный дополнительный padding внизу, я подчеркнул его красным. Это иллюстрация механизма присваивания стилей. 10 пикселей приплюсовались и получилось 20.

Из-за того что вы добавили паддинг к .sidebar ul li{}, элементы списка низших уровней получили тот же паддинг. Чтобы исправить это, смотрите шаг 4.

Шаг 4

Добавьте эти строки под .sidebar ul li h2{}:

.sidebar ul ul li{
 padding: 0;
 }

Упорядоченные UL-списки в .sidebar ul ul li{} определяют, что цель – элементы списка нижних уровней. Напомню, что когда все параметры равны 0, вам не нужно ставить суффикс рх.

Вот результат:

ul-li-ul

Строки находятся слишком близко друг от друга, так что давайте зададим строкам высоту в 24px.

Добавьте line-height: 24px; к .sidebar ul ul li{}.

line-height.gif

ul-li-ul-li

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

На сегодня все. Урок окончен :)

Перейти к следующему уроку »

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

  1. happybolt пишет:

    Сделал шаблон руководствуясь уроками 1 – 17; но в этих уроках нет информации о том, как сделать страницы с помощью которых посетитель может оставить свой комментарий. Будут ли уроки на эту тему?

    • wp-admin пишет:

      happybolt, буквально через один урок раскроем эту тему. Подпишитесь на RSS, чтоб получить этот урок сразу после публикации.

  2. WordPresser пишет:

    Наконец-то! Супер пост!!

  3. blogavod пишет:

    Хороший урок, а у меня все руки не доходят до стилизации сайдбара :(

  4. alex пишет:

    очень бы хотелось почитать! продолжайте пожалуйста!)

  5. Игорь пишет:

    маркированный список так и остался, не одно из преобразований вообще не применилось…

    • Vanilla Man пишет:

      Игорь, поправил некорректно вставленный код, обновите и попробуйте снова.

    • ZXSAQW пишет:

      Игорь!) Вообщем та же проблема была.

      У нас в index.php закрывающий класса sidebar стоит перед
      .

      Этот нужно перенести и поставить перед

      Попробуй.)

      • ZXSAQW пишет:

        Теги не отображаются…

        Короче.)

        открываешь index.php, ищешь !!!закрывающий!!! див сайдбара вырезаешь его и ставишь перед див ид=футер. Надеюсь понял.)

  6. duh пишет:

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

Ваш комментарий

Этот домен продается здесь: telderi.ru, и еще много других