#16 Wordpress theme from scratch | Nav walker class 2 | Quick programming beginner tutorial

Summary

このビデオスクリプトでは、ウェブサイトのメニューを改善する方法が紹介されています。walkerクラスを使用してメニューを作成し、クラスの変更によりメニューの見た目を変更する方法を学びます。レベルや要素の開始と終了に関する関数を理解し、Bootstrapのドロップダウンメニューに合わせてwalkerクラスをカスタマイズします。メニューの階層構造を示すクラスの追加や、リンク属性の変更を行い、メニューの外観を改善します。最後に、ドロップダウンリストの欠如を次のビデオで解決する予定としています。

Takeaways

• 😀 スクリプトは、メニューのデザインを変更し、特定のCSSクラスを変更することで実現する方法を示しています。
• 🛠️ メニューの構造を変更するために、walkerクラスを編集し、クラス名を変更する必要があります。
• 🔄 メニューの階層（レベル）を示すために、start_levelとend_levelの関数が使用されています。
• 📁 階層の深さを設定することで、サブメニューやさらに深いメニュー構造を表示することができます。
• 🔑 stat_element関数は、メニューのエレメント（例えば、アンカータグ）を開く場所を示します。
• 🔍 メニューのエレメントを調査することで、walkerクラスで使用されるクラス名を特定できます。
• 🔄 Bootstrapのドロップダウンメニューを使用するために、walkerクラスで'sub_menu'を'dropdown-menu'に変更する必要があります。
• 🔑 各リストアイテムに'nav-item'クラスを追加することで、Bootstrapのナビゲーションスタイルを適用できます。
• 🔗 'nav-link'クラスをアンカータグに追加することで、メニューアイテムに適切なスタイルを適用します。
• 📝 メニューのエレメントの属性を編集することで、ドロップダウンメニューのような機能を追加できます。
• 🛑 メニューの構造を変更する際には、不要なHTML要素を削除し、必要な構造のみを保持することが重要です。

Q & A

ビデオスクリプトで説明されているwalkerクラスとは何ですか？

walkerクラスは、メニューの表示を担当するクラスであり、メニューの見た目を変更するために使用されます。

walkerクラスを変更することによって何が変わりますか？

walkerクラスを変更することで、メニューの見た目や階層構造、サブメニューの表示などが変わります。

ビデオスクリプトで説明されている'start level'関数とは何を意味していますか？

'start level'関数は、メニューの階層の開始を示すもので、ホームページなどの最初のレベルを表します。

メニューの階層を表す'level'とはどのようなものですか？

メニューの階層は、ホームページを1階層、その下のページを2階層、さらに下のページを3階層としていくことで表されます。

'end level'関数はどのような役割を持っていますか？

'end level'関数は、メニューの階層の終了を示すタグを挿入する役割を持っています。

ビデオスクリプトで紹介されている'stat element'関数は何をしますか？

'stat element'関数は、メニューの各要素の開始タグとクラス名、リストアイテムなどを追加する役割を持っています。

メニューの見た目をBootstrapに合わせるために何を変更する必要がありますか？

メニューの見た目をBootstrapに合わせるためには、'sub menu'クラスを'drop down menu'クラスに変更する必要があります。

リストアイテムに'nav item'クラスを追加する理由は何ですか？

'nav item'クラスを追加することで、Bootstrapのナビゲーションスタイルに合わせてメニューのスタイルを調整することができます。

ビデオスクリプトで説明されている'a'タグの'nav link'クラスは何のために必要なのですか？

'nav link'クラスは、アンカータグのスタイルをナビゲーションリンクに合わせるために必要なクラスです。

ドロップダウンメニューを作成するために必要な属性は何ですか？

ドロップダウンメニューを作成するためには、'drop down toggle'クラスや'href'属性の'#'値などが必要な属性です。

フォームをメニューの中に表示するためにwalkerクラスをどのように変更する必要がありますか？

フォームをメニューの中に表示するためには、walkerクラスの'container'オプションを空の文字列に設定し、フォームをメニューのDOM構造に直接挿入する必要があります。