ایجاد لینک های داخلی در صفحه وب سایت

امروز میریم با هم نحوه ایجاد لینک های داخلی در صفحه وب سایت را یاد بگیریم، اول با مفهوم طراحی سایت تک صفحه‌ای آشنا میشیم بعد میریم سراغ نحوه ساخت این دسته از لینک‌هاُ با من همراه باشید...

طراحی تک صفحه چیست؟

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

لینک داخل صفحه چطور کار میکنه؟

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

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

چطور لینک داخلی را بسازیم؟

خب اول گفتیم که یک لینک میسازیم که قبلا بهتون یاد دادم، میشه شبیه این:

<a href="#">لینک ما</a>

حالا جای # باید شناسه‌ای که به یک بخش دادیم را بزاریم. مثلا من الان به ویدیویی که در این صفحه هست یک شناسه دادم به اسم video-ma شما میتونین هر اسمی که بخواین بهش بدید ولی توجه کنین که برای فاصله بین کلمات جای اسپیس از - یا _ استفاده کنید. نحوه شناسه دادن به ردیف‌ها را کامل توی ویدیو نشونتون دادم. ولی بطور خلاصه هر ردیف یا ماژول را که خواستید انتخاب کنید -> وارد تب پیشرفته بشید -> پایین صفحه جلو شناسه اسمی که می خواین رو بنویسید، بدون # یا هیچ علامت دیگه فقط اسم را به انگلیسی بنویسید. حالا داخل لینکون اسم شناسه را با یک # جلو شناسه وارد می‌کنیم. میشه شبیه این:

<a href="#video-ma">لینک ما</a>

حالا وقتی روی لینک کلیک کنیم می‌بینیم که میره بالا و ویدیو را نشون میده. روی این لینک کلیک کنید که ببینید.

 

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

<a href="/محصولات/#web-packages"></a>

یعنی به انتهای لینک صفحه محصولات یه بک اسلش / اضافه کردم و نام شناسه‌ای که به اون بخش داده بودم را با یک # اضافه میکنم:

/#web-packages

میشه نهایتا این لینک، روش کلیک کنید و ببینید که وارد بخش وسط صفحه محصولات میشین.

امیدوارم با این لینک‌ها بتونین بازدیدکنندگان خودتون را بهتر توی صفحات راهنمایی کنید و اینطوری باعث بشید که بازدیدکننده‌ها صفحات بیشتری از سایتتون را مشاهده کنن و مشتری دائمی شما بشن.

Daniel-odincodes-CEO

مدرس دوره: دانیال رحیمی

◉ بیش از ۷ سال سابقه در زمینه طراحی و برنامه‌نویسی وب‌سایت

◉ عضو رسمی تیم توسعه و ترجمه برنامه سایت‌ساز Beaver Builder در ایران

◉ عضو رسمی تیم توسعه و ترجمه شرکت Brain Storm Force در ایران

◉ عضو رسمی تیم توسعه و ترجمه افزونه Rank Math

◉ عضو تیم توسعه و مسئول بومی‌سازی قالب ASTRA

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *