Домой / WordPress / Как редактировать CSS в WordPress
Как редактировать CSS в WordPress

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

Здравствуйте, друзья! В этом уроке мы поговорим о том, как в WordPress можно добавить свои CSS стили или изменить существующие.

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

Способ №1

1. Заходим в административное меню и переходим в Внешний вид -> Редактор.

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

2. В открывшейся странице по умолчанию будет открыто окно редактирования стилей вашей темы (шаблона). После того как вы добавите свои новые стили или измените уже существующие, не забудьте сохранить изменения нажав кнопку «Обновить файл».

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

Как видите, с административной панели всего за несколько кликов можно добраться до стилей вашего шаблона WordPress.

Способ №2

Для редактирования стилей этим способом нам нужно:

1. Найти файл style.css в корне папки вашей активированной темы (шаблона).

Путь к файлу: wp-content\themes\название_вашей темы\style.css

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

2. Открываем с помощью текстового редактора (я пользуюсь Notepad++) файл style.css и вносим необходимые изменения.

3. После того как внесете все необходимые правки в стилях не забудьте сохранить файл style.css.

Редактирование таким способом актуальнее всего если сайт размещен на локальном сервере. В таком случае, вам не нужно будет каждый раз обновлять страницу редактирования CSS стилей в административном меню после каждого изменения.

Согласитесь, проще и быстрее нажать Ctrl+S в текстовом редакторе и сразу смотреть изменения на сайте, чем после каждого обновления стилей пересохранять страницу в административном меню.

Если у вас что-то не получилось или возникли вопросы, смело пишите в комментариях!

