WordPressブログにレスポンシブメニューを作成しますか？

最近では、モバイルユーザーがデスクトップユーザーを上回っています。応答性の高いモバイルメニューを追加すると、ユーザーがWebサイトを簡単にナビゲートできるようになります。

このチュートリアルでは、WordPressでレスポンシブメニューを簡単に作成する方法を紹介します。

しかし、前に、WordPressをインストールしたことがない場合は、 WordPressにインストールするプラグインの数. et あなたのブログにワードプレスのテーマを、見つけインストールしてアクティブにする方法

それから私たちがここにいる理由に戻りましょう。

ここでは、初心者向けのプラグインを使用した方法と上級ユーザー向けのコーディング方法の両方を示して、詳細に説明します。

最初の方法：WordPressプラグインでモバイルメニューを作成する

この方法は、特別なコーディングスキルを必要としないため、初心者にとってより簡単で推奨されます。

このメソッドでは、メニューを作成します（ハンバーガーアイコン付き）モバイル画面上をスライドします。

あなたがする必要がある最初のことはインストールしてアクティブにすることです WordPress ResponsiveMenuプラグイン 。詳細については、 WordPressプラグインのインストール方法に関するガイドをご覧ください .

プラグインを有効にすると、プラグインはメニューに「 レスポンシブメニュー "。それをクリックすると、の設定ページに移動します WordPressのプラグイン.

最初に、モバイルメニューが表示されるサイズを入力する必要があります。デフォルトは800pxで、ほとんどのWebサイトで機能します。

その後、モバイルで使用するメニューを選択する必要があります。

画面の最後のオプションを使用すると、メニューにCSSクラスを指定できます。これにより、プラグインは小さな画面で応答しないメニューを非表示にできます。

«をクリックすることを忘れないでください 更新オプション 設定を保存します。

また、私たちを発見することをお勧めします ブログにメニューを作成する10 WordPressプラグイン

これで、Webサイトにアクセスし、ブラウザー画面のサイズを変更して、レスポンシブメニューの動作を確認できます。

プラグイン« レスポンシブメニュー »レスポンシブメニューの動作と外観を変更できる他の多くのオプションを提供します。プラグインの設定ページでこれらのオプションを調べ、必要に応じて調整できます。

2メソッド：モバイルメニューを手動で追加する方法

モバイル画面にメニューを表示するために使用される最も一般的な方法のXNUMXつは、レバレッジを使用することです。

この方法では、WordPressファイルにカスタムコードを追加する必要があります。

以前のチュートリアルの1つでは、 WordPressプラグインの作成方法.

まず、メモ帳などのテキストエディタを開いて、このコードを貼り付ける必要があります。

（関数（）{nav var = document.getElementById（ 'site-navigation'）、ボタン、メニュー; if（！nav）{return;} button = nav.getElementsByTagName（ 'button'）[0]; menu = nav。 getElementsByTagName（ 'ul'）[0]; if（！button）{return;} //メニューが見つからないか空の場合、ボタンを非表示if（！menu ||！menu.childNodes.length）{button.style.display = 'none'; return;} button.onclick = function（）{if（-1 === menu.className.indexOf（ 'nav-menu'））{menu.className = 'nav-menu';} if（- 1！== button.className.indexOf（ 'toggled-on'））{button.className = button.className.replace（ 'toggled-on'、 ''）; menu.className = menu.className.replace（ 'toggled -on '、' '）;} else {button.className + =' toggled-on '; menu.className + =' toggled-on ';}};}）（jQuery）;

次に、このファイルを「 navigation.js あなたの机の上。

次に、FTPクライアントを開いて、このファイルをWordPress Webサイトの「/ wp-content / themes / your-theme / js /」の場所にダウンロードする必要があります。

式を置き換えます " あなたのテーマ » あなたのフォルダの名前でワードプレスのテーマ現在。テーマディレクトリに js フォルダーがない場合は、作成する必要があります。

JavaScriptファイルをアップロードしたら、次のステップは、WordPressWebサイトがJavaScriptファイルをロードすることを確認することです。次のコードを「」に追加する必要があります。 のfunctions.php " あなたのワードプレスのテーマ.

他の何かを発見する functions.phpファイルで何ができますか？

 wp_enqueue_script（ 'bpc_togglemenu' get_template_directory_uri（） '/js/navigation.js'、配列（」jqueryの '）、20160909'、真。）;

次に、ナビゲーションメニューを追加する必要があります。ワードプレスのテーマ。通常、ナビゲーションメニューは「」に追加されます。 header.phpの WordPressテーマ。

<nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle">Menu</button>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

WordPress テーマで定義されたメニューの場所は「 主要な "。それ以外の場合は、WordPress テーマで定義された場所を使用してください。

最後のステップは、CSSを追加して、メニューがモバイルデバイスで表示されたときに適切なCSSクラスを使用して切り替えるようにすることです。

/* Navigation Menu */
.main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
}
.main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.42857143;
}
.main-navigation a {
    color: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
    color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
    display: none;
}

