نحوه ساخت منو شناور در وردپرس

سلام خدمت شما دوستان عزیز

با آموزش نحوه ساخت منو شناور در وردپرس در خدمت شما هستم

با ای تاتس همراه باشید 🙂

قدم اول :اضافه کردن منو ناوبری شناور با استفاده از پلاگین


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

Sticky Menu plugin setting

برای اولین بار شما نیاز به وارد کردن شناسه CSS منوی ناوبری دارید که میخواهید چسبناکی آن را ایجاد کنید.

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

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

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

شما باید یک خط کد را مانند این پیدا کنید:

<nav id="site-navigation" class="main-navigation" role="navigation">

در این مثال، شناسه CSS منوی ناوبری ما، ناوبری سایت است.

بروید جلو و وارد ناوبری CSS ID در تنظیمات پلاگین مانند این # سایت-ناوبری.

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

پس از آن شما نیاز به کلیک بر روی جعبه چک در کنار گزینه: ‘بررسی برای نوار مدیریت’دارید. این اجازه را می دهد تا افزونه یک فضا برای اضافه کردن  برای مدیریت وردپرس که فقط برای کاربران وارد شده اضافه کند.

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

شما می توانید آزمایش کنید که چگونه بر روی دستگاه های تلفن همراه ظاهر می شود. اگر شما آن را دوست ندارید، می توانید برای این گزینه 780px اضافه کنید.

فراموش نکنید که دکمه تنظیمات ذخیره را برای ذخیره تغییرات خود کلیک کنید.

اکنون می توانید از وبسایت خود دیدن کنید تا منوی ناوبری شناور خود را در عمل ببینید.

Sticky menu

قدم دوم : ساختن منوی شناور بصورت دستی


این روش نیاز به اضافه کردن کد سفارشی CSS به قالب خود دارد.

برای اولین بار شما نیاز به بازدید از ظاهر »سفارشی برای راه اندازی customizer تم دارید.

روی «CSS اضافی» در سمت چپ کلیک کنید و سپس این کد CSS را اضافه کنید.

#site-navigation {
    background:#fff;
    height:60px;
    z-index:170;
    margin:0 auto;
    border-bottom:1px solid #dadada;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align: center;
}

# سایت ناوبری را با شناسه CSS منوی ناوبری خود جایگزین کنید و روی دکمه Save & Publish کلیک کنید.

اکنون می توانید از وبسایت خود دیدن کنید تا منوی ناوبری شناور خود را در عمل ببینید.

اگر منوی ناوبری شما به طور معمول پس از سرصفحه سایت ظاهر شود، این کد CSS می تواند عنوان و سرآیند سایت را با هم همپوشانی کند.

با اضافه کردن حاشیه به ناحیه سرصفحه خود، با استفاده از برخی از CSS، این می تواند به راحتی تنظیم شود:

.site-branding {
margin-top:60px;
}

نام تجاری سایت را با کلاس CSS ناحیه هدر خود جایگزین کنید.

امیدوارم از این مطلب بهره کافی را برده باشید 🙂

مطالب مرتبط

ترفندهای جستجو در گوگل

تبدیل PDF و عکس به Word بدون نرم افزار!

تشخیص فونت به کار رفته در سایت ها

آموزش انتخاب تم و نوشتن مطلب وردپرس + برخی اصطلاحات + رمز سودآوری از سایت!

آموزش ساخت وبسایت در کمتر از 20 دقیقه!

آموزش نصب و فعالسازی IDM

نحوه ساخت منو شناور در وردپرس

محتوای مطلب

کامنت ها

لطفا اگر سوالی نامرتبط با این مطلب دارید، از تب «پرسیدن سوال» استفاده کنید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.