Как изменить фон сайта на WordPress

Один из самых популярных способов придать индивидуальность шаблону сайта, хотя бы частично – изменить его фон.

Можно сделать это отредактировав свойство background в файле style.css, а можно воспользоваться пользовательской функцией WordPress (начиная с версии 3.0), которая позволяет добавить в админку своеобразный мини редактор фона. Вот про нее и пойдет речь далее.

Генератор фона для сайта

Функция эта прописывается в файле functions.php шаблона WP сайта, расположенного в папке wp-content\themes\ваша_тема.

Для того чтобы добавить возможность вставлять, менять, редактировать фон сайта в WordPress необходимо добавить в указанный уже файл functions.php следующую строчку:

add_theme_support( 'custom-background' );

Для неопытных пользователей крайне желательно делать копию файла перед его редактированием.

После чего, в разделе «Внешний вид» появится вкладка «Фон», где собственно и можно будет загрузить фон.

Wordpress фон

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

Теперь рассмотрим что же позволяет вкладка «Фон»:

Можно загрузить файл изображения. Это может быть цельный рисунок или же специальные фоновые изображения. Ниже приведу несколько генераторов фона, которые могут пригодиться и для WordPress сайта.

загрузка изображения фона в WP

После того как изображение загружено, станут доступны некоторые настройки:

редактирование фона

Позиция – определит выравнивание изображения (Слева, справа, по центру).

Повтор – повторение изображения фона.

Привязка – тут можно включить или отключить зафиксированный фон.

Ну и само собой, можно выбрать одноцветный фон:

изменение фона в WordPress

Генераторы фона для сайта. Где скачать?

Теперь список нескольких сервисов, которые помогут создать узорчатые фоны для сайта:

  1. http://www.patterncooler.com/editor - лидер списка, имеет в своем запасе немалое количество всевозможных орнаментов, с возможностью выбрать цветовые схемы.
  2. http://bgpatterns.com/ - тоже достаточно неплохой генератор фона.

