تغییر نشانگر موس در سایت

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

توی این مطلب از سایت کنترل وب، با استفاده از صفحه ساز المنتور و سیستم مدیریت محتوا وردپرس و به کمک کتابخانه kursor.js جاوا اسکریپت میتونیم با چند خط کد ساده تغییر نشانگر موس در سایت رو به راحتی برای صفحات دلخواه سایت انجام بدیم

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

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

همونطور که در تصویر بالا می بینید، می تونیم با زدن روی گزینه add new، یک قطعه کد جدید بسازیم و در صفحه اون قطعه کدمون رو قرار میدیم. همینظور مثل تصویر زیر عنوانی رو برای کدتون بزارین که گمش نکنین.

توی کادر مربوط به کد سفارشی، کد این قسمت که در ادامه براتون قرار می دیم رو قرار بدین.بعد از این کار، توی نوار بالای کد زیر قسمت عنوان، قسمت هایی وجود داره که هر کدوم از اون تنظیماتی رو برای کدمون در نظر میگیرن. با تنطیم قسمت location میتونیم مشخص کنیم که اسکریپت ما در کدوم قسمت از ساختار html صفحه قرار بگیره. برای اینکه این کد جاوااسکریپت روی سرعت تاثیری نذاره، این قسمت رو روی body – End قررار میدیم تا اسکریپت در اخر صفحه قرار بگیره و بعد از محتویات صفحه لود بشه.

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

در قطعه کد زیر میتونین با تغییر type  بین عدد 1 تا 5 میتونین مدل های مختلفی از نشانگر موس رو به وجود بیارین. تنظیم دیگری که در قطعه کد زیر قرار داره که میتونین به کدتون اعمال کنین، اینه که نشانگر پیشفرض موس روی سایت رو غیر فعال کنین تا فقط نشانگر در این حالتی که کدشو نوشتین برای نشانگر موس سایت در نظر گرفته بشه.

برای اینکار در قطعه کد زیر مقدار removeDefaultCursor رو از مقدار false  به true  تغییر بدین.

همچنین میتونین با تغییر مقدار color به کد رنگی موردنظر خودتون، رنگ موردنظرتونو به نشانگر موس ایجاد شده بدین و به کار رنگ ببخشین!!

به همین راحتی، تونستیم که نشانگر موس کاربر رو توی قسمت های مختلف سایت تغییر بدیم و تغییر نشانگر موس در سایت رو داشته باشیم.

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

قطعه کد: