wordpress侧边栏_如何在WordPress中更改侧边栏

最新推荐文章于 2024-05-29 09:45:51 发布

cumohuo9136

最新推荐文章于 2024-05-29 09:45:51 发布

阅读量1.5k

点赞数

文章标签： css html python java js ViewUI

原文链接：https://www.wpbeginner.com/wp-themes/how-to-change-the-sidebar-side-in-wordpress/

版权

wordpress侧边栏

Recently, one of our readers asked us how to change the sidebar side in a WordPress theme. We get this question a lot where users want to change their sidebar from left to right, or right to left. In this article, we will show you how to change the sidebar side in WordPress.

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

为什么要在WordPress中更改侧边栏 (Why Change The Sidebar Side in WordPress)

Usability experts believe that people scan pages from left to right. They recommend putting the important content on the left so that users see the content first. However, this could be reversed if your site is in a language that is written in Right to Left direction.

可用性专家认为，人们从左到右扫描页面。他们建议将重要内容放在左侧，以便用户首先看到内容。但是，如果您的网站使用的语言是从右到左书写的，则可能会相反。

Many WordPress sites use the typical blog layout with two columns. One for the content, and the other column for the sidebar.

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

A WordPress site with sidebar on the left side

If you are just starting out a website, then you should select a WordPress theme that has the sidebar on your preferred location.

如果您只是刚开始一个网站，那么您应该选择一个WordPress主题，该主题的侧边栏位于您的首选位置。

Many themes have options to switch sidebar sides from theme settings. However if your theme does not have this option, then you will have to change sidebar sides manually.

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

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 creating a child theme. By using a child theme, you will be able to update your parent theme without losing your changes.

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

Secondly, you should always create a backup of your WordPress site when you are making direct changes to your active WordPress theme.

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

You will need an FTP client to edit your theme files. See our beginner’s guide on how to use FTP to upload files to WordPress.

您将需要FTP客户端来编辑主题文件。有关如何使用FTP将文件上传到WordPress的信息，请参见我们的初学者指南。

Connect to your WordPress site using the FTP client and go to your theme folder. It is usually located at:

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

/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%;
	}

As you can see it floats sidebar to the left with a margin of -100% to the right. We will change it to float right and margin-left like this:

如您所见，它在侧边栏浮动在左侧，右边距为-100％。我们将其更改为左右浮动，如下所示：


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

Save your changes and upload style.css file back to your website using FTP client. Now if you visit your website, it will look like this:

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

Sidebar moved but content side is still the same

That’s because we have moved the sidebar but we did not move the content area. Twenty Fifteen uses this CSS to define the position of content area.

那是因为我们已经移动了侧边栏，但是没有移动内容区域。二十一点十五使用此CSS定义内容区域的位置。


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

We will change it to move content to the right. Like this:

我们将对其进行更改以将内容向右移动。像这样：


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

This is how our website looked after applying this CSS.

这是我们的网站在应用此CSS之后的外观。

A CSS conflict showing an empty white area

As you can see that we have switched sides for both content and sidebar areas. However there is still a white block on the left.

如您所见，我们在内容和侧边栏区域都进行了切换。但是，左侧仍然有一个白色块。

You will come across such things when you are working with CSS. It will take some detective work to figure out what’s causing that and how to adjust it.

使用CSS时，您会遇到这样的事情。需要做一些侦探工作才能弄清楚是什么原因以及如何调整它。

Use your browser’s ‘Inspect’ tool to look at the source code. Point your mouse to the affected region in the browser, right-click and select Inspect from browser menu.

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

As you move your mouse in the source code view, you will notice the areas it affects highlighted in the live preview. In the right pane, you will be able to see the CSS used for that selected element.

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

We figured out that this CSS in our stylesheet needs adjusting.

我们发现样式表中的此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 */
	}

This CSS code adds an empty content block of 29.4118% width and 100% width to the top left. Here is how we will move it to right.

此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 */
	}

After saving and uploading the stylesheet back to the server, this is how our website looked.

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

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 Hero. It allows you to edit CSS without writing any code, and it works with every WordPress theme.

使用CSS可能会使初学者感到困惑。如果您不想完成所有手动代码工作，则可以尝试使用CSS Hero 。它允许您编辑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 sidebar tricks to get maximum results.

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

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/wp-themes/how-to-change-the-sidebar-side-in-wordpress/

wordpress侧边栏

cumohuo9136

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
wordpress侧边栏_如何在WordPress中更改侧边栏

wordpress侧边栏Recently, one of our readers asked us how to change the sidebar side in a WordPress theme. We get this question a lot where users want to change their sidebar from left to right, or right ...
复制链接

扫一扫