Комментарии к “Как изменить фон сайта на WordPress

  1. Подскажите пожалуйста, а в какое место в файле functions.php нужно вставить строчку add_custom_background(); чтобы во вкладке Внешний вид появилась строчка Фон ?

      1. Здравствуйте вставляю в конце файла ничего не меняется и «фон» не появляется Тема от DistinctiveThemes

        1. Да уже во всех темах по умолчанию есть функция изменения фона. Где вы находите такие шаблоны? 🙂

          1. Знаете ничего смешного.Дело в том что функция есть но она почему то не работает.Зачем я по Вашему тут вопросы задаю?

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

    1. Здравствуйте, у меня проблема. Сделал все как написано, раздел «фон» появился кликаю по нему, загружаю изображение, настраиваю, но это никак не отображается на сайте, что делать?

  2. Спасибо за совет. Очень помогло. Подскажите пожалуйста а как поменять фон публикуемых записей, из монохромного в изображение?

    1. Олег, тут найдете информацию по background: http://htmlbook.ru/css/background
      Для того, чтобы поменять фон именно самой записи, следует вызвать контекстное меню и проинспектировать элемент. Найдите нужный блок и посмотрите какой id или class ему присвоены. Задайте для них фон.
      Если у вас более-менее новый шаблон, то скорее всего он сделан с использованием html5. Если так, то запись у вас выводиться с помощью article.
      Тогда в style.css следует прописать:

      article {
      background: url(путь_к_файлу/название_файла.jpg);
      }
  3. Доброго времени суток ,Юрий !
    Вставил строчку add_theme_support( ‘custom-background’ ); но поле «фон» в админке не появилось . Не знаете в чем ошибка ?
    C уважением , Владимир.

    1. Здравствуйте. Это стандартная функция Вордпресс. Значит, где-то у вас проблема в коде. С другими шаблонами не пробовали?

      1. Пробовал , в обоих случаях поле «фон» в админке отсутствует , а строка add_theme_support( ‘custom-background’ ); появляется в правом верхнем углу шапки сайта . (могу выслать скрин )

          1. Пробовал менять номер цвета в в style.css через админ панель — ничего , пробовал изменить style.css на сервере , скачал он пустой ))) . может быть дело самом в движке ?

            1. Не знаю почему скачивается пустой файл, я захожу на сайт и в стилях все прописано. Зайдите через админку «внешний вид — редактор». Там найдите код (скорее всего где-то сверху):
              body {
              margin: 0 0 20px 0;
              padding: 0;
              }

              Можете использовать комбинацию клавиш для поиска: CTRL+F
              добавьте внутрь background:blue;
              Все должно работать.

  4. Юрий, спасибо Вам огромное, что помогаете. Я совсем новичок, и не такая умная как все мужчины, вас хорошо понимающие. Но у меня уже есть свой сайт. Я использую тему mystique-wordpress. Можно ли поменять фон в этой теме , я очень хочу поставить картинку в качестве фона. Вы бы не могли мне пошагово написать путь.
    Как найти файл functions.php шаблона WP сайта, расположенного в папке wp-contentthemesваша_тема.?
    Все настройки я делаю: панель управления сайтом > Внешний вид > настройки Mystique… дальше> у меня есть много вкладок — общая, дизайн, контент, рекламные блоки, CSS, иконки с.м., расширенные, модули. Куда нажимать? на контент? а там куда? Я не совсем поняла куда ставить эту строчку. Пожалуйста скажите мне попонятней.
    Спасибо. С уважением))

    1. Екатерина, на сайте стоит предварительная модерация, поэтому комментарии появляются не сразу. Все никак руки не дойдут сделать сообщение для пользователей 🙂
      Вам нужно зайти в Внешний вид — редактор. В правой части экрана будет столбик «Шаблоны». В нем вам нужно отыскать «Функции темы» (functions.php) и нажать. Туда и следует добавить строчку. После чего, во Внешнем виде появится вкладка «Фон».
      Второй вариант: Загрузить изображение на сайт стандартным способом. После чего нужно зайти в Внешний вид — редактор. Сразу же будет открыта вкладка таблицы стилей (style.css). В нее нужно прописать следующее:
      background: url(http://mysite.com/wp-content/uploads/2015/05/название_файла.jpg);
      Поменяйте адрес на свой сайт, если необходимо поменяйте дату загрузки, измените название файла и укажите расширение. Хотя наверное это будет сложно. 1 вариант проще.

      1. А, не сразу, тогда понятно, я то я смотрю всем отвечаете, а мне обидно. Спасибо за ответ. А вот Вы пишите «Для неопытных пользователей крайне желательно делать копию файла перед его редактированием.» как ее делать? наверное мне с этого начать нужно)

          1. Юрий, но мне нужно начать с копии? как сделать копию файла? «Для неопытных пользователей крайне желательно делать копию файла перед его редактированием.»
            Спасибо.

      2. Юрий, Вы молодец — доступно объяснили! 1 вариант — и «фон» во вкладке внешний вид появился. Правда «фон» полностью дублирует содержание «виджеты». И в итоге не даёт нужного результата — фон на сайте темы «Мистик..» не меняется, только цвет модно поменять, а сделать л
        фоном картинку не получается. Вот так то вот. 🙁

  5. Юрий , посмотрите пожалуйста я правильно вставил ? (обновил страницу ,вкладка фон не появилась)
    /* Begin Typography & Colors */
    body {
    font-size: 62.5%; /* Resets 1em to 10px */
    font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
    background: #ff578f url(‘images/kubrickbgcolor.jpg’);
    background:blue
    color: #333;
    text-align: center;

    }

    1. Нет, не совсем. У вас уже прописано свойство background. Оно должно быть только одно. И в конце строчки точка с запятой.
      Сделайте так:
      body {
      font-size: 62.5%; /* Resets 1em to 10px */
      font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
      background:#0033FF;
      color: #333;
      text-align: center;
      }
      Это изменит фон на синий. Если нужен другой цвет, то подберите тут: http://www.puzzleweb.ru/html/colors_html.php

      1. Всё получилось , спасибо . Но к сожелению не на том шаблоне на каком хотелось …

        1. Вот нужный шаблон, посмотрите пожалуйста (надоел вам уже наверное ) )))
          margin: 0 auto;
          padding: 0;
          background-color: #f0f8ff;
          background-image: url(‘images/Page-BgTexture.jpg’);
          background-repeat: repeat;
          background-attachment: scroll;
          background-position: top left;
          Почемуто неменяеться цвет фона

          1. Та не, все ок. Мне только в радость 🙂
            Просто у вас в шаблоне используется текстура, которая перекрывает цвет. Artisteer вообще в этом плане суров.
            Поменяйте на:
            margin: 0;
            padding: 0;
            background: #0033FF;

            1. Поменял :
              body
              {
              margin: 0;
              padding: 0;
              background: #ffba00;
              background-image: url(‘images/Page-BgTexture.jpg’);
              background-repeat: repeat;
              background-attachment: scroll;
              background-position: top left;
              }
              Без изменений , мистика просто )

              1. Удалите все, что внутри скобок. И вставьте то, что я написал.

              2. Большое спасибо , Юрий !
                Всё получилось . Не думали открыть школу «вордпресс для чайников » ? ))

              3. Нет, пока до ума свои сайты не доведу, пока не освою видеомейкинг и не сделаю видеокурсы, о преподавании можно даже и не заикаться.

  6. Юрий , не поможете довести до ума шаблон ? как убрать окантовку или поменять её цвет (в тон с фоном ) для визуального увеличения

  7. Доброго времени суток, Юрий. Такая проблема. Использую тему Mistique на вордпресс. Попробовала по Вашей рекомендации двигаться через вставку add_theme_support( ‘custom-background’ ); и фон. Вкладка «Фон» появилась, но когда открываю данную вкладку, то ничего кроме загрузки, которая не кончается, не происходит((( Помогите пожалуйста разобраться в чем проблема.
    Заранее благодарна.

  8. Здравствуйте, помогите пожалуйста разобраться с шаблоном. Шаблон MyRecipe. Хочу задать фон в виде картинки. Шаблон как бы предусматривает такую возможность и в консоли меняется фон, сохраняется. но по факту ничего не меняется. Пыталась добавить картинку и прописать в CSS
    body {

    background: url(images/fon-image.png);

    но тоже ничего не изменилось
    (((

    1. У вас код с ошибкой написан.
      Вот ваш:
      body {
      background: url(images/fon-image.png) none repeat scroll 0 0;
      }

      Видите это «none»? Этот параметр отменяет свойство background. Просто сотрите и все будет работать.

      1. Большое спасибо! Правда, заработало только после того как переустановила тему заново))

  9. Юрий, подскажите еще пожалуйста, можно ли изменить не только фон но и цвет самой страницы,
    пробовала написать такой код

    body {
    background-color: #ffcf48;
    background: url(images/fon-image.png) repeat scroll 0 0;

    }
    но цвет страницы так и остается белым

    1. Найдите в стилях id:
      #contentwrap и #content
      К ним задайте нужный цвет.
      Но выйдет фигня, так как в Хедере у вас бекграунд — картинка. Поэтому там цвет изменить нельзя (если не владеете фотошопом).
      Разве что для сочетания можно использовать светлые тона.

      1. Огромнейшее спасибо!!! Теперь со всеми полями разобралась. А с картинкой проблем не будет, тем более я ее сама рисовала — в теме другая была))

  10. Юрий, если не трудно подскажите, что сделать, чтобы сайт стал опять трёхколоночным. Я вошел во внешний вид, настройки Mystique, дизайн, шапка логотип и поставил фотографию, после чего сайт стал одноколоночным и там где написано «Размер колонок» пусто. Шаблоны не меняются, ширина страницы меняется. Пробовал ставить другие темы и вертаться опять в свою, но моя по прежнему остаётся одноколоночной и не управляется.
    Заранее Вам благодарен за ответ.

  11. Здравствуйте Юрий, на тестовом сайте я сделал все по Вашей инструкции, фон появился, загрузил картинку, сохранил/опубликовал, при этом все визуально хорошо но когда перезагрузил сайт ничего не изменилось, можете подсказать в чем причина. О прописывании заднего фона баграундом в стилях я знаю, хотелось бы задавать его именно через вкладку «Фон»

    1. Здравствуйте. Все современные темы уже давно включают в себя эту опцию по умолчанию. Это — стандарт. Все косяки — именно из-за неправильно сделанных шаблонов. Сказать, в чем конкретно причина, я не могу. Могу лишь посоветовать отказаться от устаревших и переходить на новые темы. Нужно идти в ногу со временем, быть в тренде. Я на этом сайте 4 или 5 раз шаблон менял, пока не пришел к текущему. Вполне возможно, что и это — не окончательный вариант.

  12. А как фоновое изображение прижать к низу? такой настройки нет в редакторе фона. Заранее спасибо за ответ.

  13. Юрий, действительно вам нужно организовать форум для полных чайников (таких к примеру как я).
    Перелопатил столько инфы а ясного представления как поменять фон под текстом нет, везде пишут
    что за это отвечает бэкграунд, а посмотрел в файле core.css этих бэкграундов куча, color-куча, что менять
    совершенно не понятно. Тема мистик, подскажите пожалуйста в какой строке нужно внести изменения?
    Тоже самое с оформлением виджетов, как и на главной странице все белое противно глядеть. Если бы знать что и где почитать, поучить, через полгода может и получилось бы самому разобраться, а так зайдешь на обсуждение темы, все сыпят терминами им только понятными.

    1. Ну да, для каждого элемента свои стили, поэтому и бэкграундов много.
      Начните с изучения html и css. Затем почитайте про функцию «проинспектировать код элемента».
      А где, что и как менять сказать сложно, разные шаблоны — разный код.

  14. Юрий, выручайте. На теме twenty seventeen — как поменять цвет фона конкретной отдельной страницы?
    Заранее спасибо!

    1. По идее так:
      if( is_single( ИД поста ) ){
      background: цвет или ссылка на картинку;
      }

  15. Здравствуйте, Юрий. Проблема в том, что тема mastique у меня стала чёрная. Ничего невозможно изменить. Я её удалила и с сервера тоже удалила. Потом поставила заново. Но все остаётся так же. Как можно опять сделать другой желаемый мне цвет? Во вкладке дизайн в теме невозможно изменить цвет, она теперь не работает. Но как то привыкла к этой теме и очень хочется её реанимировать. Помогите пожалуйста. Спасибо.

    1. Лезть в стили и там править. Найти не сложно, обычно background к body применяют.

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

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