در این مطلب آموزشی از بخش آموزش های وردپرس روکش می خواهیم نحوه ساخت منو کشویی (آبشاری) برای وردپرس را به صورت گام به گام برای شما بیان کنیم. این مطلب آموزشی را بگونه ای پیش خواهیم برد که شما با اصول اولیه ساخت یک منو توسط css و html آشنا شوید و علوه بر تسلط کامل بر ساخت منو کشویی برای وردپرس بتوانید برای سیستم های محتوای دیگر یا حتی قالب های html نیز به راحتی یک منو زیبای کشویی یا همان منو آبشاری ایجاد کنید.
[h=2]گام اول : نوشتن markup HTML منو کشویی[/h] برای ساخت یک
منو کشویی ما باید در ابتدا markup HTML آن را بنویسیم. بهترین تگ html برای ساخت یک منو کشویی تگ ul می باشد. در اصل این تگ برای فهرست کردن موضوعات در یک سند html می باشد اما ما می توانیم از آن جهت ساخت یک منو آبشاری نیز استفاده کنیم. یک نمونه ساده از markup HTML یک منو کشویی با استفاده از تگ ul مانند زیر می باشد.
<ul>
<li></li>
<li>
<ul>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
همانطور که در خط چهارم می بینید ما بین تگ باز و بسته li یک تگ باز و بسته ul دیگر قرار دادیم به همین ترتیب می توان به صورت پله ای بی نهایت تگ ul و li را درون هم قرار داد. تنها باید به این نگته توجه کرد که ما فقط مجاز به استفاده از تگ li در تگ ul می باشیم. در تگ li هم می توانیم از اکثر تگ های html استفاده کنیم.
حال که با markup HTML کلی یک منو آبشاری آشنا شدید نگاهی به کد های html زیر بیندازید.
<nav>
<ul>
<li><a>خانه</a></li>
<li><a>دسته بندی ها</a>
<ul>
<li><a>قالب وردپرس</a>
<ul>
<li><a>قالب شخصی</a></li>
<li><a>قالب شرکتی</a></li>
</ul>
</li>
<li><a>آموزش وردپرس</a></li>
</ul>
</li>
<li><a>درباره ما</a></li>
<li><a>تماس با ما</a></li>
</ul>
</nav>
در کد بالا ما ۴ عنوان اصلی داریم که یکی از آنها شامل دو زیر مجموعه می باشد به همین ترتیب یک از زیر مجموعه ها نیز دارای ۲ زیر مجموعه دیگر می باشد. بعد از اینکه این کد را در یک صفحه با فرمت html ذخیره کردید نتیجه کار مانند زیر می شود.
خوب حال یک سوال ممکن است برای شما پیش آید که:
آیا برای ساخت یک منو کشویی در وردپرس نیز باید کد های html را به صورت دستی وارد کنم؟
برای افزودن منو به قالب وردپرس شما هم می توانید کد های html منو را به صورت دستی وارد کنید و هم می توانید از قابلیت فهرست های وردپرس بهره بگیرید. به نظر من بهترین گزینه برای مدیریت منو در وردپرس استفاده از فهرست ها می باشد. در حقیقت وقتی ما با استفاده از فهرست های وردپرس یک منو را به قالب اضافه می کنیم وردپرس همان کاری را انجام می دهد که ما در بالا بصورت دستی انجام دادیم. یعنی وردپرس طبق خواسته شما کد های html منو را می سازد. از ویژگی ها بارز کد های html خروجی فهرست های وردپرس می توان به موارد زیر اشاره کرد:
- سرعت بالا در ساخت منو ها
- فراهم آوردن امکانات مدیریتی آسان برای منو ها
- افزودن کلاس های html خاص به منو ها
- قابلیت مدیریت چندین منو در یک بخش
[h=3]چگونه از فهرست های وردپرس استفاده کنیم؟[/h] برای استفاده از فهرست ها ابتدا باید کد زیر را به فایل فانکسن قالب سایت خود اضافه کنید.
function register_my_menus() {
register_nav_menus(
array(
'top-menu' => __( 'منو بالا' )
)
);
}
add_action( 'init', 'register_my_menus' );
در کد بالا top-menu شناسه منو و “
منو بالا” نام منو می باشد. برای داشتن منو های بیشتر می توانید مانند زیر اقدام کنید.
function register_my_menus() {
register_nav_menus(
array(
'top-menu' => __( 'منو بالا' ),
'main-menu' => __( 'منو میانی' ),
'footer-menu' => __( 'منو پایین' )
)
);
}
add_action( 'init', 'register_my_menus' );
حال باید با استفاده از کد زیر منو را در قالب فراخوانی کنیم.
<?php wp_nav_menu( array( 'theme_location' => 'top-menu', 'container' =>'nav', 'menu_class' =>'topnav' ) ); ?>
در این کد ما منو با شناسه top-menu را فراخوانی کرده ایم. ما این کد را در فایل header.php قرار می دهیم تا در بالای تمامی صفحات دیده شود.
حال وارد مسیر
داشبورد > نمایش > فهرست ها شوید و یک منو به شکل زیر ایجاد کنید سپس در بخش پایین صفحه یعنی
جایگاهها در پوسته جایگاه این فهرست را مشخص کنید.
پس از ذخیره فهرست قالب خود را باز کنید, می بینید که فهرستی که ساخته اید در قالب شما به نمایش در می آید.
[h=2]گام دوم: تغییر ظاهر منو کشویی با استفاده از css[/h] حال نوبت به تغییر ظاهر منو می رسد. در این مرحله ما به شما می گوییم که چگونه می توانید برای یک منو آبشاری کد های CSS را بنویسد. تمام کد هایی که در اینجا معرفی می کنیم را باید در فایل style.css قالب فعلی سایت خود قرار دهید.
در ابتدا با استفاده از کدهای css زیر رنگ پس زمینه, ارتفاع, فاصله منو از اطراف و عرض کل قسمت منو در قالب را مشخص می کنیم.
nav {
background: none repeat scroll 0 0 #708090;
height: 40px;
margin: 0 auto;
width: 1000px;
}
حال با استفاده از کد های زیر تمام تگ های ul موجود در منو را از حالت لیست بودن خارج می کنیم و فاصله هایی که به صورت پیش فرض توسط مرورگر ها به تگ ul اضافه می شود را بر می داریم.
nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
حال نوبت به تگ li می رسد. کد های زیر برای این تگ نوشته شده اند که باید به همین ترتیب نیز در فایل style.css قالب قرار گیرند.
nav > ul > li {
background: none repeat scroll 0 0 #87CEEB;
border-left: 1px solid #73BAD7;
display: block;
float: right;
}
nav ul li {
margin: 0;
position: relative;
}
حال نوبت به لینک ها می رسد. کد های css زیر برای لینک های منو نوشته شده اند که باعث می شوند تا این منو شکل یک منو واقعی را به خود بگیرد.
nav > ul > li > a {
padding: 10px 20px;
}
nav ul li a {
color: #0000FF;
display: block;
float: right;
font-family: tahoma;
font-size: 15px;
padding: 10px 15%;
text-decoration: none;
}
تا اینجای کار خوب پیش رفتیم. منو تقریبا کامل است اما هنوز نمی توان زیر منو ها را از منو های اصلی تشخیص داد و با حرکت موس روی عنوان های اصلی زیر منو های آنها را دید. حال با افزودن کد های زیر به فایل style.css قالب دیگر منو شکل واقعی خود را می گیرد و با حرکت دادن موس روی منو های اصلی زیر منو آنها ظاهر می شود.
nav ul li ul {
background: none repeat scroll 0 0 #708090;
opacity: 0;
padding: 0;
position: absolute;
right: 0;
top: 100%;
transition: all 0.5s ease 0s;
visibility: hidden;
width: 170px;
}
nav ul li:hover > ul {
display: block;
opacity: 1;
visibility: visible;
}
nav ul li ul li ul {
border-right: 1px solid #5D6D7D;
right: 100%;
top: 0;
}
nav ul li ul li a {
border-bottom: 1px solid #637383;
color: #FFFFFF;
text-align: right;
width: 70%;
}
خوب کار تغییر ظاهر منو هم در اینجا تمام شد. امیدواریم تا این
آموزش توانسته باشد به شما کمک کند. در صورت داشتن هرگونه پرسشی در باره منوهای کشویی وردپرس آن را با ما در میان بگذارید.
[h=3]کد کامل css جهت تغییر ظاهر منو آبشاری (کشویی):[/h] nav {
background: none repeat scroll 0 0 #708090;
height: 40px;
margin: 30px auto 0;
width: 1000px;
}
nav ul li a {
color: #485868;
display: block;
float: right;
font-family: tahoma;
font-size: 15px;
padding: 10px 15%;
text-decoration: none;
}
nav > ul > li > a {
padding: 10px 20px;
}
nav ul li {
margin: 0;
position: relative;
}
nav ul li ul {
background: none repeat scroll 0 0 #708090;
opacity: 0;
padding: 0;
position: absolute;
right: 0;
top: 100%;
transition: all 0.5s ease 0s;
visibility: hidden;
width: 170px;
}
nav ul li:hover > ul {
display: block;
opacity: 1;
visibility: visible;
}
nav ul li ul li ul {
border-right: 1px solid #5D6D7D;
right: 100%;
top: 0;
z-index: 2;
}
nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
nav > ul > li {
background: none repeat scroll 0 0 #87CEEB;
border-left: 1px solid #73BAD7;
display: block;
float: right;
}
nav ul li ul li a {
border-bottom: 1px solid #637383;
color: #333333;
float: none;
text-align: right;
width: 70%;
z-index: 2;
}
nav ul li ul li {
clear: both;
display: block;
float: none;
position: relative;
width: 100%;
z-index: 2;
}