Меняем фон нашего сайта

Очень просто. Если вы не владеете программой Photoshop, а таких — большинство, изменить фон нашего сайта кажется очень сложной задачей. Моя статья как раз для тех, кто хочет поменять фон, но не знает как, и никогда это не делал. С чего начинать? Как сделать красивый рисунок, например, вот такой:

Возможно, он и не самый красивый, но я его сделал буквально за 5 минут с помощью онлайн-ресурса по адресу —  gpatterns.com.

Там вы найдете много вариантов рисунков для вашего бэкграунда. Но! Прежде чем менять фон на своем сайте и делать новый, советую сделать последовательные шаги. А именно:

1. Сначала откройте папку вашего шаблона и найдите картинку, которая сейчас является вашим фоном. Чаще всего, это изображение в формате JPG, но может быть PNG или GIF. Размер ее — прямоугольный, от небольшого, 40 на 40 пикселей, до достаточно крупного, как картинка выше, 127 на 127 пикселей. Чаще всего, этот файл лежит в подпапке /image вашего шаблона. Сегодня я выложил шаблон Svartura, и у него есть свой бэкграунд, называется файл body-bg.jpg. Можно перевести как «тело-бэкграунд». Ваш фон наверняка называется похожим именем. А вот фон из шаблона Svartura:

Если вы перейдете в статью, описывающую шаблон Svartura и нажмете на слове — Демонстрация, вы увидите, как выглядит фон в этом шаблоне.

2. Итак, мы нашли наш фон. Теперь нам надо определить, каким образом он добавляется в нашем шаблоне. Есть два основных способа, которыми прописывается наш файл фона: через свойства стилей в файле style.css, или прямой ссылкой в файле header.php. Наиболее часто авторы используют первый вариант. Поэтому, открываем файл style.css и ищем свойство, описывающее наш файл фона. В каком месте обычно написано? Часто. в самом начале файла. И действительно, на 17 строке файла видим вот такой код:

body{
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-size:13px;
color: #3e3e3e;
background: #000 url(images/body-bg.jpg) repeat ; }
}
 

Вот наше свойство, определяющее вывод картинки фона:

 background: #000 url(images/body-bg.jpg) repeat ;
 

Давайте быстренько его разберем:
Background — фон по-русски.
#000 цвет основы (подложки), означает «черный».
url — ссылка на наш файл фона, путь и имя файла.
repeat — свойство фона, означает «повтор», если нет через дефис буквы x или y, значит, условие повтора — замостить этой картинкой всю страницу, слева направо и сверху вниз. Изучать здесь свойства стилей не будем. Просто коротко поясняю условия вывода в нашем шаблоне — примере. Например: если бы было написано — repeat-x — значит, картинка была бы размножена в один ряд справа налево. Без буквы — значит, картинка замостила всю страницу.

3. Теперь, зная, какая у нас есть картинка фона, зная, где она описана и какие у нее свойства (формат файла, размер), мы можем перейти на сайт  gpatterns.com и создать свой фон. Совет: пройдите регистрацию. Моментально на почту получите ссылку для активации своей учетной записи. Вы получите доступ к созданию своего фона.

На главной странице gpatterns.com вы видите варианты, созданные посетителями, самые популярные по скачиванию и голосованию:

Это внизу. А вверху — можете сразу приступать к созданию своего фона 🙂

Как? Рассказываю по шагам.

1. Переходим на вкладку Color. Выбираем режим Background Color Change. В соседнем окне (справа) можем выбрать цветовую зону, или вверху — назначить цвет с помощью числового 6-значного кода:

2. Затем переходим на вкладку Canvas и выбираем подложку (градиент) для нашей картинки.

3. Затем переходим на вкладку Image и выбираем понравившуюся нам картинку для нашего сайта. Их — чуть меньше 100 штук 🙂

4. На вкладке Rotate мы можем выбрать разворот нашей картинке по оси.

5. Все. Теперь справа ищем — Download image — и сохраняем наш фон в компьютере.

А теперь переходим к замене нашего фона в шаблоне. Созданный файл переносим в папку шаблона /image и сохраняем под тем именем, под которым был наш первый фон (предварительно, старый фон можно переименовать, зачем его удалять?).

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

Вам нравится новый фон? Мне — не очень, если честно 🙂

Но. Я вам показал способ, как можно быстро и без особых хлопот сменить фон вашей темы. А вам самим решать, пробовать, экспериментировать…

Удачи!

Информационный партнер:  www.intime.ua — служба доставки. Быстрая и удобная доставка грузов во все доступные и недоступные точки Украины. «Интайм» — это профессиональные отношения с каждым клиентом.


Понравилась статья? Поделись с друзьями!

11 коммент.

  1. Здравствуйте! Получил вашу ссылочку от очень мне дорогого человека. помогает мне чайнику как может. спасибо ей и вам огромное. Но то что вы пишите как это сделать по шагам…. думаю что я не справлюсь.
    хотя очень нужно изменить свой фон на моём сайте — направление сайта обязывает.
    чувствуется что вы профессионал в своём деле. спасибо за помощь новичкам.

    Ответить
  2. Странно,но плагин wp-notcaptcha не ставится.Настроек вроде ни каких,код ID); ?> в config.php присутствует.

    Ответить
    • Есть вариант, почему не встал. Возможно. что в вашем шаблоне нет одной функции в файле comments.php —

      < ?php do_action('comment_form', $post->ID); ? >

      Должна стоять рядом с выводом textarea

      Ответить
      • В том то и дело , что есть.И не ставится, что интересно на рабочем блоге и на локальном. Коды есть на обоих. Вот загадка!!

        Ответить
        • Тогда, возможно, что-то мешает, плагин, например. У меня это сплошь и рядом. Все никак не могу найти плагин контактной формы для сайта. Теперь решил сам шаблон поменять, в нем уже есть встроенная контактная форма 🙂

          Ответить
          • Плагин Fast and Secure Contact Form.
            wordpress.org/extend/plugins/si-contact-form/faq/ Русский язык есть, своя капча есть.У меня не конфликтует.Посмотри у меня на блоге
            Проверял работает отлично

          • Шаблон я все равно менять буду, дело даже не в контактной форме.

  3. Добрый день. Вообще мне вот эти обучающие статьи нравятся.У каждого наверное есть какие-нибудь проблемы по дизайну своего блога.У меня не получается вместо ссылки на скачивание поставить кнопку.А нельзя ли получить следующий урок по этой теме? P.S Отличная капча внизу.

    Ответить
    • Спасибо, Влад, за комментарий, и за предложенную тему — рассказать как вместо ссылки поставить картинку. Сделаю, буквально завтра. А что касается каптчи — это новый плагин, посоветовали, называется wp-notcaptcha, говорят, абсолютно непроходимый для ботов 🙂 Посмотрю, как дальше будет.

      Ответить

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