تولیدلینک انکردرپست وردپرسscroll-to-anchor

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

راه وروش وکدهای اچ تی ام ال ساخت لنگرلینک

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

مرحله ۱: تنظیم ساختار HTML

ابتدا، بیایید ساختار HTML صفحه وب خود را تنظیم کنیم. ما یک منوی ناوبری با لینک‌های لنگر به بخش‌های مختلف صفحه ایجاد خواهیم کرد. برای مثال:

کد HTML:

---

<nav>
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
  </ul>
</nav>

<div id="section1">
  <h2>Section 1</h2>
  <p>This is the content of section 1.</p>
</div>

<div id="section2">
  <h2>Section 2</h2>
  <p>This is the content of section 2.</p>
</div>

<div id="section3">
  <h2>Section 3</h2>
  <p>This is the content of section 3.</p>
</div>

---

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

عنصری با شناسه منحصر به فرد.
مرحله ۲: افزودن قابلیت پیمایش روان

در مرحله بعد، کد جاوا اسکریپت را برای فعال کردن پیمایش روان به لینک‌های لنگر اضافه خواهیم کرد. یک فایل جاوا اسکریپت جدید ایجاد کنید و آن را با استفاده از دستور زیر به سند HTML خود پیوند دهید.