エレメンターページビルダーでオフキャンバスメニューを作成する - WordPress 情報パッケージ
ベストセラー人気 WordPress テーマTop 30 詳細

エレメンターページビルダーでオフキャンバスメニューを作成する

Last Updated:2022年4月14日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

WordPress 人気ページビルダーであるエレメンターはオフキャンバスメニュー機能を提供しませんが、プラグインを使用するか、エレメンタープロのポップアップビルダーを使用してオフキャンバスメニューを実装できます。

エレメンターページビルダーでオフキャンバスメニューを作成する

WordPress テーマやプラグインには「オフキャンバス」という用語がよく使われます。 オフキャンバス(Off canvas)についてグーグルしてみると、「ビューポートの左、右、または下部に表示されるJavaScriptに切り替えられるサイドバーコンポーネント」と説明されています。

Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport.

Elementorではオフキャンバスメニュー(フライアウトメニュー)機能は提供していませんが、 エレメンプロのポップアップビルダーを利用してオフキャンバスメニューを作成できます。

エレメントポップアップビルダーでオフキャンバスメニューを作成する

次の順序でエレメントでオフキャンバスメニューを作成できます。

  1. エレメンタープロを有効にして テンプレート>ポップアップで新しいポップアップを作成します。
  2. ポップアップを最初から作成することもできますが、ライブラリからお気に入りのポップアップテンプレートをロードして修正すると便利です。 オフキャンバスメニューレイアウトのテンプレートを選択して変更できます。
  3. ポップアップテンプレートで適切な場所にメインナビゲーションを追加し、他の要素を追加するようにします(例:画像)。
  4. テンプレート>テーマビルダー> Headerでヘッダーテンプレートを作成するか、既存のヘッダーテンプレートを編集します。
  5. メインナビを削除し、代わりに ボタン 要素を追加します。
  6. ボタンの外観をハンバーガーメニューアイコンに変更し、リンクに動的タグを選択します。 その後、 Actions > Popupを選択してポップアップテンプレートを指定します。

その後、上の画像のようにハンバーガーメニューをクリックするとオフキャンバスメニューが表示され、閉じるボタンをクリックするとメニューが閉じます。

基本的な概念はボタンをクリックするとポップアップが表示される機能を応用したもので、ボタン形状をハンバーガーアイコンに設定し、ボタンリンクフィールドで動的タグを選択してから Actions > Popupを選択してポップアップテンプレートを指定します。

エレメンターページビルダーでオフキャンバスメニューを作成する

エレメンタポップアップ機能の詳細は、「WordPress エレメンターページビルダーポップアップの作成」を参照してみてください。

下にスクロールするとヘッダーを非表示にし、上にスクロールするとヘッダーを表示する

そして、上の画像でマウスを下にスクロールするとヘッダーが隠され、マウスを上にスクロールするとヘッダーが表示される機能が適用されています。 この機能は数年前 ミディアム(Medium)という有名なオンラインパブリッシングプラットフォームで使用されたもので、今は使用されていません。 このように画面を下にスクロールするときにヘッダーを非表示にすると、訪問者が記事を読むことに集中できるという利点があるようです。

これらのスクロール機能を実装するにはJavaScriptを使用する必要があります。 Diviテーマのメニューがミディアムのように機能する方法をこのブログで紹介したことがあります。

次のjsfiddleサイトで共有されているコードを適用できます。

エレメンタで応用する方法について別の記事でまとめてみましょう。

参照



コメントを残す

コメント