Работает система 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 виджеты это всего лишь способ реорганизовать структуру сайдбара вашего блога, не трогая код. Это действительно полезная способность видежтов, но это всего лишь верхушка айсберга всех возможностей, которые они предоставляют.

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

Урок №21 Форматирование поста

Вторник, 6 октября 2009 - Создание тем

Сегодня я расскажу вам как форматировать все элементы поста, для этого вам понадобится только файл style.css. Откройте его в редакторе и приступим.

Шаг 1

Избавьтесь от большинства марджинов и паддингов - введите следующий код над body{} в style.css:

body, h1, h2, h3, h4, h5, h6, blockquote, p {
margin: 0;
padding: 0;
}
  • Обратите внимание, мы поставиили margin: 0; вместо margin: 0 0 0 0;. Когда все параметры одинаковы, ставьте одно число. Тоже самое и для padding.
  • Сохраните файл. Обновите браузер. Не волнуйтесь, сейчас вы сможете добавить марджины и паддинги именно там, где вы хотите чтобы они отобразились, а не там, где браузеры разместят их по умолчанию.

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

Шаг 2

Придаем стиль H1-заголовку, вставьте эти строки под body{}:

h1 {
font-family: Georgia, Sans-serif;
font-size: 24px;
padding: 0 0 10px;
}
  • font-family: Georgia, Sans-serif; меняет шрифт H1-заголовка с Arial (доставшемуся ему от body) на Georgia. Если в системе не установлен Georgia, браузер будет отображать Sans-serif;
  • font-size: 24px; ну здесь все понятно без обьяснений. Хотя обратите внимание на то, что когда вы устанавливаете размер шрифта 12px внутри body{}, тэги H1 и H2 не следуют этому изменению. Дело в том, что для тэгов заголовка есть свои собственные правила. Чтобы производить изменения над ними, нужно устанавливать отдельные параметры их стилизации.
  • padding: 0 0 10px; означает 10-пикселевый нижний паддинг. Это добавит промежуток между заголовком блога и его описанием. Сохраните, обновите браузеры, вот результат:

format

Шаг 3

Вставьте следующий код под #container{} (сохраняйте изменения и обновляете браузеры после введения каждого блока кода, чтобы видеть изменения шаг за шагом):

.post {
padding: 10px 0 10px 0;
}

Вы добавили 10-пикселевые отступы сверху и снизу к каждому DIV-у с классом post.

.post h2 {
font-family: Georgia, Sans-serif;
font-size: 18px;
}

.post h2 - это не общее правило. Оно направленно специально на H2-подзаголовки внутри post DIV. На H2-подзаголовки в сайдбаре это не влияет. Это называется наследование стилей.

.entry {
line-height: 18px;
}

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

Шаг 4

Вставьте эти строки под a:hover {}:

p {
padding: 10px 0 0 0;
}

10-пикселевый верхний отступ для каждого тэга параграфа.

Шаг 5

Вставьте под .entry {}:

p.postmetadata {
border-top: 1px solid #ccc;
margin: 10px 0 0 0;
}

Помните тэг параграфа с классом postmetadata? Стилизовать отдельный тэг параграфа и DIV - это почти одно и то же. Вы можете назначить рамку (border), отступы (margin и padding) и фон (background) к любому из тегов.

К тэгу параграфа postmetadata вы добавили серую рамку и 10-рх верхний отступ к нему.

border-top означает только верхнюю часть рамки. border-left означает только левую часть рамки и т.д. Только border, без -top, -right, -bottom или -left означает рамку со всех сторон. Например, border: 1px solid #ccc; значит, что всем четрым сторонам рамки вы применили серый цвет и ширину 1 пиксель.

Шаг 6

Вставьте этот код под p.postmetadata {}:

.navigation {
padding: 10px 0 0 0;
font-size: 14px;
font-weight: bold;
line-height: 18px;
}

Контрольный пример: для DIV-а navigation, который включает ссылки Следующая страница и Предыдущая страница, мы только что:

  • добавили 10-пиксельный верхний отступ
  • изменили размер его шрифта до 14 пикселей
  • выделили шрифт жирным
  • увеличили междустрочный интервал до 18 пикселей

