در پانل مدیریتی وردپرس امکاناتی برای تعریف فهرست ها و اضافه کردن برگه ها، نوشته ها ، دسته ها و لینک ها به این فهرست ها وجود دارد. گزینه های اضافه شده می توانند بصورت تودرتو تنظیم شده و ساختار درختی داشته باشند.
در پوسته ی وردپرس نیز می توان جایگاه هایی برای قرار گرفتن این فهرست ها تعریف کرد و در هنگام مدیریت فهرست ها در پانل مدیریتی وردپرس می توان فهرست ها را به هر کدام از جایگاه ها انتساب داد تا نمایش داده شود.
برای اضافه کردن جایگاه فهرست ها (منوها) در پوسته وردپرس، ابتدا در فایل functions.php یک تابع اضافه کرده و نوارهای پیمایش را در داخل آن ثبت می کنیم:
function register_my_menu() {
register_nav_menu(my-top-menu','منوی بالای سایت');
register_nav_menu('my-main-menu','منوی اصلی');
}
در این تابع دو جایگاه به نام های my-top-menu و my-main-menu در پوسته ثبت شده است، برای اینکه تابع فوق هنگام اجرای وردپرس اجرا شود، آنرا به تابع init از هسته ی وردپرس قلاب می کنیم:
add_action( 'init', 'register_my_menu' );
حالا می توانیم در پانل مدیریت وردپرس به بخش نمایش و فهرست ها رفته و فهرست های تعریف شده را مشاهده کرده، مدیریت کنیم . در این قسمت تعیین می کنیم هر منو دارای چه گزینه های اصلی و چه گزینه های فرعی باشد و نیز محل نمایش آن را مشخص می کنیم.
در شکل فوق، در بخش ویرایش فهرست ها می توان با برگزیدن یک فهرست در قسمت ساختار فهرست آیتم های آنرا مشاهده کرده و با انتخاب آیتم ها از لیست های سمت راست و زدن روی دکمه افزودن به فهرست، به فهرست انتخاب شده اضافه کرد.
در بخش تنظیمات فهرست می توان تعیین کرد که فهرست انتخابی در کدام موقعیت نمایش داده شود، همان موقعیت هایی در پوسته وردپرس تعریف می شوند.
بعد از ثبت جایگاه ها در فایل functions.php و تنظیم گزینه های فهرست ها در محیط مدیریت وردپرس نوبت می رسد به نمایش منوها در صفحات سایت. برای این کار در هر جایی از صفحه که خواسته باشیم منویی نشان داده شود از تابع wp_nav_menu بصورت زیر استفاده می کنیم:
$args=array(…);
wp_nav_menu ( $args);
آرایه $argsبرای تعیین پارامترهای تابع استفاده می شود و می تواند دارای کلیدهای زیر باشد:
کلید theme_location : تعیین نام منوی ثبت شده در پوسته
کلید menu : نام فهرست تعریف شده در پانل مدیریتی وردپرس
کلید menu_class : نام کلاس استایل شیت برای تنظیمات ظاهری منو
در مثال زیر فهرست fehrest1 در موقعیت my-top-menu نشان داده می شود و تنظیمات ظاهری منو و گزینه های آن بر اساس کلاس استایل شیت .top-menu انجام شده است.
<?php
$args= ( array ('theme_location'=>'my-top-menu',
'menu' =>'fehrest1', 'menu_class' =>'top-menu' );
wp_nav_menu( $args);
?>
با این حساب محتوای فایل header.php بصورت زیر درخواهد آمد که سطر جدیدی قبل از سطر هدر به جدول اضافه شده و جایگاه فهرست داخل آن قرارگرفته است:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title(); ?></title>
<meta name="description" content="<?php bloginfo( 'description' ); ?>"><?php wp_head(); ?><link type="text/css" href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet" />
</head>
<body <?php body_class() ?> >
<table width="1000" align="center" border="1" dir="rtl">
<tr>
<td colspan="2">
<?php
$args= ( array ('theme_location'=>'my-top-menu',
'menu' =>'fehrest1', 'menu_class' =>'top-menu' );
wp_nav_menu( $args);
?></td>
</tr>
<tr>
<td colspan="2">
<h1> <?php bloginfo('name'); ?> </h1>
<h4> <?php bloginfo('description'); ?> </h4>
</td>
</tr>
همچنین در فایل style.css باید حداقل یک قاعده ی استایل شیت بصورت زیر اضافه شود:
.top-menu li {
list-type-style:none;
margin:right;
font-size:20px;
margin-left:10px;
}
حال با بازکردن سایت می توان لیست گزینه های منو را در بالای سایت مشاهده کرد.