Как изменить фон сайта на 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. Значит в настройках темы есть другая функция, которая имеет приоритет. Вы изучили все настройки темы?

  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. Затем почитайте про функцию «проинспектировать код элемента».
      А где, что и как менять сказать сложно, разные шаблоны — разный код.

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

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