С помощью плагина — Full Background Image Manager, вы сможете изменять фон для каждой по отдельности записи и страницы wordpress сайта. На странице редактирования записи и страницы, у вас появится виджет, где вы сможете задавать для определённой страницы цвет фона, текстуру фона или изображение фона.
Цвет фона.
Текстура фона.
Изображение фона.
Установить плагин вы сможете прямо из админ-панели wordpress. Перейдите по вкладке: Плагины — Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
После установки и активации плагина, откройте страницу для редактирования, у которой вы хотите изменить фон. У вас появится специальный виджет, в котором вы сможете задавать цвет фона, текстуру или изображения. Чтобы задать цвет для фона, то просто нажмите по кнопки — Выбрать цвет , выберите цвет, обновите страницу и смотрите результат. Можете выбрать в качестве фона Текстуру , вам будет предложено на выбор 8 вариантов. Просто нажмите по текстуре, выделите её и обновите страницу или запись, чтобы изменения вступили в силу.
Чтобы установить в качестве фона изображение, то нажмите на кнопку — No , затем у вас появится вкладка — Set background image , нажмите по данной вкладке и выберите изображение, которое вы хотите установить в качестве фона.
Attachment
— Fixed, изображение будет зафиксировано.
— Scroll, изображение будет прокручиваться.
Repeat
— No Repeat, не повторять изображение.
— Repeat, повторять изображение.
— Repeat Horizontally, повторять по горизонтали.
— Repeat Vertically, повторять по вертикали.
После того как вы установите новый фон для записи или страницы, не забудьте Обновить страницу, чтобы изменения вступили в силу.
Сегодняшняя статья будет наиболее интересна новичкам, которые хотят изменить или установить фон для своего сайта на WordPress, ведь в ней я расскажу об одном быстром и простом способе сделать фон для своего интернет-ресурса.
Совсем недавно я сам менял фон для своего сайта, поэтому мне пришлось поискать соответствующую информацию в интернете, касающуюся в первую очередь знаний языков html и CSS.
Теперь я знаю, как реализовать поставленную задачу быстро и просто, и поэтому расскажу об этом на страницах своего сайта, чем (как мне хотелось бы верить) избавлю вас от аналогичных поисков и соответствующих временных затрат!
Но для начала давайте выясним, что из себя может представлять фон для сайта?
А представлять он может следующее:
- однотонный цветной фон;
- изображение, используемое целиком в качестве фона;
- фон, полученный в результате многократного повторения какого-либо изображения;
- комбинированный фон, а точнее изображение, используемое в качестве фона, переходящее в однотонный цветной фон.
Это основные способы получения фона для сайта, теперь настало время разобраться со способом реализации каждого из них.
Как поменять фон сайта WordPress?
Все манипуляции по изменению фона для сайта, которые я буду рассматривать в данной статье, будут касаться файла style.css шаблона WordPress, а если быть еще точнее, то фрагмента данного файла, в котором прописываются свойства для класса body.
Обычно данный фрагмент располагается в самом начале файла style.css и в моем случае выглядит следующим образом (некоторые характеристики темы скрыты):
Скажу сразу, что в моем случае фон для сайта уже реализован с применением многократно повторяющейся (как по горизонтали, так и по вертикали) картинки, за что отвечает свойство:
background: url(images/background.jpg) repeat;
В случае с вашим шаблоном данный код скорее всего будет отсутствовать, поэтому, если вы хотите сделать для своего ресурса на WordPress фон путем повторения изображения, то следует данное свойство прописать для класса body, учитывая при этом необходимость наличия по указанному пути выбранного изображения (если изображения нет, то его следует добавить в папку по указанному пути).
В представленном фрагменте кода прописан путь (относительно директории с шаблоном) до изображения, которое используется в качестве фона. В свою очередь значение repeat отвечает за повторение изображения по горизонтали и по вертикали таким образом, чтобы данным изображением заполнялся полностью весь фон (аналогично свойству «замостить» в настройках рабочего стола Windows).
Справедливости ради стоит добавить, что существует возможность задать повторение изображения только по горизонтали (repeat-x вместо repeat) или только по вертикали (repeat-y вместо repeat).
Таким образом, мы сразу разобрали как реализуется фон, полученный в результате многократного повторения какого-либо изображения. Для наглядности привожу скриншот своего сайта:
Стоит добавить, что при реализации данного способа логично подобрать изображение таким образом, чтобы при его многократном повторении не было видно границ в местах перехода. В моем случае я использовал полностью симметричное изображение:
Теперь рассмотрим как сделать однотонный цветной фон.
Делается в данном случае все крайне просто, нужно лишь прописать для класса body следующее свойство:
Для примера я взял цвет #123456, результат следующий:
Номер цвета можно подобрать с помощью палитры цветов Photoshop, а также с помощью онлайн-сервисов, которые не составит труда найти в интернете по поисковому запросу «палитра цветов html».
Далее на очереди способ, подразумевающий использование в качестве фона одного изображения целиком.
Тут все также довольно просто: закидываем на хостинг выбранное в качестве фона изображение, и для body в style.css прописываем свойство:
background: url(путь к файлу изображения) no-repeat top fixed;
На примере своего сайта я реализовал и данный способ, вот скриншот:
Ну и последний на сегодня способ, который сочетает в себе два предыдущих, то есть в качестве фона используется изображение, а остальная область заливается цветом.
Прописываем для body в style.css свойство:
background: #123456 url(путь к файлу изображения) no-repeat top fixed;
Результат на скриншоте:
Цвет #123456 я взял для примера, причем специально подобрал такой, чтобы было видно границу между картинкой и заливкой цветом. По идее, как не сложно догадаться, в жизни чаще всего подобирается цвет таким образом, чтобы данный переход наоборот был незаметен.
Таким образом, в данной статье мы рассмотрели способ, с помощью которого можно легко и просто сделать фон для своего сайта на WordPress.
Данная статья будет интересна тем, кто хочет установить для своих страниц на сайте разный фон, то есть на одной странице белый фон, а на другой серый, или на одной странице одно изображение в виде фона, а на другой странице другое изображение в виде фона. Я думаю вы понимаете о чём идёт речь, если вы любите по креативить, то рекомендую ознакомится с данным материалом.
Итак, создавать разный фон для страниц сайта, мы будем с помощью плагина – Custom Background Extended , плагин очень простой и с ним легко работать. Установить данный плагин вы сможете прямо из своей админ-панели wordpress, для этого перейдите по вкладке: Плагины – Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте открывшийся плагин.
После установки и активации плагина вы можете сразу же перейти на страницу редактирования любой записи или страницы на вашем сайте, там у вас появится специальный блок-виджет для добавления фона.
В данном виджете вы можете выбрать цвет фона для той страницы или записи, которую вы редактируете либо создаёте. Так же здесь можно загрузить фоновое изображение, нажав на вкладку – Set background image .
Настройки фона изображения:
– No Repeat – не повторять.
– Repeat Horizontally – повторять по горизонтали.
– Repeat Vertically – повторять по вертикали.
Horizontal Position (выравнивание фона)
– Center – по центру.
– Scroll – прокручивать фон.
– Fixed – зафиксировать фон.
После того как вы установите для вашей страницы фон, удалите кэш сайта , чтобы сделанные вами изменения отобразились на вашем сайте. На этом всё, до новых встреч ! У вас остались вопросы по данной статье ? тогда обязательно напишите мне в Обратную связь, либо оставьте комментарий к данной записи. Я всем отвечу !
Ещё один плагин – Full Background Manager, для изменения фона страниц и записей сайта wordpress. Вы сможете установить в качестве фона – Цвет, текстуру, изображение.