WordPress 侧边栏
最近，我们的一位读者问我们如何更改 WordPress 主题中的侧边栏。当用户想要将侧边栏从左更改为右或从右更改为左时，我们经常遇到这个问题。在本文中，我们将向您展示如何更改 WordPress 中的侧边栏。
最近，有读者问我们如何更改 WordPress 主题中的侧边栏。我们遇到很多问题，用户想要将侧边栏从左更改为右或从右更改为左。在本文中，我们将向您展示如何更改 WordPress 中的侧边栏。
为什么要在WordPress中更改侧边栏 （Why Change The Sidebar Side in WordPress）
可用性专家认为人们从左到右浏览页面。他们建议将重要内容放在左侧，以便用户首先看到内容。但是，如果您的网站使用的是从右到左方向书写的语言，则情况可能会相反。
可用性专家认为人们从左到右浏览页面。他们建议将重要内容放在左侧，以便用户首先看到。但是，如果您的网站使用从右到左书写的语言，则可能是相反的情况。
Many WordPress sites use the typical blog layout with two columns. One for the content, and the other column for the 侧边栏.
许多WordPress网站使用两列的典型博客布局。 一个用于内容，另一列用于侧边栏 。
If you are just starting out a website, then you should 选择 WordPress 主题 that has the sidebar on your preferred location.
如果您只是刚开始一个网站，那么您应该选择 WordPress 主题 ，该主题的侧边栏位于您的首选位置。
许多主题都可以选择从主题设置切换侧边栏侧面。但是，如果您的主题没有此选项，那么您将必须手动更改侧边栏侧面。
许多主题都可以从主题设置中切换侧边栏选项。但是，如果主题没有此选项，您将必须手动更改侧边栏。
Having said that, let’s take a look at how you can easily change the sidebar side in WordPress using a little bit of CSS.
话虽如此，让我们看一下如何使用少量CSS轻松更改WordPress中的侧边栏。
使用CSS在WordPress中更改侧边栏 （Changing Sidebar Side in WordPress using CSS）
Before you make any changes to your theme, you should first consider 创建一个子主题. By using a child theme, you will be able to update your parent theme without losing your changes.
在对主题进行任何更改之前，您应该首先考虑创建副主题 。 通过使用子主题，您将能够更新父主题而不会丢失更改。
Secondly, you should always create a 备份您的 WordPress 网站 when you are making direct changes to your active WordPress theme.
其次，当您直接更改活动的WordPress主题时，应始终创建WordPress 网站的备份 。
You will need an FTP客户端 to edit your theme files. See our beginner’s guide on 如何使用FTP上传文件到WordPress.
您将需要FTP客户端来编辑主题文件。 有关有关如何使用 FTP 将文件上传到 WordPress 的信息，请参见我们的初学者指南。
使用 FTP 客户端连接到您的 WordPress 站点并转到您的主题文件夹。它通常位于：
使用 FTP 客户端连接到您的 WordPress 站点并转到您的主题文件夹。它通常位于：
/yourwebsite/wp-content/themes/your-theme-folder/
/yourwebsite/wp-content/themes/your-theme-folder/
Now you need to download and open your theme’s main stylesheet file in a plain text editor like Notepad. This file is called style.css, and it is located in your theme’s root directory.
现在，您需要在纯文本编辑器(如记事本)中下载并打开主题的主样式表文件。 该文件称为style.css ，位于主题的根目录中。
In this file, find the CSS class for your sidebar. It is usually .sidebar. In this example, we are using the default WordPress theme Twenty Fifteen which has this CSS to define sidebar:
在此文件中，找到侧边栏CSS类。 通常是.sidebar 。 在此示例中，我们使用默认的WordPress主题二十一十五，具有此CSS定义边栏：
.sidebar {
float: left;
margin-right: -100%;
max-width: 413px;
position: relative;
width: 29.4118%;
}
正如您所看到的，它将侧边栏向左浮动，并向右留出 -100% 的边距。我们将其更改为右浮动和左边缘，如下所示：
正如你所看到的，它在侧边栏中向左浮动，右边距为-100%。我们将其改为左右浮动，如下所示：
.sidebar {
float: right;
margin-left: -100%;
max-width: 413px;
position: relative;
width: 29.4118%;
}
保存您的更改并使用 FTP 客户端将 style.css 文件上传回您的网站。现在，如果您访问您的网站，它将如下所示：
保存更改并使用 FTP 客户端将 style.css 文件上传回您的网站。现在，如果您访问您的网站，它将如下所示：
这是因为我们移动了侧边栏，但没有移动内容区域。 25 使用此 CSS 来定义内容区域的位置。
这是因为我们移动了侧边栏，但没有移动内容区域。 Blackjack 使用此 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 后我们的网站的外观。
正如您所看到的，我们已经切换了内容和侧边栏区域的两侧。然而左侧仍然有一个白色块。
正如您所看到的，我们在内容和侧边栏区域都有切换。然而，左边仍然有一个白色的块。
当你使用 CSS 时，你会遇到这样的事情。需要进行一些侦探工作才能找出造成这种情况的原因以及如何进行调整。
在使用 CSS 时，您会遇到类似的情况。需要进行一些侦探工作才能找出造成这种情况的原因以及如何对其进行调整。
使用浏览器的“检查”工具查看源代码。将鼠标指向浏览器中受影响的区域，右键单击并从浏览器菜单中选择“检查”。
使用浏览器的“检查”工具查看源代码。将鼠标指向浏览器中受影响的区域，右键单击并从浏览器菜单中选择“检查”。
当您在源代码视图中移动鼠标时，您会注意到它影响的区域在实时预览中突出显示。在右侧窗格中，您将能够看到用于该所选元素的 CSS。
当您在源视图中移动鼠标时，您会注意到实时预览中突出显示的区域。在右侧窗格中，您将能够看到用于所选元素的 CSS。
我们发现样式表中的 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% 的空内容块。这是我们将其向右移动的方法。
此 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 */
}
保存样式表并将其上传回服务器后，这就是我们网站的外观。
保存样式表并将其上传回服务器后，这就是我们网站的样子。
Working with CSS can be confusing for beginners. If you don’t want to do all the manual code work, then you may want to try CSS 英雄. It allows you to edit CSS without writing any code, and it works with every WordPress theme.
使用CSS可能会使初学者感到困惑。 如果您不想完成所有手动代码工作，则可以尝试使用CSS 英雄 。 它允许您编辑CSS而无需编写任何代码，并且适用于每个WordPress主题。
We hope this article helped you change the sidebar side in WordPress. You may also want to see our list of 获得最大效果的 12 个 WordPress 侧边栏技巧.
我们希望本文能帮助您更改WordPress中的侧边栏。 您可能还希望查看我们的12 个 WordPress 侧边栏提示列表， 以获得最大效果 。
If you liked this article, then please subscribe to our YouTube 频道 for WordPress video tutorials. You can also find us on 推特 and Facebook.
如果您喜欢这篇文章，请订阅我们的YouTube 频道 WordPress视频教程。 您也可以在推特和Facebook上找到我们。
翻译自: https://www.wpbeginner.com/wp-themes/how-to-change-the-sidebar-side-in-wordpress/
WordPress 侧边栏