17713433920 info@mac163.com

WordPress是博客平台和内容管理系统(CMS)的众多宠儿。这很麻烦,因为该平台易于学习,使用和定制。我的意思是,您可以随心所欲地打开自己的网站,而无需付出太大努力。您甚至可以在WordPress帖子和页面中添加不同的背景,而这正是本指南的主题。

如果您要为WordPress帖子和页面添加一些颜色和样式,则本指南使用两方面的方法来深入探讨该主题。首先,我们将使用CSS和简单的PHP函数为WordPress帖子或页面添加不同的背景,但是,如果这不是您的理想选择(假设您是完美的初学者,并且代码使您望而却步),提供了两个WordPress后台插件来帮助完成该过程。

无论哪种方式,您都应该度过愉快的时光,因为这是一个相对容易的项目。另外,学习新东西总是很有趣。尽情享受,并在评论区域中分享您的建议,评论或问题。准备?让我们跳入3、2、1…

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

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

如何为wordpress帖子和页面添加不同的背景
如何为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为no的页面。2
  • .single用于所有单个帖子,这意味着您应用于此类的所有CSS样式都将应用于所有帖子
  • .postid-1用于id = 1的帖子,这意味着您应用的所有CSS样式只会影响该帖子
  • .single-format-standard –这允许您将CSS样式应用于具有标准帖子格式的所有帖子
  • .logged-in –使用此CSS类应用的样式仅适用于登录用户

class =“”中包含的所有项目为您提供CSS钩子,可用于定位任何帖子或页面。但是为什么我们要在每个班级之前添加句点(。)?它是常规的CSS语法,它指示您必须使用句点(。)调用所有类,并使用哈希(#)调用所有div。故事又改天了。

例如,要将黑色背景应用于所有帖子,请将以下代码段添加到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插件

我能说什么 这是满足需要的那些WordPress插件之一。您喜欢WordPress帖子和页面的一些充满活力的背景吗?当然可以,为什么不呢。这个插件易于安装和使用吗?我很想听听您的意见。

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

自定义背景高级WordPress插件

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

您甚至可以为WordPress帖子和页面设置可点击的背景和多个背景,而不会费力。作者可以让您在购买前试驾该插件,以便您确切地知道会发生什么。

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

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

一般来说,大多数WordPress主题用户都依赖其主题进行视差滚动。但是,如果要向非视差主题添加视差效果,则应查看WPBakery的视频和视差背景。

该插件支持全角和常规宽度背景,视差效果可在所有四个方向上起作用。您可以上传自己的图像以用作固定图像背景,也可以仅使用纯色块背景。您可以选择激活平滑滚动以确保最佳性能,也可以禁用移动设备的视差。直观的界面可轻松设置所有内容,您只需单击一个按钮即可指定视差滚动效果的方向和速度。

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


微信二维码

扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答:WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建


需要提供WordPress主题/插件的汉化服务可以随时联系我们!另外成品WordPress网站以及半成品WordPress网站建设,海外Google SEO优化托管服务,百度SEO优化托管服务,Centos/Debian服务器WP专用环境搭建,WP缓存服务器搭建,我们都是你的首选,拥有多年WP开源程序服务经验,我们一直在坚持客户体验,没有最好,只有更好!
Mac163网站建设,需要帮助点击我!
  • 17713433920
  • 在线客户
  • 联系邮箱
  • 扫一扫,加好友

关闭搜索
购物车
回到顶部