专注国内外云服务器
分享建站技术教程

如何修复WordPress侧边栏错位移位问题

立即购买

阿里云服务器 ¥102元/年 云数据库37.5元/年 限时

个人、企业均可购买 | 更多配置0.8折特惠

完善WordPress网站的布局可能需要做很多工作,但这对于用户体验(UX),参与度和转化率也是必不可少的。因此,当看似随机的错误导致站点显示错位时,例如侧边栏突然出现在内容下方而不是侧面时,这是件让站长和访客都烦心的事情。

一般WordPress侧边栏移位错位主要归结为超文本标记语言(HTML)或级联样式表(CSS)的问题。幸运的是,这些问题相对容易解决,一般可以快速让站点恢复原来的样子。

在本教程中,我们将介绍导致此错误的常见原因,及如何通过三个简单步骤解决该错误。

WordPress侧栏错位至页面下方的常见原因

WordPress的侧边栏应显示在页面主要部分的左侧或右侧(或有时同时显示在这两个区域)。它们通常包含小部件,注册表单,指向相关文章的链接或您想要包含在整个网站中的类似内容。

由于各种错误,侧边栏有时可能会显示在页面底部,而不是左侧或右侧。

主要原因一般为网站上的HTML或CSS问题。通常,这是您对网站代码(例如主题或插件文件)进行了直接更改的结果。

例如,页面上可能有一个额外的或未闭合

标签。该问题甚至可能归因于CSS中不正确的宽度和浮动设置。幸运的是,解决此错误很容易。

如何修复WordPress侧栏错位问题

现在我们知道造成这种混乱错误的潜在原因,如何修正?我们建议按顺序执行以下三个步骤,仅在前一个步骤不起作用时才继续执行下一个步骤。在开始之前,务必先备份您的站点 ,以防万一。

步骤1:撤消最近的更改

第一步也是最简单的。如果在更改站点后侧边栏发生了错位(无论是安装新插件,添加自定义代码还是其他操作),只需将其撤消即可。撤消操作既可以将布局恢复为原始,又可以帮助找出问题的原因。

因此,您可以先撤消更改并刷新网站,以查看侧边栏是否又回到了正确的位置。如果是这样,那么您可以尝试进行任何更改来寻找潜在的问题。例如,如果您安装了新插件,请检查替代方法。如果您更改或添加了网站代码,请检查是否有任何拼写错误或语法错误。

步骤2:修复未封闭的

标签或删除多余的

标签

通常,网站代码中未封闭或多余的

标记是WordPress侧边栏错误的原因。这些HTML标记 定义了您网站上各个部分的边界。如果放置不正确,浏览器将无法正确渲染网站。

这是一个格式正确的页面的示例:

以下是带有未闭合的

标签的同一页面:

您可以看到结束的

标记应该缺少正斜杠。结果,浏览器不知道它是要关闭的,并且应该位于元素外部的内容现在位于内部。

要解决此问题,请梳理您修改过的所有模板文件,并寻找缺失或多余的标签。通常,这些错误可以在WordPress主题的“模板部分”文件中找到。进入WordPress仪表盘,然后导航到“外观>主题编辑器”。

 

从顶部的下拉菜单中选择正确的主题,然后在侧栏中找到模板部分。

生成页面和文章的模板通常在内容部分下。从列表中找到所需的一个,进行检查,然后进行任何更正。然后,您可以单击更新文件以保存您的更改。

如果您知道编辑了哪个文件,则可以直接跳到那里。否则,您需要检查它们是否存在不一致之处。

WordPress教程:优化WordPress网站以提高速度

步骤3:更正CSS问题

导致此错误的另一个常见原因是网站的CSS样式。WordPress定制程序的“其他CSS”部分使您可以将自定义CSS添加到您的网站。

 

如果您使用了此功能或通过其他方式编辑了CSS,则可能是错误地格式化了代码。在移动侧栏的情况下,最常见的罪魁祸首是“宽度”属性。

您应该仔细检查Content和Sidebar元素的宽度总和不超过Wrap元素的宽度。如果是这样,较小的元素将被向下推以使其适合。

WordPress教程:如何在WordPress网站上实施缓存

简化侧边栏问题疑难解答的工具

您也可以自行解决问题,而无需使用代码。有几种在线在线工具可以验证您的代码并检查其错误。

您可以使用W3C标记验证服务 来检查HTML代码,使用W3C CSS验证服务检查CSS样式文件,Online Web Check则可以同时校验HTML和CSS。

如果您只想再看一遍代码,而不论其技术水平如何,这些在线服务也是很棒的。

其他WordPress资源

除了本教程!我们整理了不少文章,以帮助您解决各种WordPress问题:

如果您正在寻找更多的WordPress技巧,请查看我们的WordPress教程。

小结

在玩WordPress的过程中可能遇到无数的错误,侧边栏错位只是其中的一个。幸运的是,如果问题只是侧边栏跑到页面下方,则修复相对简单!

要解决出现在页面下方的侧边栏错误,您可以按照以下三个步骤操作:

  1. 撤消出现错误之前对网站所做的任何更改。
  2. 检查并修复代码中未闭合或多余的
    标记。

  3. 验证网站的CSS是否正确。
  4. 微海报分享

标签

WordPress侧边栏WordPress错误侧边栏错误

评论交流

取消回复



下载安装
73,049
服务网站
58,439

/* */
/* */

var dwqr_opt=”1.4.2|https%3A%2F%2Fwww.wbolt.com%2Fwp-content%2Fplugins%2Fdonate-with-qrcode%2F|0|https%3A%2F%2Fwww.wbolt.com%2Fwp-admin%2Fadmin-ajax.php|10815″; var assets_ver=window.assets_ver || “1.4.2”;
var poster_theme=2, poster_ratio=”3:2″;var wb_dwqr_share_html=’

‘;
var qhcode = ‘d182b3f28525f2db83acfaaf6e696dba’;
(function(){
var el = document.createElement(“script”);
el.src = “https://sf1-scmcdn-tos.pstatp.com/goofy/ttzz/push.js?b61d649e3d942b53b7ab9df74d76992058ba1534a5f221a4335f88e5f7a738ff240c1b6bcdf202566d2d20e9a7dae866a48efe565693e223a21867a7cacef054”;
el.id = “ttzz”;
var s = document.getElementsByTagName(“script”)[0];
s.parentNode.insertBefore(el, s);
})(window)

扫码加入QQ交流群
695891297

(function(){try{var cookie=document.cookie.split(“; “);var find_id=false;for(var k=0;k1){source=match[1]}}}}}}else{source=”direct”}if(source){var date=new Date();date.setTime(date.getTime()+86400000*7);document.cookie=”wb_ss_source=”+source+”; expires=”+date.toUTCString()+”; path=/”}}catch(e){}})();
(function(){try{var match=/invite=(d+)/.exec(location.href);if(match&&match.length==2){var js_src=document.createElement(“script”);js_src.setAttribute(“src”,wb_base.ajax_url+”?action=wb_cps&id=”+match[1]);js_src.setAttribute(“async”,”1″);document.body.appendChild(js_src)}}catch(e){}})();

var _hmt = _hmt || [];
(function() {
var hm = document.createElement(“script”);
hm.src = “https://hm.baidu.com/hm.js?10db67570487ae91425a4107743cb64c”;
var s = document.getElementsByTagName(“script”)[0];
s.parentNode.insertBefore(hm, s);
})();

文章来源于互联网:如何修复WordPress侧边栏错位移位问题

相关推荐: 如何修改WordPress最大上传文件大小限制

较低的WordPress上传限制可阻止您上传大文件,插件和主题。如果您要建立一个拥有大量多媒体资源的网站,那这将是一个很大的障碍。在这种情况下,有必要增加WordPress或服务器(或两者)中的最大上传大小。 也经常在WordPress交流群里看到站长咨询关于…

赞(0)
未经允许不得转载:吾上云 » 如何修复WordPress侧边栏错位移位问题
分享到: 更多 (0)
  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

评论 抢沙发

评论前必须登录!

 

吾上云 专注服务器选购

购买云服务器联系我们