فرجاد - طراحی سایت و خدمات وردپرس

امروز 13ام, آذر 1395 فرجاد آماده خدمات رسانی به شماست.

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

نویسنده : میثم لک زایی
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

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

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

Minimalist Menu

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

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

شروع :

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

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

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

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

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

mobile-menu-2

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

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

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

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

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

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

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

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

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

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

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

امیدوارم از این آموزش لذت برده باشید . در صورتیکه مشکلی در این رابطه داشتید می توانید از قسمت نظرات سایت با ما درمیان بگذارید .

موفق باشید .

تاریخ ارسال : 15ام تیر 1395 | آخرین ویرایش : 15ام تیر 1395
نظرات : بدون پاسخ »
نظرات کاربران - تاکنون 0 دیدگاه برای این مطلب ارسال شده است

فروش عمده رم و فلش