#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構造に直接挿入する必要があります。

Outlines

00:00

😀 メニューのクラス変更

この段落では、ウェブメニューのデザインを変更する方法について説明しています。walkerクラスを使っているメニューを、新しいデザインに変更するために必要なクラスを紹介します。walkerクラスの複雑さを避けつつ、具体的な変更点に焦点を当てています。メニューの階層（レベル）を示すstart level関数や、階層の終了を示すend level関数、要素の開始と終了を示すstart elementとend element関数について説明しています。また、メニューの深さを制御するdepthパラメータの重要性も触れられています。

05:03

🛠️ メニューアイテムのクラス変更

この段落では、walkerクラス内のメニューアイテムに適用されているクラスを変更する方法について説明しています。メニューアイテムのクラスを'menu-item'から'nav-item'に変更し、サブメニューを正しく表示するために必要な'drop-down-menu'クラスを追加します。また、'a'タグに'nav-link'クラスを適用し、メニューのリンクを正しく機能させる方法も紹介されています。この変更により、メニューの表示が改善され、Bootstrapのスタイルに合わせることができます。

10:05

🔧 ドロップダウンメニューの追加

最後の段落では、ドロップダウンメニューを実装するための手順について説明しています。walkerクラスをカスタマイズして、ドロップダウンメニューの機能を追加する必要があると指摘しています。また、ページの構造を整理し、不要な要素を削除することで、メニューの整合性を保ちながら、必要な形にメニューをカスタマイズする方法も提案されています。このセクションでは、メニューの改善が進行中であり、次のビデオでドロップダウンメニューの実装が完了すると示唆しています。

Keywords

💡walkerクラス

walkerクラスとは、WordPressのテーマ開発において、メニューの表示方法をカスタマイズするためのクラスです。このビデオでは、walkerクラスを変更することで、メニューのデザインを変更するプロセスが説明されています。walkerクラスは、メニューの階層構造を制御する重要な役割を果たしており、ビデオのテーマに密接に関連しています。

💡クラス名

クラス名は、HTMLやCSSで要素を特定するために使用される識別子です。ビデオでは、walkerクラス内のクラス名を変更することで、メニューの外観を調整する方法が紹介されています。例えば、「sub-menu」クラスを「dropdown-menu」に変更することで、ブートストラップスタイルのドロップダウンメニューを実現しています。

💡メニュー階層

メニュー階層とは、ウェブサイトのメニューが持つ階層的な構造のことです。ビデオでは、「start_level」と「end_level」という関数が、メニューの階層を開始したり終了したりするプロセスを制御していることが説明されています。これは、ウェブサイトのメニューがサブメニューやサブサブメニューを持つことができる機能です。

💡ブートストラップ

ブートストラップは、ウェブサイトやアプリケーションの開発を支援する人気のあるCSSフレームワークです。ビデオでは、ブートストラップのクラスを使用して、メニューのスタイルを変更する方法が紹介されています。ブートストラップは、レスポンシブデザインやユーザーインターフェースの作成に役立ちます。

💡ドロップダウンメニュー

ドロップダウンメニューは、ウェブサイトのメニューアイテムを展開して複数のオプションを表示する機能です。ビデオでは、walkerクラスを編集してドロップダウンメニューを作成する方法が説明されています。これは、ユーザーがウェブサイトをナビゲートする際に、より多くの情報にアクセスできるようにするのに役立ちます。

💡メニューアイテム

メニューアイテムは、ウェブサイトのメニューに表示される個々のリンクやオプションです。ビデオでは、「menu_item」クラスを使用してメニューアイテムを特定し、それらに新しいクラスを追加することでスタイルを変更しています。メニューアイテムは、ウェブサイトのナビゲーションの基本的な要素です。

💡属性

属性は、HTML要素に追加の情報を提供するために使用されます。ビデオでは、「a」タグの属性を編集して、メニューのリンクをブートストラップの「nav-link」クラスに合わせる方法が紹介されています。属性は、ウェブサイトの機能性やスタイルをカスタマイズするために不可欠です。

💡リストアイテム

リストアイテムは、HTMLのリスト構造における個々の要素です。ビデオでは、「start_element」関数内でリストアイテムに「nav-item」クラスを追加することで、ブートストラップのナビゲーションスタイルを実装しています。リストアイテムは、メニューの視覚的な並びを形成する要素です。

💡メニューのカスタマイズ

