WordPress是非常流行的博客平台和内容管理系统(CMS)。因为该平台易于学习,使用和定制。你甚至可以在WordPress帖子和页面中添加不同的背景,而这正是本指南的主题。如果你要为WordPress帖子和页面添加一些颜色和样式,则本指南使用两方面的方法来深入探讨该主题。

首先,我们将使用CSS和简单的PHP函数为WordPress帖子或页面添加不同的背景,但是,如果这不是你的理想选择(假设你是完美的初学者,并且代码使你望而却步),提供了两个WordPress后台插件来帮助完成该过程。

如何使用代码向WordPress添加背景

如果你了解有关PHP,HTML和CSS的方法,那么本节将非常有用。不过,请放心,你可以随时复制并粘贴此处提供的代码段。你只需要知道WordPress安装中不同文件的位置即可。

使用CSS将不同背景添加到WordPress帖子和页面

WordPress帖子和页面(以及整个网站)中的大部分样式都由称为样式表的文件控制。WordPress中的样式表文件通常标记为style.css。你可以通过导航到WordPress管理员中的外观>主题编辑器(新版本已移除)来访问style.css:

我们正在style.css中为你的WordPress帖子/页面添加背景(和其他样式),因此将其加载到单独的选项卡中非常重要。当导航到外观->编辑器时,你还将在屏幕右侧看到所有主题模板的列表。你需要关注header.php文件。为什么选择header.php?因为当WordPress将组成你网站的文件放在一起时,此文件已添加到其他所有模板(即页面和帖子)中。换句话说,header.php中的代码会显示在你创建的每个页面或帖子中。

查找以下代码片段:

<body <?php body_class(); ?>>

此功能有一个目的。它拆分了CSS类,可用于更改帖子和页面的样式。你要做的只是针对特定于该页面或你想要自定义的帖子的CSS类,添加背景和样式,保存并更改。

例如,如果你查看了主页的源代码,则上面的函数将输出如下内容:

<body class="home blog logged-in admin-bar no-customize-support hfeed">

那是因为<?php body_class(); 代码段的?>部分提供了所有类,例如.home,.blog,.logged-in等,你可以在CSS中使用它们来设置主页的各种元素的样式。

另外: 查看任何文章或页面的源代码都很简单。如果你使用的是Chrome,只需右键单击页面/帖子,然后选择“查看页面源代码”。在Mozilla中,右键单击该帖子/页面,然后选择“查看页面源代码”。如果你使用的是Microsoft Edge(Internet Explorer),请在页面/帖子上单击鼠标右键,然后选择“查看源代码”。

如果你查看WordPress页面的源代码,则将输出以下代码:

<body class="page page-id-2 page-template-default logged-in admin-bar no-customize-support">

如果你查看了一篇文章的源代码,我们的body_class函数将输出接近以下内容:

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-customize-support">

如你所见,你将获得几个可以轻松定位的CSS类:

  • .page所有页面
  • .page-id-2,可让你定位到特定页面,即ID为2的页面
  • .single用于所有单个帖子,这意味着你应用于此类的所有CSS样式都将应用于所有帖子
  • .postid-1用于id = 1的帖子,这意味着你应用的所有CSS样式只会影响该帖子
  • .single-format-standard –这允许你将CSS样式应用于具有标准帖子格式的所有帖子
  • .logged-in –使用此CSS类应用的样式仅适用于登录用户

例如,要将黑色背景应用于所有帖子,请将以下代码段添加到style.css中:

.single { background-color: #000; }

使用PHP(通过自定义字段)将背景添加到WordPress帖子和页面

如果要添加内置的手动方法来通过自定义字段更改网站背景,这也非常容易做到。只需将以下代码粘贴到你的主题的functions.php文件中(如果你使用的是3rd party主题,最好通过子主题来完成)。确保更改对唯一标识符说“ myprefix”的位置(这是为了防止与主题和插件冲突),一旦准备就绪,你现在可以使用自定义字段“ myprefix_background_image”输入图像的URL你要在其中更改背景的任何页面或帖子。

<?php
// Add inline style to set body background via "myprefix_background_image" custom field
function myprefix_custom_field_background() {
	if ( $background = get_post_meta( get_the_ID(), 'myprefix_background_image', true ) ) { ?>
		<style type="text/css">
			body { background-image: url( "<?php echo esc_url( $background ); ?>" ); }
		</style>
	<?php }
add_action( 'wp_head', 'myprefix_custom_field_background' );

请注意,该函数如何与“ wp_head”动作挂钩?这意味着每当你使用自定义字段时,内联CSS就会随代码一起添加到你网站的标头标记中,以根据你的自定义字段值更改背景。

使用插件将背景添加到WordPress

你可以将WordPress帖子和页面作为目标,并使用PHP和CSS将每个帖子和页面的样式设置为你内心的内容。但是,如果你没有时间编写代码,或者以上说明由于某种原因而无法使用,则可以启动几个WordPress后台插件。

WP-Backgrounds Lite免费WordPress插件

WP-Backgrounds Lite是可帮助你永久拥有WordPress背景的插件。你甚至可以使WordPress帖子和页面的背景可点击!除非你愿意,否则它不会运行所有页面,而且它在所有主流浏览器中都能很好地运行。

Custom Backgrounds Premium WordPress插件

自定义背景插件由CodeCanyon的杰出作者RightHere开发,自定义背景插件可让你完全控制WordPress背景。在几分钟之内,你就可以为WordPress帖子,页面,自定义帖子类型,分类法和存档等模板创建出色的背景,并通过视差效果,计时器等等。

你甚至可以为WordPress帖子和页面设置可点击的背景和多个背景,而不会费力。作者可以让你在购买前使用该插件。

WPBakery页面构建器的视频和视差背景

如今,视差滚动似乎无处不在,这有充分的理由:这是周围最酷的视觉效果之一,如果执行得当,它的视觉效果令人惊叹。这已经看到大量的视差WordPress主题投放市场-对于那些不熟悉术语视差的人来说,背景图像以与前景不同的速度滚动,从而产生了迷人的视觉效果。

一般来说,大多数WordPress用户都依赖其主题进行视差滚动。但是,如果要向非视差主题添加视差效果,则应查看WPBakery的视频和视差背景。该插件支持全角和常规宽度背景,视差效果可在所有四个方向上起作用。你可以上传自己的图像以用作固定图像背景,也可以仅使用纯色块背景。你可以选择激活平滑滚动以确保最佳性能,也可以禁用移动设备的视差。直观的界面可轻松设置所有内容,你只需单击一个按钮即可指定视差滚动效果的方向和速度。

除了视差效果外,该插件还可用于添加视频背景,YouTube或Vimeo的视频可轻松嵌入-只需添加URL即可嵌入。这是创建访问者令人难忘的引人注目的网站的另一种好方法。