.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
    display: inline-block;
}

// CSS to use on mobile devices

@media screen and (min-width: 600px) {

.main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        border-bottom: 1px solid #ededed;
        border-top: 1px solid #ededed;
        display: inline-block !important;
        text-align: left;
        width: 100%;
    }
    .main-navigation ul {
        margin: 0;
        text-indent: 0;
    }
    .main-navigation li a,
    .main-navigation li {
        display: inline-block;
        text-decoration: none;
    }
    .main-navigation li a {
        border-bottom: 0;
        color: #6a6a6a;
        line-height: 3.692307692;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .main-navigation li a:hover,
    .main-navigation li a:focus {
        color: #000;
    }
    .main-navigation li {
        margin: 0 40px 0 0;
        margin: 0 2.857142857rem 0 0;
        position: relative;
    }
    .main-navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }
    .main-navigation li ul ul {
        top: 0;
        left: 100%;
    }
    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul,
    .main-navigation .focus > ul {
        border-left: 0;
        clip: inherit;
        overflow: inherit;
        height: inherit;
        width: inherit;
    }
    .main-navigation li ul li a {
        background: #efefef;
        border-bottom: 1px solid #ededed;
        display: block;
        font-size: 11px;
        font-size: 0.785714286rem;
        line-height: 2.181818182;
        padding: 8px 10px;
        padding: 0.571428571rem 0.714285714rem;
        width: 180px;
        width: 12.85714286rem;
        white-space: normal;
    }
    .main-navigation li ul li a:hover,
    .main-navigation li ul li a:focus {
        background: #e3e3e3;
        color: #444;
    }
    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_ancestor > a {
        color: #636363;
        font-weight: bold;
    }
    .menu-toggle {
        display: none;
    }
    
    }

これで、Webサイトにアクセスしてブラウザ画面のサイズを変更し、レスポンシブメニューが切り替わるかどうかを確認できます。

プレミアムWordPressプラグインもご覧ください

他にも使えます WordPressのプラグインモダンな外観を与え、ブログやウェブサイトの取り扱いを最適化します。

ここでは、そのためのプレミアムWordPressプラグインを提供しています。

1。 UberMenu

ウーバーメニューは WordPressのプラグイン高度にカスタマイズ可能で、レスポンシブで、ユーザーがアクセスできるメガメニューの作成に専念しています。インストール後は、特別な構成を必要とせずに機能します。

これは使いやすいプラグインですが、高度にカスタマイズ可能でクリエイティブなメガメニューレイアウトを作成するのに十分強力です。

こちらもご覧ください ブログで価格グリッドを作成する9つのWordPressプラグイン

とりわけ、3つのメニューテンプレート、完全に応答性の高いレイアウト、モバイルデバイス（iPhone、iPad、Android）との互換性、タッチサポートなどがあります...