メニューのカスタマイズとは、ウェブサイトのメニューを個々のニーズやスタイルに合わせて変更するプロセスです。ビデオでは、walkerクラスを変更することでメニューの外観をカスタマイズする方法が詳細に説明されています。これは、ウェブサイトのデザインの一貫性を保ち、ユーザー体験を向上させるために重要なステップです。

💡HTML

HTMLは、ウェブページの構造と内容を定義するためのマークアップ言語です。ビデオでは、HTMLの要素と属性を編集して、メニューのデザインを変更する方法が紹介されています。HTMLは、ウェブサイトのビジュアルレイアウトと機能を構築する基盤です。

💡CSS

CSSは、ウェブページのスタイルとデザインを制御するためのスタイルシート言語です。ビデオでは、CSSフレームワークであるブートストラップを使用して、メニューのスタイルを変更しています。CSSは、ウェブサイトの外観をカスタマイズし、視覚的に魅力的にするために使用されます。

Highlights

Walker class is running the menu, and changes are needed to adapt it.

Explanation of the 'start level' function, its role, and the concept of levels in the menu.

Description of the 'end level' function and its purpose in the menu structure.

Details on how the 'start element' function works and how class names and indentations are added.

Identifying the 'sub menu' class in the current structure and the need to replace it with 'drop down menu' from Bootstrap.

Modification of the list items to use the 'nav item' class instead of the default 'menu item' class.

Explanation of how to find and modify the attributes of the 'a' tag to include the 'nav link' class.

Practical steps to add the 'nav link' class to the 'a' tag within the menu structure.

Verification of changes in the browser and ensuring that the class modifications are reflected correctly.

Discussion on the need to remove unnecessary classes and IDs to clean up the code.

Introduction of the 'drop down toggle' class for better drop-down menu functionality.

Steps to handle the form within the menu, ensuring it is correctly positioned and functional.

Ensuring that the 'container' class is appropriately used or removed to maintain structural integrity.

Testing the changes by adding more menus in the admin panel and verifying their appearance.

Closing remarks on the progress made and the next steps for improving the drop-down menu functionality.

Transcripts

hey welcome back guys

so

we have a walker class that is running

the menu right now but we want this menu

to look something like this

and all we want to do to do that what we

need to do to do that is to change the

classes that are here into those

so now the worker class is quite

complicated

and

we don't want to start

learning details of this thing i just

want to show you what to change and

that's it

so here

there are several functions if you can

see here this public function this one

is called stat level so this lvl is

level so start level

now

keep in mind that this is a loop it's a

looping mechanism

so it's a level

let me come back here to show you what

levels are so here this is level one

like the home page and then this is a

child of this and that's level two and

then if this had a child of its own that

would be level three so that's what

those levels are

so that's for starting a level and then

if you scroll down you will see there's

a end level right there okay so this

puts the ending

uh tag so you can see the here it's the

unordered list tag closing part

and then if you look at start level

uh this is where the

ordered list

starting starts from here so this is

where it starts from and then it puts

some class names and then some

indentation here so depending on the

level it will put a depth there so this

depth of zero so this is where you tell

it how deep you want the levels to go if

you wanted to show sub menus and sub sub

sub menus etc that's where the depth

thing comes in

and then from the levels here there's

another function which is stat element

so this is where the element opening

elements are

added so you can see here there are

class names being added

and list items there of course etc etc

so the hrefs and so on and then of

course these end um

where is this this end element

so the only four functions in here is

stat level and level start element end

element so this is the ending list item

okay so just keep that in mind

and then

uh

to begin our thing we just have to look

at what's familiar here and what's

familiar on the menu

so let's go back to the menu and inspect

this menu okay

and i'm going to go to the another list

the beginning of the unordered list and

just copy

the outer html i'm going to close that

just for the sake of comparison

okay

so we have this we have that class which

we added and then now we have this

anoded list and then we have

this class called sub menu right

let me put this here like so

maybe i should put word wrap here

okay like this

so there's an ordered list and there's a

there's a list item then there's a sub

menu so you see here immediately we see

sub menu we know where this sub menu is

being created from because if we go to

the walker you will see it right here so

instead of sub menu bootstrap uses

something else so let's go to bootstrap

here for a second

and

or if you not

uh you don't have that bootstrap thing

open you can simply go back to your nav

page and you have the same code here

which you already copied

so if you look here instead of sub menu

we have drop down menu okay so i'm going

to copy this

