WordPressで粘着性メニューを作成する方法

ウェブサイトナビゲーションメニューは、重要な設計要素です。 慎重に検討せずにメニューを追加する代わりに、デザイナーはメニューのデザイン、ページスペースの割り当て、およびユーザーインタラクションを優先する必要があります。

スティッキーメニューは、スクロール中に永続的なトップブラウザ配置に人気があり、ページの位置に関係なく継続的なアクセシビリティを提供します。 これにより、サイトナビゲーションが強化されます

粘着性メニューを使用する粘着メニューは普遍的に適切ではありません。 彼らは、ページ上部に小さなシングルラインのメニューで最適に機能し、サブメナスがありません。 効果的な粘着メニューの例には、が含まれます

AppleのWebサイト：

そのシンプルでスペース効率の良いトップメニューは、粘着性の実装に最適です。

Ted Bakerのサイト：そのシングルラインメニューは、ホバーでメガメニューを拡大し、粘着性のメガメニュー統合が成功したことを示しています。

ただし、粘着性のメニューは必ずしも適切ではありません。 たとえば、
ガーディアンのウェブサイト：

その大きなヘッダーと低い配置メニューは、粘着性になった場合、過度の画面職業を作成します。

• IBMのサイト：ドロップダウンを備えたトップメニューは粘着性がありません。

最適なスティッキーメニューの使用には、シンプルで一流のシングルラインメニューが含まれます。メガメナスは機能しますが、ユーザーエクスペリエンスの低下を避けるために慎重な実装が重要です（たとえば、スクロール中に予期しないメガメヌの外観）。

スティッキーメニューの追加：実用的なガイド
• スティッキーナビゲーションメニューを作成するためのコードを調べてみましょう。

要件：

編集可能なテーマ（以下を参照）。

WordPress開発環境（ライブサイトの変更を避けます） コードエディター。

テーマファイルへのアクセス。

この例では、カスタムテーマが使用されます。 サードパーティのテーマについては、更新中に編集を維持するために子供のテーマを作成します。

初期コードの例

• このウェブサイトの例を考えてみましょう：
スクロール時にメニューが消えます：

CSSは、スクロール中にメニューのトップ位置を維持するように変更されます。 header.phpファイルには、メニューコードが含まれています

<div class="header-bg"><br></br><br></br><br></br><br></br><hgroup class="site-name one-third left"><br></br><br></br><h1 id="br-br-lt-php-if-is-singular-array-rmcc-landing-rmcc-signup-is-page-template-page-tripwire-php-br-bloginfo-name-br-br-br-br-else-gt-br-br-a-href-https-www-php-cn-link-c-cf-f-df-d-d-bf-rel-home-title-php-echo-esc-attr-get-bloginfo-name-display-lt-php-bloginfo-name-gt-a-br-br-lt-php-gt-br-br"><br></br><?php if ( is_singular( array( 'rmcc_landing', 'rmcc_signup') )  || is_page_template( 'page-tripwire.php' ) ) {<br?>                       bloginfo( 'name' );<br></br>                 } <br></br>                  else { ?><br></br><a href="https://www.php.cn/link/0783683c446cf52f9df7d90d92bf5239'/' ); ?>" rel="home" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ??></a><br></br><?php } ??><br></br></h1><br></br><h2 id="lt-php-bloginfo-description-gt"><?php bloginfo( 'description' ); ??></h2><br></br></hgroup><br></br><br></br><div class="right two-thirds"><br></br><br></br><br></br><?php if ( ! is_singular(array( 'rmcc_landing', 'rmcc_signup' ) ) && ! is_page_template( 'page-tripwire.php' ) ) { ??><br></br><a class="toggle-nav" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">☰</a><br></br><?php } ??><br></br><br></br><br></br><?php if ( ! is_singular(array( 'rmcc_landing', 'rmcc_signup' ) ) && ! is_page_template( 'page-tripwire.php' ) ) { ??><br></br><nav class="menu main right"><br></br><div class="skip-link screen-reader-text"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bcontent" title="<?php esc_attr_e( 'Skip to content', 'compass' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ??></a></div><br></br><?php wp_nav_menu( array( 'container_class' =?> 'main-nav', 'theme_location' => 'primary' ) ); ?><br></br></nav><br></br><?php } ??><br></br><br></br></div> <br></br><br></br><br></br><br></br></div><br></br>

このコードには以下が含まれます

ナビゲーションとヘッダーの背景（全幅）。

• ヘッダー要素（幅cssを使用）。
• サイトのタイトルと説明。
• ナビゲーションメニュー。
テーマCSSは、レイアウト、フロート、色を処理します。

CSSは、粘着性効果を作成するために使用されます。 これにより、要素はオフセットしきい値に達するまで正常に動作し、その後固定されたままになります。

CodePenデモはこれを実行しています。position: sticky; top: 0px;

[Codepen埋め込み - 実際のCodepen Embedコードと交換]

スティッキーポジショニングでは、初期（非スロール）状態のメニューの上のバナーも可能になり、スクロール時に自動的に消えます。 このための基本的なマークアップ：

関連するCSS：

<div class="banner"><br></br><p>I am a banner!</p><br></br></div><br></br><br></br><nav><br></br><ul><br></br><li>Home</li><br></br><li>Blog</li><br></br><li>Products</li><br></br><li>Contact</li><br></br></ul><br></br></nav><br></br><br></br><br></br><br></br><br></br>

これにより、ビューポートの上からゼロピクセルのヘッダー（ナビゲーションを含む）が修正されます。

header {<br></br>  position: sticky;<br></br>  top: 0px;<br></br>}<br></br>

結論

シンプルで一流のメニューを備えたサイトの場合、スティッキーメニューがユーザーナビゲーションを強化します。ただし、ヘッダー要素の下の大きなメニューまたはメニューは、スクリーンの職業を過度に引き起こし、ユーザーエクスペリエンスに悪影響を与える可能性があります。 決定は特定のWebサイトのデザインに依存しますが、スティッキーメニューを追加することは予想よりも簡単です。

以上がWordPressで粘着性メニューを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。