ГлавнаяТемыКак редактировать CSS в WordPress

Как редактировать CSS в WordPress

Для внесения изменений во внешний вид сайтов на WordPress часто приходится редактировать код CSS. В этой статье мы рассмотрим несколько способов изменения CSS кода в темах WordPress.

Редактирование файла style.css вашей темы

Самым распространённым спобом редактирования CSS кода вашего сайта WordPress является его изменение в файле style.css вашей активной темы. Все темы в WordPress находятся в директории wp-content/themes и по названию вашей активной темы, вы сможете легко определить в какой директории она располагается.

Для редактирования файла style.css вашей темы вам необходимо иметь доступ к сайту через FTP, или поддержку изменения файлов темы прямо из панели администрирования WordPress. Если изменение файлов из панели администратора поддерживается вашим хостинг провайдером, вы найдёте эту возможность в разделе Внешний вид → Редактор.

Редактор темы в WordPress

Редактор темы в WordPress

Убедитесь, что в списке справа выбран файл style.css (таблица стилей). Редактировать файлы .php таким образом крайне не рекомендуется, поскольку малейшая ошибка может привести к поломке вашего сайта. Более надёжным методом является редактирование через FTP.

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

Дочерние темы WordPress

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

Для создания новой дочерней темы, дайте ей новую папку в директории wp-content/themes и поместите в неё пустой файл с названием style.css. Путь до вашего файла стилей будет выглядеть следующим образом: wp-content/themes/my-child-theme/style.css, где my-child-theme — название нашей новой дочерней темы.

Откройте файл style.css вашей дочерней темы в вашем любимом текстовом редакторе, и впишите в него следующий код:

/**
 * Theme Name: My Child Theme
 * Template: twentytwelve
 */
@import url("../twentytwelve/style.css");

body { background: red; }

Директивой Theme Name мы указываем название нашей дочерней темы, а на следующей строке директивой Template указываем на родительскую тему, которую хотим использовать. В нашем случае это тема Twenty Twelve, которая находится в директории twentytwelve.

После заголовка темы, командой @import мы включаем стили темы Twenty Twelve, а всё что следует ниже — наш собственный CSS код. В нашем случае мы изменяем цвет фона на красный.

Сохраните изменения в файл style.css вашей дочерней темы, и загрузите всю директорию my-child-theme на сервер по FTP. Вы увидите, что ваша новая дочерняя тема доступна при выборе тем в разделе Внешний вид → Темы.

Дочерняя тема WordPress

Дочерняя тема WordPress

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

Редактирование CSS с помощью плагина

Ещё одним методом редактирования CSS кода в WordPress является использование плагина. Существует немалое количество плагинов, позволяющих изменять таблицу стилей. Мы рекомендуем бесплатный плагин Jetpack, который содержит модуль Custom CSS.

Редактор CSS в Jetpack

Редактор CSS в Jetpack

Модуль Custom CSS позволяет редактировать стили прямо из панели администрирования WordPress и не требует FTP доступа или особых настроек хостинг площадки. Custom CSS имеет подсветку и проверку синтаксиса, поддерживает ревизии, а так же несколько CSS препроцессоров (LESS и Sass).


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

Подписаться на рассылку

