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

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

Урок №18 Style.css и вступление к CSS

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

Лучший способ выучить CSS - как и многое другое – это сразу приступить к практическим занятиям. В отличие от XHTML и PHP, вам не надо работать с центральными файлами шаблона. Также нет никакой базовой концепции, в которой нужно разобраться. Просто пробуйте! Здесь также работает любимый метод проб и ошибок.

Перед тем, как начать, в вашем файле style.css уже должна быть некоторая информация. Давайте прямо сейчас выясним, что она означает.

/*
Theme Name: Тестовая тема
Theme URI: http://wp-config.ru/
Description: Тестовая тема учебного курса.
Version: 1.0
Author: wp-admin
Author URI: http://wp-config.ru/
*/
  • Первая строчка – это имя темы, она говорит сама за себя.
  • Вторая строка – это место расположения страницы вашей темы или место где она всегда доступна. Если вы создаете тему для себя, не для публичного использования, забудьте об этом.
  • Третья строка – описание темы.
  • Четвертая – номер версии, что важно, особенно, когда вы выпускаете обновленные версии вашей темы для общественного пользования.
  • Пятая и шестая строки – это соответственно имя автора и его домашняя страница.
  • Знаки /* и */ ставятся, чтобы информация  о вашей теме не влияла на отсальную часть страницы. Это комментирование CSS. Когда вы будете вводить код CSS для стилизации своей веб-страницы, вам может понадобиться добавить комментарии в том или ином месте, чтобы не запутаться. Но вы же не хотите, чтобы эти комментарии влияли на код? Для этого необходимо использовать знаки /* и */, чтобы сделать комментарии невидимыми браузеру.

Вот обработанная информация о теме:

theme-thumb

Шаг 1:

На этом этапе вам необходимы все браузеры, под какими вы хотите чтобы правильно отображалась ваша тема: Mozilla Firefox, Internet Explorer(в идеале версий 6, 7 и 8), Opera, Google Chrome и Safari - всё для тестирования темы под ними. Разные браузеры порой по разному воспринимают CSS. Лучше всего тестировать тему в как можно большем количестве операционных систем и браузеров. Если вы так же ленивы как и я - тестируйте тему только в Firefox :-)

Шаг 2:

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

body {
margin: 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align: left;
vertical-align: top;
background: #ffffff;
color: #000000;
}

Как и при работе с XHTML или PHP, добавляйте отступы для организации кода:

code-organization

Сохраните файл style.css, обновите браузеры, чтобы увидеть изменения (помните что вы работаете с несколькими браузерами).

Считайте, что body{ } – это тэг, а все, что между фигурными скобками – это атрибуты и значения, как и в  XHTML. { - это открыть. } – это закрыть. Внутри фигурных скобок { и } двоеточие означает начало значения, а точка с запятой - конец (я использую термины из XHTML и PHP «тэг», «атрибут», «значение» для СSS, чтобы вам было проще; на самом деле, РНР и CSS используют разные термины, например: параметры, селектор и свойство).

Перед тем как продолжить, объясню, почему вы использовали CSS селектор body{ } - потому, что вы работаете над стилизацией базовой части веб-страницы – тэгом <body>. Вы не стилизируете тэг <header>, потому что нечего стилизировать. Все, что отображается на веб-странице находится в структуре тэгов <body> и </body>.

Позже вы будете работать над стилем DIV блока с ID "header" и каждый блок, для которого потребуется указать свой стиль, оличный от общего.

Давайте подробнее разберемся в нашем коде:

margin: 0; - отмена созданных по умолчанию отступов внутри боди тэга. Если вы хотите, чтобы отступы присутствовали, или вообще сделать их больше, измените 0 на большее значение: 10рх, 13рх, 20px и т.д. РХ сокращенно пиксель (pixel). Когда поле равно "0", вам не обязательно ставить рх после нуля.

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

margins

После изменения отступа на margin: 0; отступы исчезнут.

font-family: Verdana, Helvetica, Georgia, Sans-serif; - указывает, какой шрифт использовать для отображения элемента. Шрифты, которые следуют после первого, в данном случае это Verdana, являются альтернативными. Если у посетителей вашей страницы в системе не установлен шрифт  Verdana, браузер будет искать шрифт Helvetica, потом Georgia, затем Sans-serif. Вы можете найти список установленных шрифтов в системной папке Fonts вашей операционной системы;

font-size: 12px; - размер шрифта, здесь все говорит само за себя. Увеличте или уменьшите показатель, чтобы увидеть изменения;

text-align: left; - выравнивает ваш текст по левому краю, измените его на выравнивание на "right" или "justify", чтобы увидеть изменения;

vertical-align: top; - проверяет, все ли начинается с верха страницы. Если вы измените данный пункт на выравнивание по середине или по нижнему краю, содержимое опустится вниз;

background: #ffffff; означает белый фон. Кадый цвет имеет свой код в HTML Например #ffffff – это код белого цвета. #000000 – код черного.

color: #000000; означает, что текст будет черного цвета.

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

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

4 комментария

  1. alex пишет:

    По поводу тестирования в разных браузерах, был где-то сайтик, который позволял по вводу урл показать как выглядит страница в очень многих браузерах(большой список на выбор)..
    вот только ссылку не помню, надо порыться в избранном дома и на работе, как найду – отпишу.

  2. Vanilla Man пишет:

    Alex, подозреваю вы имели ввиду сайт browsershots.org? Он наиболее популярный среди остальных.

  3. alex пишет:

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

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

    4 утра, на сегодня хватит уроков, завтра продолжу. Спасибо!

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

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