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

モバイル対応のWordPressメニューを作成しますか?多くのウェブサイトで、モバイルユーザーはすでにデスクトップユーザーを上回っています。モバイルレスポンシブメニューを追加すると、ユーザーがウェブサイト内を移動しやすくなります。この記事では、モバイル対応のレスポンシブWordPressメニューを簡単に作成する方法を紹介します.


モバイル対応のWordPressメニューを作成する

これは詳細なチュートリアルです。初心者向けのプラグインメソッド(コーディングなし)と上級者向けのコーディングメソッドの両方を示します.

このチュートリアルの終わりまでに、スライドインモバイルメニュー、ドロップダウンモバイルメニュー、トグルモバイルメニューを作成する方法を学びます.

準備はいい?始めましょう.

ビデオチュートリアル

WPBeginnerを購読

ビデオが気に入らない、またはさらに説明が必要な場合は、読み続けてください.

方法1:プラグインを使用してWordPressにレスポンシブメニューを追加する

この方法は簡単で、カスタムコーディングを必要としないため、初心者に推奨されます.

この方法では、モバイル画面でスライドするハンバーガーメニューを作成します.

レスポンシブメニュープラグインのデモ

最初に行う必要があるのは、レスポンシブメニュープラグインをインストールしてアクティブにすることです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。.

プラグインはアクティブ化されると、「レスポンシブメニュー」というラベルの付いた新しいメニュー項目をWordPress管理バーに追加します。クリックするとプラグインの設定ページが表示されます.

レスポンシブメニュー設定

まず、画面の幅を入力する必要があります。この時点で、プラグインがレスポンシブメニューを表示し始めます。デフォルト値は800pxで、ほとんどのWebサイトで機能します.

その後、レスポンシブメニューに使用するメニューを選択する必要があります。メニューをまだ作成していない場合は、次のURLから作成できます。 外観»メニュー. 詳細な手順については、WordPressにナビゲーションメニューを追加する方法に関するガイドを参照してください.

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

「Update Options」ボタンをクリックして設定を保存することを忘れないでください.

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

レスポンシブメニュープラグインのデモ

レスポンシブメニュープラグインには、レスポンシブメニューの動作や外観を変更できる他の多くのオプションが付属しています。プラグインの設定ページでこれらのオプションを探索し、必要に応じて調整できます.

方法2:プラグインを使用してドロップダウン選択メニューを追加する

レスポンシブメニューを追加する別の方法は、ドロップダウン選択メニューを追加することです。この方法はコーディングのスキルを必要としないため、初心者にお勧めです.

レスポンシブセレクトメニュー

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

アクティベーション時に、あなたは訪問する必要があります 外観»レスポンシブセレクト プラグイン設定を構成する.

メニュー設定を選択

[テーマの場所を有効にする]セクションまで下にスクロールする必要があります。デフォルトでは、プラグインはすべてのテーマの場所でアクティブ化されます。特定のテーマの場所に対して選択的にオンにすることで変更できます.

変更を保存するには、必ず[すべての設定を保存]ボタンをクリックしてください.

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

方法3:トグル効果のあるモバイルフレンドリーなレスポンシブメニューを作成する

モバイル画面にメニューを表示するために最も一般的に使用される方法の1つは、トグル効果を使用することです.

この方法では、WordPressファイルにカスタムコードを追加する必要があります。これまでに行ったことがない場合は、WordPressでのウェブからのスニペットの貼り付けに関するガイドをご覧ください。.

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

( 関数() {
var nav = document.getElementById( ‘site-navigation’)、ボタン、メニュー;
if(!nav){
戻る;
}

button = nav.getElementsByTagName( ‘button’)[0];
menu = nav.getElementsByTagName( ‘ul’)[0];
if(!ボタン){
戻る;
}

//メニューがないか空の場合はボタンを非表示.
if(!menu ||!menu.childNodes.length){
button.style.display = ‘none’;
戻る;
}

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’、 ”);
} そうしないと {
button.className + = ‘トグルオン’;
menu.className + = ‘トグルオン’;
}
};
})(jQuery);

今、あなたはこのファイルをあなたのデスクトップにnavigation.jsとして保存する必要があります.

次に、FTPクライアントを開いて、このファイルをWordPressサイトの/ wp-content / themes / your-theme-dir / js /フォルダーにアップロードする必要があります。.

