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

قصد دارم ،به نحوه افزودن منو به قالب وردپرس و معرفی کد منو وردپرس که با استفاده از تابع 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 مشابه نمونه تعریف کنید. و برای نمایش هر فهرست هم کد مورد نظر را در فایل مربوط به همون بخش از سایت قرار دهید. کافیه تا نام منو و استایل دلخواه خودتون را در مثال‌های ذکر شده قرار دهید.

برای سفارش طراحی سایت به این لینک مراجعه کنید.