آموزش افزودن کد منو به قالب وردپرس

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

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

افزودن منو به قالب وردپرس و کد منو وردپرس

برای افزودن منو به قالب وردپرس لازمه تا با تابع wp_nav_menu آشنایی داشته باشید و نحوه استفاده از آن را همراه با مثال‌هایی که در وبسایت رسمی وردپرس قرار دارد بیاموزید، بنابراین میتونید تا به صفحات wp_nav_menu و Register_nav_menu مراجعه کنید تا با انواع حالات و کارهایی که میتونید بر روی منوهای ساخته شده در وردپرس اعمال کنید آشنا شده و از اونها استفاده کنید.

برای شروع ساخت و افزودن منو به قالب وردپرس ابتدا لازمه تا با استفاده از فایل فانکشن(functions.php) قالب وردپرس اقدام به تعریف هر تعداد منو که دارید اقدام کنید. منوهای شما میتونند چند نوع مختلف باشند که برای هر یک از بخش‌های سایت مثل هدر سایت، فوتر سایت، منوی بالایی سایت و… از هرکدوم از منوهایی که می‌سازید به صورت مجزا استفاده کنید. بنابراین به مسیر نمایش> ویرایشگر مراجعه کرده و فایل functions.php را برای ویرایش انتخاب کنید.

یا اینکه وارد هاست خود شده و سپس وارد File Manager هاست شوید و به مسیر /public_html/wp-content/themes/ مراجعه کرده و سپس وارد پوشه قالبی که از آن استفاده میکنید شده و به دنبال فایل functions.php در‌‌ آن بگردید. حالا بعد از اینکه فایل مورد نظر را یافتید اگر از هاست سی پنل استفاده می‌کنید روی فایل راست کلیک کرده و گزینه Edit را انتخاب کنید. اگر هم از هاست دایرکت ادمین استفاده می‌کنید کافیه تا روی منوی Edit که در مقابل فایل قرار داره کلیک کنید تا صفحه ویرایش کدهای فایل برای شما باز شود.

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

<?php
…
?>

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

function register_my_menus() {
register_nav_menus(
array(
'top-menu' => __( ' فهرست بالا' )
)
);
}
add_action( 'init', 'register_my_menus' );

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

function register_my_menus() {
register_nav_menus(
array(
'top-menu' => __( 'فهرست بالا' ),
'main-menu' => __( 'فهرست اصلی' ),
'footer-menu' => __( 'فهرست پایین' )
)
);
}
add_action( 'init', 'register_my_menus' );

تا اینجای کار فهرست‌های شما به قالب وردپرس اضافه شده‌اند و از همین حالا قادر هستید تا منوهای خودتون را به فهرست اضافه کنید، اما هنوز قادر به مشاهده فهرست‌ها در قالب سایت نخواهید بود چرا که باید آخرین مرحله که برای نمایش فهرست‌های ساخته شده در مکان دلخواهی که تعریف کردید اقدام کنید. برای این منظور بسته به فهرستی که تعریف کردید باید پیش روید. به عنوان نمونه در این مثال ما سه فهرست تعریف کردیم تا در منوی بالای سایت، منوی اصلی و فوتر سایت ازشون استفاده کنیم. پس به عبارت ساده‌تر برای نمایش هر فهرست باید به ترتیب کدهای مورد نظر را به فایل‌های header.php و footer.php اضافه کنیم تا منوها نمایش داده شوند.

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

حالا برای نمایش هریک از منوهای باید مشابه کد زیر کدها را در مکان مناسبی از هر فایل قرار دهیم. منوهای فهرست بالا و فهرست اصلی مربوط معمولا به فایل header.php هستند، بنابراین در همین مسیری از هاست که فایل فانکشن قرار داره به نام فایلی با این نام بگردید و بعد از یافتن فایل مورد نظر صفحه ویرایش فایل را باز کرده و کدهای زیر را در مکان مناسبی از ان قرار دهید.

<?php wp_nav_menu( array( 'theme_location' => 'top-menu', 'container' =>'', 'menu_class' =>'topnav' ) ); ?>

در نمونه بالا همونطور که میبینید تعریف کردیم که در مسیر قالب دستور top-menu که مربوط به نمایش فهرست در منو بالایی است نمایش داده شود و در انتهای خط هم از کلاس استایل topnav استفاده کردیم که اگر چنین کلاسی را در فایل style.css قالب تعریف کنیم با اون شکل و استایل منو مورد نظر در قالب نمایش داده خواهد شد.

برای فهرست اصلی هم میتونید به همین ترتیب عمل کرده و کد را مشابه نمونه زیر در مکان مناسبی از این فایل قرار دهید. در انتها همونطور که مشاهده می‌کنید چون خواستیم تا منوی فهرست اصلی با استایلی متفاوت باشه نام کلاس با عنوان mainnav تعریف شده که در صورت وجود کلاس در فایل style.css قادر هستید تا با شکل دلخواه منوی خودتون را نمایش دهید.

<?php wp_nav_menu( array( 'theme_location' => 'main-menu', 'container' =>'', 'menu_class' =>'mainnav' ) ); ?>

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

برای منوی فوتر نیز باید به همین ترتیب عمل کنید اما با این تفاوت که کد زیر را برای نمایش فهرست پایین در فایل footer.php قالب قرار دهید. بنابراین فایل footer.php را باز کرده و کدهای زیر را در مکان مناسبی از اون قرار بدین و همونطور که در کد زیر مشاهده می‌کنید برای این منو هم استایل متفاوتی با نام footervav در نظر گرفتیم تا استایل متفاوتی را از طریق فایل style.css برای نمایش منو فوتر در نظر بگیریم.

<?php wp_nav_menu( array( 'theme_location' => 'footer-menu', 'container' =>'', 'menu_class' =>'footernav' ) ); ?>

به همین ترتیب برای اضافه کردن منو بیشتر در فهرست وردپرس میتونید تا مکان‌های بیشتری را در فایل functions.php مشابه نمونه تعریف کنید و برای نمایش هر فهرست هم کد مورد نظر را در فایل مربوط به همون بخش از سایت قرار دهید. کافیه تا نام منو و استایل دلخواه خودتون را در مثال‌های ذکر شده قرار دهید.