your-theme-directoryを現在のテーマのディレクトリに置き換えます。テーマディレクトリにjsフォルダーがない場合は、作成する必要があります。.

JavaScriptファイルをアップロードしたら、次のステップは、WordPressサイトがこのJavaScriptを確実にロードするようにすることです。次のコードをテーマのfunctions.phpファイルに追加する必要があります.

wp_enqueue_script( ‘wpb_togglemenu’、get_template_directory_uri()。 ‘/js/navigation.js’、array( ‘jquery’)、 ‘20160909’、true);

次に、ナビゲーションメニューをWordPressテーマに追加する必要があります。通常、ナビゲーションメニューはテーマのheader.phpファイルに追加されます.

メニュー
<?php wp_nav_menu(array( ‘theme_location’ => ‘primary’、 ‘menu_class’ => ‘nav-menu’)); ?>

テーマによって定義されたテーマの場所をプライマリと呼びます。そうでない場合は、WordPressテーマで定義されたテーマの場所を使用します.

最後のステップは、CSSを追加して、モバイルデバイスで表示したときにトグルが機能するために適切なCSSクラスを使用するようにすることです.

/ *ナビゲーションメニュー* /
.メインナビゲーション{
margin-top:24px;
margin-top:1.714285714rem;
text-align:中央;
}
.メインナビゲーションli {
margin-top:24px;
margin-top:1.714285714rem;
font-size:12px;
font-size:0.857142857rem;
行の高さ:1.42857143;
}
.メインナビゲーションa {
色:#5e5e5e;
}
.メインナビゲーションa:hover,
.main-navigation a:focus {
色:#21759b;
}
.メインナビゲーションul.nav-menu,
.メインナビゲーションdiv.nav-menu > ul {
表示:なし。
}

.main-navigation ul.nav-menu.toggled-on,
.メニュー切り替え{
表示:インラインブロック;
}

//モバイルデバイスで使用するCSS

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

.メインナビゲーションul.nav-menu,
.メインナビゲーションdiv.nav-menu > ul {
border-bottom:1px solid #ededed;
border-top:1px solid #ededed;
表示:インラインブロック!重要;
text-align:左;
幅:100%;
}
.メインナビゲーションul {
マージン:0;
テキストインデント:0;
}
.メインナビゲーションli a,
.メインナビゲーションli {
表示:インラインブロック;
text-decoration:なし。
}
.main-navigation li a {
border-bottom:0;
色:#6a6a6a;
行の高さ:3.692307692;
テキスト変換:大文字;
空白:nowrap;
}
.メインナビゲーションli a:hover,
.メインナビゲーションli a:focus {
色:#000;
}
.メインナビゲーションli {
マージン:0 40px 0 0;
マージン:0 2.857142857rem 0 0;
位置:相対;
}
.main-navigation li ul {
マージン:0;
パディング:0;
位置:絶対;
上:100%;
z-index:1;
高さ:1px;
幅:1px;
オーバーフロー:非表示。
クリップ:rect(1px、1px、1px、1px);
}
.main-navigation li ul ul {
上:0;
左:100%;
}
.メインナビゲーションul li:hover > ul,
.main-navigation ul li:focus > ul,
.メインナビゲーション.focus > ul {
border-left:0;
クリップ:継承;
オーバーフロー:継承;
高さ:継承;
幅:継承;
}
.メインナビゲーションli ul li a {
背景:#efefef;
border-bottom:1px solid #ededed;
表示ブロック;
font-size:11px;
font-size:0.785714286rem;
行の高さ:2.181818182;
パディング:8px 10px;
パディング:0.571428571rem 0.714285714rem;
幅:180px;
幅:12.85714286rem;
空白:通常;
}
.main-navigation li ul li a:hover,
.main-navigation li ul li a:focus {
背景:#e3e3e3;
色:#444;
}
.メインナビゲーション.current-menu-item > a,
.メインナビゲーション.current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > {
色:#636363;
font-weight:太字;
}
.メニュー切り替え{
表示:なし。
}

}

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

メニューのプレビューを切り替え

トラブルシューティング: WordPressテーマによっては、CSSの調整が必要になる場合があります。要素検査ツールを使用して、テーマとのCSSの競合を把握します.