drop down menu on the unordered list

right

because this is where it is on the anode

list class sub menu so there

bootstrap uses drop down menu instead so

let's paste that so what else can we add

on this same situation

so if you want you can even add all that

but for now we don't need that so

there's just the drop down menu that's

it

and then there's also something else

here where every list item has a class

of nav item instead so if you look at

this everything is now item so let me

copy all of that

let's come back to the walker

and let's look for

let's see here what classes do the list

items have they have this is an id they

have menu item right

so that's menu items so this is what we

should be looking for menu item in the

walker so you can use a search instead

to figure these things out a little bit

quicker

so let's look for it here it should be

somewhere and you see right here it says

menu item

and then there's a class name so you see

here this is where the classes are

created right

and it adds all that and then finally it

adds to the class this menu item with an

id

but we don't need all this so instead of

deleting all this what we can just do is

create our own let's just add

enough item instead let's remove that id

we don't need it

but then i want these classes clean so

i'm just going to say classes here

here sorry is equal to an empty array

like so

so i empty the array here and then i add

just enough item there okay so this is

inside the stat element function

so all i did is i just negated whatever

is happening here and just added one

class there

so let's see if that makes a difference

in our system so refresh

okay good so you see now there's a

slight difference here with the way it

was at least the sub menu has

disappeared as it should and then these

in the same line now

so let's keep going now let me refresh

inspect and just to see that

what i have done actually

made a difference

i will see this

a list item here

and the class is nav item for every list

item so

that is good

so let's add something else to see how

that will work

now let's come back to then

let's go to the nav dot php and then the

a tag itself has this thing called nav

link okay so let me copy that class it's

nav link in the a tag so all i have to

do is find where the a tag is being

created right so let me look around here

okay so this list item which we've

already covered

and let's keep going yeah usually

uh

blank and all of this usually is

for the a tag

so it must be somewhere around here

where can it be

ah look at there a tag right

so opening and closing and then right

here we have attributes so there's an

opening um bracket for the a tag and

then there's attributes and then there's

this so all we need to do is deal with

these attributes here and put our own

attributes there right

so

we already know that uh

those classes are nav link but we can't

see them here

so what to do what to do

hmm

okay let me go up here a little bit

let's see here let's see

what we have

okay so

the attributes start from here

so there's an attribute here called

title there's an attribute called target

and that and another attribute called

href

and this other attribute so

looks easy enough i think what we need

to do is just duplicate this and add our

own

our own uh

attribute called

class

right

because i don't see it here so that

attribute will have

the content that we have that we want so

let's put another link there like so

okay so let's see if that helps refresh

now we are looking more like that aren't

we and just like that we had done with

this

okay

the only problem we have is we don't

have the drop down list here

okay

but otherwise this is looking more like

that

and it's clickable as well already

because the links are correct so you see

that

things are working out

as planned

okay

cool

so the only remaining part here is for

us to

design this you see because there's drop

down here and then there's also a tag

you see this a tag here that has nav

link

however if

um

if this is a drop down list drop down

menu it has drop down toggle as well

and then it has this href

hash as well

and all of these things here

okay

so we need to add those for the drop

down list now in order to fix what we

have so far let me move this nav menu

so we practically don't need any of this

this div here since we have reference on

the bootstrap website we can all just

remove this so i'm just going to do this

boom

like that

just leave the button here

and

this part and the navigation there

okay so let's come back here and see

what we've done if i remove

now you see that

okay

oh where has that gone oopsie

so let's undo so what i did is i got the

form as well

in here so let's just remove the

unordered list from there

boom

okay

now because we

we are already having this div here

because we need to add the form in here

so we will tell it not to create a div

of its own here

so this div is the one with collapse

collapse there so container container

container

now what do we do if we go back to nav

menu here let's see where it says

container so it says container whether

to wrap the into a container or not

okay

so the default is div

now what i want to do instead

for container i'll remove the container

id and container and then let's just put

an empty string

so that it doesn't give a container and

then i'll move it

into this space

where i removed the list items

like so

okay

that way i get to keep my form

because if i had let this div stay it

would have been created inside here then

there would be no way of me putting this

form in there

so like this is better and then now i

can refresh at least i have that and i

still have my pages there so as you can

see now i can click nicely and the pages

go to where the menu

is going right if i um

if i go to my uh

admin and add more menus they're going

to show here but we still don't have our

drop down list so let's figure that out

in the next video