Page scroll to id افزونه اسکرول نرم به انکر لینک ها در وردپرس
Page scroll to id یک افزونه قدرتمند وردپرس برای ایجاد لینک هایی است که هریک از صفحات وب را برای رسیدن به ID یا شناسه داخل محتوا اسکرول نرم می کنند. در واقع، این افزونه رفتار پرش مرورگر روی لینک های درون محتوا (که مقدار href آنها حاوی # است و به آنها انکر لینک می گویند) را با اسکرول نرم جایگزین می کند.
برای آشنایی با انکر لینک ها و نحوه ساختن آنها در وردپرس، مقاله آموزش ساخت لینک به نقاط مختلف صفحه را مطالعه کنید.
افزونه Page scroll to id همه ابزارهای لازم و قابلیت های پیشرفته برای ساخت وب سایت های تک صفحه ای، ناوبری درون صفحه ای، لینک های برگشت به ابتدای صفحه و غیره را فراهم می کند.
در این مقاله نحوه استفاده از این افزونه را آموزش می دهیم.
آموزش افزونه Page scroll to id و نحوه تنظیم اسکرول نرم به لینک های درون محتوا در وردپرس
ابتدا افزونه را از پایین صفحه دریافت نموده و آن را در سایت خود در بخش افزونه ها نصب کنید. اگر منو افزونه را ندیدید یا اطلاعات جزئی تری لازم دارید، به راهنمای گام به گام ما در مورد آموزش نصب افزونه وردپرس مراجعه کنید.
بعد از اینکه افزونه نصب شد آن را فعال کنید.
افزونه Page scroll to id برای لینک هایی که href یا URL آنها به فرم هشتگ است (به عنوان مثال my-id# یا http://my-site.com/page/#my-id) و به بخش ها یا المان های درون محتوا با همان اتربیوت id (به عنوان مثال <div id=”my-id”>…</div>) اشاره دارد، کار می کند. با کلیک کردن روی چنین لینک هایی افزونه Page scroll to id صفحه را به صورت نرم اسکرول کرده تا به موقعیت id هدف برسد.
بنابراین قبل از شروع کار با افزونه باید لینک های خود را تنظیم کنید.
تنظیم لینک ها در فهرست وردپرس
این افزونه به صورت پیش فرض روی لینک های فهرست وردپرس فعال است. برای آَشنایی با نحوه ساخت فهرست در وردپرس به مقاله آموزش ساخت فهرست ناوبری در وردپرس مراجعه کنید. توجه داشته باشید که این ویژگی افزونه Page scroll to id برای سایت های تک صفحه ای مناسب است.
پس از ساخت فهرست، می توانید شروع به اضافه کردن لینک های سفارشی از طریق پیوندهای دلخواه کرده و URL آنها را روی id یا هدفی تنظیم کنید که می خواهید به آن اسکرول کنید. (به عنوان مثال my-id# یا /page/#my-id یا http://my-site.com/page/#my-id و غیره).
شما می توانید از مقادیر id ای که از قبل در قالب شما وجود داشته است هم استفاده کنید. یا می توانید با استفاده از دکمه/بلوک Page scroll to id target که پس از فعال سازی افزونه در ویرایشگر نوشته/برگه ظاهر می شود یا کد کوتاه [ps2id] استفاده کنید. به عنوان مثال:
[ps2id id='my-id'/]
تنظیم لینک ها در محتوا
برای ایجاد لینک در محتوای خود می توانید از روش هایی که در مقاله ساخت انکر لینک در وردپرس ذکر شده است، استفاده کنید.
همچنین می توانید از همان دکمه/بلوک Page scroll to id target یا کد کوتاه به عنوان مثال کد کوتاه زیر استفاده کنید.
[ps2id url='#my-id']link text[/ps2id]
برای فعال کردن افزونه روی لینک های موجود، کلاس ps2id یا اتربیوت rel با مقدار m_PageScroll2id را به آنها اضافه کنید. مطمئن شوید که مقدار href/URL لینک حاوی هش (#) با ID بخشی که می خواهید به آن پیمایش کنید، باشد. علاوه بر این، شما می توانید سلکتور CSS لینک های خود را هم در قسمت “Selector (s)” تنظیمات افزونه Page scroll to id اضافه کنید. به عنوان مثال:
.menu-item a, a[href*='#']:not([href='#']
برای هایلایت کردن لینک ها یا اهداف خود می توانید از کلاسهای ارائه شده توسط افزونه در استایل شیت یا CSS سفارشی قالب خود استفاده کنید. کلاس هایلایت پیش فرض mPS2id-highlight است اما می توانید کلاس خود را در قسمت “Classes & highlight options” صفحه تنظیمات پلاگین، تنظیم کنید. به عنوان مثال، برای استایل دهی به لینک هایلایت شده (لینکی که المان هدف آن در viewport قرار دارد) می توانید CSS زیر را اضافه کنید:
a.mPS2id-highlight{
background: #ff0;
}
یا برای هایلایت کردن لینک های منو می توانید از کد زیر استفاده کنید:
.menu-item a.mPS2id-highlight{
background: #ff0;
}
تنظیمات افزونه Page scroll to id
افزونه Page scroll to id به شما امکان می دهد نحوه اسکرول کردن به id مقصد را به دلخواه خود تغییر دهید تا مطابق با نیازهای سایت شما باشد. برای دسترسی به صفحه تنظیمات افزونه، در پیشخوان وردپرس به مسیر تنظیمات » Page scroll to id بروید. صفحه ای مشابه شکل زیر به شما نشان داده می شود.
Selectors: درصورتی که می خواهید افزونه Page scroll to id شما را به لینک های خاصی هدایت کند، از قسمت Selector(s) استفاده کنید. مقدار(ها) باید تگ های انکر (a، یعنی لینک ها) به صورت رشته هایی باشد که نمایانگر روش های انتخاب المان در DOM (یعنی سلکتورهای CSS) است. هر سلکتور با کاما از هم جدا می شود؛ بنابراین می توانید چند سلکتور را به صورت زیر انتخاب کنید: سلکتور 1، سلکتور 2، سلکتور 3 و غیره. مقدار سلکتور پیش فرض [href * = ‘#’] است: نه ([href = ‘#’]) ، به این معنی که پلاگین همه لینک هایی که دارای مقدار هشتگ معتبر هستند (به عنوان مثال id#) را در URL آنها اداره می کند.
گزینه “Enable on WordPress Menu links” که به طور پیش فرض فعال است، باعث می شود افزونه به صورت خودکار روی لینک های سفارشی ایجاد شده در منوهای وردپرس (که در URL شان # دارند) فعال شوند.
Scroll duration: در این قسمت می توانید مدت زمان اسکرول کردن یعنی سرعت اسکرول مورد نظر خود را به میلی ثانیه مشخص کنید. هرچه مقدار کمتری وارد کنید، سرعت پیمایش بالاتر می رود.
گزینه “Auto-adjust scrolling duration” که به طور پیش فرض فعال است، پلاگین را قادر می سازد تا سرعت یا دوره زمانی اسکرول را متناسب با موقعیت هدف و صفحه تنظیم کند. فعال کردن این گزینه باعث می شود که مدت زمان اسکرول عادی شود تا پیمایش در مسافت کوتاه طولانی نشود (به عنوان مثال پیمایش صفحه ای که فقط 100 پیکسل است، ممکن است کوتاهتر از مقدار مشخص شده در “Scroll duration” باشد.
Scroll type/easing: در این قسمت می توانید مشخص کنید که انیمیشن اسکرول کردن در طی مدت زمان اسکرول به چه صورت باشد. به عنوان مثال گزینه پیش فرض easeInOutQuint باعث می شود که اسکرول در ابتدا و انتهای حرکت کُند و در وسط اسکرول سریع باشد. با کلیک روی لینک موجود در این قسمت می توانید دموی حرکت را ببینید.
گزینه “Force scroll type/easing” را هنگامی فعال کنید که با کتابخانه های تسهیل کننده ای که توسط قالب یا افزونه های دیگر اضافه شده است، مغایرت داشته باشد.
Scroll behavior: در این قسمت می توانید رفتار اسکرول را تعیین کنید. گزینه هایی که در این بخش در اختیار شما قرار دارند عبارتند از:
- گزینه Always scroll smoothly when reaching the end of the page/document اسکرول به موقعیت را طوری تنظیم می کند تا از طول محتوا بیشتر نشود. به عنوان مثال هنگام پیمایش به یک عنصر هدف که در پایین صفحه قرار دارد، انیمیشن پیمایش در پایین صفحه به جای اینکه ناگهان شکسته شود، به صورت نرم متوقف می شود.
- با فعال کردن گزینه Stop page scrolling on mouse-wheel or touch-swipe، پیمایش صفحه هنگامی که کاربر می خواهد صفحه را به صورت دستی پیمایش کند (مثلاً از طریق چرخ ماوس یا کشیدن انگشت)، متوقف می شود.
- فعال کردن گزینه Verify target position and readjust scrolling (if necessary), after scrolling animation is complete، باعث می شود اگر موقعیت هدف هنگام پیمایش صفحه تغییر کند، افزونه Page scroll to id پیمایش را به صورت خودکار تصحیح کند. این گزینه هنگام اسکرول بی پایان که طول محتوا مطابق با پیمایش تغییر می کند، مفید است. برای اضافه کردن قابلیت اسکرول بی پایان به سایت وردپرس خود می توانید از افزونه Ajax Load More استفاده کنید.
- گزینه Extend target position verification and scrolling adjustment for lazy-load scripts (images, iframes etc.) and changes in document’s length را هنگام استفاده از تصاویر و فریم های بارگذاری تنبل، تغییر طول محتوا و غیره فعال کنید.
Page Layout: در این قسمت می توانید جهت پیمایش صفحه را به صورت از بالا به پایین (عمودی) یا از چپ به راست (افقی) تنظیم کنید. برای پیمایش عمودی و افقی گزینه Auto را انتخاب کنید.
Offset: مقداری که در این قسمت به پیسکل وارد می کنید، مشخص می کند که چقدر مانده به لینک هدف اسکرول متوقف شود. مقدار افست می تواند یک عدد مثبت یا منفی باشد. به عنوان مثال تنظیم مقدار offset روی 50 باعث می شود افزونه 50 پیکسل مانده به هدف، پیمایش صفحه را متوقف کند.
اگر می خواهید پیمایش را با توجه به ارتفاع (یا عرض) برخی از المان ها جبران کنید، سلکتور المان را در قسمت Offset وارد کنید. به عنوان مثال ، اگر یک منوی ثابت / چسبنده بالایی با شناسه navigation-menu دارید، مقدار افست را روی navigation-menu# تنظیم کنید تا پیمایش صفحه قبل از آن متوقف شده و از همپوشانی منو با محتوای شما جلوگیری شود.
برای تنظیم جابجایی های مختلف عمودی و افقی (به عنوان مثال وقتی Layout روی خودکار تنظیم شده است)، در قسمت Offset مقادیر جدا شده با کاما را اضافه کنید. به عنوان مثال 100,50 مشخص کننده (افست عمودی 100 پیکسل و افست افقی 50 پیکسل است.
پلاگین افزونه Page scroll to id می تواند به طور خودکار یک المان پنهان ایجاد کند که به عنوان سلکتور افست استفاده شود. اگر گزینه Auto-generate #ps2id-dummy-offset element را فعال کنید، می توانید از ps2id-dummy-offset# به عنوان مقدار گزینه “Offset” استفاده کنید و سپس در CSS مقداری که می خواهید افست شما داشته باشد را به آن اختصاص دهید.
جمع بندی
افزونه Page scroll to id یک افزونه قدرتمند برای مدیریت انکر لینک ها و اسکرول به نقاط مختلف صفحه است که به شما امکان می دهد اسکرول پرشی پیش فرض مرورگر را به یک اسکرول نرم با افکت های انیمیشنی حرفه ای جایگزین کنید و ظاهر سایت خود را بسیار زیبا سازید.
امیدواریم این آموزش مورد توجه و استفاده شما قرار گرفته باشد.
دانلود افزونه
دیدگاه ها