最近,我们的一位读者问我们如何更改WordPress主题的侧边栏?

我们通常会从想要将侧边栏的位置从左向右或从右向左更改的用户收到此问题。

在本教程中,我们将向您展示如何在WordPress上更改侧边栏的位置。

但是之前,如果您从未安装过WordPress发现 如何安装WordPress博客7步骤 et 如何找到,安装和你的博客激活WordPress主题 

然后回到为什么我们在这里。

如何在wordpress上更改侧边栏的位置e1568058176266

为什么要更改WordPress上侧边栏的位置?

可用性专家认为,人们从左到右扫描页面。 他们建议将重要内容放在左侧,以便用户首先看到此内容。 但是,如果您的网站使用RTL语言(在左边).

找出是否 你的WordPress博客应该有侧边栏吗?

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

典型的内容演示WordPress侧边栏

如果您不熟悉网站,则应选择一个在您的首选位置带有侧边栏的WordPress主题。

许多 WordPress主题 提供在侧边栏设置中更改侧边栏侧的选项。 但是,如果您的WordPress主题没有此选项,则需要手动更改侧边栏。 通过发现进一步 如何删除WordPress上的侧边栏

就是说,让我们看一下通过CSS轻松更改WordPress侧边栏所需的方法。

使用CSS更改侧边栏

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

发现 如何显示WordPress的每个项目不同的侧边栏

其次,在对活动主题进行实时更改时,应始终创建WordPress网站的备份。

您将需要一个FTP客户端来编辑WordPress主题文件。 咨询 指导如何使用FTP.

使用FTP客户端登录到WordPress网站,然后导航到themes文件夹。 它通常位于:

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

现在,您需要在文本编辑器(如记事本)中下载并打开WordPress主题的主样式表文件。 该文件称为 style.css文件,它位于WordPress主题的根目录中。

发现 如何管理WordPress文件和文件夹

在此文件中,找到侧边栏的CSS类。 通常,此类是“ 侧边栏 ”。 在此示例中,我们使用默认的WordPress主题“ 20 15 谁在侧边栏上拥有此类:

.sidebar {float:left; 保证金权利:-100%; max-width:413px; 位置:相对; 宽度:29.4118%; }

如您所见,边栏以-100%的边距向左浮动。 我们将向右更改浮点数:

.sidebar {float:right; margin-left:-100%; max-width:413px; 位置:相对; 宽度:29.4118%; }

保存更改,然后使用FTP客户端将style.css文件上传到您的网站。 现在,如果您访问您的网站,它将如下所示:

演示网站更改侧边栏

确实,我们移动了侧边栏,但没有移动内容区域。 “ 二十五 使用此CSS定义内容区域的位置。

.site-content {display:block; 漂浮:左 margin-left:29.4118%; 宽度:70.5882%; }

我们将对其进行更改以将内容向右移动。 如下:

.site-content {display:block; 漂浮:左 保证金权利:29.4118%; 宽度:70.5882%; }

这是应用此CSS代码后您的网站的外观。

新的演示文稿移动侧边栏网站

如您所见,我们更改了内容区域和侧边栏的位置。 但是,左侧仍然有一个白色块。

通过发现进一步 如何管理WordPress文件和文件夹

使用CSS时,您经常会遇到这些错误。 需要做一些侦探工作才能了解造成此问题的原因以及如何解决它。

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

检查浏览器工具

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

发现我们的 5 WordPress插件可以在您的博客上直观地编辑CSS

因此,必须重新调整与突出显示的项目相对应的CSS。

@media screen和(min-width:59.6875em){body:before {background-color:#fff; box-shadow:0 0 1px rgba(0,0,0,0.15); 内容:“”; 显示:块; 身高:100%; 最小高度:100%; 位置:固定; 顶部:0; 左:0; 宽度:29.4118%; z-index:0; / *通过在Safari * /}上滚动修复闪烁的错误

此CSS代码在左上方添加了一个29,4118%宽度的空块和100%的宽度。 这就是我们将其向右移动的方式。

@media screen和(min-width:59.6875em){body:before {background-color:#fff; box-shadow:0 0 1px rgba(0,0,0,0.15); 内容:“”; 显示:块; 身高:100%; 最小高度:100%; 位置:固定; 顶部:0; 右:0; 宽度:29.4118%; z-index:0; / *通过在Safari * /}上滚动修复闪烁的错误

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

右边的新面貌网站侧边栏

使用CSS可能会使初学者感到困惑。 如果您不想完成所有手动工作,则可以尝试 WordPress CSS Hero插件。 它允许您编辑CSS而无需编写代码,并且可以与每个WordPress主题一起使用。

还发现一些高级WordPress插件  

您可以使用其他 WordPress插件 赋予现代外观并优化您的博客或网站的处理。

我们在这里为您提供了一些高级WordPress插件,它们将帮助您实现这一目标。

1。 Zxeion

Zxeion是一个强大的 WordPress插件 溢价负责提高您的网站的安全性。 该插件包含一系列保护和安全工具,可保护您的网站免受可能的攻击。Zxeion wordpress插件可保护网站免受恶意软件病毒攻击

它的实时保护系统将帮助您识别对网站的威胁并将其阻止,而无需执行任何操作。

发现我们的 7个可在WordPress上增强侧边栏的插件

它的功能包括:实时保护,出色的客户支持,定期更新,IP地址阻止程序,出色的文档,现代化专业的界面,专用的客户支持等

下载 | 演示 | 虚拟主机

2。 Slaido 

斯莱多是一个 WordPress插件 高级版允许您从近 320 个响应式滑块模板中进行选择,只需单击几下即可将其中一个导入您的网站。 这是一个完整的模板包,非常适合 滑块革命。 所以你必须先安装它才能充分使用它 WordPress插件Slido模板包,用于滑块旋转Wordpress

其主要功能包括:滑块的响应式布局,轻松导入或导出滑块,定期更新,24/7可用的客户支持,流畅且非常酷的动画,快速入门的视频教程,对Google字体的支持等等。

下载 | 演示 | 虚拟主机

3。 联系我们表格

“联系我们表单”是一种高级的WordPress响应插件,它是一个简单的工具,但具有丰富的自定义选项,可让您显示清晰,令人鼓舞的表单,访问者可以在此表单上通过留言与您联系。

与我们联系表格wordpress联系表格插件

您将能够定义必要的字段,选择最佳的字段布局并完全自定义字段,以鼓励您的客户或访客留下他们的建议或消息。

我们还邀请您阅读: 10 WordPress插件,用于创建和管理餐厅网站

只需在您想接收消息的位置设置电子邮件地址,并使用它来朝着最有利可图的方向发展您的业务。

下载 | 演示 | 虚拟主机

推荐资源

查找有关其他推荐资源的信息,以帮助您构建和管理网站。

结论

有! 本教程就是这样。 我们希望它可以帮助您更改WordPress博客的侧边栏。 不要犹豫 与您最喜欢的社交网络上的朋友分享这篇文章

但是,您也可以咨询我们的 RESSOURCES,如果您需要更多的元素来执行创建Internet网站的项目,请参考我们关于 WordPress博客创建。

如果您有任何建议或意见,请将其留在我们的部分 评论.

...