WordPress サイドバーのメニューを追加する方法

Last Updated: 2024 年 08 月 16 日 5のコメント

WordPressでサイドバーにメニューを追加したい場合があります。 この場合、ナビゲーションメニュー「ウィジェットを使用できます。」ナビゲーションメニュー「は WordPress バージョンに応じて「ナビゲーションメニュー""カスタムメニュー「などで表示されることがあります。

Avada, Newspaper などの一部のテーマでは、ページ/ポストごとに異なるサイドバーを指定できるオプションが提供されます。 テーマで、このようなオプションが提供される場合は、ページ/ポストに応じて他のナビゲーションメニューを使用することも可能です。

以下の方法を使用して、カスタムメニューまたはカテゴリウィジェットをサイドバーだけでなく、フッタや目的の場所に追加できます。 エレメンページビルダーを使用している場合は、「サイドバー」ウィジェットを使用してウィジェット領域(サイドバーなど)を追加できます。

[この記事を書いた後 WordPress 5.8以降、ブロックウィジェットが導入されました。 ブロックウィジェットの内容を追加して再発行しました。 ]

WordPress サイドバーのユーザーメニューを追加する方法

まず、 外観(外観、デザイン)»メニューに移動し、サイドバーに表示するメニューを一つ作るようにします。

WordPressでメニューを作成する

外観 » ウィジェットに移動します。

ブロックウィジェットインターフェース(WordPress 5.8以上)

WordPressがバージョン5.8にアップデートされたとき ブロックウィジェットが導入されました。 ブロックウィジェットを使用するメニューを追加したいウィジェット領域(サイドバー、フッタなど)で ブロックを追加(プラス) アイコンをタップして「ナビゲーションメニュー」を検索し、「ナビゲーションメニュー」を選択します。

WordPress ナビゲーションメニュー

ナビゲーションメニューが追加されたら、タイトルを入力して メニュー選択で先に作成したメニューを指定できます。

カスタムメニュー位置はマウスでドラッグして移動できます。

クラシックウィジェットインターフェース(WordPress 5.8未満バージョン)

WordPress 5.8以降のバージョンを使用していない場合(つまり、 WordPress 5.7。 x 以下のバージョンを使用する場合) 既存のウィジェットインタフェースが提供されます。 WordPress 5.8以降を使用している場合でも、クラシックウィジェットプラグインをインストールして古典的なウィジェット画面に復元できます(」WordPress クラシックウィジェット画面を復元する - Classic Widgetsプラグイン(ブロックウィジェットを無効にする)「注)。 Avada など、いくつかのテーマでも古典的なウィジェットインターフェイスが提供されています。

新しいブロックウィジェットインターフェースに慣れていない場合は、古典ウィジェットプラグインをインストールして古典ウィジェット画面に戻すことができます。 このプラグインは少なくとも2022年まで(必要な場合は拡張可能)サポートされているそうです。 私は既存のウィジェットを削除し、ブロックウィジェットに置き換えました。

外観 » ウィジェットに移動します。 (WordPress バージョンに応じて「모양「銀 デザイン, ルックス, テーマのデザイン などに翻訳されています。 WordPress 6.6.1バージョンからは「形が最終的に使われています。)

WordPress サイドバーのメニュー

"ナビゲーションメニューウィジェット(または WordPress バージョンに応じて「ナビゲーションメニューウィジェットをサイドバーやフッターなど、必要なウィジェット領域に追加します。ウィジェットをドラッグしてサイドバーの任意の場所に配置できます。

WordPress サイドバーにメニューを追加する

サイドバーに追加された ナビゲーションメニュー ウィジェットのメニューを選択します。 メニュー選択でサイドバーに追加するメニュー(例:sidebar)を選択することができます。

保存して、サイトを確認してみると、サイドバーのメニューが追加されていることを確認することができます。

WordPress サイドバーのメニュー

サイドバーに表示されるメニューのレイアウトは、テーマによって異なります。 上の図は、Twenty Seventeenテーマでサイドバーのカスタマイズメニューを追加したときの形状を示しています。

スタイルが気に入らない場合は、CSSを使用して調整します。

サイドバー/フッタにカテゴリリストを表示する

サイドバーを自動的にカテゴリのリストを表示する場合には、 カテゴリ ウィジェットを使用します。

WordPress カテゴリーウィジェット
ブロックウィジェットインターフェース(WordPress 5.8以上)

クラシックウィジェット画面でもカテゴリウィジェットを選択してサイドバーやフッターなどに追加したり、ウィジェットをドラッグして好きな場所に配置したりできます。

