در این آموزش قصد دارم، تا به نحوه افزودن منو به قالب وردپرس و معرفی کد منو قالب وردپرس که با استفاده از تابع wp_nav_menu صورت میگیره بپردازم.
برای خرید کلاس آنلاین اسکای روم میتوانید، در این صفحه اقدام نمایید.
افزودن منو به قالب وردپرس
ابتدا لازمه تا با استفاده از فایل فانکشن(functions.php) قالب وردپرس اقدام به تعریف هر تعداد منو که دارید اقدام کنید. منوهای شما میتونند چند نوع مختلف باشند. که برای هر یک از بخش‌های سایت مثل هدر سایت، فوتر سایت، منوی بالایی سایت و… از هرکدوم از منوهایی که؛ می‌سازید به صورت مجزا استفاده کنید. بنابراین؛ به مسیر نمایش> ویرایشگر مراجعه کرده. و فایل functions.php را برای ویرایش انتخاب کنید.
یا اینکه وارد هاست خود شده. و سپس؛ وارد File Manager هاست شوید و به مسیر/public_html/wp-content/themes/ مراجعه کرده. و سپس؛ وارد پوشه قالبی که از آن استفاده میکنید شده. و به دنبال فایل functions.php در آن بگردید. حالا بعد از اینکه فایل مورد نظر را یافتید. اگر از هاست سی پنل استفاده میکنید روی فایل راست کلیک کرده. و گزینه Edit را انتخاب کنید. اگر هم از هاست دایرکت ادمین استفاده میکنید کافیه تا روی منوی Edit که در مقابل فایل قرار داره کلیک کنید. تا صفحه ویرایش کدهای فایل برای شما باز شود.
همونطور که میدونید، کلیه کدهای موجود در این فایل بین دو قطعه کد زیر قرار دارند. که برای اضافه کردن قابلیت منو در قالب وردپرس باید کدهای خودتون را قبل از پایان این قطعه کد در مکان مناسبی قرار دهید. به طوری که لا به لای کدهای دیگه قرار نگیرند.
|
1
2
3
|
<?php
…
?>
|
آموزش افزودن کد منو به قالب وردپرس
|
1
2
3
4
5
6
7
8
|
function register_my_menus() {
register_nav_menus(
array(
‘top-menu’ => __( ‘ فهرست بالا’ )
)
);
}
add_action( ‘init’, ‘register_my_menus’ );
|
برای نمایش هریک از منوهای باید مشابه کد زیر کدها را در مکان مناسبی از هر فایل قرار دهیم. منوهای فهرست بالا و فهرست اصلی مربوط معمولا به فایل header.php هستند، بنابراین؛ در همین مسیری از هاست که فایل فانکشن قرار داره. به نام فایلی با این نام بگردید. و بعد از یافتن فایل مورد نظر صفحه ویرایش فایل را باز کرده. و کدهای زیر را در مکان مناسبی از آن قرار دهید.
افزودن کد منو
|
1
|
<?php wp_nav_menu( array( ‘theme_location’ => ‘top-menu’, ‘container’ =>”, ‘menu_class’ =>‘topnav’ ) ); ?>
|
|
1
|
<?php wp_nav_menu( array( ‘theme_location’ => ‘main-menu’, ‘container’ =>”, ‘menu_class’ =>‘mainnav’ ) ); ?>
|
برای سفارش طراحی سایت به این لینک مراجعه کنید.
برای منوی فوتر نیز باید به همین ترتیب عمل کنید اما با این تفاوت که کد زیر را برای نمایش فهرست پایین در فایل footer.php قالب قرار دهید. بنابراین فایل footer.php را باز کرده و کدهای زیر را در مکان مناسبی از اون قرار بدین و همونطور که در کد زیر مشاهده میکنید برای این منو هم استایل متفاوتی با نام footervav در نظر گرفتیم تا استایل متفاوتی را از طریق فایل style.css برای نمایش منو فوتر در نظر بگیریم.
1 <?php wp_nav_menu( array( ‘theme_location’ => ‘footer-menu’, ‘container’ =>”, ‘menu_class’ =>‘footernav’ ) ); ?>