獲得粘頭標題和WP管理欄的行為

解決WordPress粘性頭部與管理欄重疊問題

WordPress主題中，粘性頭部（或固定位置頭部）與管理欄重疊是一個常見問題。兩者都使用position: fixed; top: 0;，導致視覺衝突。由於管理欄的z-index為99999，它通常會覆蓋主題的粘性頭部（反之亦然）。本文將介紹如何使用CSS（和Sass）解決此問題。

(注意：某些主題使用JavaScript來定位粘性元素。如果JavaScript持續更新內聯top屬性，以下方法無效。)

使用CSS調整頭部位置

為簡化起見，我們使用.sticky-header類來表示固定在頁面頂部的元素。您應根據您的主題找到正確的選擇器。我們假設其top位置值為0。如果top值已偏移，則需要調整以下測量值。

當管理欄在前端可見時，WordPress會將.admin-bar類附加到頁面的元素。 （這通常由header.php中的body_class();函數處理。）此類允許我們調整粘性頭部的top位置。

<code class="language-css">/* 原有CSS... */
.sticky-header {
  position: fixed;
  top: 0;
}
/* 新增CSS... */
.admin-bar .sticky-header {
  top: 32px;
}</code>

管理欄高度為32px，我們只需將粘性頭部向下移動即可。但問題是，管理欄高度並非總是32px。

針對小屏幕的CSS

在寬度小於783px的屏幕上，管理欄高度為46px。我們需要修改代碼以進行補償：

<code class="language-css">.admin-bar .sticky-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .sticky-header {
    top: 46px;
  }
}</code>

如果您更喜歡移動優先CSS，請使用以下代碼：

<code class="language-css">.admin-bar .sticky-header {
  top: 46px;
}
@media screen and (min-width: 783px) {
  .admin-bar .sticky-header {
    top: 32px;
  }
}</code>

使用Sass創建可複用的mixin

如果使用Sass構建主題，我們可以將其封裝到一個可複用的mixin中：

<code class="language-scss">@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;
    }
  }
}</code>

此mixin接受一個可選參數$offset，允許指定元素的top值（非0）。如果沒有指定偏移量，mixin將假設為0。如果手動指定$offset，@if條件將修改默認的管理欄高度值。

使用方法：

<code class="language-scss">.sticky-header {
  position: fixed;
  top: 0;
  @include admin-sticky-fix;
}

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

結論

通過以上代碼片段，可以輕鬆解決粘性頭部與WordPress管理欄的衝突問題。 Sass mixin提高了代碼的可重用性。

常見問題解答 (FAQs)

（此處省略了FAQ部分，因為篇幅過長，且與偽原創目標不符。FAQ部分內容可以根據需要自行添加或修改。）

以上是獲得粘頭標題和WP管理欄的行為的詳細內容。更多資訊請關注PHP中文網其他相關文章！