搜索
首页CMS教程WordPress获得粘头标题和WP管理栏的行为

解决WordPress粘性头部与管理栏重叠问题

WordPress主题中,粘性头部(或固定位置头部)与管理栏重叠是一个常见问题。两者都使用position: fixed; top: 0;,导致视觉冲突。由于管理栏的z-index为99999,它通常会覆盖主题的粘性头部(反之亦然)。本文将介绍如何使用CSS(和Sass)解决此问题。

Getting Sticky Headers and the WP Admin Bar to Behave

(注意:某些主题使用JavaScript来定位粘性元素。如果JavaScript持续更新内联top属性,以下方法无效。)

使用CSS调整头部位置

为简化起见,我们使用.sticky-header类来表示固定在页面顶部的元素。您应根据您的主题找到正确的选择器。我们假设其top位置值为0。如果top值已偏移,则需要调整以下测量值。

当管理栏在前端可见时,WordPress会将.admin-bar类附加到页面的元素。(这通常由header.php中的body_class();函数处理。)此类允许我们调整粘性头部的top位置。

/* 原有CSS... */
.sticky-header {
  position: fixed;
  top: 0;
}
/* 新增CSS... */
.admin-bar .sticky-header {
  top: 32px;
}

管理栏高度为32px,我们只需将粘性头部向下移动即可。但问题是,管理栏高度并非总是32px。

针对小屏幕的CSS

在宽度小于783px的屏幕上,管理栏高度为46px。我们需要修改代码以进行补偿:

.admin-bar .sticky-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .sticky-header {
    top: 46px;
  }
}

如果您更喜欢移动优先CSS,请使用以下代码:

.admin-bar .sticky-header {
  top: 46px;
}
@media screen and (min-width: 783px) {
  .admin-bar .sticky-header {
    top: 32px;
  }
}

使用Sass创建可复用的mixin

如果使用Sass构建主题,我们可以将其封装到一个可复用的mixin中:

@mixin admin-sticky-fix( $offset: 0 ) {
  $narrow-offset: 46px;
  $wide-offset: 32px;
  @if $offset != 0 and type-of($offset) == 'number' {
    $narrow-offset: $narrow-offset + $offset;
    $wide-offset: $wide-offset + $offset;
  }
  .admin-bar & {
    top: $narrow-offset;
    @media screen and (min-width: 783px) {
      top: $wide-offset;
    }
  }
}

此mixin接受一个可选参数$offset,允许指定元素的top值(非0)。如果没有指定偏移量,mixin将假设为0。如果手动指定$offset@if条件将修改默认的管理栏高度值。

使用方法:

.sticky-header {
  position: fixed;
  top: 0;
  @include admin-sticky-fix;
}

.sticky-header-offset {
  position: fixed;
  top: 20px;
  @include admin-sticky-fix(20);
}

结论

通过以上代码片段,可以轻松解决粘性头部与WordPress管理栏的冲突问题。 Sass mixin提高了代码的可重用性。

常见问题解答 (FAQs)

(此处省略了FAQ部分,因为篇幅过长,且与伪原创目标不符。FAQ部分内容可以根据需要自行添加或修改。)

以上是获得粘头标题和WP管理栏的行为的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
WordPress是否需要编码知识作为CMS?WordPress是否需要编码知识作为CMS?Apr 30, 2025 am 12:03 AM

你不需要编程知识就能使用WordPress,但掌握编程可以提升体验。1)使用CSS和HTML可以调整主题样式。2)PHP知识能编辑主题文件,添加功能。3)自定义插件和元标签可优化SEO。4)注意备份和使用子主题以防更新问题。

使用WordPress时的安全考虑是什么?使用WordPress时的安全考虑是什么?Apr 29, 2025 am 12:01 AM

TosecureaWordPresssite,followthesesteps:1)RegularlyupdateWordPresscore,themes,andpluginstopatchvulnerabilities.2)Usestrong,uniquepasswordsandenabletwo-factorauthentication.3)OptformanagedWordPresshostingorsecuresharedhostingwithawebapplicationfirewal

WordPress与其他网站构建者相比如何?WordPress与其他网站构建者相比如何?Apr 28, 2025 am 12:04 AM

WordPressExcelSoverotherWeberteBuilderSduetoItsflexible,可伸缩性,andopen-sourcenature.1)它'saversatilecmswithExtEnsextEnsiveCustomizedOptionsVIATHEMESANDPLUGINS.2)它的alllearbutoffersbutoffersbutoffersbutoffersbutofferspopelyContrololonCemastered.3)

5个WordPress插件,供开发人员在2025年使用5个WordPress插件,供开发人员在2025年使用Apr 27, 2025 am 08:25 AM

2025年网站开发的七个必备WordPress插件 在2025年建立顶级WordPress网站需要速度,响应能力和可扩展性。 实现这种有效的实现通常取决于战略插件的选择。 这篇文章Highlig

您将使用WordPress做什么?您将使用WordPress做什么?Apr 27, 2025 am 12:14 AM

WordPresscanbeusedforvariouspurposesbeyondblogging.1)E-commerce:WithWooCommerce,itcanbecomeafullonlinestore.2)Membershipsites:PluginslikeMemberPressenableexclusivecontentareas.3)Portfoliosites:ThemeslikeAstraallowstunninglayouts.Ensuretomanageplugins

WordPress适合创建投资组合网站吗?WordPress适合创建投资组合网站吗?Apr 26, 2025 am 12:05 AM

是的,wordpressisisexcellentforcortingaportfoliowebsite.1)itoffersnumeroversnumeroverportfolio-spificthemeslike'astra'astra'astra'astra'astra'astra'astra'astra'astra'elementor'Enelementor'enableIntiviveSiveSign,Thoughtemanycanslowthesite.3)

使用WordPress而不是从头开始编码网站的优点是什么?使用WordPress而不是从头开始编码网站的优点是什么?Apr 25, 2025 am 12:16 AM

WordPressisadvantageousovercodingawebsitefromscratchdueto:1)easeofuseandfasterdevelopment,2)flexibilityandscalability,3)strongcommunitysupport,4)built-inSEOandmarketingtools,5)cost-effectiveness,and6)regularsecurityupdates.Thesefeaturesallowforquicke

是什么使WordPress成为内容管理系统?是什么使WordPress成为内容管理系统?Apr 24, 2025 pm 05:25 PM

WordPressIsAcmsDuetoItseAsofuse,自定义,USERMANAMECTION,SEO和COMMUNITYSUPPORT.1)ITSIMPLIFIESCONTENTMANGAMEWITHANINTUISIDERFEEFFECE.2)提供extentensiveCustomizationThroughThroughTheMesandPlugins.3)supportrobustuserrolesandplugins.4)supportrobustuserrolesandpermissions.4)增强

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境