WordPress ウェブサイトのメインナビゲーション用のスティッキーメニューを作成する方法を学びましょう。スティッキー メニューは、サイト訪問者が Web サイトのメニューをより簡単に利用できるようにすることで、ユーザー エクスペリエンスの向上に役立ちます。さらに、サイト全体の外観を改善するのにも役立ちます。さあ、始めましょう！
1. サイトエディターに移動します。
このプロセスの最初のステップは、WordPress 管理エリア内の「サイト エディター」に移動することです。 WordPress バージョン 5.9 以降を使用している場合、サイト エディターは WordPress の「ブロック テーマ」で使用できます。
サイトエディターに移動するには、次の場所に移動します。 外観>エディター (上の画像の赤い矢印) WP 管理エリアのメイン ナビゲーションから。
画面の右側にあるメイン コンテンツ領域 (上の画像では水色の枠で囲まれ、青い矢印で示されています) をクリックします。これにより、サイト エディター内のブロック エディターが表示されます。
右側の [ページ] タブの下に、[テンプレート] というラベルの行が表示されます (上の画像では青で囲まれています)。テンプレート名/リンク (赤い矢印) をクリックします。次に、「テンプレートの編集」をクリックします (緑色の矢印 – 「テンプレートの編集」は、テンプレート名が表示されるドロップダウンの下にある小さな青いテキストのリンクである場合があります)。
2. テンプレートを編集する
これで、Web サイトのホームページのテンプレート エディターが表示されます。 (サイトにホームページが設定されていない場合は、 WordPress Web サイトの静的ホームページの設定に関するこのチュートリアル).
テンプレートの上部にはページのメイン ナビゲーションがあり、Web ページの「ヘッダー」とも呼ばれます。この要素の上にマウスを置くと、その輪郭を示す紫色のボックスが表示されます (上の画像の赤い矢印)。これは、この要素が 「同期パターン」 つまり、パターンの 1 つのインスタンスに変更を加えると、サイト全体のすべてのインスタンスに変更が適用されます。この領域をクリックして、ヘッダー同期パターンを選択します。
これがサイトのメイン ヘッダー要素である場合、ブロック ツールバーで同期されたパターンに「ヘッダー」というラベルが付いていることがわかります。
3. ヘッダーをグループに追加する
選択したヘッダー パターンのブロック ツールバー内で、「オプション」アイコン (上の画像の赤い矢印) をクリックし、「グループ」(緑の矢印) を選択します。これにより、同期されたパターンがグループ ブロックにネストされます。
ブロック ツールバーにグループ ブロック アイコン (上の画像の青い矢印) が表示され、メイン ナビゲーション領域の周囲の輪郭が紫 (赤い矢印) ではなく青になっていることがわかります。
これにより、メイン ナビゲーション メニューの幅が変更される可能性があることに注意してください。幅を調整するには、ヘッダー同期パターンの上にマウスを置き、クリックして選択します (赤い矢印)。
ヘッダー同期パターンのブロック ツールバーで、[整列] アイコン (緑色の矢印) をクリックし、これを希望の幅 (青色の矢印 - 私の場合は [幅広] を選択しました) に戻します。
グループ ブロックに戻るには、ヘッダー ブロック ツールバーの [グループの選択] アイコン (ピンクの矢印) をクリックします。
4. グループを「Sticky」に設定します。
グループを選択した状態で、画面右側の設定サイドバーの下にある「ブロック」タブに移動します (上の画像の赤い矢印)。
「位置」というラベルの付いたメニュー項目（緑色の矢印）をクリックします。ここに「デフォルト」(ピンクの矢印) というラベルのドロップダウンが表示されます。ドロップダウンをクリックし、「Sticky」オプション (青い矢印) を選択します。
エディターの上部に移動し、「保存」ボタン (赤い矢印) をクリックし、もう一度「保存」をクリックします。これで、WordPress ウェブサイトにスティック メニューのメイン ナビゲーションが追加されました。
5. スティッキーメニューのスタイルを設定する
新しいスティッキー メニューの多くの要素をカスタマイズ/スタイル設定できますが、このチュートリアルでは、メニューが Web ページの幅全体に広がるように、グループ ブロックの後ろに背景を追加するだけです。
これを行うには、グループ ブロックを選択した状態で、設定サイドバーの [スタイル] タブ (上の画像の赤い矢印) に移動します。
「色」で「背景」オプション (青い矢印) をクリックし、白のスウォッチを選択して背景色を白 (緑の矢印) に設定します。
もう一度「保存」を 2 回クリックして変更を保存します。
Web サイトのヘッダーの幅、高さ、間隔は、「サイズ」セクションで「パディング」スライダーと「マージン」スライダーを使用していつでも調整できます。
デバイス アイコン (赤い矢印) をクリックし、[サイトを表示] (緑の矢印) をクリックすると、サイトをプレビューできます。
Web サイトをスクロールすると、上部に固定ナビゲーション メニュー (緑色の矢印) が表示されたままになります。
スティッキー メニューの編集が完了したら、エディターの上部にある「戻る」ボタン (赤い矢印) をクリックします。これにより、サイド エディター内の Web ページに戻ります。
WP 管理エリアに戻るには、左上隅のロゴをクリックするだけです。
このチュートリアルはこれで終わりです。楽しんでいただければ、 Udemyの詳細コースでWordPressを学びましょう。または、他の無料のものもチェックしてください WordPress ビデオチュートリアル と WordPress のヘルプ記事 私のウェブサイトで