На сегодня все. Если что-то не понятно или я плохо объяснил - пишите в комментариях.

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

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

  1. happybolt пишет:

    Читаю ваш Учебник по WordPress с удовольствием. Мне нравится, что вы доступно излагаете материал, спасибо.
    Существует ли печатное издание учебника по WordPress? Не обязательно вашего авторства, а вообще?

    • wp-admin пишет:

      happybolt, на русском языке встречал только “WordPress для чайников“, но не читал, поэтому не могу говорить о его пользе. На английском же – полно!

    • remeasiance пишет:

      Lustful teen sexily poses in the.
      [URL=http://interactiveteen.tk/russian-teen-porno/sexy-hot-teen-jailbait-porn.html]sexy hot teen jailbait porn[/URL]
      [URL=http://100freegallery.com/porn-movies-clip/teen-sex-taboo-stories.html]teen sex taboo stories[/URL]
      [URL=http://globalteen.tk/teen-sex/young-nude-teen-porn-tube.html]young nude teen porn tube[/URL]
      [URL=http://teenoffice.tk/teen-xxx-porno/online-milf-and-teen-porn.html]online milf and teen porn[/URL]
      [URL=http://easyteen.tk/teen-porno-movies/patty-r-contreras-teen-porn.html]patty r contreras teen porn[/URL]
      [URL=http://easyteen.tk/russian-teen-porno/teen-porn-actresses-pictures.html]teen porn actresses pictures[/URL]
      [URL=http://aboutteenporn.tk/hot-teen-porno/teen-porn-christmas-pictures.html]teen porn christmas pictures[/URL]
      [URL=http://globalteen.tk/russian-teen-porno/teen-mpegs-sex.html]teen mpegs sex[/URL]
      [URL=http://teenoffice.tk/black-teen-porn/sex-actress-teen-porn-pics-pictures.html]sex actress teen porn pics pictures[/URL]
      [URL=http://teenstore.tk/videos-teen-porno/online-free-teen-porn-no-registration-wmp.html]online free teen porn no registration wmp[/URL]
      [URL=http://russianteen.tk/student-porn/chinese-teen-porn-gallery-movie.html]chinese teen porn gallery movie[/URL]
      [URL=http://100freegallery.com/sex-real-teen-home/bushy-teens-having-sex.html]bushy teens having sex[/URL]
      [URL=http://teenstore.tk/teens-porn-pics/online-amature-swallow-teen-porn.html]online amature swallow teen porn[/URL]
      [URL=http://100freegallery.com/teen-porno/skinny-sexy-teen.html]skinny sexy teen[/URL]
      [URL=http://100freegallery.com/teen-porno-video/teens-using-camra-phones-for-sex.html]teens using camra phones for sex[/URL]
      [URL=http://russianteen.tk/teens-porn/teen-sex-reality-porn-videos.html]teen sex reality porn videos[/URL]
      [URL=http://easyteen.tk/gay-teen-porno/iligal-teen-porn-movie.html]iligal teen porn movie[/URL]
      [URL=http://100freegallery.com/sexy-teen-takes-long-dick.html]sexy teen takes long dick[/URL]
      [URL=http://internetteen.tk/gay-teen-porno/ponytail-asian-teen-porn-movie.html]ponytail asian teen porn movie[/URL]
      [URL=http://aboutteenporn.co.cc/best-teen-porno/100-free-teen-porn-videos-pictures.html]100 free teen porn videos pictures[/URL]
      [URL=http://teenoffice.tk/teens-porn-pics/taboo-teen-asain-porn-online.html]taboo teen asain porn online[/URL]
      [URL=http://teenoffice.tk/best-teen-porno/midget-teen-porn-pics-pictures.html]midget teen porn pics pictures[/URL]
      [URL=http://russianteen.tk/best-teen-porno/cute-little-teen-porn-movie.html]cute little teen porn movie[/URL]
      [URL=http://100freegallery.com/student-porn/movies-of-pornstar-raven-reiley.html]movies of pornstar raven reiley[/URL]

  2. фото блог пишет:

    Пропущен буква а – “изменили рзмер его шрифта до 14 пикселей”

  3. Base of forums Europa - Page 1622 - WiiSpin Forums пишет:

    [...] as the Violet Wand.Top bondage sites of BDSM Terminal.Bondanime – BDSM HENTAI, FULLSCREEN MPEGS. girls in shiny bondage pics xxx video of bdsm cartoons adult dvd spanking uk bdsm bdsm ws tgp ebony black bondage asian [...]

  4. What is this "mybrowserbar.com"? пишет:

    [...] about punishment and obedience.Subject: BDSM HARDCORE 1 Tb movi .XXX Bondage Movies gays porn.schoolgirl spanking pornAug 2010 tiffany marie cox sex videos sex video torrents sex amateur gratuit video mother daughter [...]

  5. Евгений пишет:

    admin, а вопрос можно?
    font-weight: bold; или все таки font-wight: bold;?

  6. Евгений пишет:

    сорь))
    уже нашел…

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

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