Редактируем WordPress шаблон — таблица стилей (продолжение)
Мы уже рассмотрели шаблоны страниц WordPress header, а также, index и single. Привели примеры, что мы можем отредактировать. Сегодня обратимся к моему любимому разделу темы WordPress – таблице стилей CSS. Ведь именно она отвечает за внешний вид нашего блога – его дизайн!
Если прочие страницы отвечают на вопросы «что и где?» — что и где появляется на страницах блога – то таблица стилей отвечает на вопрос «как?»:
- Как выглядят шрифты заголовков, основного текста в постах, цитат, ссылок?
- Каким цветом выделяются подзаголовки первого, второго, третьего и т.д. уровней?
- Как оформлены изображения, есть ли у них, например, тень или рамка?
- и т.д.
Для тех, кто не силен в html – обязательно откройте какой-нибудь справочник. Я советую прекрасный, удобный и очень полезный сайт htmlbook — тут можно быстро найти любой тег и узнать о его назначении.
Основная структура кода CSS
Форма записи кода стиля CSS
- Сначала прописывается название стиля: оно начинается с точки – например .mystyle
- Потом идет его описание: оно окружено фигурными скобками, внутри отдельные элементы назделяются точкой с запятой – например { background-color: #FFFFFF; text-align: center}
Все вместе это будет выглядеть так:
.mystyle { background-color: #FFFFFF; text-align: center}
или так
.mystyle {
background-color: #FFFFFF;
text-align: center
}
В принципе, между этими видами записи нет никакой разницы. Просто некоторые считают, что удобнее читать код с переносами строк. Если будете добавлять свои стили – записывайте их в любой из этих форм. Главное, правильно указать название, не забыть про скобки и разделение между отдельными характеристиками стиля.
Названия стилей, зачастую, совпадают с тегами форматирования текста – например, p (обычный абзац), h1, h2 (заголовки первого и второго уровня), a (ссылка). Смысл в том, что, когда в html-коде страницы встречается определенный тег – его содержание оформляется по правилам, записанным в таблице стилей.
Например:
.p { background-color: #FFFFFF; text-align: center } – все абзацы будут выводиться на белом фоне и выравниваться по центру.
Логика записи кода стиля CSS
В таблице, которая описывает стиль для целого шаблона WordPress будет много пунктов. Чтобы не запутаться, нужно учесть, что наиболее общие правила стиля записываются выше. Например, правило, которое применяется ко всем ссылкам вообще, будет выше правила, которое касается ссылки, на которую наведен курсор или посещенной ссылки (a:hover и a:visited).
Иногда авторы тем для Вордпресс подписывают отдельные фрагменты таблицы стилей, чтобы мы быстрее поняли, где и что. Но будьте готовы найти нужный код экспериментальным путем. Свои находки можно подписывать так:
/* подписываем */
Редактирование стилей WordPress шаблона
Итак, например, нам не нравятся заголовков постов в блоге. Скорее всего, они выводятся в тегах h2. Ищем что-то вроде:
h2 { font-size: 120% «EBGaramondSC», «Palatino», «Palatino Linotype», «Book Antiqua», Georgia, serif; color: #33cc33; }
Т.е. правило для всех заголовков второго уровня таково:
- Шрифт больше обычного на 20%;
- Могут использоваться шрифты «EBGaramondSC», «Palatino», «Palatino Linotype», «Book Antiqua», Georgia, serif – браузер читателя покажет ему ваш заголовок, написанный шрифтом EBGaramondSC, если у него не будет такого шрифта на компе, то следующий вариант Palatino и т.д. Если ни один из перечисленных шрифтов не обнаружен, то будет выбран любой шрифт класса serif – «без засечек».
- Цвет шрифта – зеленый (один из бесконечных вариантов зеленого)
Что мы можем тут поменять? – Все!
Можем изменить размер – сделать заголовки еще крупнее:
h2 { font-size: 200% «EBGaramondSC», «Palatino», «Palatino Linotype», «Book Antiqua», Georgia, serif; color: #33cc33; }
Можем добавить другой шрифт:
h2 { font-size: 120% “Artist-Modern”, «EBGaramondSC», «Palatino», «Palatino Linotype», «Book Antiqua», Georgia, serif; color: #33cc33; }
Можем изменить цвет (сделаем голубенький):
h2 { font-size: 120% «EBGaramondSC», «Palatino», «Palatino Linotype», «Book Antiqua», Georgia, serif; color: #33ccff; }
Советую внимательно рассмотреть код таблицы стилей, сверяясь со справочником html и CSS. Так вы быстрее освоитесь в формах записи и сможете самостоятельно поменять многие другие параметры. В результате, дизайн вашего блога станет совершенно уникальным.
Предыдущая статья из этой серии «О страницах шаблона WordPress». Продолжение «Шаблон WordPress и социальные сети — практика+подарки«
| Читайте БлоготеЙ! на Google+ | |
| Читайте БлоготеЙ! на Фейсбуке |
Ох, они такие разные во всех шаблонах. И туда как залезешь, не вылезешь)
[Ответить]
katyaru отвечает:
Май 9th, 2012 at 20:36
Но разбираться-то нужно! Принцип все равно один)
[Ответить]
Elena отвечает:
Май 10th, 2012 at 14:10
А тем более после такого руководства — одно удовольствие
[Ответить]
katyaru отвечает:
Май 10th, 2012 at 14:46
Я надеюсь, что мои «заметки» просто снимут первый страх и шок от вида этого кода)
[Ответить]
Андрей отвечает:
Февраль 14th, 2013 at 16:24
Как сделать иконки горизонтальными???
[Ответить]
katyaru отвечает:
Февраль 14th, 2013 at 16:30
Посмотрите в этой статье /social_plaguin_free/
Если иконки не встают горизонтально — м.б. у вас не хватает для них места и нужно менять их размеры. Иногда помогает вставить пробелы строк между рядом кнопок и другими элементами выше и ниже (добавляем тег /br в треугольных скобках)
[Ответить]
Я как-то попыталась осмыслить что-то в своем коде — чуть шею не свернула, меня такое обилие новой информации настораживает немного, надо привыкать постепенно!.. ))
[Ответить]
katyaru отвечает:
Май 9th, 2012 at 22:26
Очень постепенно — эти мои заметки — плод полутора лет периодических глубоких раскопок в кодах разных шаблонов, написанных на разных языках, чтения профильной литературы))) Но потихоньку — надо вникать)
[Ответить]
До стилей я ещё не дошла, но собираюсь.
[Ответить]
katyaru отвечает:
Май 9th, 2012 at 23:59
Нужно морально подготовиться и изучить матчасть)
[Ответить]
css очень интересная тема, на самом деле все очень логично, времени конечно на изучение нужно очень много
[Ответить]
katyaru отвечает:
Май 10th, 2012 at 11:07
Если теорию сочетать с практическими изысканиями, то все становится понятнее намного быстрей
[Ответить]
Читать приду, если свой блог на WP заведу)))
[Ответить]
Скоро дозреем, будем сами шаблоны писать, Гудвину сто очков вперёд дадим))
[Ответить]
katyaru отвечает:
Май 10th, 2012 at 11:06
Ага, по безумию дизайна и кодирования мы, точно, будем на первом месте)))
[Ответить]
Вот в такие дебри я ещё не рискую влезать) Но со временем, под твоим чутким руководством, думаю, освою и эти премудрости)))
[Ответить]
katyaru отвечает:
Май 10th, 2012 at 11:05
Да, потихонечку можно)
[Ответить]
пошла искать шрифт (мелковат он у меня очень в описании сайта в шапке)…
[Ответить]
katyaru отвечает:
Май 10th, 2012 at 11:37
Может, просто размер поменять? Имеет смысл использовать известные шрифты, распространенные, типа Arial или Times New Roman, которые, гарантированно, есть на компьютерах всех пользователей!
[Ответить]
Как же все сложно. Раньше я меняла стили методом «тыка». Но только шрифт и цветовую гамму. Теперь уже на экпериментирую. Если нет знаний, лучше не лезть, чтобы не пришлось исправлять.
[Ответить]
katyaru отвечает:
Май 10th, 2012 at 13:02
Но знания и не появятся — если не лезть. Полез — столкнулся с проблемой — нашел решение. Полез — чего-то не понял — пошел узнавать, искать ответы. Просто нужно обезопасить себя — сохранить бекап)
[Ответить]
[…] владельцу блога на WordPress обязательно приходится редактировать документы, представляющие его тему. Ведь без этого […]
[…] не лишне вспомнить о стандартах W3C, которые требуют создавать отдельные таблицы стилей. А в коде содержимого (контента) только ссылаться на […]
[…] Я тоже часто так восклицала (точнее, ворчала тихонечко). Но не останавливала своих попыток расшифровать кодированные письмена. И вот, хочу с вами поделиться своими, вполне поверхностными, знаниями. (для лучшего понимания, рекомендую прочитать предшествующие публикации этой серии: о структуре темы и странице header.php, о страницах index.php и single.php, о странице style.php) […]
Статья уже не…молодая, но для меня актуальная. Но не получается ни-че-го.
Как только лезу в таблицу стилей и прописываю, что мне нужно, мне выдает примерно такое «предупреждение: файл не может быть изменен, так как находится по пути home/ мое хостинговое». Лезу в админку и правлю там, но тогда вообще ничего не происходит. Что-то тут не так. Голову сломала, теперь ломаю шею:)))
[Ответить]
katyaru отвечает:
Ноябрь 26th, 2013 at 19:28
Я предлагаю редактировать прямо в админке, выбрав страницу style.php Ты там пытаешься что-то делать или где?
[Ответить]
nehydna отвечает:
Ноябрь 27th, 2013 at 09:44
Кать, мне нужно изменить шрифт текста статей. Я сначала лазила в ВП: внешний вид-редактор-таблица стилей. нашла body-front sise поставила нужный мне 14 вместо 12. Но вышло предупреждение, о котором писала выше. Потом полезла на хостинг: управление хостингом-FTP-аккаунт-html-и далее. Там тоже прописала, что мне нужно, но нифига. Чего-то не хватает, а я не пойму чего…
Причем, искала инфу в яндекс и гугл, везде предлагают действовать через таблицу стилей-body-front sise. Снова делаю, и опять нифига :((((
Плагины ставить не хочу, хочу сама разобраться…
[Ответить]
katyaru отвечает:
Ноябрь 27th, 2013 at 10:18
А ты через админку (внешний вид — редактор — …) вообще, что-нибудь можешь изменить? В других файлах, например? — Это очень странно, что тебе не разрешают там редактировать… По идее, и через FTP должно работать. Вопросы:
1. А у тебя не стоит защита админки от редактирования, может, в теме что-то прописано? — Попробуй в другом файле что-нибудь изменить
2. А у тебя один файл style? — Бывает, например, style.php и style.css
3. Если ничего не получается — давай в чате на ФБ обсудим
[Ответить]
nehydna отвечает:
Ноябрь 27th, 2013 at 10:43
Хм… А где можно увидеть, есть или нет запрета к редакции?
Изменить не могу…
Стиль — css, и еще есть стиль rtl (но он тоже css).
[Ответить]
katyaru отвечает:
Ноябрь 27th, 2013 at 10:51
Погугли что-то, типа, «запрет на редактирование в админке вордпресс» и всякие варианты этого запроса. В файле functions может быть запрет. Очевидно, что ты не заблокирована по ip))) Да, геморрой будет искать, если это автор темы так ее «защитил»…
[Ответить]
nehydna отвечает:
Ноябрь 27th, 2013 at 10:54
Эх, попробую:) Спасибо!
[Ответить]
katyaru, добрый день, создал header, но не могу вставить на сайт, нет таблицы стилей
style.css, помогите пожалуйста.[Ответить]
Katyaru отвечает:
Март 24th, 2014 at 14:31
Здравствуйте! Может, есть файл style.php? В некоторых шаблонах таблицы стилей в таком формате
[Ответить]
Katyaru отвечает:
Март 24th, 2014 at 14:34
И еще вопрос: в каком смысле «создал header»? — Если речь идет об отдельном файле header.php — он уже должен быть на сайте для его корректной работы, это отдельная часть, отвечающая за функционал, а таблицы стилей — отвечают за представление (оформление) контента. Ваша ситуация не до конца ясна…
[Ответить]