آموزش ایجاد منوی سایت برای نمایش در موبایل

[Saberian 1,792]

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

 

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

 

 

منوی مینیمال برای موبایل :

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

 

شروع :

اولین کاری که باید انجام دهید کپی کردن کد زیر و ریختن آن در فایل functions.php قالب وبسایتتان است ، میتوانید این کد را به انتهای کد ها اضافه نمایید .

add_action( 'init', 'register_my_menu' );
 
function register_my_menu() {
        register_nav_menu( 'mobile_menu', __( 'Mobile Menu' ) );
}

 

توجه داشته باشید که اگر قالب سایت شما دارای یک یا چند مکان منو هست باید از تابع زیر استفاده کنید

 

register_nav_menus()

 

این تابع مشابع همان تابع register_nav_menu() عمل می کند ، با این تفاوت که اجازه ی ایجاد منو های متعدد را به شما خواهد داد . برای نمونه به مثال زیر توجه فرمایید :

 

register_nav_menus( array(
	'main_menu' => 'Main Navigation Menu',
	'mobile_menu' => 'Mobile Menu',
) );

 

بعد از قرار دادن کد فوق در مکان مربوطه (یا همان مکان مناسب) شما باید اقدام به بازکردن فایل header.php قالب سایت خود کنید و قطعه کد زیر را در مکانی که می خواهید منوی موبایل نمایش داده شود وارد کنید .

<nav id="mobile-menu">
    <a href="#" id="menu-icon"></a>
    <?php wp_nav_menu( array( 'theme_location' => 'mobile-menu' ) ); ?>
</nav>

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

 

بخش مربوط به استایل منو (همان css) :

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

 

حالا وقت آن شده است که کد زیر را بصورت کامل به فایل css قالب سایت خود اضافه کنید (میتوانید این کد را به انتهای کد های موجود در این فایل اضافه کنید)

/* body{ font-family: Arial; font-size:15px; color:#555} */
/* header, main{ width:900px;margin:0 auto;} */
/* header { position:relative } */
#mobile-menu{ display: none }

 

همانطور که هدف ما نمایش این منو برای دستگاه هایی با صفحه نمایش کم عرض است ، پس ما باید کد زیر را هم به فایل استایل اضافه کنیم که تعیین کننده ی این است که : هر زمان دستگاه دارای صفحه نمایشی با عرض کمتر از 767 پیکسل بود این منوی مینیمال برای بازدیدکننده به نمایش در آید (در غیر اینصورت منوی پیش فرض سایت یا درواقع همان منوی اصلی سایت نمایش داده میشود)

 

@media only screen and (max-width: 767px) {
header, main{ width:90%}
	
	/* mobile menu */
	#mobile-menu{ display: block }
	
	#menu-icon {
		width: 40px;
		height: 40px;
		display: block;
		background: #7AD03A ;
		float: right;
		margin-top: 10px;
		text-indent:-9999px
	}
 
	nav ul, nav:active ul { 
 
		display: none;
		position: absolute;
		padding: 20px;
		background: #7AD03A;
		right: 0px;
		top: 35px;
		width: 50%;
		border-radius: 4px 0 4px 4px;
 
	}
 
	nav li {
		list-style-type:none;
		text-align: center;
		width: 100%;
		padding: 10px 0;
		margin: 0;
	}
 
	nav li a{ color:#fff !important; text-decoration:none !important; display:block}
	nav:hover ul { display: block; }
 
	}
	
}

 

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

 

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

 

حالا مجددا وارد فایل header.php بشوید و کد زیر را کپی کنید و در جایی که کد قبلی را در این فایل قرار داده بودید بروید  .

<link rel="stylesheet" href="https://go.20script.ir/index.php?url=<?php bloginfo('template_directory'); ?>/mfglabs_iconset.css">

این کد باید جایگزین کد زیر شود .

<a href="#" id="menu-icon"></a>

 

و آخرین کاری که باید انجام دهیم ویرایش مجدد فایل style.css یا همان css است و کد زیر را باید به آن اضافه کنیم .

 

#menu-icon {
	width: 40px;
	height: 40px;
	display: block;
	background: #7AD03A ;
	float: right;
	margin-top: 10px;
}

 

و همچنین سه دستور زیر را هم در css اضافه کنید

text-align: center;
color: #fff;
text-decoration:none;

اکنون فایل ها را ذخیره کنید ، کار تمام است و همه چیز اماده اجراست .

 

امیدوارم از این آموزش لذت برده باشید .

موفق باشید .

[wwwha 36]

سلام عزیز

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

نمونش همین منو موبایلش که شبیه اپلیکیشنه

لینک ها تنها برای اعضای سایت قابل نمایش است.

 

بنده در این قالب استفاده کردم

لینک ها تنها برای اعضای سایت قابل نمایش است.

[rsn 0]

قالب من ریسپانسیو هست، اما در نسخه موبایل، مینویسه MAIN MENU و بعد از کلیک روی اون، منو باز میشه. چطور میشه اون رو فارسی کرد؟

لینک ها تنها برای اعضای سایت قابل نمایش است.

[Masih 6,279]

در 4 ساعت قبل، rsn گفته است :

قالب من ریسپانسیو هست، اما در نسخه موبایل، مینویسه MAIN MENU و بعد از کلیک روی اون، منو باز میشه. چطور میشه اون رو فارسی کرد؟

لینک ها تنها برای اعضای سایت قابل نمایش است.

درود.

در صورت وجود فایل های زبان ، اون رو با نرم افزار poEdit یا افزونه ها مخصوص اینکار بررسی کنید. اگر وجود نداشت ، فایل هایی که در هیدر سایت اجرا میشن رو چک کنید. مثل فایل header.php یا فایل های دیگه ای که ممکنه توسط توابع در هیدر Include شده باشند.

 

اما اگر منظورتون اون لینکی که هست که در پاسختون قرار داشت ، من که کلمه ندیدم ، در مقابل یک آیکن BAR بود.