نمایش درختی دسته های وردپرس (بدون افزونه)

نمایش درختی (اکاردئون) دسته های وردپرس (بدون افزونه)

عرض سلام خدمت تموم کاربران عزیز میز وردپرس

در این قسمت قصد داریم به شما اموزش بدهیم که چگونه دسته های وردپرس را به صورت درختی نمایش دهیم یا به عبارت دیگر به شکل اکاردئونی نمایش دهیم.

برای این کار باید هم از سی اس اس و هم از جی کوئری استفاد کنیم.

خب ابتدا کد های زیر را در محلی که قرار است دسته بندی های وردپرس به شکل درختی نمایش داده شوند قرار میدهیم.

<div id="categories_block_left" class="block"> 
<h2 class="title_block"> دسته بندی های وردپرس </h2>
 <div class="block_content"> 
	<ul class="tree dhtml">
	 <?php wp_list_categories(array( 'title_li' => '', ) ); ?>
	</ul>
 </div> 
	</div>

سپس در فایل سی اس اس خودمان کد زیر را قرار میدهیم تا به ان یک استایل بدهیم.

#categories_block_left li.last a {border:none}
#categories_block_top .sf-menu > li > ul > .category_thumb {display:block;clear:both;overflow:hidden;width:100%}
#categories_block_top .sf-menu > li > ul > .category_thumb img {display:inline-block;width:33%}
#categories_block_top .sf-menu > li h4 a {font-size:1.1em}
#categories_block_top .sf-menu > li h4 a:before {display:none}
#categories_block_top .sf-menu > li .main-level-submenus {position:relative;display:block !important;visibility:visible !important;top:0;background:none;box-shadow:none;padding:0;right:0}
#categories_block_top .sf-menu .category_thumb {display:none}
#categories_block_left > li {}
#categories_block_left li {position:relative;background:none;border:none;padding-right:0;margin-right:0}
#categories_block_left li a,.informations_block_left li a {color:#333333;display:block;font-family:yekan,SYekan,cursive,tahoma;font-size:15px;line-height:30px;padding:0 19px 0 30px;border-bottom:1px solid #d6d4d4}
#categories_block_left li span.grower {display:block;background:#f6f6f6;position:absolute;left:0;top:0;cursor:pointer;font-family:"FontAwesome";font-size:18px}
#categories_block_left li span.grower.OPEN:before,#categories_block_left li span.grower.CLOSE:before {content:"\f106";display:block;vertical-align:middle;width:30px;height:30px;color:#333333;line-height:30px;text-align:center}
#categories_block_left li span.grower.CLOSE:before {content:"\f107";color:silver}
#categories_block_left li span.grower:hover + a,#categories_block_left li a:hover,#categories_block_left li a.selected,.informations_block_left li a:hover {background:#f6f6f6;color:orange}
#categories_block_left li li a {font-weight:normal;color:#777777}
#categories_block_left li li a:before {content:"\f104";font-family:"FontAwesome";line-height:29px;padding-left:8px}
 }
div.tree_top {padding-right:24px;padding-bottom:5px;padding-top:3px}
ul.tree,ul.tree ul {list-style-type:none}
ul.tree li {padding-right:1.2em;border-right:1px gray dotted;margin-right:1em}
ul.tree a {padding-right:0.2em}
ul.tree a.selected {font-weight:bold}
ul.tree li.last {border:none}
span.grower {cursor:pointer}

و در انتها نیز باید کد های زیر را در داخل فایل  فوتر و قبل از بسته شدن تگ بادی  یعنی قبل از </body> باید قرار دهید.

نکته : حتما دقت کنید که باید در قالب شما فایل جی کوئری بارگذاری شده باشد.

<script type="text/javascript">
    $(document).ready(function() {
        $('ul.tree.dhtml').hide();
        if (!$('ul.tree.dhtml').hasClass('dynamized')) {
            $('ul.tree.dhtml ul').prev().before("<span class='grower OPEN'> </span>");
            $('ul.tree.dhtml ul li:last-child, ul.tree.dhtml li:last-child').addClass('last');
            $('ul.tree.dhtml span.grower.OPEN').addClass('CLOSE').removeClass('OPEN').parent().find('ul:first').hide();
            $('ul.tree.dhtml').show();
            $('ul.tree.dhtml .selected').parents().each(function() {
                if ($(this).is('ul')) toggleBranch($(this).prev().prev(), true);
            });
            toggleBranch($('ul.tree.dhtml .selected').prev(), true);
            $('ul.tree.dhtml span.grower').click(function() {
                toggleBranch($(this));
            });
            $('ul.tree.dhtml').addClass('dynamized');
            $('ul.tree.dhtml').removeClass('dhtml');
        }
    });

    function openBranch(jQueryElement, noAnimation) {
        jQueryElement.addClass('OPEN').removeClass('CLOSE');
        if (noAnimation) jQueryElement.parent().find('ul:first').show();
        else jQueryElement.parent().find('ul:first').slideDown();
    }

    function closeBranch(jQueryElement, noAnimation) {
        jQueryElement.addClass('CLOSE').removeClass('OPEN');
        if (noAnimation) jQueryElement.parent().find('ul:first').hide();
        else jQueryElement.parent().find('ul:first').slideUp();
    }

    function toggleBranch(jQueryElement, noAnimation) {
        if (jQueryElement.hasClass('OPEN')) closeBranch(jQueryElement, noAnimation);
        else openBranch(jQueryElement, noAnimation);
    };;
</script>

نکته : دوستان حتما توجه داشته باشید که حتما باید از کتابخانه جی کوئری را در قالب وب سایت خودتان بارگذاری کرده باشید.در غیر این صورت کد ها کامل کار نخواهند کار و به درستی نمایش داده نخواهند شد.

خب دوستان اگر تمامی مراحل رو دست انجام داده باشید.دسته بندی های وردپرس به شکل زیبایی نمایش داده خواهند شد.به جای استفاده از تصاویر در استایل این اموزش ما از  Font Awesome     استفاده کرده ایم