Вторник , 25 Июль 2017
Главная / Делаем блог / Редактируем WordPress шаблон — таблица стилей (продолжение)

Редактируем WordPress шаблон — таблица стилей (продолжение)

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

Один комментарий

  1. Вячеслав

    Реанимированные комменты

    Алиса:
    09.05.2012 в 20:26
    Ох, они такие разные во всех шаблонах. И туда как залезешь, не вылезешь)

    katyaru:
    09.05.2012 в 20:36
    Но разбираться-то нужно! Принцип все равно один)

    Elena:
    10.05.2012 в 14:10
    А тем более после такого руководства — одно удовольствие

    katyaru:
    10.05.2012 в 14:46
    Я надеюсь, что мои «заметки» просто снимут первый страх и шок от вида этого кода)

    Андрей:
    14.02.2013 в 16:24
    Как сделать иконки горизонтальными???

    katyaru:
    14.02.2013 в 16:30
    Посмотрите в этой статье http://blogotey.ru/social_plaguin_free/
    Если иконки не встают горизонтально — м.б. у вас не хватает для них места и нужно менять их размеры. Иногда помогает вставить пробелы строк между рядом кнопок и другими элементами выше и ниже (добавляем тег /br в треугольных скобках)

    Валерия:
    09.05.2012 в 22:09
    Я как-то попыталась осмыслить что-то в своем коде — чуть шею не свернула, меня такое обилие новой информации настораживает немного, надо привыкать постепенно!.. ))

    katyaru:
    09.05.2012 в 22:26
    Очень постепенно — эти мои заметки — плод полутора лет периодических глубоких раскопок в кодах разных шаблонов, написанных на разных языках, чтения профильной литературы))) Но потихоньку — надо вникать)

    Галина:
    09.05.2012 в 23:54
    До стилей я ещё не дошла, но собираюсь.

    katyaru:
    09.05.2012 в 23:59
    Нужно морально подготовиться и изучить матчасть)

    anjelika:
    10.05.2012 в 01:45
    css очень интересная тема, на самом деле все очень логично, времени конечно на изучение нужно очень много

    katyaru:
    10.05.2012 в 11:07
    Если теорию сочетать с практическими изысканиями, то все становится понятнее намного быстрей

    venezia:
    10.05.2012 в 03:21
    Читать приду, если свой блог на WP заведу)))

    ladosha:
    10.05.2012 в 09:58
    Скоро дозреем, будем сами шаблоны писать, Гудвину сто очков вперёд дадим))

    katyaru:
    10.05.2012 в 11:06
    Ага, по безумию дизайна и кодирования мы, точно, будем на первом месте)))

    Илона:
    10.05.2012 в 10:33
    Вот в такие дебри я ещё не рискую влезать) Но со временем, под твоим чутким руководством, думаю, освою и эти премудрости)))

    katyaru:
    10.05.2012 в 11:05
    Да, потихонечку можно)

    Zoja:
    10.05.2012 в 11:33
    пошла искать шрифт (мелковат он у меня очень в описании сайта в шапке)…

    katyaru:
    10.05.2012 в 11:37
    Может, просто размер поменять? Имеет смысл использовать известные шрифты, распространенные, типа Arial или Times New Roman, которые, гарантированно, есть на компьютерах всех пользователей!

    Людмила:
    10.05.2012 в 12:56
    Как же все сложно. Раньше я меняла стили методом «тыка». Но только шрифт и цветовую гамму. Теперь уже на экпериментирую. Если нет знаний, лучше не лезть, чтобы не пришлось исправлять.

    katyaru:
    10.05.2012 в 13:02
    Но знания и не появятся — если не лезть. Полез — столкнулся с проблемой — нашел решение. Полез — чего-то не понял — пошел узнавать, искать ответы. Просто нужно обезопасить себя — сохранить бекап)

    nehydna:
    26.11.2013 в 19:25
    Статья уже не…молодая, но для меня актуальная. Но не получается ни-че-го.
    Как только лезу в таблицу стилей и прописываю, что мне нужно, мне выдает примерно такое «предупреждение: файл не может быть изменен, так как находится по пути home/ мое хостинговое». Лезу в админку и правлю там, но тогда вообще ничего не происходит. Что-то тут не так. Голову сломала, теперь ломаю шеюsmile))

    katyaru:
    26.11.2013 в 19:28
    Я предлагаю редактировать прямо в админке, выбрав страницу style.php Ты там пытаешься что-то делать или где?

    nehydna:
    27.11.2013 в 09:44
    Кать, мне нужно изменить шрифт текста статей. Я сначала лазила в ВП: внешний вид-редактор-таблица стилей. нашла body-front sise поставила нужный мне 14 вместо 12. Но вышло предупреждение, о котором писала выше. Потом полезла на хостинг: управление хостингом-FTP-аккаунт-html-и далее. Там тоже прописала, что мне нужно, но нифига. Чего-то не хватает, а я не пойму чего…
    Причем, искала инфу в яндекс и гугл, везде предлагают действовать через таблицу стилей-body-front sise. Снова делаю, и опять нифига sad(((
    Плагины ставить не хочу, хочу сама разобраться…

    katyaru:
    27.11.2013 в 10:18
    А ты через админку (внешний вид — редактор — …) вообще, что-нибудь можешь изменить? В других файлах, например? — Это очень странно, что тебе не разрешают там редактировать… По идее, и через FTP должно работать. Вопросы:
    1. А у тебя не стоит защита админки от редактирования, может, в теме что-то прописано? — Попробуй в другом файле что-нибудь изменить
    2. А у тебя один файл style? — Бывает, например, style.php и style.css
    3. Если ничего не получается — давай в чате на ФБ обсудим

    nehydna:
    27.11.2013 в 10:43
    Хм… А где можно увидеть, есть или нет запрета к редакции?
    Изменить не могу…
    Стиль — css, и еще есть стиль rtl (но он тоже css).

    katyaru:
    27.11.2013 в 10:51
    Погугли что-то, типа, «запрет на редактирование в админке вордпресс» и всякие варианты этого запроса. В файле functions может быть запрет. Очевидно, что ты не заблокирована по ip))) Да, геморрой будет искать, если это автор темы так ее «защитил»…

    nehydna:
    27.11.2013 в 10:54
    Эх, попробуюsmile Спасибо!

    Юрий Бараковский:
    22.03.2014 в 07:49
    katyaru, добрый день, создал header, но не могу вставить на сайт, нет таблицы стилей style.css, помогите пожалуйста.

    Katyaru:
    24.03.2014 в 14:31
    Здравствуйте! Может, есть файл style.php? В некоторых шаблонах таблицы стилей в таком формате

    Katyaru:
    24.03.2014 в 14:34
    И еще вопрос: в каком смысле «создал header»? — Если речь идет об отдельном файле header.php — он уже должен быть на сайте для его корректной работы, это отдельная часть, отвечающая за функционал, а таблицы стилей — отвечают за представление (оформление) контента. Ваша ситуация не до конца ясна…

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

три × 2 =