如何在WordPress中更改边栏侧

最近，我们的一位读者问我们如何更改WordPress主题中的侧边栏。我们得到了很多问题，用户希望从左到右或从右到左更改侧边栏。在本文中，我们将向您展示如何更改WordPress中的侧边栏。

为什么在WordPress中更改边栏侧

可用性专家认为，人们从左到右扫描页面。他们建议将重要内容放在左侧，以便用户首先查看内容。但是，如果您的网站采用从右向左书写的语言，则可以撤消此操作。

许多WordPress站点使用具有两列的典型博客布局。一个用于内容，另一个用于侧边栏。

如果您刚刚开始使用网站，那么您应该选择一个在首选位置具有侧边栏的WordPress主题。

许多主题都可以选择从主题设置切换侧边栏。但是，如果您的主题没有此选项，则您必须手动更改侧边栏。

话虽如此，让我们来看看如何使用一点点CSS轻松更改WordPress中的侧边栏。

使用CSS更改WordPress中的侧边栏

在对主题进行任何更改之前，应首先考虑创建子主题。通过使用子主题，您将能够更新父主题而不会丢失更改。

其次，当您直接更改活动的WordPress主题时，应始终创建WordPress网站的备份。

您将需要一个FTP客户端来编辑您的主题文件。请参阅我们的初学者指南，了解如何使用FTP将文件上传到WordPress。

使用FTP客户端连接到WordPress网站，然后转到主题文件夹。它通常位于：

/ yourwebsite /可湿性粉剂内容/主题/你的主题文件夹/

现在，您需要在记事本等纯文本编辑器中下载并打开主题的主样式表文件。调用此文件style.css文件，它位于主题的根目录中。

在此文件中，找到侧边栏的CSS类。通常是.sidebar.Sidebar。在这个例子中，我们使用默认的WordPress主题Twenty Fifteen，它有这个CSS来定义侧边栏：

.sidebar {
		float: left;
		margin-right: -100%;
		max-width: 413px;
		position: relative;
		width: 29.4118%;
	}

正如您所看到的那样，它向左侧浮动侧边栏，右侧边距为-100％。我们将它改为浮动右边和边缘左边，如下所示：

.sidebar {
		float: right;
		margin-left: -100%;
		max-width: 413px;
		position: relative;
		width: 29.4118%;
	}

保存更改并使用FTP客户端将style.css文件上传回您的网站。现在，如果您访问您的网站，它将如下所示：

那是因为我们移动了侧边栏但我们没有移动内容区域。 Twenty 15使用此CSS来定义内容区域的位置。

.site-content {
		display: block;
		float: left;
		margin-left: 29.4118%;
		width: 70.5882%;
	}

我们将更改它以将内容移至右侧。像这样：

.site-content {
		display: block;
		float: left;
		margin-right: 29.4118%;
		width: 70.5882%;
	}

这是我们的网站应用此CSS后的样子。

正如您所看到的，我们已经切换了内容和侧边栏区域。但是左边仍然有一个白色的块。

当你使用CSS时，你会遇到这样的事情。需要一些侦探工作来弄清楚导致这种情况的原因以及如何调整它。

使用浏览器的“Inspect”工具查看源代码。将鼠标指向浏览器中受影响的区域，右键单击并从浏览器菜单中选择“检查”。

在源代码视图中移动鼠标时，您会注意到它在实时预览中突出显示的区域。在右侧窗格中，您将能够看到用于所选元素的CSS。

我们发现样式表中的CSS需要调整。

@media screen and (min-width: 59.6875em) {
	body:before {
		background-color: #fff;
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
		content: "";
		display: block;
		height: 100%;
		min-height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		width: 29.4118%;
		z-index: 0; /* Fixes flashing bug with scrolling on Safari */
	}

此CSS代码在左上角添加宽度为29.4118％，宽度为100％的空内容块。以下是我们将其向右移动的方式。

@media screen and (min-width: 59.6875em) {
	body:before {
		background-color: #fff;
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
		content: "";
		display: block;
		height: 100%;
		min-height: 100%;
		position: fixed;
		top: 0;
		right: 0;
		width: 29.4118%;
		z-index: 0; /* Fixes flashing bug with scrolling on Safari */
	}

保存并将样式表上传回服务器后，这就是我们网站的外观。

使用CSS可能会让初学者感到困惑。如果您不想完成所有手动代码的工作，那么您可能需要尝试使用CSS Hero。它允许您编辑CSS而无需编写任何代码，它适用于每个WordPress主题。

我们希望本文能帮助您更改WordPress中的侧边栏。您可能还想看到我们的12个WordPress边栏技巧列表，以获得最大的结果。