ダウンロード | デモ | ウェブホスティング

2。 LMM

LMM とも呼ばれる Liquida Mega Menu は、 WordPressのプラグインユーザーと開発者向けに設計されています。 WP ダッシュボードに統合されたシンプルで直感的なインターフェイスを備えており、プログラミングのスキルがなくても無制限のメガメニューを作成およびカスタマイズできます。

通常のユーザーでも上級ユーザーでも、数十の機能が付属しています。機能として、それはとりわけ提供します：自動および手動統合、 マルチサイトのサポート, 子供たちのテーマの世話をする、メニューの完全にカスタマイズ可能なスタイル、カスタマイズ可能なメニューの場所、スティッキーメニューなど…

ダウンロード | デモ | ウェブホスティング

3。 8Degree Flyメニュー

8Degree Fly MenuはプレミアムWordPressプラグインで、ウェブサイトにキャンバスメニューを追加して、情報を強調し、簡単に表示できるようにします。デフォルトのWordPressメニュー機能を使用してメニューを作成します。

アイコン、メニュースローガン、擬似グループヘッダー、長い説明など、追加の要素をデフォルトのメニュー項目に追加できます。

また読みます： サイドバーとスティッキーヘッダーを最適化する10個のWordPressプラグイン

また、WYSIWYGエディターが付属しており、長い説明をユーザーフレンドリーな方法で把握するのに役立ちますこのエディターでは、ショートコードも使用できます。

ダウンロード | デモ | ウェブホスティング

その他の推奨リソース

また、以下のリソースを参照して、Webサイトとブログの把握と管理をさらに進めてください。

まとめ

そう！このチュートリアルは以上です。モバイルユーザー向けのメニューを作成できるようになることを願っています。お気軽に ソーシャルネットワークで友達とヒントを共有する.

しかし、あなたも私たちに相談することができます ressources、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログの作成。

しかし、それまでの間、あなたについて教えてください commentaires 専用セクションの提案。

...

類似したアイテム

2コメント

ミシェルロスタニ 14年2018月10日56時間XNUMX分

ボンジュール

あなたの情報をありがとう

「メニューのCSSクラス」が見つからないようです。 cssスタイルシートを見つけましたが、何をコピーして貼り付けるかわかりません

よろしくお願いします

良い週末

ミシェル
返事
- ティエリー・ベルトラン 16年2018月11日40時間XNUMX分
  
  お疲れ様です
  
  スクリーンショットはありますか？
  返事

コメントを投稿 Annulerラréponse

このサイトでは、望ましくないものを減らすためにAkismetを使用しています。コメントデータの使用方法の詳細.

WordPressでレスポンシブモバイルメニューを作成する方法

最初の方法：WordPressプラグインでモバイルメニューを作成する

2メソッド：モバイルメニューを手動で追加する方法

プレミアムWordPressプラグインもご覧ください

ここでは、そのためのプレミアムWordPressプラグインを提供しています。

1。 UberMenu

2。 LMM

3。 8Degree Flyメニュー

その他の推奨リソース

まとめ

私はこれが好き：

類似したアイテム

2コメント

コメントを投稿 Annulerラréponse

カテゴリー

ラチーム

ガイド

テーマ

プラグイン

資源

WordPressでレスポンシブモバイルメニューを作成する方法

最初の方法：WordPressプラグインでモバイルメニューを作成する

2メソッド：モバイルメニューを手動で追加する方法

プレミアムWordPressプラグインもご覧ください

ここでは、そのためのプレミアムWordPressプラグインを提供しています。

1。 UberMenu

2。 LMM

3。 8Degree Flyメニュー

その他の推奨リソース

まとめ

この記事を共有する：

私はこれが好き ：

類似したアイテム

2コメント

コメントを投稿 Annulerラréponse

カテゴリー

私はこれが好き：