بر اساس درخواست یکی از خوانندگان وبسایت ، امروز با هم نحوه ی ایجاد و نمایش دسته های وردپرس در یک منوی آبشاری رو یاد میگیریم. شما میتوانید با ترکیب CSS و جاوا اسکریپت اینکار را به راحتی انجام دهید .
خوب اولین کاری که باید انجام دهید این است که به وردپرس بگویید منو را به صورت درختی و بدون عنوان نمایش دهد .برای اینکار می توانید از کد زیر استفاده کنید .
</span>
<?php wp_list_categories('sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0'); ?>
<span style="color: #444444; font-family: tahoma,sans-serif;">
بعد از اینکه این کد را در وردپرس قرار دادید می توانید به آن استایل و طرح مناسب بدهید .
</span>
<div style="text-align:center;">
<ul id="menu" style="padding:0; margin:0;">
<?php wp_list_categories('sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0'); ?>
</ul>
</div>
<span style="color: #444444; font-family: tahoma,sans-serif;">
من این کد رو به فایل header.php اضافه کردم ولی شما می تونید اون رو در هر جایی که دوست داشتید اضافه کنید . استفاده از css بسیار آسان است . تنها کاری که باید انجام دهید این است که کد زیر رو به فایل style.css قالب خود اضافه کنید .
</span>
ul#menu {     margin: 0;     padding: 0;     list-style: none;     width: 100%;     font-size:1.2em;} ul#menu li {     float: left;     padding: 0;     margin: 0;     border-right:solid 1px #fff;} ul#menu ul li {     float: none;     position: relative;     border-bottom: 1px solid #7EAED7; /* fixes gap problem in IE */     border-left: 1px solid #FFF;     z-index:1000;} ul#menu li ul {     margin: 0;     padding: 0;     display:none;     list-style: none;     position: absolute;     background: #9CC;}ul#menu ul ul{     margin-left: .2em;     position: absolute;     top: 0; /* if using borders, -1px to align top borders */     left: 100%;} ul#menu * a:hover, ul#menu li a:active{background:#7EAED7 !important;color: #FFFFFF;} ul#menu li a:link,ul#menu li a:visited,ul#menu li a:hover,ul#menu li a:active{     display: block;     padding: .2em .3em;     text-decoration: none;     background: #5587B3;     color: #FFFFFF;}  ul#menu ul li a:link,ul#menu ul li a:visited,ul#menu ul li a:hover,ul#menu ul li a:active {     width: 8em;}
<span style="color: #444444; font-family: tahoma,sans-serif;">
البته شما باید رنگ و اندازه ی متن رو هم تغییر بدهید تا با قالب شما سازگار تر شود . آخرین مرحله ، آبشاری کردن آن برای تمامی مرورگرهاست . در مورد مرورگر فایر فاکس می توانید اینکار را با یک اعلان css ساده انجام دهید . اما اینترنت اکسپلورر این موضوع رو درک نمیکند بنابراین میتوانید از جاوا اسکریپت استفاده کنید .
</span>
<script type="text/javascript"> /*<![CDATA[*/ var mbA,mbT,mbTf,mbSf;var mbR = []; function mbSet(m) {if (document.getElementById&&document.createElement) {     var m=document.getElementById(m);     mbR[mbR.length] = m;     var i;      e=m.getElementsByTagName('a');     if (!mbTf) mbTf=new Function('mbHT();');     if (!mbSf) mbSf=new Function('mbS(this);');     for (i=0;i<e.length;i++) {           e[i].onmouseout=e[i].onblur=mbTf;           e[i].onmouseover=e[i].onfocus=mbSf;     }      m=m.getElementsByTagName('ul');     for (i=0;i<m.length;i++) {           mbH(mbL(m[i]));     }}} function mbHA() {     if (mbA) {           while (mbA) mbH(mbA);           mbHE('block');     }} function mbHT() {     if (!mbT) mbT=setTimeout('mbHA();', 0);} function mbTC() {     if (mbT) {           clearTimeout(mbT);           mbT=null;     }} function mbS(m) {     mbTC();     if (mbA) while (mbA&&m!=mbA&&mbP(m)!=mbA) mbH(mbA);     else mbHE('none');      if (mbM(m)) {           mbSH(m,'block');           mbA=m;     }} function mbH(m) {     if (m==mbA) mbA=mbP(m);     mbSH(m,'none');     mbT=null;} function mbL(m) {     while (m && m.tagName != 'A') m = m.previousSibling;     return m;} function mbM(l) {     while (l && l.tagName != 'UL') l = l.nextSibling;     return l;} function mbP(m) {     var p = m.parentNode.parentNode;     if (p.tagName == 'UL') {           var i = 0;           while (i < mbR.length) {                if (mbR[i] == p) return null;                i++;           }     } else {           return null;     }     return mbL(p);} function mbSH(m,v) {     m.className=v;     mbM(m).style.display=v;} function mbHE(v) {     mbHEV(v,document.getElementsByTagName('select'));} function mbHEV(v,e) {     for (var i=0;i<e.length;i++) e[i].style.display=v;}/*]]>*/</script>
<span style="color: #444444; font-family: tahoma,sans-serif;">
چند نکته در مورد کد قبلی وجود دارد که باید به آنها توجه کنید :
- برای فعال سازی آن باید تگ <body> قالب خود را به تگ <body onload=”mbSet(‘menu’);> تغییر دهید .
- این کد ممکن است خطای جاوا اسکریپت ایجاد کند که من آن را بازنویسی کردم وبه خوبی کار میکند .
امیدوارم این مقاله به شما در ایجاد منوی آبشاری در وردپرس کمک کرده باشد.برای مشاهده مقالات بیشتر درباره ی طراحی قالب وردپرس به https://www.on5.ir مراجعه نمایید.
آنفایو مرجع مقالات تخصصی طراحی قالب وردپرس
