WordPressでレスポンシブナビゲーションメニューを作成する方法
公開: 2021-07-22WordPressでレスポンシブなナビゲーションメニューを作成する道は自由です。 WordPressが提供する柔軟性のおかげで、これを行う方法は無数にあります。
今日は、無駄のない、平均的な応答性の高いナビゲーションメニューを作成する方法を紹介します。 これらすべてを8キロバイト未満で達成するため、そしてそれが信じられないほど効率的なナビゲーションメニューになるためです。 2つの異なるナビゲーションメニューを維持する必要がないように、現在のナビゲーションメニューをミラーリングするだけです。 1つの石で2羽の鳥を殺すことで、すべてを支配する1つのメニューを作成します。
始める前に、フロントエンド開発の基本的な知識があることをお勧めします。 （習熟度は必要ありません。慌てる必要はありません。）基本的なHTML、CSS、jQuery、およびWordPressの知識が理想的です。 これは、WordPressテーマファイルの変更を伴うため、初級から中級のチュートリアルです。
また、次のWordPressテーマファイルにアクセスする必要があります。
-
functions.php -
header.php -
footer.php -
Style.css
変更を加える前に、必ずサイトのバックアップを実行するか、ローカル環境で変更をテストしてください。 元のファイルに戻す方法が常に必要です。
画面外のスライドパネルを作成するための小さなjQueryプラグインであるbigSlide.jsを使用します。 プラグインのWebサイトでは、「画面外のスライドパネルナビゲーションを作成するための小さな（〜1kb圧縮）jQueryプラグイン」と説明されています。 これは、無駄のない平均的な応答性の高いナビゲーションの目標に沿ったものです。
仕事に取り掛かりましょう。
1.bigSlide.jsの最新の圧縮バージョンをダウンロードします。 ファイルをテーマの/jsフォルダーにコピーします。
2.お好みのコードエディタでfunctions.phpを開きます。 wp_enqueue_scriptを検索します。 wp_enqueue_scriptはWordPressにスクリプトを追加する標準的な方法であるため、複数のインスタンスが表示される可能性があります。
3. wp_enqueue_scriptの最後のインスタンスの直後に、次のスニペットを追加して保存します。
wp_enqueue_script( 'my-responive-menu', get_template_directory_uri() . '/js/bigSlide.min.js', array(), '20161214', true ); 4. header.phpを開き、bodyタグの直後の最初のdivにクラスpushを追加します。 このセクションは通常、次のようになります。
<body <?php body_class(); ?>><div class="hfeed site">.したがって、追加した後は、次のようになります。
<div class="hfeed site push">. 5.まだheader.php内にいる間に、 site-navigationを検索します。 これは、テーマに応じてクラスまたはIDのいずれかになります。 ほとんどのWordPressテーマでは、次のようになります。
&amp;amp;amp;amp;amp;amp;lt;nav class="site-navigation primary-navigation" role="navigation"&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array( 'theme_location' =&amp;amp;amp;amp;amp;amp;gt; 'primary', 'menu_class' =&amp;amp;amp;amp;amp;amp;gt; 'nav-menu', 'menu_id' =&amp;amp;amp;amp;amp;amp;gt; 'primary-menu' ) ); ?&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;/nav&amp;amp;amp;amp;amp;amp;gt; 6. </nav>の直前に次のスニペットを追加します。 あなたはこれで終わるはずです：
&amp;amp;amp;amp;amp;amp;lt;nav class="site-navigation primary-navigation" role="navigation"&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array( 'theme_location' =&amp;amp;amp;amp;amp;amp;gt; 'primary', 'menu_class' =&amp;amp;amp;amp;amp;amp;gt; 'nav-menu', 'menu_id' =&amp;amp;amp;amp;amp;amp;gt; 'primary-menu' ) ); ?&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;a href="#responsive-menu" class="menu-link"&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;#9776;&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;/nav&amp;amp;amp;amp;amp;amp;gt;ここでは、モバイルメニューをトリガーするために使用されるハンバーガーアイコンを作成しています。
7. footer.phpを開き、 <?php wp_footer(); ?>を検索します。 <?php wp_footer(); ?> 。 この行の直後に、次のスニペットを追加します。
&amp;amp;amp;amp;amp;amp;lt;div class="panel mobile-menu"&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array('theme_location' =&amp;amp;amp;amp;amp;amp;gt; 'primary',) );?&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;script&amp;amp;amp;amp;amp;amp;gt; jQuery('.menu-link').bigSlide({ menu: '.mobile-menu', speed: 300, side:"right", easyClose:true});&amp;amp;amp;amp;amp;amp;lt;/script&amp;amp;amp;amp;amp;amp;gt;基本的に、フッターに非表示の重複ナビゲーションメニューを作成しています。
8.最後に、 style.cssを開き、最後の行の直後に次のコードスニペットを追加します。
.panel{ position: fixed; right: -15.625em; width: 15.625em; background:#222;} .push{position:relative;} .menu-link{display:none;color:#fff;background:#333;border-radius:4px;padding:2px 12px;float:right;} .mobile-menu a{display:block;color:#fff;padding:10px 15px;} .mobile-menu a:hover{background-color:#555;} .mobile-menu li{border-bottom:1px #444 solid;} @media only screen and (max-width:900px) { #primary-menu{display:none;} .mobile-menu #primary-menu{display:block;} .menu-link{display:inline-block;} }ここでは濃い配色を使用していますが、必要に応じて色を自由に変更してください。
このアプローチは、ほぼすべての標準的なWordPressテーマで機能します。 ただし、ユースケースやヘッダーレイアウトが異なるため、いくつかの調整が必要になる場合があります。
最終的に、基本は同じままです。 理論的根拠は、900px以下の画面サイズでは、デフォルトのメインナビゲーションを非表示にし、代わりにハンバーガーアイコンを表示することです。
ハンバーガーアイコンをクリックまたはタップすると、フッターに複製したメニューがサイドパネルのようなアプリとして開きます。
万が一行き詰まった場合は、下にコメントを残してください。 喜んでお手伝いさせていただきます。 ハッピーコーディング！