Подписаться → Подпишитесь на бесплатную рассылку журнала WP Magazine и получайте новости, события, подборки тем и плагинов, уроки, советы и многое другое в мире WordPress!

  • Очень интересно что можно делать дальше. Я сделал style.css в новой папке, вставил код как показано на странице https://wpmag.ru/2013/edit-css-wordpress/ и закачал JetPack. С последним не совсем понятно что делать, но какие-то кнопки нажимаю пока.
    Я хочу понять как с помощью этого руководства можно вставить, например, логотип слева от заголовка именно в теме Twenty Twelve, где его нет вовсе. Т.е. как пишут «замените существующую строчку на ‘эту» в моём случае не проходит, существующей строчки у нас нет.

    • Евгений, действительно заменять ничего не нужно, поскольку CSS вы пишите поверх существующего. Вставить картинку в Twenty Twelve вы можете следующим CSS кодом:

      .site-title a {
      text-indent: -9999px;
      background: url(‘http://example.org/image.png’) 0 0 no-repeat;
      width: 500px;
      height: 110px;
      }

      Естественно example.org/image.png заменить на адрес вашего изображения, которое вы можете загрузить в медиатеку WordPress.

      • WPIXEL

        Константин, вопрос собственно по плагину Jetpack , а точнее по его активации. Акаунт на WordPress.com. имеется но при подключении к WordPress.com. пишет такую ошибку:
        Подробности ошибки: The Jetpack server was unable to communicate with
        your site http://old-wpixel.ru [IXR -32300: transport error:
        http_request_failed Couldn’t resolve host ‘old-wpixel.ru’]
        Может из за того что сайт на локальном сервере стоит?

        • Может из за того что сайт на локальном сервере стоит?

          Именно. Для подключения к WordPress.com Jetpack должен быть активен на доступном сайте. Локально Jetpack работает только в режиме отладки, где отключены большинство из модулей.

  • Очень лаконичный сайт без излишеств. Одна корректировка. Иконки социальных сетей для логина под полем для комментария не совсем уместны поскольку после их нажатия исчезает текст самого комментария, который написан походу раньше. Я как опытный пользователь комментарий сохранил прежде чем залогиниться и потом вставил, но кое-кто может из-за этого расстроиться.) Было бы уместно расположить их над полем для написания комментария и подписать «Прежде чем написать комментарий авторизуйтесь». Ну и поделится кодом с вашим покорным слугой если не жалко.)

    • Спасибо Евгений! После написания комментария и входа с помощью соц. сетей, ваш комментарий остаётся на месте, странно если у вас он затирается, возможно глюк системы комментирования.

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

      • Ох и не простая установка у Discus. Setup в консоли WordPress не принимает установленные логин и пароль. Так что пока не совсем понимаю как это будет выглядеть.

        • Евгений, вам нужно зарегистрироваться на Disqus.com и вводить логин и пароль от вашего аккаунта Disqus.

          • Я зарегистрировался в Discus ещё до того, как написал об этом в предыдущем сообщении, но логин и пароль, с которыми я вхожу в Discus не принимается для настройки плагина Discus в WordPress.

          • Вам необходимо зарегистрировать именно сайт как площадку, а не просто логин и пароль. Если у вас не получится, напишите нам письмо (wpmagru@gmail.com) и мы постараемся вам помочь!

          • Поборол.) Напутал с Jetpack, но поборол. Спасибо. Удобная красивая штука.

  • Если вам нужно выйти с сайта, вы всегда можете сделать это через верхнюю панель (администрирования), очистить все куки в браузере или воспользоваться режимом «инкогнито».

  • Редактирование CSS при помощи JetPack.
    Как относиться к тому, что «внешний вид > редактор» и «редактирование css» выглядят по разному? И главное, что же нужно написать в этом пустом поле (кроме …@import…) чтобы, например, изменить фон body, цвет шрифта, цвета ссылок, вставить логотип в заголовок и т.д. どうもありがとう

    • Евгений, «Внешний вид → Редактор» это встроенный редактор файлов тем WordPress — справа доступные файлы, слева содержимое выбранного файла. Если вы хотите отредактировать CSS, этим редактором мы советуем не пользоваться.

      «Внешний вид → Редактирование CSS» это редактор CSS из плагина Jetpack, правила в этом редакторе встают поверх тех, что в вашей теме, и при обновлении темы они не теряются. Например:

      body {
      background: red;
      font-size: 20px;
      }

      a, a:hover, a:active, a:visited {
      color: yellow;
      }

      И так далее. Вам потребуются базовые навыки языка CSS для того, чтобы понимать какими селекторами пользоваться, а такие средства как Firebug для Firefox или средства разработчика в Chrome вам помогут быстрее найти и изменить нужные элементы. Вставить логотип можно с помощью атрибута background-image.

      • Возможно ли отключить некоторые функции Jetpack , например «Мобильная тема» (в Twenty Twelve она итак есть)?

        • Конечно, зайдите в Консоль → Jetpack. Найдите модуль, который вы хотите отключить, нажмите кнопку «Узнать» а затем «Деактивировать».

    • Совсем недавно я тоже ломал голову на тем как изменить некоторые нюансы своей темы (размер, шрифт, цвет отдельных разделов темы и т.д.) Мучался в переводе на русский язык некоторые слова в интерфейсе темы — типа «комментировать» вместо «comment» и т.д.

      Но, как говорится, век живи-век учись! Недавно ко мне за помощью в подборе темы обратился знакомый, начинающий создавать свой блог WP. Стараясь помочь ему я наткнулся на одну тему, которую без долгих раздумий установил и на свои блоги. Эта тема мгновенно решила все мои проблемы. Во-первых она, её настройки и даже подсказки к настройкам — полностью на русском языке. Во-вторых эта тема позволяет регулировать и настраивать всё и вся! Ширину основного содержимого и ширину полосы виджетов. Цвет (или картинку) общего фона и цвет фона содержимого. Страницу можно сделать в две, три полосы или вообще без полос. Регулируется размер, тип и цвет шрифтов к каждой части страницы, размер, цвет заголовка и вставка своего банера или логотипа. Можно включить-выключить страницу презентаций со слайдером и банерами и многое, многое другое….

      Короче говоря, имея такую тему можно не вдаваться в хитрости и тонкости редактирования CSS.

      В-третьих, и это главное — это так называемая «резиновая» тема, которая автоматически подгоняет сама себя для просмотра на мониторах всех типов (4:3 или 16:9) в том числе и на мобильных девайсах. Одинаково оптимально эта тема смотрится во всех основных браузерах.

      Эта тема называется mantra. Пользуйтесь. И будет вам счастье без знания CSS!

      • Спасибо за совет, хотя я бы на вашем месте не отказывался от изучения языка CSS, хотя бы на базовом уровне. Так же советую отнестись с осторожностью к темам, которые дают слишком много возможностей, в частности разбиение содержимого на колонки, вставка слайдеров, баннеров и прочих элементов с помощью шорткодов или пользовательских типов данных. Проблемы с такими темами часто возникают при их деактивации, поскольку этот же функционал может не присутствовать в других темах. Советую для подобных вещей подбирать плагины, которые работают со всеми темами.

        • Опыт «общения» с WP научил работе с редактированием CSS и PHP, хотя именно на базовом уровне. Так что в случае чего смогу разобраться в элементарном.

          Что касается «фишек» темы mantra — всё верно. Вряд ли они будут поддерживаться в других темах. Но по этому поводу у меня есть другое мнение:
          Свой первый блог я создал 1,5 года назад и это было моё первое знакомство с WP . Вскоре появился и второй, а потом и третий блог. И надо отметить, что на протяжении всего этого времени я занимался скорее не ведением блогов, а их «обустройством» — без конца менял темы, эксперементировал с плагинами и т.д. Не знаю сколько бы этот процесс ещё продолжался, если бы я не встретил тему mantra.Сегодня я совершенно точно уверен, что дальнейшие поиски других тем и эксперименты с ними для меня не имеют смысла. Mantra — идеальный вариант. Даже если мне когда либо захочется поменять тему, освежить, так сказать блоги, то с помощью этой темы их можно изменить кардинально, как будто поставил новую тему! Так что пока я думаю так.

          Да и потом тема безупречно работает со всеми моими плагинами (чего нельзя было сказать о предыдущих темах) и чувствуется. что тема не заброшена авторами — она установлена у меня три недели и за это время было три её обновления.

  • Несмотря на добавление DISQUS, который заменил общие комментарии, в теме Twenty Twelve внутри поста осталась НЕработающая ссылка «Добавить комментарий». Как от неё избавиться?

    • В других темах такая же проблема. (я в двух темах проверял) То есть при клике на «комментировать» или т.п. просто открывается запись, но не её нижняя часть, где находится раздел комментирования.

      Но проблема ли это!
      Мне кажется это не столь принципиально. А учитывая все преимущества, которые даёт DISQUS на это вообще можно глаза закрыть! В конце концов разве трудно чуть прокрутить колесо мыши, чтобы добраться до комментариев?

      • Если «закрыть глаза», то можно вообще ничего не видеть. Я считаю неправильным то, что на моём сайте что-то не работает, и важным то, что это нужно исправить. #disqus

        • Согласен. Проблема в том, что большинство тем для WordPress используют «анкор» с названием «respond» в ссылках типа «оставить комментарий, а в Disqus этот анкор не используется. Можно попробовать добавить в тему скрытую ссылку с таким же анкором после вывода всех комментариев — это как раз и будет приблизительно то место, где будет форма для комментария.

  • Может мой вопрос не в тему. Но не знаю куда его задать. Проблема вот в чем. Как известно каждая страница, запись в WP и т.д. имеет свой ID А вот какой ID имеет (и имеет ли вообще) главная страница (страница записей) блога WP ?

    • Нет, главная страница (список последних записей) не имеет ID, ровно так же как и страницы архивов, поиска и т.д., но подобные страницы легко определить с помощью функций is_front_page(), is_home(), is_search(), is_archive() и прочие.

      В вашем случае лучше всего обратиться за помощью к автору плагина.

      • Спасибо за совет, но «мы пошли другим путем» — нашёл другой плагин. Кстати! Как известно с версии WP 2,5 непонятно почему перестали указываться ID страниц, записей, ссылок и т.д. Раньше я как то не обращал на это внимания, но вот потребовалось узнать эти ID. Пришлось поломать голову! Но оказывается есть плагин, который возвращает ID туда, где им положено быть. Это плагин «Reveal IDs». Может кому пригодится! Плагин не имеет настроек и его достаточно только установить и активировать.

        • ID любой страницы или записи можно узнать, просто посмотрев в адресную строку браузера при её редактировании.

          • Речь тут шла немного не об этом. Тем более,, как говорится, «проехали».

            P/S. Id страницы или записи в адресной строке просмотреть можно, но это не всегда это удобно. С плагином лучше!

  • Ещё вопрос от «чайника». Любую запись можно «прилепить» на главную страницу и она всегда будет первой. Но кто знает, как можно сделать так, чтобы эта «прилепленная» запись на странице была развёрнутой? — то есть чтобы не надо было нажимать ссылку «Читать далее». Может плагин какой-нибудь для этого есть, или в код страницы надо что то добавить? (Советы типа «Поменяй тему» не предлагать!)

    • Плагина подобного не встречал, но с помощью функции is_sticky() вы можете определить прилеплена ли текущая запись, а там уже сами выбирайте the_content() или the_excerpt().

      • Но в каком файле делать эти изменения!?

        • Зависит от темы, вероятнее всего index.php, front-page.php или home.php, если речь идет о главной странице.

  • Елена

    Добрый день! Я хочу поменять цвет фона и шрифта на своем сайте. Как это можно сделать без проблем для сайта?

    • Самый простой и доступный вариант сделать это — поставить тему которые позволяют «играть» с цветами и шрифтами как угодно. Кроме того такие темы на русском языке и не требуют знания CSS PHP и НТML Это например темы mantra (о ней я уже упоминал здесь) и parabola Найдите и установите эти темы. Протестируйте их применительно к своему сайту и вы будете приятно удивлены простотой решения вопроса, который задаете.

      • Елена

        Спасибо за ответ.
        Но, дело в том, что мой сайт имеет большой объем))))И править много нет желания. Мне бы только фон и, естественно, цвет шрифта.
        Я вчера пробовала ставить новую тему…Как то не удачно…

        • У меня тоже ОЧЕНЬ большой блог с о множеством фото и прочих наворотов . Применив тему мантра мне практически не пришлось ничего править! Это адаптивная «резиновая тема». Таких тем к сожалению немного. Тем более на русском. Попробуйте mantra или parabola и вы будете ПРИЯТНО УДИВЛЕНЫ!

          • Елена

            Ментра мне показалась темноватой, а параболы я просто не нашла….

          • константин

            Блин! Так я потому и рекомендовал эту тему что там настраивается абсолютно все. В том числе цвета фона содержимого шриытов и т.д.

    • Елена, вы можете сделать это одним из способов, который мы описали в этой статье. «Проблем» для сайта никаких не возникнет, а любые изменения вы сможете легко убрать. Изменить цвет шрифта (например сделать его красным) вы можете с помощью следующего CSS кода:

      #content, #content p, #content ul, #content ol {
      color: red;
      }

      А изменить фон вы можете в разделе Внешний вид — Фон в вашей админ-панели. Если у вас такого пункта меню нет, то ваша тема не поддерживает поизвольный фон. Фон вы можете задать так же с помощью CSS:

      body {
      background: blue;
      }

      Успехов!

  • Алла

    Добрый день! Помогите, пожалуйста. Мне нужно в Twenty twelve ссылку Добавить комментарий поместить после поста. К сожалению, CSS не знаю… Копалась целый вечер, ничего не получилось. Можете дать образец кода для редактирования? Заранее спасибо.

    • Алла, готового кода для вашего случая к сожалению у нас нет, но с вашим вопросом лучше обратиться на форум поддержки WordPress.org.

      • Алла

        Спасибо!

  • Аня

    Помогите, у меня не редактируется styles.css из админки. захожу «внешний вид — редактор», выбираю стилевой файл, но он открывается пустым. по фтп все редактируется, но это не удобно для меня.

    • Игорь

      У меня тоже самое «получилось» сегодня. Как исправить?

      • Игорь, см. комментарий выше.

    • Вероятно проблема в том, как организована ваша тема. Попробуйте проделать то же самое, только со стандартной темой Twenty Twelve. Если не получится дайте знать!

    • Kapusta

      Аня, была та же проблема. Исправил тем, что удалил все закомментированные строки из файла css (думаю потому что они написаны кириллицей), хотя кодировка utf8, бом убирал, то же самое.

  • Souz2000

    Редактирую css и все остальное с помощью WP IDE

    • вася

      хуепиздидируеш ты а не редактиреш

    • Tanya Simonenko

      Да, отличный плагин! Очень удобно им пользоваться. Правда иногда плагин Emmet конфликтует и не работает.

  • Мехман

    Привет, отличный материал, спасибо огромное! Вы писали: «Кроме таблицы стилей, дочерние темы могут изменять и другие файлы шаблонов в WordPress, но это выходит за рамки данной статьи.»

    Если ли статья где подробно говориться о том как менять другие файлы? Спасибо!

  • Vladimir Roshchupkin

    А никто не подскажет, где подключается Style.css?

    • Как правило файл style.css подключается в файле functions.php с помощью функции wp_enqueue_style().

  • Руслан Черненко

    Привет, Константин! Может подскажешь где описывается оптимальная структура файла css? Что за чем идет? классы, идентификаторы и т.п.?

    • Оптимальнее писать так, как вам удобнее будет читать :)

  • Александр

    Константин, подскажите пожалуйста такой момент:
    Я добавил в TinyMce свои собственные стили и они работают.
    НО раньше, в версиях до 3.3 по-моему, допустим если цвет фона span’a был синим, то он был синим не только для текста в редакторе, но и для моего пункта меню в выпадающем списке.
    Т.е. весь стиль перекочевал в пункт выпадающего меню.
    А после обновлений происходит следующее — допусти размер шрифта, если он 24, то и изображается в выпадающем списке 24, но цвет фона остается белым. Т.е. сам пункт меню должен являтся примером данного стиля, но этого к сожалению не происходит.
    Подскажите как это решить?

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

      • Александр

        Это происходит в админпанели, а не на сайте.

        Вот смотрите — формат «Специальный 1»

        В окне редактора — красный шрифт и синий фон, большой размер текста.

        В окне выбора форматов используется только большой размер, фон и цвет текста перезаписывается TinyMce самостоятельно, а хотелось бы чтобы и здесь фон и цвет текста соответствовал. Так намного удобнее делать форматирование.

        Ссылка на изображение: http://pikucha.ru/idOBP

        • Понял. Да, это изменение произошло во внешней библиотеке TinyMCE, откатить саму библиотеку на предыдущую версию к сожалению не получится.

      • syn_urbana

        Спасибо за отличные статьи

  • Vorobiev Dmitry

    Помогите, пожалуйста уже несколько дней бьюсь, ничего не получается, просто не совсем понимаю, видимо: установил тему NIRVANA все настроил как хотел, потом выясняется, что мои изменения не сохраняются, главным образом шрифты, и рекламы от Гугл не показывает. Облазил все, на сайте разработчика тоже читал, они советуют воткнуть в настройках темы свой код css или Custom CSS, пробовал создавать дочернюю тему как у вас описано и править там CSS, но тоже ничего не получается — просто заменил везде шрифт. Jetpack подключить не получается — какие то ошибки. Объясните пожалуйста, как мне правильно создать этот свой код CSS (Custom CSS) — я должен взять style.css от родительской темы и править его?

  • Елена

    Добрый день. Подскажите пожалуйста. Вношу изменения в css файл, все отлично отображается в Хроме, но в Мозилле изменения не видны. Опера тоже изменения видит. С чем связано, что Мозилла не видит изменения. Когда проверяю в Мозилле код через F12 он в сss выдает какие-то ошибки. Проблема в браузере? хотя с др компьютеров тоже не видит этот код. Или все таки в коде ошибки.

  • хадиджа

    добрый день. подскажите пожалуйста, можно ли вообще в теме twenty twelve вместо названия сайта вставить свой логотип или шапку ввиде картинки. если да, подскажите пожалуйста как

  • ДокторХиХИ

    Вставляю в шапку сайта номер. Но когда задаю параметры в css он ни как не хочет реагировать. я уже не знаю что делать. вроде это задача проще некуда. вставить див и задать параметры. но почему текст совершенно не меняется… я не знаю что делать ПОМОГИТЕ!

    • Даниил

      Ты пользуешься стандартным редактором, он ужасный. Установи Page Builder и проблема будет снята.

  • Артур

    Привет! Есть ли пользовательские CSS, которые позволяют изменять ширину конкретной страницы по её ID?

  • Виталий Визан

    Добрый день! Я в css новичок, и у меня такой вопрос. Как сделать что-бы слайдер был под верхним меню, что-бы меню было с прозрачным фоном, и что-бы при прокрутке сайта вниз, меню не пряталось, что-бы был эффект как у темы Agama? Работаю с темой Twenty Sixteen