方法4:WordPressでスライドインモバイルメニューを追加する

モバイルメニューを追加するもう1つの一般的な方法は、スライドインパネルメニューを使用することです(方法1を参照)。.

方法4では、WordPressテーマファイルにコードを追加する必要があります。これは、方法1と同じ結果を得る別の方法にすぎません.

まず、メモ帳などのプレーンテキストエディターを開き、次のコードを空のテキストファイルに追加する必要があります.

(関数($){
$( ‘#toggle’)。toggle(
関数() {
$( ‘#popout’)。animate({left:0}、 ‘slow’、function(){
$( ‘#toggle’)。html( ‘閉じる‘);
});
},
関数() {
$( ‘#popout’)。animate({left:-250}、 ‘slow’、function(){
$( ‘#toggle’)。html( ‘閉じる‘);
});
}
);
})(jQuery);

example.comを独自のドメイン名に置き換え、your-themeを実際のテーマディレクトリに置き換えることを忘れないでください。このファイルをslidepanel.jsとしてデスクトップに保存します.

ここで、メニューアイコンとして使用される画像が必要になります。ハンバーガーアイコンは、メニューアイコンとして最も一般的に使用されます。さまざまなWebサイトからこのような画像が大量に見つかります。 Google Material Iconsライブラリのメニューアイコンを使用します.

使用したい画像が見つかったら、menu.pngとして保存します。.

次に、FTPクライアントクライアントを開き、slidepanel.jsファイルを/ wp-content / your-theme / js /フォルダーにアップロードする必要があります.

テーマディレクトリにJSフォルダーがない場合は、titを作成してファイルをアップロードする必要があります.

その後、menu.pngファイルを/ wp-content / themes / your-theme / images /フォルダーにアップロードする必要があります.

ファイルをアップロードしたら、追加したJavaScriptファイルがテーマに読み込まれるようにする必要があります。 JavaScriptファイルをエンキューすることでこれを実現します.

このコードをテーマのfunctions.phpファイルに追加します.

wp_enqueue_script( ‘wpb_slidepanel’、get_template_directory_uri()。 ‘/js/slidepanel.js’、array( ‘jquery’)、 ‘20160909’、true);

次に、ナビゲーションメニューを表示するために、テーマのheader.phpファイルに実際のコードを追加する必要があります。次のようなコードを探す必要があります。

<?php wp_nav_menu(array( ‘theme_location’ => ‘primary’、 ‘menu_class’ => ‘nav-menu’)); ?>

既存のナビゲーションメニューをHTMLコードでラップして、スライドパネルメニューを小さな画面に表示したい.

公演

<?php wp_nav_menu(array( ‘theme_location’ => ‘primary’、 ‘menu_class’ => ‘nav-menu’)); ?>

テーマのナビゲーションメニューがまだあることに注意してください。スライドパネルメニューをトリガーするために必要なHTMLをラップしました.

最後のステップは、CSSを追加して、大きな画面でメニュー画像アイコンを非表示にすることです。メニューアイコンの位置も調整する必要があります.

以下は、開始点として使用できるサンプルCSSです。

@media screen and(min-width:769px){
#toggle {
表示:なし;
}

}

@media screen and(max-width:768px){
#飛び出る {
位置:固定。
高さ:100%;
幅:250px;
背景:rgb(25、25、25);
背景:rgba(25、25、25、.9);
色:白;
上:0px;
左:-250px;
オーバーフロー:自動;
}

#toggle {
float:右;
位置:固定。
top:60px;
右:45px;
幅:28px;
高さ:24px;

}

.nav-menu li {
border-bottom:1px solid #eee;
パディング:20px;
幅:100%;
}

.nav-menu li:hover {
背景:#CCC;
}

.nav-menu li a {
色:#FFF;
text-decoration:none;
幅:100%;
}
}

WordPressテーマによっては、競合を回避するためにCSSを調整する必要がある場合があります.

デモWebサイトでの外観は次のとおりです。

WordPressのレスポンシブなスライドインメニュー

この記事が、モバイル対応のレスポンシブなWordPressメニューの作成方法の学習に役立つことを願っています。 WordPressでフルスクリーンのレスポンシブメニューを追加する方法に関するガイドもご覧ください。

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map