我正在使用Shopisle主题。我已经在商店页面的左侧显示了产品类别下拉过滤器小部件。但是在较小的屏幕上, 它会自动在页面底部移动。如何在较小的屏幕顶部显示它？
#1可以在窗口调整大小事件上使用一些JavaScript来完成。侧边栏实际上位于HTML标记的右侧(或更具体地, 位于下面)。它出现在左侧, 因为css的主要部分向右浮动。
调整大小时, css删除了宽度为767px的浮点数。因此, 侧栏跌至底部。
使用jQuery的insertBefore(http://api.jquery.com/insertbefore/)和insertAfter, 可以切换html标记。
注意：此示例移动了整个侧栏。如果有必要, 可以对其进行一些修改以仅移动单个小部件。这表示一般过程。
【侧边栏在小屏幕的底部】**顺便说一句, 该脚本应放在子主题的.js文件中。如果.js文件尚未存在, 请尝试将其添加到<
script>
…
<
/ script>
标记内的页脚模板文件中(最好在子主题中)。
var sidebar_at_top = false;
function formatdisplay(){
if(jQuery( window ).width() <
768){
if(!sidebar_at_top){
console.log('moving sidebar to before main area');
jQuery('.sidebar-shop').insertBefore(jQuery('.shop-with-sidebar'));
sidebar_at_top = true;
}
}else{
if(sidebar_at_top){
console.log('moving sidebar to after main area');
jQuery('.sidebar-shop').insertAfter(jQuery('.shop-with-sidebar'));
sidebar_at_top = false;
}
}
}
jQuery( window ).resize(function() {
formatdisplay();
});
jQuery( document ).ready(function() {
formatdisplay();
});
推荐阅读
- 显示帖子缩略图而不是占位符placeholder
- 将WordPress类别显示为分层
- 在自己的WordPress主题中显示section编辑按钮
- 在WordPress的任何页面上显示特定父级的子级帖子
- 我应该使用主题框架还是从头开始WordPress主题（）
- 在WordPress的任何页面上显示特定父级的子页面
- 从WordPress中的特定标签显示4条最新帖子
- 短代码不适用于自定义WordPress主题
- 在WordPress中更改/重置密码后，将新密码发送到新数据库