آیا یک نوار کناری طولانی دارید که طرح وردپرس شما را در صفحات خاصی بشکند؟ اخیراً یکی از کاربران ما از ما راه حل خواسته است. از آنجا که کاربر نمی خواست هیچ یک از ابزارک ها را حذف کند ، پیشنهاد ما این است که به تمام ابزارک های طولانی که مشکل را برطرف می کنند یک ارتفاع ثابت و یک نوار پیمایش اضافه کنید. در این مقاله ، ما به شما نحوه افزودن یک نوار پیمایشی سفارشی به هر عنصر در WordPress نشان خواهیم داد.
آموزش فیلم h4>
اگر فیلم را دوست ندارید یا به دستورالعمل های بیشتری احتیاج دارید ، به خواندن ادامه دهید.
اولین کاری که باید انجام دهید نصب و فعال کردن پلاگین Scrollbar سفارشی . پس از فعال سازی ، برای پیکربندی افزونه به سادگی به Appearance »Scrollbars بروید.
شما باید با تهیه نام برای نوار پیمایشی خود شروع کنید. این افزونه به شما امکان می دهد چندین نوار پیمایشی اضافه کنید ، بنابراین افزودن نام به شما کمک می کند نوار پیمایش سفارشی خود را در منطقه مدیر .
مورد بعدی در تنظیمات گزینه Target Element Selector است. این کلاس یا شناسه عنصر وب است که می خواهید هدف قرار دهید. با کلیک راست روی عنصر موجود در مرورگر Chrome و انتخاب عنصر inspect از فهرست ، می توانید شناسه یا کلاس هر عنصر را پیدا کنید.
همانطور که در تصویر می بینید ، عنصری که می خواهیم هدف قرار دهیم در کنار کلاس CSS bwp_gallery است.
پس از وارد کردن انتخابگر هدف ، می توانید ارتفاع و عرض ناحیه پیمایشگر سفارشی را انتخاب کنید. همچنین می توانید موقعیت و موضوعی را برای نوار پیمایش انتخاب کنید.
پس از اتمام کار ، به سادگی بر روی دکمه ذخیره تغییرات کلیک کنید تا تنظیمات خود را ذخیره کنید.
این همه ، اکنون می توانید به وب سایت خود مراجعه کنید تا نوار پیمایشی سفارشی را در عمل مشاهده کنید. با کلیک بر روی دکمه افزودن می توانید فرآیند را برای ایجاد یک نوار پیمایشی سفارشی دیگر تکرار کنید.
امیدواریم این مقاله به شما کمک کرده است که میله های پیمایش سفارشی را به هر عنصری در سایت وردپرس خود اضافه کنید. همچنین ممکن است بخواهید لیست ما را با 25 ابزارک مفید وردپرس برای سایت شما .
اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube مشترک شوید برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .
منبع:
https://www.wpbeginner.com/plugins/how-to-add-custom-scrollbar-to-any-element-in-wordpress/.