如何在WordPress中更改边栏侧

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

Change sidebar side in WordPress

为什么在WordPress中更改边栏侧

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

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

A WordPress site with sidebar on the left side

如果您刚刚开始使用网站,那么您应该选择一个在首选位置具有侧边栏的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文件上传回您的网站。现在,如果您访问您的网站,它将如下所示:

Sidebar moved but content side is still the same

那是因为我们移动了侧边栏但我们没有移动内容区域。 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后的样子。

A CSS conflict showing an empty white area

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

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

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

Inspect tool

在源代码视图中移动鼠标时,您会注意到它在实时预览中突出显示的区域。在右侧窗格中,您将能够看到用于所选元素的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 */  }    

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

sidebar moved to the other side

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

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

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

Change sidebar side in WordPress

为什么在WordPress中更改边栏侧

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

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

A WordPress site with sidebar on the left side

如果您刚刚开始使用网站,那么您应该选择一个在首选位置具有侧边栏的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文件上传回您的网站。现在,如果您访问您的网站,它将如下所示:

Sidebar moved but content side is still the same

那是因为我们移动了侧边栏但我们没有移动内容区域。 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后的样子。

A CSS conflict showing an empty white area

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

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

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

Inspect tool

在源代码视图中移动鼠标时,您会注意到它在实时预览中突出显示的区域。在右侧窗格中,您将能够看到用于所选元素的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 */  }    

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

sidebar moved to the other side

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

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

相关推荐

发表评论

房先生
我们将24小时内回复。
2023-12-15 23:10:53
您好,有任何疑问请与我们联系!
您的工单我们已经收到,我们将会尽快跟您联系!
[加我微信]
chaoneo
注:点击复制微信号并打开微信APP,添加好友后进行聊天。
[电话联系]
13585372227
[电子邮件]
[email protected]
取消

选择聊天工具: