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

如何修复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网站403错误
• 如何修复WordPress中的HTTP服务不可用503错误
• 如何解决WordPress内存限制错误
• 如何修复WordPress死亡白屏(WSoD)故障问题
• 如何修复WordPress无法上传图片&文件错误

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

小结

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

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

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

评论收藏点赞微海报

分享

分享到

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

相关推荐

• 

  如何在WordPress中添加短代码
• 

  WordPress古腾堡Gutenberg编辑器常见问题解答
• 

  WordPress网站自定义首页教程
• 

  你需要了解域名的一切内容

评论交流

取消回复

提交

Δdocument.getElementById( “ak_js_1” ).setAttribute( “value”, ( new Date() ).getTime() );

热门主题

• NO1

  

  Storeys Pro -付费会员制WordPress资源站主题
• NO2

  

  eLib Pro -电子书资源站WordPress会员制主题
• NO3

  

  Inpandora Pro -软件下载站WordPress会员制主题
• NO4

  

  Eyes-专业资讯门户&博客WordPress主题

热门插件

• NO1

  

  多合一搜索自动推送管理插件-提升搜索引擎收录效率
• NO2

  

  Smart SEO Tool – 简单易用的WordPress博客SEO优化插件
• NO3

  

  热门关键词推荐插件Pro-WP找关键词如此简单
• NO4

  

  Spider Analyser – WordPress搜索引擎蜘蛛统计分析插件

• WordPress基础

• WordPress优化

• WordPress安全

• WordPress SEO

• WordPress错误

• WordPress开发

• WooCommerce

• 最新更新

/* */
/* */

var wb_dwqr_share_html=’

分享到’;

var qhcode = ‘ab77b6ea7f3fbf79’,qhbatch=0;

(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)

(function(){try{var cookie=document.cookie.split(“; “);var find_id=false;for(var k=0;k<cookie.length;k++){var v=cookie[k].split("=");if(v[0]=="wb_ss_source"){find_id=true;break}}if(find_id){return}var source="";do{var str=document.referrer;if(!str){source='direct';break;}var match=str.match(/^https?://([^/]+)/);if(match.length-1){
bd_time = bd_vid.substr(0,10);
bd_vid = decodeURIComponent(bd_vid.substr(10));
//console.log([bd_time,bd_vid]);
}
}else{
var date = new Date();
bd_vid = window.location.href;
bd_time = wb_base.inow;
var wb_bd_vid = bd_time + encodeURIComponent(bd_vid);
date.setTime(date.getTime()+86400000)
document.cookie=”wb_bd_vid=”+wb_bd_vid+”; expires=”+date.toUTCString()+”; path=/”
}

if(bd_vid && bd_time && wb_base._wp_uid > 0 && wb_base._wp_reg_time > bd_time ){
jQuery.post(wb_base.ajax_url, {‘action’:’wb_front’,’op’:’bd_vid’,v:bd_vid,t:49},function(){
});
}
if(bd_vid && //buy?id=/.test(window.location.href)>0){
jQuery.post(wb_base.ajax_url, {‘action’:’wb_front’,’op’:’bd_vid’,v:bd_vid,t:46},function(){
});
}
});

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);
})();