#16 Wordpress theme from scratch | Nav walker class 2 | Quick programming beginner tutorial
Summary
TLDRこのビデオスクリプトでは、ウェブサイトのメニューを改善する方法が紹介されています。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
😀 メニューのクラス変更
この段落では、ウェブメニューのデザインを変更する方法について説明しています。walkerクラスを使っているメニューを、新しいデザインに変更するために必要なクラスを紹介します。walkerクラスの複雑さを避けつつ、具体的な変更点に焦点を当てています。メニューの階層(レベル)を示すstart level関数や、階層の終了を示すend level関数、要素の開始と終了を示すstart elementとend element関数について説明しています。また、メニューの深さを制御するdepthパラメータの重要性も触れられています。
🛠️ メニューアイテムのクラス変更
この段落では、walkerクラス内のメニューアイテムに適用されているクラスを変更する方法について説明しています。メニューアイテムのクラスを'menu-item'から'nav-item'に変更し、サブメニューを正しく表示するために必要な'drop-down-menu'クラスを追加します。また、'a'タグに'nav-link'クラスを適用し、メニューのリンクを正しく機能させる方法も紹介されています。この変更により、メニューの表示が改善され、Bootstrapのスタイルに合わせることができます。
🔧 ドロップダウンメニューの追加
最後の段落では、ドロップダウンメニューを実装するための手順について説明しています。walkerクラスをカスタマイズして、ドロップダウンメニューの機能を追加する必要があると指摘しています。また、ページの構造を整理し、不要な要素を削除することで、メニューの整合性を保ちながら、必要な形にメニューをカスタマイズする方法も提案されています。このセクションでは、メニューの改善が進行中であり、次のビデオでドロップダウンメニューの実装が完了すると示唆しています。
Mindmap
Keywords
💡walkerクラス
💡クラス名
💡メニュー階層
💡ブートストラップ
💡ドロップダウンメニュー
💡メニューアイテム
💡属性
💡リストアイテム
💡メニューのカスタマイズ
💡HTML
💡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
Weitere ähnliche Videos ansehen
5.0 / 5 (0 votes)