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

319 بازدید
جمعه ۹ مهر ۱۳۹۵
نحوه ساخت منو (فهرست) سفارشی در قالب وردپرسReviewed by جواد نبوی on Sep 30Rating: 4.5

سلام دوستان عزیز؛ آیا میخواهید یک منو (فهرست) سفارشی در قالب وردپرس خود بسازید؟ وردپرس به صورت پیشفرض دارای یک سیستم فهرست بندی است که طراحان قالب از آن استفاده کرده و منو هایی که برای قالب شان میسازند را با این فهرست ها هماهنگ می کنند تا کاربران به راحتی بتوانند منو ها را بدون نوشتن هیچ کدی، دستکاری کنند. در این مطلب میخواهیم به شما یاد بدهیم که چگونه قابلیت پشتیبانی از این فهرست ها را به قالب خود اضافه کنید و در کل نحوه ساخت منو (فهرست) سفارشی را به شما آموزش می دهیم. اگر طراح قالب هستید و میخواهید یک قالب طراحی کنید و یا اینکه میخواهید به قالبتان قابلیت پشتیبانی از منوی سفارشی را اضافه کنید حتما تا انتها در این مقاله با وب تستر همراه باشید.

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

چه زمانی شما به مطالعه آموزش ساخت منو سفارشی در قالب نیاز دارید؟

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

این آموزش برای کسانی نوشته شده که یا خود طراح قالب هستند و میخواهند یک منو به قالبشان اضافه کنند، یا کسانی که طراح قالب نیستند اما میخواهند به قالب سایتشان یک منوی سفارشی اضافه کنند.

با توجه به گفته های بالا بیایید ببینیم نحوه ساخت منو (فهرست) سفارشی در قالب های وردپرس به چه صورت است.

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

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

زمانی که میخواهید یک منو به قالب خود اضافه کنید، اولین قدم، شناساندن این منو به وردپرس است که بدین منظور کد زیر را باید به فایل functions.php خود اضافه کنید (نحوه اضافه کردن کد به فایل functions.php قالب):

function wpb_custom_new_menu() {
 register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

در این کد دو عبارت میبینید که مهم هستند و میتوانید آنها را تغییر دهید. یکی my-custom-menu و دیگری My Custom Menu است. My Custom Menu همان نام فهرست شما است که در صفحه فهرست ها ی پیشخوان وردپرس نمایش داده می شود. اما my-custom-menu یک شناسه برای منوی شما است که بعدا برای نمایش این منو در قالب از این شناسه استفاده می کنیم. پس اگر تغییرش دادید حتما حواستان باشد که بعدا از این شناسه جدید برای نمایش منو استفاده می کنیم. البته در مرحله ی بعد به شما میگویم چطور استفاده کنید.

حالا از منوی پیشخوان وردپرس به مسیر نمایش » فهرست ها بروید. سپس یک فهرست جدید ایجاد کنید یا سعی کنید یکی از فهرست های موجود را ویرایش کنید. می بینید که در بخش جایگاه ها در پوسته یک گزینه با نام My Custom Menu اضافه شده است.

آموزش اضافه کردن منو (فهرست) سفارشی به قالب وردپرس

خب الان اگر لینک هایی به این منو اضافه کنید و آن را ذخیره کنید قطعا چیزی در پوسته نمایش داده نخواهد شد. چرا که هنوز محل آن را در قالب مشخص نکردید. در مرحله ی بعد اینکار را انجام می دهیم.

همچنین اگر می خواهید به جای یک منو، چندین منو به قالب خود اضافه کنید باید از چنین کدی به جای کد قبلی استفاده کنید:

function wpb_custom_new_menu() {
 register_nav_menus(
 array(
 'my-custom-menu' => __( 'My Custom Menu' ),
 'extra-menu' => __( 'Extra Menu' )
 )
 );
}
add_action( 'init', 'wpb_custom_new_menu' );

قطعا مشخص است که باید چه کاری انجام دهید. Extra Menu یک منوی جدید است. اگر میخواهید منوی دیگری اضافه کنید گزینه های جدید را طبق نمونه بالا اضافه کنید.

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

خب نوبت قرار دادن این منو در قالب است. معمولا منو ها را در سربرگ (هدر) سایت می گذارند. شما میتوانید هر جایی که دوست دارید بگذارید.

خب، کد زیر را باید در جایی از قالب که میخواهید منو نمایش داده شود قرار دهید:

<?php
wp_nav_menu( array( 
 'theme_location' => 'my-custom-menu', 
 'container_class' => 'custom-menu-class' ) ); 
?>

حتما عبارت my-custom-menu در کد بالا برایتان آشنا است. در مرحله قبل گفته بودیم که این عبارت شناسه منوی ما است. اگر آن را در مرحله قبل تغییر داده اید، باید شناسه جدید را به جای my-custom-menu در کد بالا قرار دهید.

یک کد دیگر هم در انتهای مرحله قبل به شما معرفی کردیم که برای اضافه کردن چندین منو بود. در آن کد شناسه دومین منو extra-menu است. اینها را گفتم که حساب کار دستتان بیاید و اگر چیزی برایتان مبهم بود، با این مثال رفع ابهام کرده باشم.

یک چیز دیگر! در کد بالا عبارتی تحت عنوان custom-menu-class می بینید. این عبارت در واقع نام کلاسی است که منو را در بر می گیرد. از این کلاس می توانید برای استایل دهی به منو استفاده کنید. میتوانید تغییرش هم بدهید.

نتیجه کار من را ببینید:

آموزش ساخت منو در قالب وردپرس

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

div.custom-menu-class ul {
 list-style-type: none;
 list-style: none;
 list-style-image: none;
}
div.custom-menu-class li {
 padding: 20px;
 display: inline;
}

تمام شد. حالا فقط مانده استایل دهی به این منو که خودتان انجامش می دهید!

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

تبلیغات

نویسنده (مدیر سایت)

جواد نبوی هستم. حدود 7 سالی میشه در زمینه طراحی وب و گرافیک کار می کنم و بعد از توپ دیزاین، این دومین سایت آموزش طراحی وب و گرافیک هستش که راه انداختم. امیدوارم بتونم برای همه ی شما مفید باشم.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *