To customize the background on your site, you will use a different option depending on your theme:
- If you are using a theme that supports the Site Editor (i.e. you can see Appearance → Editor in your dashboard), you can set a custom background in the Site Editor.
- If you’re using a Classic theme, you can customize the background on your site using the Colors & Backgrounds tool by navigating to Appearance → Customize.
📌
Background images aren’t always recommended because they make the content on top of it hard to read. Images can work well if the background is a plain pattern or one with a high contrast to the text on top of it.
Table of Contents
Change Your Background in the Site Editor
If your site uses a theme that supports the Site Editor, you can change your site’s background by navigating to Appearance → Editor.
Changing the background in this section will change it on the entire site.
Background Color
To set a custom background color for your site, you will use the Colors settings accessible from the Styles button in the Site Editor.
- Starting from your dashboard, go to Appearance → Editor.
- Click on the Styles icon in the top right corner of the Site Editor.
- Click on the Colors option to open up additional settings.
- On the next screen, click on the Background option and then select a custom color using the color picker in the Block Editor.
Background Image
- Starting from your dashboard, go to Appearance → Editor.
- Click on the three horizontal lines icon in the top left corner to open up List View.
- Hover on the topmost block in the List View section.
- Click on the three dots that appear to the right side of that block.
- Click on the option to Insert before.
- Insert a Cover block before all the other blocks in List View, and then add and customize your background image using the Cover block.
- Select and move all the other blocks in List View and place them on top of the Cover block.
- If there are any locked blocks, you can unlock them to enable editing and movement.
- If the text on top of the Cover block becomes hard to read after you’ve added your background image, you can use the opacity setting to improve visibility.
- Click the Save button in the top right corner after you’ve moved all blocks and placed them on top of the Cover block.
- The image you previously added to the Cover block will now show as the background image for your site.
Change Your Background in the Customizer
For classic themes, you can choose between a background color, background pattern, or background image if the specific theme supports it. Background patterns are loaded based on the background color of the last selected color palette for your site.
If you don’t see Colors & Backgrounds under Customize, your theme does not support changing the colors and backgrounds. Consider switching to one of the new Full Site Editing themes, which allow you to edit many aspects of your site in the Site Editor.
Watch the video below for a quick overview of how you can change your background in the customizer, and read below for more examples and settings.
To change the Background on your classic theme:
- Navigate to Appearance → Customize.
- Click on the Colors & Backgrounds tab.
- On the next screen, you’ll see the option named Background.
Next, you can customize your site’s background by clicking into each of the corresponding numbered sections as explained below:
- Click into the colored box area to pull up the options available for customizing the background on your theme.
- Click on Palettes to select a new color palette to use on your site.
- Click Select Image to choose an image to use for your background. This option will only appear if your theme supports background images. Learn more about Background Images.
- Click on any of the automatic color suggestions to use it for your site.
- Click on the pick your own color link to open up the color picker and use it to set a custom color for your background.
- Click on any pattern to use it as the background for your site.
- Click on the More button to load additional patterns to choose from. After you’ve clicked the More button once, another Back button will appear next to it. You can use it to load the previous patterns within the selection. Background patterns are provided by COLOURlovers.
Background Images
After you’ve selected an image to use for the background of your site, an Options button will appear directly below it. Click on that, and you’ll see several settings to manage the display of your background image as explained below:
- Click Select Image to choose an existing image from your media library, or upload a new one.
- Click Options to open up the additional settings available for your background image display.
- Click into the icons to adjust the position of your background image.
- Position controls where the background image is aligned: left, center or right.
- Repeat determines if an image appears once, repeats vertically, repeats horizontally, or tiles.
- Fixed Position means the image stays fixed in place when you scroll up and down the page.
- Underlying Color is the color that loads behind the background image.
- Click into the colored box to open up the color picker where you can select a different Underlying Color for your background.
- Click Hide background image to remove the current image and select a different one, or use a solid background color or pattern instead.
Saving Changes
Once you’re done making changes, click the Save Changes button at the top of the customizer to save your colors.
Are you looking for an easy way to change the background color of your WordPress website?
The background color of your website plays an important role in your design and branding, and in making your content more readable.
In this article, we will show you how to easily change the background color of your WordPress site.
Why Change the Background Color in WordPress?
A WordPress theme comes with a default background color. Changing the background color can help personalize your website design and improve readability.
For instance, you can make a specific section of a page prominent using a different background color. This helps in highlighting your call to action (CTA) and increasing conversions.
You can use different background colors for different posts on your WordPress blog based on authors, comments, or categories. This helps in differentiating articles from other content on your website.
There is also a way to add videos backgrounds to instantly capture your visitors’ attention and boost engagement.
That being said, let’s take a look at how to change the background color in WordPress. We’ll show you different ways to customize the background color, so you can jump ahead to any section you prefer:
- Change Background Color using WordPress Customizer
- Change Background Color using Full Site Editor
- Change Background Color using Custom CSS
- Randomly Change Background Colors
- Change Background Color for Individual Posts
- Use a Video in the Background
- Create a Custom Landing Page
Change Background Color using WordPress Theme Customizer
Depending on your theme, you may be able to change the background color using the WordPress Theme Customizer. It lets you edit the appearance of your site in real time and without the need to edit code.
To access the WordPress Theme Customizer, you can log in to your website and then go to Appearance » Customize.
This will open the Theme Customizer, where you’ll find multiple options to modify your theme. This includes the menus, colors, homepage, widgets, background image, and more.
The specific options available will depend on which WordPress theme your site is using. For this tutorial, we’re using the default Twenty Twenty-One theme.
To change the background color of your website, go ahead and click on the ‘Colors & Dark Mode’ settings tab from the menu on your left.
Next, you’ll need to click the ‘Background Color’ option and choose a color for your website.
You can use the color picker tool or enter a Hex color code for your background.
When you’re done with the changes, don’t forget to click the ‘Publish’ button.
You can now visit your website to see the new background color in action.
Your theme may not have this option available in the Theme Customizer. In that case, you can try one of the methods below.
Change Background Color using Full Site Editor
The full site editor (FSE) is a block-based WordPress theme editor that you can use to edit the background color of your site. It offers different blocks for customizing the website design and is similar to using the WordPress block editor.
The full site editor is currently available in selected WordPress themes, like the Twenty Twenty-Two theme. To perform a background color change, you can go to Appearance » Editor from your WordPress dashboard.
Once you’re in the full site editor, you can change the background color of each individual block.
First, select a block you’d like to edit. Then from the settings panel on your right, head to the ‘Color’ section and click the ‘Background’ option to choose a color.
When you’re done, go ahead and click the ‘Save’ button.
On the other hand, if you’d like to add a background color that appears behind all the blocks, then you can add a Cover block.
First, click the ‘+’ sign at the top and add the ‘Cover’ block.
Next, you’ll see the Cover block in the theme template with a few background color options to choose from.
Alternatively, you can go to the Overlay section from the settings panel on your right and click the ‘Color’ option.
After selecting a color, the next step is to show it on your entire page.
To start, you’ll need to click the 3 dashes List View icon at the top. This will open the outline of your theme and show different sections.
Next, you can simply drag and drop all the theme elements in the List View under the Cover block.
When you do that, your Cover block color will appear as the background color on the whole website.
Don’t forget to click the ‘Save’ button at the top to store your changes.
Change Background Color by Adding Custom CSS
Another way you can change the background color of your WordPress website is by adding custom CSS in the WordPress Theme Customizer.
To start, head over to Appearance » Customize and then go to the ‘Additional CSS’ tab.
Next, you can enter the following code:
body {
background-color: #FFFFFF;
}
All you have to do is replace the background color code with the color code that you want to use on your website. Next, go ahead and enter the code in the Additional CSS tab.
When you’re done, don’t forget to click the ‘Publish’ button. You can now visit your website to view the new background color.
For more details, please refer to our guide on how to easily add custom CSS to your WordPress site.
Randomly Change Background Colors in WordPress
Now, are you looking for a way to randomly change the background color in WordPress?
You can add a smooth background color change effect to transition between different background colors automatically. The effect goes through multiple colors until it reaches the final color.
To add the effect, you’ll need to add code to your WordPress website. We’ll walk you through the process below.
The first thing you’ll need to do is find out the CSS class of the area where you’d like to add the smooth background color change effect.
You can do this by using the Inspect tool in your browser. All you have to do is take your mouse to the area you want to change the color and right-click to select the Inspect tool.
After that, you’ll need to write down the CSS class you want to target. For example, in the screenshot above, we want to target the area with a CSS class ‘page-header.’
Next, you need to open a plain text editor on your computer like a notepad and create a new file. You’ll have to save the file as ‘wpb-background-tutorial.js’ on your desktop.
Once that’s done, you can add the following code to the JS file you just created:
jQuery(function($){
$('.page-header').each(function(){
var $this = $(this),
colors = ['#ec008c', '#00bcc3', '#5fb26a', '#fc7331'];
setInterval(function(){
var color = colors.shift();
colors.push(color);
$this.animate({backgroundColor: color}, 2000);
},4000);
});
});
If you study the code, then you’ll notice that we used the ‘page-header’ CSS class as it’s the area we want to target on our website.
You’ll also see that we used four colors using the hex color code. You can add as many colors as you want for your background. All you have to do is enter the color codes in the snippet and separate them using a comma and single quotes, like the other colors.
Now that your JS file is ready, you’ll need to upload it to your WordPress theme’s JS folder using a file transfer protocol (FTP) service.
For this tutorial, we’re using FileZilla. It’s a free FTP client for Windows, Mac, and Linux, and it’s very easy to use.
To start, you’ll need to log in to your website’s FTP server. You can find the login credentials in the email from your host provider or in your hosting account’s cPanel dashboard.
After you’re logged in, you’ll see a list of folders and files of your website under the ‘Remote site’ column. Go ahead and navigate to the JS folder in your site’s theme.
If your theme doesn’t have a js folder, then you can create one.
Simply right-click your theme’s folder in the FTP client and click the ‘Create directory’ option.
Next, you’ll need to open the location of your JS file under the ‘Local site’ column.
Then right-click the file and click the ‘Upload’ option to add the file to your theme.
For more details, you can follow our tutorial on how to use FTP to upload files to WordPress.
Next, you’ll need to enter the following code into your theme’s funtions.php file. This code properly loads the JavaScript file and the dependent jQuery script that you need for this code to work.
function wpb_bg_color_scripts() {
wp_enqueue_script( 'wpb-background-tutorial', get_stylesheet_directory_uri() . 'https://cdn.wpbeginner.com/js/wpb-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' );
We recommend using the Code Snippets plugin to safely add the code to your site. For more details, see our guide on how to paste snippets from the web into WordPress.
You can now visit your website to see the randomly changing colors in action in the area you targeted.
Change Background Color for Individual Posts
You can also change the background color of each individual blog post in WordPress instead of using a single color throughout your website using custom CSS.
It allows you to change the appearance of specific posts and personalize their backgrounds. For example, you can customize the style of each post based on authors or show a different background color for your most commented post.
You can even change the background color for posts in a particular category. For example, news posts can have different background colors compared to tutorials.
The first thing you’ll need to do is find the post ID class in your theme’s CSS. You can do that by viewing any blog post and then right-click to use the Inspect tool in your browser.
Here is an example of what it would look like:
<article id="post-104" class="post-104 post type-post status-publish format-standard hentry category-uncategorized">
Once you have your post ID, you can change the background color of an individual post by using the following custom CSS. Just replace the post ID to match your own and the background color code that you want.
.post-104 {
background-color: #D7DEB5;
color:#FFFFFF;
}
To add the custom CSS, you can use the WordPress Theme Customizer. First, make sure that you’re logged in to your WordPress website. Then, visit your blog post and click the ‘Customize’ option at the top.
After that, head over to the Additional CSS tab from the menu on your left.
Next, enter the custom CSS and then click the ‘Publish’ button.
You can now visit your blog post to see the new background color.
If you want to change the background color based on author, comments, or category, then check out our detailed tutorial on how to style each WordPress post differently.
Use a Video in the Background
Using videos as your website background is a great way to capture your visitors’ attention and increase user engagement.
The easiest way to add a video in the background is by using a WordPress plugin. For this tutorial, we’ll use mb.YTPlayer for background videos.
It’s a free plugin that lets you play YouTube videos in the background of your WordPress website. There is also a premium version available that lets you remove the mb.YTPlayer watermark and offers more customization features.
First, you’ll need to install and activate the plugin on your website. For more details, you can follow our tutorial on how to install a WordPress plugin.
Upon activation, you can head over to mb.ideas » YTPlayer from your WordPress admin area.
On the next screen, you’ll need to enter the URL of your YouTube video and activate the background video.
Besides that, the plugin lets you select the location to show your background video. You can choose a static homepage, blog index homepage, or both. There is also an option to show the video on your entire site if you select ‘All.’
Once you’ve entered the video URL and activated the background, go ahead and visit your website to see the video background in action.
Create a Custom Landing Page
Creating custom landing pages in WordPress allows you to generate leads and boost sales for your business. You have complete control over the background color and design of the page.
The easiest way to create a highly engaging custom landing page is by using SeedProd. It’s the best landing page plugin for WordPress and offers an easy-to-use drag and drop page builder to create pages without editing code.
The first thing you’ll need to do is install and activate SeedProd on your website. You can refer to our guide on how to install a WordPress plugin.
Note: We’ll be using the SeedProd Pro version as it offers more powerful features, templates, and customization options. However, there is also a free version available on WordPress.org.
Once the plugin is active, you’ll be asked to enter your license key. You can find the key in your SeedProd account area. After entering the key, click the ‘Verify Key’ button.
Next, you can head over to SeedProd » Pages.
From here, click on the ‘Add New Landing Page’ button.
After that, you’ll need to select a theme for your landing page. SeedProd offers lots of beautiful landing page templates to get started.
You can also use a blank template to start from scratch. However, we suggest using a template as it’s an easier and faster way to create a landing page.
When you select a template, you’ll be asked to enter a Page Name and choose a URL.
On the next screen, you’ll see the SeedProd page builder. Here you can use the drag and drop builder to add blocks from the menu on your left. You can add a headline, video, image, button, etc.
When you scroll down, there are more blocks under the Advanced section. For example, you can add a countdown timer to create urgency, show social profiles to increase followers, add an option form to collect leads, and more.
Using the drag and drop builder, it’s effortless to change the position of each block on your landing page. You can even change the layout, size, color, and font of the text.
To change the background color of your landing page, simply select any section of the page. You’ll now see options in the menu on your left to edit the background style, color, and add an image.
After you’re done editing your landing page, don’t forget to click the ‘Save’ button at the top.
Next, you can head over to the ‘Connect’ tab and integrate the page with different email marketing services. For example, you can connect to Constant Contact, SendinBlue, and others.
After that, go ahead and click on the ‘Page Settings’ tab.
Here you can change the Page Status from Draft to Publish to take your page live.
Other than that, you can also change the SEO settings of the page, view the analytics, add custom code under Scripts, and enter a custom domain.
Once you’re done, you can exit the SeedProd page builder and visit your custom landing page.
We hope this article helped you learn how to change the background color in WordPress. You may also want to check out our guide on how to choose the best website builder, or our comparison of the best web design software.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
По большей части именно цвет определяет дизайн сайта. И тема Frontier, которая установлена на вашем сайте, позволяет в значительной мере оперировать настройками цвета. И если вам не нравится стандартный синий цвет, вы сейчас его измените.
Перейдите в пункт консоли «Внешний вид» и подпункт «Frontier настройки», откройте вкладку «Цвет». В первую очередь поставьте галочку «Включить собственную настройку цветов».
Затем ниже вы увидите доступные к изменению опции цветов: общий акцентирующий цвет, верхний бар, шапка и прочее. Каждую из этих опций вы можете изменить, нажав на кнопку «Выбрать цвет».
И в открывшемся окошке, оперируя элементами управления, выберите желаемый цвет.
После того, как все цвета будут определены, сохраните изменения, и посмотрите, как это выглядит на сайте.
Изменить можно ещё и фон сайта. Можно сделать на фоне изображение или сплошной цвет.
Для того чтобы получить картинку для фона, есть традиционных три метода:
- Найти изображение в поисковике в поиске по картинкам, по запросу, например, «бесшовная текстура».
- Заказать картинку фрилансеру на бирже Work-zilla.
- Нарисовать её самостоятельно, если есть умения использования необходимых программ.
Выберите удобный метод для получения картинки фона. Чтобы загрузить изображение на фон, нажмите на ссылку «Body Background».
Затем нажмите кнопку «Обзор», выберите изображение на компьютере и нажмите кнопку «Загрузить».
Картинка загрузится, и вы увидите её на предпросмотре сверху.
В блоке «Настройки отображения» вы можете определить позиционирование фона. Здесь всё выясняйте сами методом «научного тыка», так как для каждой картинки могут быть предпочтительны разные настройки.
Итак, сохраните изменения и посмотрите, как фон выглядит на вашем сайте. Если что-то нужно исправить, то снова вернитесь к настройкам и добейтесь нужного результата.
В качестве фона можно также установить и сплошной цвет. Здесь всё намного проще – нужно использовать опцию «Цвет фона».
Задание №5 считается выполненным, если:
- Вы поняли, как изменить цветовую схему сайта.
- Вы поняли, как изменить фон сайта.
Следующая тема — Подключение мониторинга UpTime Robot
Topics
- Enable Custom Backgrounds
- Display Custom Backgrounds
- Another default example
Custom Backgrounds is a theme feature that provides for customization of the background color and image.
Theme developer needs 2 steps to implement it.
- Enable Custom Background – add_theme_support()
- Display Custom Background – wp_head() and body_class()
Use add_theme_support() in the functions.php file to enable custom backgrounds.
add_theme_support( 'custom-background' );You can specify default parameters. In below example using default ‘#0000ff’ background color (blue) with ‘wapuu.jpg’ background image that was stored under the /images folder.
$args = array(
'default-color' => '0000ff',
'default-image' => get_template_directory_uri() . '/images/wapuu.jpg',
);
add_theme_support( 'custom-background', $args );By calling add_theme_support() , Customizer displays ‘Background Image’ menu and ‘Background Color’ section in Colors menu.
In general, invokes wp_head() and body_class() in header.php file to display the custom backgrounds.
<!DOCTYPE html>
<html>
<head>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>wp_head() generates an extra style sheet in-line with the HTML headers, usually right before the end of the document’s HEAD element. The extra style sheet overrides the background values from the theme’s style sheet.
In our example, following code will be generated in the HTML. Notice that body tag includes “custom-background ” class.
<!DOCTYPE html>
<html lang="en-US" class="no-js">
<head>
...
<style type="text/css" id="custom-background-css">
body.custom-background {
background-image: url("http://example.com/wordpress/wp-content/themes/my-first-theme/images/wapuu.jpg");
background-position: left top;
background-size: auto;
background-repeat: repeat;
background-attachment: scroll;
}
</style>
...
</head>
<body class="home page-template-default page page-id-211 logged-in admin-bar no-customize-support custom-background">
...Now you’ll see repeated background images
This is another example of default value set.
$another_args = array(
'default-color' => '0000ff',
'default-image' => get_template_directory_uri() . '/images/wapuu.jpg',
'default-position-x' => 'right',
'default-position-y' => 'top',
'default-repeat' => 'no-repeat',
);
add_theme_support( 'custom-background', $another_args );This will show single image at the top right corner as below.
Note: Even if we specified the ‘default-color’ as ‘#0000ff’ (blue), the background color is not blue. Setting the default-image parameter will instantly cause that value to become the effective Custom Background, whereas setting the default-color has no effect. It is just set as default background color in Color menu of Customizer, and enhanced when Administrator save it.
Произвольный фон — это стандартная возможность WordPress, которая позволяет устанавливать в админке цвет или изображение фона сайта.
С одной стороны может показаться — «Зачем это нужно, если я могу установить фон прямо в CSS? Даже если периодически придется менять фон сайта, мне не трудно каждый раз редактировать таблицу стилей».
Всё как всегда элементарно просто, ответ — если делаете сайт не для себя. Приведу пример. Вы только что сделали отличнейший сайт, единственная вещь, которая не нравится вашему клиенту — это фон, кроме того, он сам не знает чего хочет. Просит попробовать одно, потом другое, потом третье. И после того, когда ваше терпение уже на исходе, вы просто включаете этот функционал в теме, показываете клиенту, как с ним работать и больше не паритесь.
Шаг 1. add_theme_support() — подключаем необходимый интерфейс в админке.
Начиная с версии 3.4 в WordPress используется функция add_theme_support() для подключения произвольных фонов. В более старых версиях (от 3.0 до 3.4) использовалась другая функция, но сейчас она устарела и я её рассматривать не буду.
Вставляем следующий код в functions.php текущей темы:
add_theme_support( 'custom-background' );
Если же вы подключаете этот функционал в плагине, функция должна быть задействована через хук after_setup_theme, пример ниже:
function true_custom_background_support(){ add_theme_support( 'custom-background' ); } add_action('after_setup_theme', 'true_custom_background_support');
Прежде, чем продолжить, посмотрим, что у нас получилось:
Также функция имеет некоторые параметры, которые можно задать в качестве значений по умолчанию (то есть тех значений, которые будут использоваться, если в админке не было ничего настроено):
$defaults = array( 'default-image' => '', // без изображения 'default-repeat' => 'repeat', // повторять 'default-position-x' => 'left', // выровнять по левому краю 'default-attachment' => 'scroll', // фон прокручивается со страницей 'default-color' => '', // без цвета 'wp-head-callback' => '_custom_background_cb', 'admin-head-callback' => '', 'admin-preview-callback' => '', ); add_theme_support( 'custom-background', $defaults );
- default-image
- URL изображения, которое следует установить в качестве изображения фона по умолчанию. Добавляется через CSS-свойство
background-image. - default-repeat
- Нужно ли повторять фон. То есть, если ширина или высота изображения меньше ширины или высоты страницы, то оно будет повторяться. CSS-свойство
background-repeat. Может принимать значения:no-repeat— не повторять,repeat-x— повторять по горизонтали,repeat-y— повторять по вертикали,repeat— повторять во всех направлениях.
- default-position-x
- По какому краю экрана выровнять изображение. CSS-свойство
background-position(по вертикали всегда выравнивается по верхнему краю). Может принимать значения:left— слева,right— справа,center— по центру.
- default-attachment
- Нужно ли зафиксировать фон при прокрутке страницы. CSS-свойство
background-attachment. Принимает значения:scroll— изображение скроллится вместе со страницей,fixed— изображение зафиксировано и не смещается при прокрутке.
- default-color
- Цвет фона по умолчанию, например silver или #c0c0c0. CSS-свойство
background-color.
Хорошо, давайте попробуем, я например сделаю вот так:
$defaults = array( 'default-color' => '#eeeeee', 'default-image' => get_stylesheet_directory_uri() . '/grand_canyon.jpg', 'default-repeat' => 'no-repeat', 'default-position-x' => 'center', 'default-attachment' => 'fixed' ); add_theme_support( 'custom-background', $defaults );
Функция get_stylesheet_directory_uri() в данном примере возвращает абсолютный URL текущей темы.
Ого, в админке появились дополнительные настройки:
Эти настройки также появятся и в первом примере, после того, как вы загрузите изображение для фона. Кстати, если после загрузки изображения, в блоке просмотра оно отображается в уменьшенном варианте, не волнуйтесь, на фон сайта всё равно добавится в полном размере.
Шаг 2. wp_head() и body_class() для добавления фона на страницы сайта.
С админкой вроде разобрались, а что надо сделать в файлах шаблона темы, чтобы фон появился на сайте? Нужны всего две вещи:
- Убедитесь, что ваш
header.phpсодержит функцию wp_head() — именно через эту функцию в тело документа будут вставляться CSS-стили. Например из предыдущего примера набор стилей будет следующий:<style type="text/css" id="custom-background-css"> body.custom-background { background-color: #eeeeee; background-image: url('https://misha.agency/wp-content/themes/truemisha/grand_canyon.jpg'); background-repeat: no-repeat; background-position: top center; background-attachment: fixed; } </style>
- Фон ещё не изменился? Тогда проверьте, добавлена ли к тегу
<body>функция body_class(). Если нет, то добавьте её:<body <?php body_class() ?>>
Кстати говоря, вы можете также поступить и следующим образом:
<body class="custom-background">
Миша
Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.
Пишите, если нужна помощь с сайтом или разработка с нуля.
Приветствуем вас! WordPress пользуется спросом у многих пользователей, как в качестве платформы для ведения блогов, так и для системы управления контентом (CMS). Мы с этим согласны, поскольку эту платформу легко изучить, использовать и настраивать. Сегодня мы хотим вам показать, как изменить цвет фона одной страницы в WordPress. Мы не будем использовать плагины, просто некоторый простой код CSS.
Шаг 1. Поиск идентификатора вашей страницы
Во-первых, вам нужно найти идентификатор страницы WordPress. Перейдите на «Страницы» — «Все страницы» и наведите курсор мыши на ссылку «Изменить» на странице.
Затем в нижней части вашего браузера появится ссылка. Запишите идентификатор из этой ссылки. Идентификатор будет номером после post=. В нашем случае это 3.
Вы будете использовать этот идентификатор для своего класса CSS, который необходим для изменения цвета фона отдельной страницы.
Также можно найти класс CSS этой конкретной страницы:
- Открываем страницу в браузере
- Щелкаем правой кнопкой мыши в любом месте и выбираем «Просмотр кода страницы»
- Нажимаем CTRL-F и выполняем поиск фрагмента «page-id»
- Копируем класс CSS, который обычно находится в теге .page-id-X
Как вы можете видеть, Chrome выделил то, что мы искали. Теперь вам нужно скопировать номер из класса, а не только page-id! В нашем примере, весь класс CSS, что мы будем использовать это page-id-3.
Шаг 2. Добавление кода CSS
Добавьте следующий код CSS в WordPress:
.page-id-3 {background-color: #99E8D0;}
Измените номер 3 с вашим собственным идентификатором страницы. Если вы использовали альтернативный метод, указанный выше, вам просто нужно скопировать класс, который вы найдете в исходном коде, который будет автоматически содержать правильный идентификатор для этой конкретной страницы WordPress.
Если вы получили идентификатор страницы отдельно, используя первый метод, замените его в коде на него.
Например, если идентификатор вашей страницы 479, то код будет выглядеть так:
.page-id-479 {background-color: #99E8D0;}
Вы также можете изменить цвет фона, изменив шестнадцатеричный код цвета, вместо #99E8D0, на свой код.
Вуаля, теперь у вас будет другой цвет фона для отдельной страницы WordPress!
Если цвет фона не меняется
a) Очистите кэш своего сайта и браузера (или используйте окно «Новое окно в режиме инкогнито»), затем проверьте снова.
б) Если это не помогает, добавьте !important в код CSS, например:
.page-id-2 {background-color: #99E8D0 !important;}
Очистите кеш еще раз. Вот что у нас получилось на нашей тестовой теме Twenty Seventeen.
Мы надеемся, что, вы нашли этот урок полезным и вам удалось изменить цвет фона одной страницы в WordPress! А у нас на этом все. Всем пока!
С уважением Вячеслав и Валерия!
Понравился материал? Поделитесь с друзьями!
Интересное на блоге
Фоновые изображения WordPress бывают всех форм. Вы можете загрузить фоновое изображение для всего сайта, разместить его за кнопками или установить сплошной цвет фона для страницы входа. Независимо от того, где вы хотите их разместить, важно понимать основы загрузки изображения, в том числе и фонового.
В этой статье объясняется, что такое фоновое изображение и как его можно отредактировать для достижения лучшего результата.
Что такое фоновое изображение WordPress?
Фоновое изображение WordPress служит полным фоном вашего сайта. Это также называется настраиваемым фоном.
Независимо от того, какой вариант вы выберете, фоновое изображение в теме WordPress обрабатывает файл functions.php. Он также отображается в файле header.php.
Контроль над активацией или отключением функции настраиваемого фона для вашей темы WordPress возложена на разработчиков темы. Вы можете включить функции On или Off, но тема вашего сайта, как правило, диктует параметры по умолчанию.
В WordPress можно реализовать несколько типов фонов. Вы можете выбрать стандартный фон всего веб-сайта или тот, который скрывается за определенными элементами, такими как боковые панели и статьи.
Пользовательские фоны также возможны для более конкретных мест на сайте WordPress:
- За страницей или публикацией WordPress.
- На странице категории WordPress.
- Внутри блока содержимого для страницы или записи.
- На странице входа.
- За меню навигации.
- На страницах технического обслуживания.
Если в теме включена поддержка настраиваемого фона, то у пользователя есть возможность загрузить изображение или выбрать цвет, чтобы заполнить весь фон сайта.
Настройки находятся на панели инструментов WordPress в разделе Внешний вид > Настройка > Фоновое изображение. Однако другие типы фона установить на сайт можно лишь с помощью конструкторов страниц с перетаскиванием, плагинов и различных опций.
Загрузка фонового изображения на панель инструментов – это только часть процесса. После этого нужно настроить параметры фонового изображения. Иногда можно оставить настройки как есть, а в других случаях важно изменить настройки, чтобы изображение выглядело идеально.
Настройки фонового изображения WordPress включают:
- Цвет фона.
- Размеры.
- Положение изображения.
- Должно ли изображение повторяться.
- Варианты заполнения экрана или растяжения изображения.
Сначала рассмотрим лучшие практики использования фоновых изображений WordPress. Затем, как установить фоновое изображение WordPress в различных ситуациях.
Множество стилей фонов>
Реальным преимуществом фона WordPress является то, что они не все статические изображения. Вы можете встретить различные типы фонов, от видео до шаблонов фотографий и слайд-шоу.
Вот несколько стилей фона, которые следует учитывать:
- Стандартные фоновые изображения: это статические изображения (PNG, JPG и другие форматы изображений), которые растягиваются на большую часть пространства веб-сайта и располагаются за основным контентом. Их преимущества включают простоту, возможности для фотографий с высоким разрешением и поддержку ядром WordPress по умолчанию. Недостатки варьируются от их тенденции мешать видимости элементов переднего плана до большого изображения с высоким разрешением, замедляющего работу вашего сайта.
- Сплошной цвет фона: сплошной цвет фона изображения удобно использовать, когда хочется добавить сочность сайту, но он не соответствует вашему бренду или тот, который хорошо выглядит в качестве фона. Цветной фон представляет более четкое и профессиональное изображение, реализация не займет много времени.
- Градиентный фон: градиентный фон переходит от одного цвета к другому. Он визуально более привлекателен, чем сплошной цвет, не требует много времени для добавления, так как реализуется во многих плагинах. Основным недостатком является то, что передний план может хорошо отображаться на одном конце градиента, и плохо на другом.
- Узор или текстурный фон: все узоры и текстурные фоны являются фотографиями, но они сосредоточены на повторяющихся элементах изображения или на текстуре крупного плана, например, на деревянной панели или клочке травы. Хорошая сторона подобного узора или текстуры заключается в том, что они творят чудеса в качестве фона. Их можно растянуть, и большинство людей не заметят, если в узоре есть разрыв.
- Фоны для слайд-шоу изображений: Фон слайд-шоу изображений позволяет владельцам сайтов делиться несколькими типами дизайнов или фотографий в фоновом режиме. Это повышает настроение, когда клиент просматривает ваш сайт. Однако слайд-шоу могут отвлекать или замедлять работу вашего сайта.
- Видео-фоны: видео-фоны интересны, интересны для просмотра и легко отражают характер вашего бренда. Однако они также приводят к проблемам с производительностью, если они не выполняются правильно, и могут отвлекать внимание вашей воронки продаж. Кроме того, фоновые видео должны быть идеального размера и воспроизводиться в нужное время. Их производство также может быть дорогостоящим, если вы не выберете бесплатные стоковые видеоролики.
Лучшие практики использования фоновых изображений WordPress
Настройка собственного фонового изображения кажется простой задачей. Просто загрузите изображение в нужное место и смотрите, как оно появляется на веб-интерфейсе.
В большинстве случаев это так, но бывают исключения. Вот почему рекомендуем следовать этим советам.
Используйте высококачественные изображения
Разрешение фонового изображения часто влияет на его представление. Вы можете подумать, что изображение, снятое на ваш смартфон, идеально подходит для фонового изображения. Но скорее всего оно должно быть более высокого качества.
На сайтах подобных Shutterstock обычно есть изображения профессионального уровня, которые подготовлены к загрузке в качестве большого фонового изображения. Вы также можете найти их на сайтах стоковых бесплатных изображений.
Фоновое изображение может не отображаться на вашем веб-сайте полностью, так как большая его часть покрыта контентом. Тем не менее, реальное изображение отображается на весь экран.
Если вы не используете качественное изображение, вы рискуете увидеть растянутый фон.
Убедитесь, что размер фоновых изображений правильный
Наряду с разрешением изображения имеет значение физический размер изображения.
Все экраны имеют разное соотношение сторон. А мобильные устройства еще больше это усложняют. Но цель состоит в том, чтобы использовать изображение, которое отлично смотрится на самых больших экранах. В противном случае вы рискуете снова растянуть изображение или не отобразить его должным образом.
Хорошее правило – придерживайтесь минимального размера фонового изображения WordPress 1024 x 768 пикселей. Однако другие эксперты рекомендуют больший размер, например, 1920 x 1080 пикселей. В целом, ваш лучший способ действий – оставаться где-то между 1000 и 3000 пикселей по ширине, в зависимости от того, где он отображается.
Следующий фактор, который вам нужно учитывать, — это соотношение сторон. Покрывает ли фоновое изображение весь веб-сайт или только верхнюю четверть?
Технически веб-сайт имеет портретное соотношение сторон (больше высота, чем ширина). Так что вы можете изучить эти типы картинок. Однако фоновые изображения разделов – например, фоны для заголовков или баннеров – должны оставаться в горизонтальном форматировании (больше по ширине, чем по высоте).
Кроме того, наиболее распространенное соотношение сторон для настольных компьютеров сегодня – 16: 9 – помогает оставаться около этой цели. Адаптивная тема или плагин может автоматически настраивать фоновое изображение для просмотра на мобильных устройствах.
Тестирование фоновых изображений на реальном сайте и на нескольких типах устройств должно значительно упростить окончательное решение.
Перед созданием фонового изображения WordPress оптимизируйте его
Как и все изображения, загруженные в WordPress, вы оказываете себе медвежью услугу, если не оптимизируете их перед публикацией в Интернете. Это особенно важно для фоновых изображений, поскольку они часто отображаются на нескольких страницах вашего веб-сайта. К тому же это большие фотографии, занимающие значительную часть места на экране.
Изображения большего размера создают значительную нагрузку на ваш сервер. Сохраняйте разрешение изображения, но оптимизируйте его размер, чтобы ваш сайт загружался быстро.
У вас есть два варианта оптимизации фотографий:
- Оптимизируйте фоновые изображения (и все изображения веб-сайтов) перед их загрузкой в WordPress. Осуществите этот ручной процесс с помощью таких инструментов, как Photoshop Express, GIMP и Pixlr.
- Автоматизируйте процесс оптимизации, установив плагин WordPress, который изменяет размер и сжимает фотографии при загрузке.
Перед установкой темы проверьте наличие поддержки фона
К сожалению, не все темы поддерживают пользовательские фоновые изображения. Часто это происходит из-за того, что фон не вписывается в общий дизайн темы, поэтому разработчик отключает его.
Тем не менее, если вам действительно нужен фон на своем веб-сайте, разумно проверить список функций при загрузке новой темы, особенно если вы планируете платить за премиальную тему.
Например, темы, перечисленные в библиотеке тем WordPress, указывают на поддержку настраиваемого фона в виде тегов. Вы также можете найти ссылку на настраиваемый фон в описании темы.
Другие тематические сайты обычно включают аналогичную информацию о пользовательских фоновых изображениях.
Рассмотрите возможность использования визуального конструктора страниц, который упростит установку фоновых изображений
Конструкторы страниц, такие как Gutenberg, WPBakery, Divi и Elementor, предлагают списки блоков и модулей для вставки таких элементов, как изображения и текстовые поля, в любом месте веб-страницы.
Без построителя перетаскивания становится немного сложнее настроить фоновое изображение.
Создатели страниц склонны заменять функции фонового изображения по умолчанию, предоставляемые через WordPress. Вы можете переопределить в коде ограничения темы или любые отсутствующие элементы, которые помогают отображать фоновое изображение.
Как установить фоновое изображение в WordPress?
Есть несколько способов установить фоновое изображение в WordPress. Эти методы обычно меняются в зависимости от того, куда вы хотите поместить изображение.
Например, вы хотите, чтобы фоновое изображение оставалось неизменным на всем вашем веб-сайте. С другой стороны, возможно, вы предпочтете найти способ отображать уникальные фоновые изображения для всех своих страниц.
Поскольку существует так много возможностей, рассмотрим, как добавить фоновое изображение или цвет в следующие разделы:
- Весь сайт.
- Страница WordPress.
- Запись WordPress.
- Индивидуальный блок контента.
- Заголовок WordPress.
- Страница архива категории.
- Страница входа в WordPress.
- Меню навигации.
- Страница обслуживания.
Перед тем, как начать: активируйте поддержку пользовательского фона в WordPress (при необходимости)
Разработчики тем решают судьбу фоновых возможностей сайта. WordPress имеет функциональность, встроенную в ядро, но разработчик темы может отключить ее, оставив настройку панели инструментов, где ее можно включить.
Если вы обнаружите, что вашей теме не хватает параметра «Пользовательский фон», рассмотрите следующие шаги для исправления этой ситуации.
Основная поддержка пользовательского фона для WordPress осуществляется файлом functions.php. Откройте этот файл и вставьте следующий код, если он отсутствует:
$defaults = array(
'default-color' =&amp;amp;amp;gt; '',
'default-image' =&amp;amp;amp;gt; '',
'default-repeat' =&amp;amp;amp;gt; '',
'default-position-x' =&amp;amp;amp;gt; '',
'default-attachment' =&amp;amp;amp;gt; '',
'wp-head-callback' =&amp;amp;amp;gt; '_custom_background_cb',
'admin-head-callback' =&amp;amp;amp;gt; '',
'admin-preview-callback' =&amp;amp;amp;gt; ''
);
add_theme_support( 'custom-background', $defaults );
Имейте в виду, что элемент, фактически активирующий фоновую поддержку, – это функция add_theme_support(), в которой есть все. Этот код включает фоновую функцию на панели инструментов WordPress, которую можно использовать в следующих пунктах этого руководства.
Также можно добавить фоновое изображение по умолчанию для всей темы через файл functions.php. Перейдите в область со значением default-imageиз предыдущего кода и добавьте URL-адрес изображения в пустое пространство между символами ' 'после =>.
Это быстрый и простой способ включить пользовательский фон на панели инструментов WordPress.
При этом рекомендуем изменить тему, если она вообще не имеет фоновой поддержки. Удаление настраиваемой функции фона могло иметь собственное назначение, или, возможно, разработчик темы обнаружил, что это вызывает слишком много проблем с дизайном.
Как добавить фоновое изображение на весь ваш сайт WordPress
Если ваша тема предлагает возможность добавления пользовательского фонового изображения, это значительно упростит вам задачу.
Для начала перейдите в панель управления WordPress и нажмите Внешний вид > Настроить.
Щелкните ссылку «Настроить» в меню «Внешний вид».
Это приведет вас к настройщику тем WordPress с настройками слева и предварительным просмотром веб-сайта справа.
Здесь найдите и щелкните вкладку Фон.
В качестве альтернативы, если вы можете выбрать Внешний вид > Фон, то используйте его для более быстрого перехода к этой настройке.
Щелкните ссылку «Фон» в меню «Внешний вид».
Область настройки фона управляет элементами фона для всего вашего веб-сайта.
Нажмите кнопку «Выбрать изображение» для продолжения настройки.
Нажмите кнопку «Выбрать изображение».
В окне «Выбрать изображение» выберите изображение, которое хорошо подойдет в качестве фона для вашего бренда и стиля веб-сайта. Как правило, нейтральный цветной узор с черным, белым или серым оттенком гарантирует, что большая часть вашего текста и контента будет хорошо выглядеть с таким фоном за ним.
Нажмите кнопку «Выбрать изображение».
Созданный вами фон отобразится в окне предварительного просмотра веб-сайта.
Посмотрите, по-прежнему ли ваш контент выделяется и выглядит презентабельно с выбранным изображением. Иногда вы можете обнаружить, что вам нужно либо полностью поменять фон, либо изменить цвет текста и ссылок.
Небольшой эскиз фона также отображается на панели настроек, показывая вам, что изображение было использовано.
Для фонов WordPress доступны несколько дополнительных настроек, в том числе поле Preset.
Щелкните поле «Предустановка», чтобы изменить форматирование изображения с помощью предустановленных дизайнов и выравнивания.
Вы можете выбрать одну из следующих предустановок:
- По умолчанию: обычно то же самое, что и «Повтор», но это зависит от вашей темы. Параметр по умолчанию обычно работает лучше всего, но он зависит от используемого изображения.
- Заполнить экран: этот параметр растягивает изображение, чтобы обеспечить покрытие всех частей экрана, даже если это означает обрезку изображения, так что оно выходит за пределы экрана. Он хорошо работает для изображений с высоким разрешением, но может вызвать размытие изображений с низким разрешением.
- По размеру экрана: сохраняет исходное соотношение сторон фотографии и пытается использовать это соотношение для соответствия текущему экранному изображению. Он хорошо сохраняет изображение, близкое к исходному, но может не покрывать всю область фона.
- Repeat: здесь используются части функции Fill Screen, расширяя и растягивая изображение, но повторяет изображение, когда оно не может успешно покрыть весь экран. Для рапортов это отлично смотрится. Но для некоторых изображений может привести к резкой грани между повторяющимися изображениями.
- Пользовательский: этот параметр дает вам максимальный контроль над фоном, предлагая несколько вариантов настройки размера фонового изображения WordPress. Например, как оно повторяется на странице, растягивается или перемещается при прокрутке пользователем.
Нет правила относительно того, какая из предустановок работает лучше всего, потому что изображения бывают разных размеров, разрешений и детализации. Поэтому вам лучше начать с предустановки по умолчанию, а затем протестировать каждую из предустановок, чтобы ту, что лучше всего подходит для вашего фонового изображения.
Если ничего не помогает, перейдите к настройке Custom.
Смотрите также:
Страницы и записи WordPress: ключевые различия и когда использовать
Предустановка «По размеру экрана» не подходит для этого изображения, главным образом потому, что исходное изображение короче, чем ширина, оставляет значительное пространство справа. Можно изменить положение изображения на «Центр», но это, скорее всего, оставит пустое пространство по бокам.
Следующая настройка, которую следует учитывать, – это инструмент «Положение изображения». Щелкайте стрелки, чтобы переместить фоновое изображение, регулируя ориентацию, чтобы поместить фокус изображения в центр или заполнить экран.
Этот инструмент требует угадывания и проверки вашей работы, так как исходное изображение и его содержание определяют, как оно выглядит на сайте.
Далее, есть поле флажка, чтобы фоновое изображение прокручивалось со страницей.
Если этот флажок установлен, фоновое изображение прикрепляется к содержимому переднего плана и прокручивается вместе с пользователем, когда он перемещается вверх или вниз по странице.
Снятие этого флажка приводит к изменению общей ориентации фонового изображения. Его основная функция – указывать фону оставаться статичным, пока пользователь прокручивает страницу вниз.
Элементы содержимого переднего плана (товары в данном примере) скользят по фоновому изображению, создавая привлекательный эффект.
Работа с пользовательским набором настроек
Выбирая что-то помимо предустановки Custom, у вас не так много дополнительных настроек для настройки. Однако при выборе предустановки Custom открывается несколько других полей, которые следует учитывать.
Например, вы можете выбрать «Заполнить экран» или «По размеру экрана», а затем объединить это с повторяющимся или неповторяющимся фоновым изображением, комбинируя элементы предустановок из предыдущих. И вы по-прежнему есть опция скроллинга страниц.
Посмотрите, возможно ли использование исходного изображения без каких-либо изменений или настроек. Иногда исходное фото подходит для использования в качестве фона, так зачем же связываться с дополнительными настройками?
Однако размер изображения может быть слишком большим для вашего веб-сайта, или соотношение сторон не подходящее. Предлагаем поэкспериментировать с этой настройкой, чтобы понять, подходит ли она вам.
После того, как вы определитесь с идеальными настройками фона (для этого урока вариант «По умолчанию» выглядит красиво), нажмите кнопку «Опубликовать», чтобы отобразить изменения на вашем веб-сайте.
Перейдите в интерфейс вашего веб-сайта, чтобы увидеть фон в действии.
Перейдя на домашнюю страницу, вы заметите, что область заголовка и приветственное изображение не имеют фона. Это потому, что приветственное изображение в верхней части сайта уже покрывает всю горизонтальную часть экрана как полноэкранное изображение
Что касается заголовка и меню, вы узнаете как их настроить чуть позже.
Имейте в виду, что общий настраиваемый фон WordPress активируется на каждой странице и каждой публикации вашего веб-сайта. Это глобальная функция для тех, кто хочет быстро брендировать свой сайт и добавить немного яркости.
Как установить цвет фона вместо изображения для всего сайта<
Процесс активации цвета фона на всем вашем веб-сайте не сильно отличается от установки фонового изображения. Для начала выберите Внешний вид > Фон на панели инструментов, затем найдите поле «Цвет фона».
Нажмите кнопку «Выбрать цвет», чтобы открыть дополнительные настройки. Здесь можно выбрать и отключить разные цвета для фона.
Панель цвета предоставляет несколько вариантов выбора цвета. Первый – это ввод или вставка цветового кода. Все цвета имеют уникальные цветовые коды, и вы можете найти эти цвета и связанные с ними коды с помощью быстрого поиска в Интернете.
Другой вариант – щелкнуть по цветовой панели. Внизу панели есть общие образцы цвета, если вы предпочитаете один из более простых цветов.
Чтобы активировать цвет фона, убедитесь, что цвет выбран и отображается в окне предварительного просмотра «Выбрать цвет».
Вы должны увидеть цветной фон в предварительном просмотре настройщика WordPress. Если нет, скорее всего, у вас установлен фон изображения, заменяющий цветной фон.
Тогда нужно нажать кнопку «Удалить» под предварительным просмотром фонового изображения.
Теперь цвет появится по всему сайту, за содержимым. Как и в случае с фоном изображения, разумно просмотреть свой веб-сайт и убедиться, что при новом фоне весь текст, изображения и ссылки по-прежнему видны.
Как добавить фоновое изображение на страницу WordPress
Многим людям нравится добавлять фон на свои страницы, потому что так можно задать настроение на страницу. Например, на странице «О нас» может быть история конкретного города, если компания находится в этом городе и позиционирует себя с этим городом. Или введение в книгу автора может включать фон, соответствующий теме рассказа.
В этом разделе рассмотрим, как добавить фоновое изображение WordPress на страницу, используя один основной метод и несколько альтернатив, если вы не против потратить деньги на плагин или выбрать конструктор страниц.
Примечание. Неважно, используете ли вы редактор Gutenberg или классический редактор WordPress.
Для фонов конкретных страниц эти методы работают лучше всего:
-
- Добавление уникального фона страницы с помощью настраиваемого CSS.
- Использование плагина, который позволяет создавать отдельные фоны страниц.
- Включение индивидуального фона на каждую страницу с помощью конструктора страниц.
Добавление собственного настраиваемого CSS на страницу включает поиск идентификатора класса для этой страницы и вызов фонового URL-адреса в модуле Custom CSS в настройках страницы WordPress. К счастью, не так сложно определить идентификатор класса страницы.
Перейдите на страницу вашего сайта, где вы планируете использовать уникальный фон только для этой страницы.
Щелкните правой кнопкой мыши в любом месте страницы, чтобы открыть раскрывающееся меню на экране. Выберите инструмент Просмотреть код в нижней части раскрывающегося меню.
Модуль отображает кодировку самой страницы вместе с настраиваемым CSS, используемым глобально для вашего веб-сайта. Это полезная область для поиска информации о странице или публикации на вашем сайте.
Смотрите также:
Три метода как изменить домашнюю страницу WordPress.
Здесь есть строки кода со страницы, но нас интересует только тег класса, назначенный этой странице. Уточнение: каждая страница WordPress имеет тег класса в качестве идентификационного кода.
Воспользуйтесь функцией поиска и введитеbodyилиclassнайдите строку кода сpage-idтегом.
В примере ID page-id-352, но ваш будет другим.
Скопируйте всю часть кодаpage-id-#, включая ключевое слово и тире.
Идентификатор страницы сохраните где-то для использования в течение следующих нескольких шагов. Теперь вернитесь к панели инструментов WordPress и нажмите Внешний вид > Настроить.
Зайдите в настройщик темы и выберите вкладку Additional CSS (Дополнительный CSS) в настройщике WordPress.
В этом разделе можно вводить или вставлять любой настраиваемый CSS-код. В этом случае он пригодится для переопределения фонового изображения по умолчанию и включения фонового изображения для одной конкретной страницы, а не для всех.
Вставьте следующий код в поле «Дополнительный CSS», но не забудьте заменить «#» фактическим числом, которое вы нашли в качестве идентификатора страницы из предыдущих шагов. Кроме того, вы должны поместить реальный URL-адрес изображения вместо текста-заполнителя, который у нас есть ().
body.page-id-# {
background-image: url("http://YOURIMAGEURL.jpeg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
В этом примере идентификатор страницы заполнен как 352, и URL-адрес фонового изображения, вставленный из медиа-библиотеки.
При необходимости измените пользовательские настройки фона, если у вас возникли проблемы с настройкой фонового изображения экрана. Например, вы можете изменить такие элементы, как размер фонового изображения WordPress, вложение или положение. Если нет, оставьте все как в примере кода.
Нажмите кнопку «Опубликовать» после установки настраиваемого CSS.
С помощью этого настраиваемого CSS указанная страница включает фоновое изображение с использованием настроек размера и положения кода. Ни на одной другой странице вашего сайта не будет такого же фона, если вы не повторите CSS для разных идентификаторов страниц.
Как упоминалось ранее, другие варианты добавления уникального фона на страницу WordPress включают использование конструктора страниц или плагина, который позволяет использовать фоновые изображения на отдельных страницах.
Однако самый дешевый и быстрый способ разместить фоновое изображение на отдельной странице – использовать метод кода CSS, показанный выше.
Как добавить фоновое изображение в запись WordPress
Большинство фоновых изображений вставляются на страницы WordPress.
Функция настраиваемого фона по умолчанию в WordPress не имеет ничего общего с отдельными записями, кроме того факта, что этот фон будет отображаться и для записей в блоге. Это не идеальное решение, потому что разные записи в блоге могут иметь совершенно разные темы.
Блоги могли бы извлечь выгоду, используя собственные уникальные фоновые изображения. Однако в записях WordPress нет собственных настроек фонового изображения, что усложняет задачу.
Но есть несколько вариантов, которые следует учитывать при добавлении фонового изображения в записи (вы заметите, что они такие же, как и при работе с фоновыми изображениями для конкретной страницы):
- Вставьте фоновое изображение, используя собственный CSS.
- Используйте плагин для добавления фона к отдельным записям.
- Установите визуальный конструктор страниц для фонов записей.
Поскольку создание фона для конкретного поста не сильно отличается от фона для конкретной страницы, кратко коснемся этого процесса для отдельного поста.
При использовании настраиваемого CSS для установления фона, специфичного для публикации, вы используете тот же код, что и для фона страницы, с одним отличием: вы должны найти идентификатор публикации, а не идентификатор страницы.
Поэтому откройте интерфейс записи WordPress, куда вы хотите вставить фон.
Щелкните запись правой кнопкой мыши и выберите параметр «Проверить». Выполните поиск в коде, чтобы найти в коде раздел класса body. Ищите postid-# – это идентификатор pfgbcb, который нужно вставить в настраиваемый CSS.
Вы заметите, что формат идентификатора записи в этом примере немного отличается по сравнению с идентификатором страницы, где в теге postid-# нет дефиса между «публикацией» и «идентификатором», как в случае с page-id-#. Кроме того, это не жесткие правила. Вы можете найти различные форматы тегов.
Теперь перейдите в панель управления WordPress и нажмите Внешний вид > Настроить. Перейдите на вкладку Дополнительные CSS.
Вставьте следующий код в это настраиваемое поле CSS:
body.postid-# {
background-image: url("http://YOURIMAGEURL.jpeg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
После этого возьмите идентификатор записи, который вы нашли ранее для требуемой записи. Замените «#» в коде CSS на число. Кроме того, замените текст на реальный URL-адрес фонового изображения, которое вы хотите показать, сохраняя кавычки вокруг него.
Убедитесь, что вы нажали кнопку Опубликовать, прежде чем покинуть вкладку «Дополнительные CSS».
После внесения этих изменений CSS вы можете вернуться к интерфейсу этой записи в блоге WordPress и посмотреть на новый фон. Протестируйте другие записи блога и страницы на своем сайте, чтобы убедиться, что у других нет именно этого фона.
Источник: kinsta.com
Смотрите также:
Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/
Часто у владельцев сайтов возникает необходимость задать разный фон для разных страниц или разделов сайта. Обычно такая задача стоит, если необходимо на сайте выделить какое-либо его части или отдельные страницы.
Установка фона для всех страниц
Стандартные инструменты WordPress позволяют задавать фон исключительно для всех страниц, не предоставляя какие-либо альтернативные варианты. Для этого в админ-разделе необходимо перейти Внешний вид -> Настроить, где выбрать Фоновое изображение.
Все WordPress-темы имеют в настройках наличие задания фона сайта. В одних в качестве фона можно использовать исключительно загруженное изображение, а другие позволяют задать конкретный цвет или градиент. Но в обоих случаях фон задается для всего сайта.
Установка альтернативного фона страниц и записей
Для решения поставленной задачи будем использовать стороннюю разработку – плагин Full Background Manager. Заметим, что плагин давно не обновлялся, но все также хорошо выполняет свою работу на самых свежих версиях WordPress.
Плагин Full Background Manager
Во-первых, его необходимо установить и активировать. Основной особенностью дополнения является отсутствие каких-либо настроек. Он работает “из коробки”. Плагин позволит Вам задать фон для каждой страницы или записи на сайте WordPress. Для этого следует открыть на редактирование запись или страницу, фон которой нужно задать. В итоге в правой ее части можно заметить добавленный плагином блок Fully Background.
Видно, что по умолчанию, какой-либо цвет или изображение фона не заданы. Если необходимо в качестве фона выбрать сплошной цвет, то в опции Выбрать цвет следует указать на желаемый цвет и нажать кнопку Обновить.
В итоге измененная Вами страница или запись примет вид:
Также плагин позволяет в качестве фона задать одну из предлагаемых цветовых схем. Для этого, во-первых, нужно передвинуть ползунок в положение Yes и выбрать одну из схем. Для применения изменений следует нажать кнопку Обновить.
В итоге фон на странице будет выглядеть так:
Еще одна возможность плагина – выбрать в качестве фона изображение. Для этого необходимо передвинуть ползунок в положение No, после чего нажать на появившеюся ссылку Set background image.
Дальше, используя стандартные инструменты Медиабиблиотеки WordPress, нужно выбрать из уже присутствующих на сайте или загрузить новое изображение. В итоге панель примет вид:
Следует отметить, что Вы можете задать правила повторения фона на странице. Доступны варианты горизонтального и вертикального повтора (опция Repeat). После нажатия кнопки Обновить Ваша страница будет выглядеть теперь так:
Нажмите, пожалуйста, на одну из кнопок, чтобы узнать понравилась статья или нет.