WordPress, Введение, Дизайн

Меняем фон в WordPress

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

 







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

Давайте поменяем наш фон сайта на синий фон.

twentyeleven

Вот такое вот у меня получилось изображение:

Голубой фон

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

Теперь нужно скопировать наше изображение по следующему пути:

WP-content > Themes > twentyeleven > images

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

Дизайн > Редактор > style.css

В теме TwentyEleven, есть раздел с названием “Global”. Ищем “body” и здесь указывается в данном случае цвет нашего фона.

Style.css WordPress

Теперь, после того, как мы нашли раздел для нашего фона, давайте пропишем нашу картинку. После этого нам нужно будет сделать ещё несколько корректировок, но будем делать все шаг за шагом.

Нижеследующим кодом мы указываем путь до нашего изображения (blue.gif):

background-image:url(images/blue.gif);

Помните, что сначала мы скопировали наше изображение в папку нашей темы, поэтому сейчас при указании пути, мы можем просто использовать images/blue.gif, а не прописывать полный путь.

Рекомендую плагин: SimpleCounters

Хотите отображать ваше количество подписчиков на сайте, поставьте этот плагин.

Давайте посмотрим, как сейчас выглядит наш body:

body
{
	background: #e2e2e2;
	background-image:url(images/blue.gif);
}

Далее мы можем увидеть, как выглядит наша картинка на нашем сайте:

WpDay

Как вы заметили наш фон повторяется. Но вначале статьи мы решили делать наш фон без повторения, для этого необходимо добавить правило – “не повторять”:

background-repeat: no-repeat;

Сейчас наш body выглядит так:

body
{
	background: #e2e2e2;
	background-image:url(images/blue.gif);
	background-repeat: no-repeat;
}

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

Чтобы сделать это, добавьте следующее:

background-position: top center;

Но это может не совсем решить нашу проблему, поэтому советую поменять цвет основного фона на голубой, близкий к вашему фону.

Первоначальный цвет был #e2e2e2, я заменил его цветом #6B8CC2.

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

body
{
	background: #6B8CC2;
	background-image: url(images/blue.gif);
	background-repeat: no-repeat;
	background-position: top center;
}

Благодаря тому, что мы изменили цвет фона и от центровали наше изображение, теперь можем хоть за увеличивать нашу страницу:)

Wpday.ru

Как видите поменять фон WordPress не так уж и сложно, и вообще совет друзья изучите хотя бы основы css, чтобы можно было творить чудеса в вашем оформлении WordPress.

 

Поделиться:

Похожие записи

  • О спасибо большое ,автору за отличную тему! Приеду домой с работы – обязательно ее изучу, уже есть вопрос по поводу оптимальных размеров для фона… как сделать чтоб фон с рисунками идеально смотрелся на большинстве разрешений?

    • Думаю лучше будет сделать через повторение,но смотря что за фон,пишите разберемся вместе:)Допустим здесь на блоге фон идет через повторение.

      • Антон

        Качественная информация! Спасибо!

  • Интересная статья. У меня темный фон. мне нравится. Хотелось бы его просто чем-то оживить. Вот у вас бабочки летают, а мне бы какие-нибудь маленькие мерцающие звездочки. Это, наверное, невозможно?

    • Маргарита почему же не возможно, у меня же бабочки летают, значит и у вас возможно сделать звездочки)

    • Вот ссылка, где рассказано про черный фон с маленькими мерцающими звездочками 
      http://cmspraktikum.wordpress.com/2011/11/06/twentyeleven/

  • Я вот тоже задумывался поменять фон, но дизайнер отговорил. Я хотел текстурку какую-нибудь тематическую, но прислушался к мнению профессионала.

  • Jekaka7

    Менять фон легко. Даже тем, кто не знают как это делать. Надеюсь твой пост поможет кому-то

    • Статья рассчитана на новичков.

  • Хороший пост, отлично подойдет ночичкам.

  • А я фон белым оставил. Хотя, может мне стоит его заменить? :)

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

  • я воспользовался возможностью самой темы вордпреса для изменения фона.

    • Как я писал в начале статьи,не во всех темах есть данная возможность.

  • Лариса

    Ловко вы, и получилось очень неплохо. А вот у меня фон привязан к текстовому полю, и если делаешь его цветным, то между шапкой и полем вылезает цветная полоса. Какой-то радетель обругал мой белый фон. а мне. если честно, нравится – чистота и порядок. Но и цветные бывают очень красивые.

    • Лариса, если нужна помощь по установке фона на ваш блог, то свяжитесь со мной   по контактам, с радостью помогу.

  • Максим

    Довольно качественно все описано. Я тоже собираюсь еще поработать над своим фоном, но пока больше склоняюсь к чему – то однотонному структурированному. На моем движке подобное делается в админ – панели, но все же полезно. Спасибо

  • ЗдОрово!

  • Тоже хочу поменять фон. Только вначале, наверное, поменяю саму тему. и воспользуюсь Вашими подсказками. Если что пойдет не так, поможете?

    • Конечно Ольга,обращайтесь.

  •  Спасибо,по-моему это для моего шаблона наиболее приемлемый вариант.Хотя побаиваюсь.Я хотeла поменять ширину страницы, но у меня все перекосило. Можете посмотреть мой блог http://pokulinarim.ru??? Буду благодарна..

  • levko levko

    в мечтах фоном делать какую-нибудь премьеру в кинотеатре,как это делается, например,на кинопоиске,но пока знаний нехватает :(

  • Спасибо за полезный материал. Хотя ленивым, проще будет поставить плагин и не лезть в код. Сейчас не помню, но точно видел пару плагинов которые это делают.

    • Не отрицаю, плагины есть, но зачем засорять WP?

  • Елена

    Пролистала кучу сайтов, везде так сложно поменять фон сайта/ а у вас легко и вполне понятно! Но возник вопрос, откуда взялось голубое изображение или это заранее заготовленная текстура!Очень хочу оживить свой сайт! Помогите пожалуйста,если это возможно напишите мне на почту! Заранее благодарю!   

  • А скажите, вот я меняю фон с помощью меню своей темы,  но на самом сайте фон не отображается. Хотя в настройках он сохранен, если зайти в “фон”, то он там. А на сайте нет. В чем может быть дело?

  • O2612878

    а если раздела глобал нету , то где ковырять ?

  • Александр

    Здравствуйте.
    Как поменять фон в разделе, чтобы вместо белого можно было либо картинку или просто цвет задать. Вот например у вас фон = #F7FAFD

    • Смотрите в каком div ваш раздел и там меняйте цвет.

  • Marin

    Скажите,а как сделать фон кликабельным,ну типа рекламного фона!Весь день ищу инфу,но никак не нахожу!

  • Артём

    С вашей подсказкой, и методом тыка всё получилось. спасибо.

    • Рад, что Вам помогло.

Дешевый хостинг