Здравствуйте, друзья! В этом уроке мы поговорим о том, как в WordPress можно добавить свои CSS стили или изменить существующие. Замечу, что данных урок рассчитан в большей степени для тех, кто уже имеет базовые знания в использовании CSS стилей. И так, давайте начнем! Способ №1 1. Заходим в административное меню и переходим в Внешний вид -> Редактор. 2. В открывшейся странице по умолчанию будет открыто окно редактирования стилей вашей темы (шаблона). После того как вы добавите свои новые стили или измените уже существующие, не забудьте сохранить изменения нажав кнопку "Обновить файл". Как видите, с административной панели всего за несколько кликов можно…

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Не поленитесь проголосовать и оставить комментарий. Таким образом я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.25 ( 16 голосов )
100

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

  1. Аватар

    Здравствуйте, подскажите, как сделать, чтоб фоновое изображение не повторялось, и при этом занимало всё пространство. Просто только начал осваивать, я так понимаю это body {
    backgrond:….
    }

    • Аватар

      Здравствуйте. Если я правильно понял, то Вам нужно:

          background: url(тут ссылка на изображение для фона);
          background-size: cover;
          background-repeat: no-repeat;
      
  2. Аватар

    Здраствуйте, у меня такая проблема. Изменения, вносимые в CSS код страницы никак не влияют на дизайн сайта, у меня шаблон тверти фоутийн. Какие возможные причины?

    • Аватар

      Здравствуйте. Попробуйте использовать !important, таким образом Вы будете перезаписывать стили. Пример использования:

      .primary-navigation a {
          color: #F00!important;
          font-size: 10px!important;
      }
      

      Но вероятнее всего, что Вы просто не туда добавляете стили. Убедитесь что редактируете и добавляете их не в @media screen.

  3. Аватар

    Здравствуйте! Я так понимаю, что если править стили в файлах темы, woocommerc, то при обновлении последних файлы css тож. заменятся и всем правкам хана. Прочитал совет, что изменения стилей следует производить в файле Custom.CSS. Все что есть в Custom.CSS ддя wordpress является приоритетным. Т.е перенес туда кусок из stile.css, внес изменения и новая редакция перекрывает оригинал. Есть даже плагин для работы с Custom.css. Только вот вешать на роект лишний плагин не хочется. Можно этот файл и руками править. Вот только где он должен находиться?

    • Аватар

      Здравствуйте. Попробуйте просто создать CSS файл с кастомными стилями и подключите к теме с помощью wp_enqueue_style. Если что-то не перезапишет — попробуйте добавить !important.

      • Аватар

        Александр, скажите пожалуйста. а как подклчить кастомный файл к теме с помощью wp_enqueue_style? В каком файле это надо прописывать и какой код нужно вставить?

        • Аватар

          Добавьте код в function.php, и измените путь к стилям.
          Пример:

          function wpdocs_theme_name_scripts() {
              wp_enqueue_style( 'style-name', get_stylesheet_uri() );
              wp_enqueue_script( 'script-name', get_template_directory_uri() . '/css/custom.css', array(), '1.0.0', true );
          }
          add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
          
          • Аватар

            Что делаю не так — Создаю свою тему
            1. Добавил в functions.php вышеизложенный код
            2. Добавил папку со стилями
            3. Пути и названия правильно прописал, а стили не выводятся
            4. Может как то надо в файле index.php запустить functions.php

            Помогите плиз разобратся

  4. Аватар

    такая проблема что вообще не могу ничего редактировать ни стереть CSS стили в нотпаде не могу понять причину ведь есть фаилы в которых сделал правки без проблем.саит на денвере на вордпресс

  5. Аватар

    по способу 2. Как найти этот корень папки — в каком разделе?

  6. Аватар
    Лиса Алиса

    Здравствуйте, в анонсе шаблона присутствует несколько установленных стилей «шапки сайта» — с расположением меню и его видом. Как можно «переключить» стиль с одного на другой?

  7. Аватар
    Александр

    Добрый день. Можно ли как-то подключить в админку для редактирования иную таблицу стилей кроме style.css? она находится в корне сайта в папке css/main.css

  8. Аватар

    Здравствуйте!Мне необходимо изменить цвет фона меню,я пытаюсь через secondary,но изменения не высвечиваются на сайте

  9. Аватар

    Здравствуйте, подскажите пожалуйста. Менял CSS файл и в редакторе Вордпресса и в текстовом редакторе, сохранял, все сохраняется. Но при обновлении сайта изменения не происходят. С помощью панели разработчика в браузере проверял, все работает. Файл нашел правильно, нашел строку. CSS изменил в нужном месте, но ничего не происходит, мучаюсь уже час.
    Сайт на локальном сервере (XAMPP)

  10. Аватар

    У меня почему-то раза 3 уже файл стилей который в админке оказывался пустым а в файл-менеджере нормально было и я оттуда копировал код и вставлял в редактор в админке и сохранял, но почему так происходило вообще так и не понял. Теперь начал часто проверять код в редакторе админки и просто так не закрываю а стараюсь сохранять, мне кажется код исчезал из-за того что я после страницы редактора сразу переходил на другие страницы.

  11. Аватар

    Добрый день ! Подскажите как изменить текст читать дальше на другой. Текст находится когда переход на рубрики

    Можно посмотреть как выглядит. зайти на сайт https://cshow.biz.ua/category/teatr-opernij/page/2/. КАК ИЗМЕНИТЬ ТЕКСТ КНОПКИ ЧИТАТЬ ДАЛЕЕ?

  12. Аватар

    Добрый день! Помогите пожалуйста, никак не могу найти, где находится этот стиль уже все перерыл

    (index):564
    .promos h2 a, .recent-post-box h4 a, .recent-post-box .link-commet {
    color: #1fc0a0;

  13. Аватар

    Вітаю, Олександре!

    Учора Ваш матеріал допоміг мені швидко зорієнтуватися та внести правки до коду. Уперше в житті дивився файл зі стилями й усе обійшлося))

    Щойно помітив опечатку у другому абзаці статті: » данныХ урок рассчитан»

    Дякую за Вашу роботу!

  14. Аватар

    Подскажите пожалуйста как решить.
    В стилях этого нет broken_link а на некоторых страницах это появляется и перечеркивает ссылку.
    Где это подравнять
    Вот страница https://d-nk.com.ua/stati-5/kak-razvivat-malyshej-igraya/

  15. Аватар
    Владислав

    Здравствуйте, в Редакторе изменил цвет background В результате на ноутбуке ни чего не поменялось, а в телефоне если на сайт заходишь, то все хорошо поменялось. Решил в редакторе поставить назад старый цвет и изменить через доп стили …пишет что найдено две ошибки, устраните иначе может привести к поломке сайта. В чем причина ? подскажите пожалуста?

  16. Аватар
    Владислав

    Кстати в редакторе поставил старый цвет, обновил файл и ни чего не изменилось В телефоне измененный новй цвет, в ноуте старый

Оставить комментарий

Ваш email не будет опубликован.

*