فهرست واکنش گرا برای موبایل طراحی کنیم

در مطالب گذشته با نحوه تغییر مکان نوار کناری آشنا شدیم . در این مطلب سعی داریم تا با نحوه طراحی فهرست در سایت های واکنش گرا آشنا بشویم .

 

۱- ابتدا یک زیر پوسته ایجاد کنید

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

چطور یک زیر پوسته ایجاد کنیم ؟

یک کپی از فایل header.php پوسته خود بگیرید و یک فایل خالی با نام functions.php هم ایجاد نمایید .

 

۲- یک جایگاه فهرست تعریف نمایید

برای این کار کافیست کد زیر را در فایل functions.php وارد نمایید .

function extra_setup() {
register_nav_menu ('primary mobile', __( 'فهرست موبایل', 'twentythirteen' ));
}
add_action( 'after_setup_theme', 'extra_setup' );

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

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

 

۳- فهرست را به هدر پوسته اضافه کنید

فایل header.php پوسته را باز کنید و wp_nav_menu را پیدا کنید و کد زیر را دقیقا در خط بعد از آن بنویسید.

<?php wp_nav_menu( array( 'theme_location' => 'primary mobile', 'menu_class' => 'nav-menu' ) ); ?>;

 

۴- نام کلاس ها را تعیین کنید

برای اینکه بتوانیم موبایل را تشخیص بدهیم از دستور @media استفاده می کنیم . به طور پیش فرض وردپرس فهرست را در یک div با کلاسی به نام فهرست قرار می دهد . می توان به راحتی نام فهرست را در استایل قرار بدهیم اما چون ممکن است ما نام فهرست را بعدا بخواهیم تغییر بدهیم بهتر است از فیلتر wp_nav_menu_args  استفاده نماییم .

کد زیر در در فایل functions.php وارد نمایید .

function set_container_class ($args) {
$args['container_class'] = str_replace(' ','-',$args['theme_location']).'-nav'; return $args;
}
add_filter ('wp_nav_menu_args', 'set_container_class')

 

۵- با استفاده از css به فهرستتان استایل بدهید

کد زیر را به style.css اضافه کنید .

.primary-mobile-nav {
display: none;
}
@media (max-width: 643px){
.primary-nav {
display: none;
}
.primary-mobile-nav {
display: block;
}
}

به طور کلی ما چون نمی خواهیم فهرست موبایل نمایش داده شود آن را غیرفعال می کنیم تا فقط وقتی صفحه نمایش کوچک بود نمایش داده شود .

همین ۵ قدم را می توانید برای فهرست های دیگری هم تکرار کنید تا برای هر صفحه نمایشی فهرست ویژه ای داشته باشید .