Очень просто. Если вы не владеете программой 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 строке файла видим вот такой код:
[cc]
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 ;
}
[/cc]
Вот наше свойство, определяющее вывод картинки фона:
[cc]
background: #000 url(images/body-bg.jpg) repeat ;
[/cc]
Давайте быстренько его разберем:
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 и сохраняем под тем именем, под которым был наш первый фон (предварительно, старый фон можно переименовать, зачем его удалять?).
Ничего нигде больше менять не надо. В файле стилей наш фон имел ссылку, под которой мы сохранили новый файл. Так что, произойдет автоматическая замена старого фона на новый. Активируем шаблон и смотрим, что получилось:
Вам нравится новый фон? Мне — не очень, если честно
Но. Я вам показал способ, как можно быстро и без особых хлопот сменить фон вашей темы. А вам самим решать, пробовать, экспериментировать…
Удачи!
Если вам понравилась моя статья, и вы считаете, что такие статьи вам нужны, голосуйте ниже. Спасибо.
[ratings]
Информационный партнер: www.intime.ua — служба доставки. Быстрая и удобная доставка грузов во все доступные и недоступные точки Украины. «Интайм» — это профессиональные отношения с каждым клиентом.
Мой блог находят по следующим фразам
- вставка аудио в wordpress
- как поставить фон на сайте размер
- wp плагин сайт временно не работает
- xfn lkz djhlghtcc
- wordpress вывод с другим шаблоном на главной
- регистрация на wordpress плагин






Замечательно, надо попробовать !
Нужно переходить по: http://bgpatterns.com/
Ваша информация мне была интересна.
Здравствуйте! Получил вашу ссылочку от очень мне дорогого человека. помогает мне чайнику как может. спасибо ей и вам огромное. Но то что вы пишите как это сделать по шагам…. думаю что я не справлюсь.
хотя очень нужно изменить свой фон на моём сайте — направление сайта обязывает.
чувствуется что вы профессионал в своём деле. спасибо за помощь новичкам.
Странно,но плагин wp-notcaptcha не ставится.Настроек вроде ни каких,код ID); ?> в config.php присутствует.
Есть вариант, почему не встал. Возможно. что в вашем шаблоне нет одной функции в файле comments.php —
[cc]
< ?php do_action('comment_form', $post->ID); ? >
[/cc]
Должна стоять рядом с выводом textarea
В том то и дело , что есть.И не ставится, что интересно на рабочем блоге и на локальном. Коды есть на обоих. Вот загадка!!
Тогда, возможно, что-то мешает, плагин, например. У меня это сплошь и рядом. Все никак не могу найти плагин контактной формы для сайта. Теперь решил сам шаблон поменять, в нем уже есть встроенная контактная форма
Плагин Fast and Secure Contact Form.
http://wordpress.org/extend/plugins/si-contact-form/faq/ Русский язык есть, своя капча есть.У меня не конфликтует.Посмотри у меня на блоге
http://vlad.arvixe.ru/.Проверял работает отлично
Шаблон я все равно менять буду, дело даже не в контактной форме.
Добрый день. Вообще мне вот эти обучающие статьи нравятся.У каждого наверное есть какие-нибудь проблемы по дизайну своего блога.У меня не получается вместо ссылки на скачивание поставить кнопку.А нельзя ли получить следующий урок по этой теме? P.S Отличная капча внизу.
Спасибо, Влад, за комментарий, и за предложенную тему — рассказать как вместо ссылки поставить картинку. Сделаю, буквально завтра. А что касается каптчи — это новый плагин, посоветовали, называется wp-notcaptcha, говорят, абсолютно непроходимый для ботов
Посмотрю, как дальше будет.