WordPress カテゴリーウィジェット
クラシックウィジェットインターフェース(WordPress 5.7.x以下)

カテゴリーウィジェットをドロップダウン方式で表示するには、 「ドロップダウン方式で表示」をチェックします。

WordPress カテゴリーウィジェット

表示文数をチェックすると、投稿数が表示されます。 たぶん「文数表示」を間違って翻訳したようです。

カテゴリーウィジェットの代わりにナビゲーションメニューを使用すると、カテゴリが表示される順序を自由に指定することができます。

別の方法として Dynamicdriveというサイトで提供されるメニューのソースコードを利用することができます。 例えば、カスタムHTMLウィジェットを使用してHTMLコードを追加することができます。

カスタムHTMLウィジェット

CSSコードは この記事を参考にして追加することができます。

エレメンターページビルダーで好きな場所にカスタムメニューを追加する

エレメンページビルダーの場合 Elementorで提供される サイドバー 要素を使用できます。 次のような手順で進めるだけです。

  1. まず、 形状 » メニューでカスタムメニューを作成します。
  2. 外観 » ウィジェットで、目的のウィジェット領域にカスタムメニューを追加します(ナビゲーションメニューウィジェットを使用)。
  3. エレメント編集画面で サイドバー ウィジェットを目的の場所に追加し、サイドバー(ウィジェット領域)を指定します。

サイドバー要素は ウィジェット検索 ウィンドウで「サイドバー」で検索できます。

エレメントページビルダーサイドバーウィジェット

サイドバー ウィジェットを目的の場所にドラッグアンドドロップしてから、カスタムメニューを含むサイドバー(ウィジェット領域)を指定します。

他の方法:カスタムHTMLを使用する

別の方法でHTMLとCSSコードを使用してメニューを作成してサイドバーに追加することもできます。 カスタムHTML ブロックを追加し、htmlコードを追加し、CSSは 外観 » カスタマイズ » 追加 CSSに追加するだけです。

たとえば、Chat GPTを使用して目的のメニューデザインのHTML / CSSを要求して作成し、HTMLコードはブロックウィジェットで カスタムHTML ブロックに追加し、CSSは カスタマイズするに追加してください。

基本的なCSSを理解すれば、好きなスタイルのメニューを作ることができるでしょう。

ページごとに異なるサイドバーを設定する

ページごとに異なるサイドバーを設定したい場合があります。 Avada などのテーマを使用する独自のテーマオプションを介してこれらの機能を提供します。

GeneratePress テーマを使用している場合は、ページ/投稿編集画面のサイドバーレイアウトで別のサイドバーを指定できます。

別々のウィジェット領域を作成して指定することも、Content Aware Sidebarsというプラグインを使用することもできます。

新しいウィジェット領域を作成したい場合は、次の記事を参照してください。

メモ:

作者のアバター

ワードクラッカーはプロの英国翻訳家として活動しており、10年以上 WordPress 関連情報を提供する WordPress 情報パッケージのブログを運営している。また、 'WordPressを使用している人 Naver カフェも管理している。

5のコメント

コメント

  1. ありがとうございます。 少しずつ知っていく中ではあるがWP用語やシステムなど適応するのが容易でないのですね。
    同じナビゲーションメニューの2つのサイトに表示される方式が違うのはどのような理由なのでしょう。
    一方では、メニュー、ドロップダウンにならず、他の側ではされます。
    また、縦と横の配置の方法も違いがあります。
    二つのサイトのアドレスを添付しました。 また、支援お願いします。

    応答
    • 最初のURLは、メニュー部分が正常に動作していないものと見えますね。

      プラグインをすべて無効にした後に正しく表示されるテストしてみてください。
      よくないと、テーマ開発者にサポートを依頼試みることができるでしょう。

      応答
      • ありがとうございます:)

        Elementorに問題がありますね。
        フォーラムに入ってみると似たような場合には、あって、プラグインのサポートチームにお問い合わせしよう
        他のナビゲーションメニューのプラグインで解決しようとします。
        プラグインをたくさん敷く重くなるし、オフカットされた文盲である私は簡単な道を行くことのようです。

  2. 詳細説明よく読みました。
    ところがBevroテーマでは、このようなメニューの作成ができないゴトインジヨ。
    そのまま真似してみましたが、サイトでは全く見えません。
    Appearance - > Menusには、作業内容がいますよ。

    応答
カカオトーク相談 カトクサービス相談