تُعد روابط الارتباط أداة بسيطة لكنها قوية لتحسين التنقل في صفحات أو منشورات ووردبريس الطويلة. فهي تتيح للمستخدمين الانتقال بسرعة إلى أقسام محددة في الصفحة نفسها عن طريق النقر على رابط دون الحاجة إلى التمرير عبر كميات كبيرة من المحتوى. يمكن أن تعزز الروابط الارتباطية تجربة المستخدم وتحسين محركات البحث، مما يجعلها ميزة لا بد من استخدامها للمحتوى الطويل أو مواقع الويب ذات الصفحة الواحدة.
This guide will walk you through creating anchor links in WordPress using the Classic Editor, Gutenberg Editor, and WPBakery Page Builder. We’ll also discuss the structure of anchor links, best practices, and common use cases.
ما هو رابط الارتباط؟
رابط الارتساء هو رابط تشعبي يوجه المستخدم إلى قسم معين في نفس الصفحة بدلاً من نقله إلى صفحة مختلفة. على سبيل المثال، في منشور مدونة طويل، يمكنك إنشاء جدول المحتويات في الأعلى، وسينتقل كل رابط إلى القسم ذي الصلة من المقالة.
مثال على ذلك:
<h2 id="section1">القسم 1: ما هو رابط الربط؟</h2><a href="#section1">انتقل إلى القسم 1</a>In this example, when users click on “Go to Section 1,” they are taken directly to the part of the page where the heading “Section 1: ما هو رابط الارتباط؟” is located.
فوائد استخدام الروابط المرساة:
- سهولة القراءة المحسّنة: في المقالات الطويلة، يمكن للقراء الانتقال بسرعة إلى الجزء الذي يثير اهتمامهم دون التمرير إلى ما لا نهاية.
- تنقل أفضل: Anchor links can be used to create easy-to-navigate sections on single-page websites, such as “حول,” “الخدمات,” and “اتصل بـ"
- تعزيز تفاعل المستخدم المحسّن: من المرجح أن يبقى المستخدمون على صفحتك لفترة أطول إذا تمكنوا من العثور بسرعة على المعلومات التي يريدونها.
- تعزيز مُحسّنات محرّكات البحث: Search engines like Google use anchor links to understand your page’s structure better, potentially improving your SEO rankings.
هيكلية الروابط المرساة
يتألف رابط الارتباط من جزأين أساسيين: رابط الارتباط المعرف (المعرف) و الرابط.
- المعرّف (المعرّف)
المعرف هو معرّف فريد تضيفه إلى عنصر HTML الذي تريد الارتباط به (مثل العنوان أو فقرة). على سبيل المثال
<h2 <mark class="has-inline-color has-vivid-cyan-blue-color amp-wp-cefb454" data-amp-original-style="background-color:rgba(0, 0, 0, 0)">معرف = "القسم 1"</mark>>القسم 1: تحسين محركات البحث التقني</h2>المعرف= “section1” يجعل هذا العنوان قابلاً للتعريف على أنه نقطة الارتكاز.
- الرابط
The clickable part that directs the user to the ID. It’s created using the hashtag # متبوعًا ب بطاقة الهوية. على سبيل المثال:
انتقل إلى القسم 1إن href=” #section1″ يخبر المتصفح بالتمرير لأسفل إلى العنصر الذي يحمل المعرف section1.
مثال في العمل:
If you’re writing a detailed article about تحسين محركات البحث، يمكنك إضافة روابط ربط لكل قسم رئيسي:
<h2 id="on-page-seo">تحسين محركات البحث على الصفحة</h2>
<h2 id="off-page-seo">تحسين محركات البحث خارج الصفحة</h2>
<h2 id="technical-seo">تحسين محركات البحث التقني</h2>في الجزء العلوي من مقالتك، يمكنك بعد ذلك إضافة جدول محتويات يرتبط بهذه الأقسام:
<ul>
<li><a href="#on-page-seo">تحسين محركات البحث على الصفحة</a></li>
<li><a href="#off-page-seo">تحسين محركات البحث خارج الصفحة</a></li>
<li><a href="#technical-seo">تحسين محركات البحث التقني</a></li>
</ul>
Users who click “تحسين محركات البحث على الصفحة” will be taken straight to that section.
لماذا تستخدم الروابط المرساة؟
- تجربة المستخدم المحسّنة
يمكن للقراء الانتقال بسهولة إلى المحتوى الذي يهتمون به، وهو أمر مفيد بشكل خاص للمحتوى الطويل. وهذا يقلل من الإحباط ويجعل موقعك الإلكتروني أكثر سهولة في الاستخدام.
- تنقل أفضل على المواقع الإلكترونية ذات الصفحة الواحدة
بالنسبة للمواقع الإلكترونية ذات الصفحة الواحدة، يمكن استخدام روابط الربط لمحاكاة قوائم التصفح. سيؤدي النقر على عنصر قائمة إلى تمرير المستخدم بسلاسة إلى القسم المقابل، مما يخلق تجربة تصفح سلسة.
- تحسين تحسين محركات البحث
تساهم روابط الارتباط في الربط الداخلي، مما يساعد محركات البحث مثل جوجل على فهم بنية صفحتك بشكل أفضل. يمكن أن يؤدي ذلك إلى تحسين فهرسة المحتوى الخاص بك ويؤدي إلى تصنيفات أفضل.
- زيادة تفاعل المستخدمين
Enabling users to find the content they’re looking for quickly can increase their time on your site and reduce bounce rates, which is beneficial for user engagement metrics.
- إمكانية الوصول
تجعل روابط الارتباط أيضًا موقعك أكثر سهولة في الوصول، مما يسمح للمستخدمين ذوي الاحتياجات الخاصة أو أولئك الذين يستخدمون قارئات الشاشة بالتنقل في المحتوى الخاص بك بشكل أكثر كفاءة.
كيفية إنشاء روابط الارتباط في ووردبريس
Here’s how to create anchor links using different WordPress editors.
إنشاء روابط الارتباط في المحرر الكلاسيكي
If you’re using the محرر كلاسيكي， يجب أن تقوم بتحرير HTML to add anchor links. Here’s how:
الخطوة 1: أضف معرّفًا فريدًا إلى العنصر المستهدف
- افتح المقالة أو الصفحة التي تريد تحريرها في المحرِّر التقليدي.
- Switch to the “النص” mode to edit the HTML.
- ابحث عن العنصر (مثل عنوان أو فقرة) الذي تريد الارتباط به وأضف معرّفًا فريدًا. على سبيل المثال:
<h2 معرف = "القسم 1">القسم 1: ما هو رابط الارتباط؟ 
الخطوة 2: إنشاء رابط الارتباط
- Switch back to the “مرئي” mode.
- في الجزء العلوي من مشاركتك (أو أينما تريد الرابط)، قم بتمييز النص الذي تريد جعله قابلاً للنقر.
- Click the “رابط الإدراج/التحرير” button in the toolbar.
- في حقل عنوان URL، أدخل # القسم 1 (المعرف الذي قمت بتعيينه مسبقاً).
<a href="#section1">انتقل إلى القسم 1</a>الخطوة 3: الحفظ والمعاينة
Once you’ve saved the changes, you can preview your page to ensure the link works as expected. Clicking the link should scroll the page to the section with the matching ID.
إنشاء روابط الارتباط في محرر Gutenberg
Gutenberg is WordPress’s block editor, offering a more streamlined way to create anchor links.
الخطوة 1: إضافة معرّف إلى مكوِّن
- افتح المقالة أو الصفحة التي تريد تحريرها في Gutenberg.
- حدِّد المكوِّن الذي تريد إضافة الرابط إليه (مثل مكوِّن العنوان).
- In the right-hand sidebar, under “متقدم,” find the “HTML ANCHOR" الحقل.
- أدخل المعرف الفريد الخاص بك (على سبيل المثال، القسم2).
الخطوة 2: إضافة رابط الربط
- ارجع إلى أعلى مشاركتك أو أينما تريد إضافة الرابط.
- قم بتمييز النص الذي تريد جعله قابلاً للنقر وانقر على أيقونة الرابط في شريط الأدوات.
- في حقل عنوان URL، اكتب #section2.
- Press “Enter” to create the link.
الخطوة 3: الحفظ والاختبار
احفظ مشاركتك وقم بمعاينتها. عند النقر عليه، يجب أن ينتقل الرابط إلى القسم الذي يحتوي على معرّف الارتساء.
إنشاء روابط ارتباط في WPBakery منشئ الصفحات
مخبز WPBakery هي أداة إنشاء صفحات السحب والإفلات الشهيرة لـ WordPress. يمكنك إنشاء روابط ربط بسهولة باستخدام هذه الأداة.
الخطوة 1: إضافة معرّف فريد إلى العنصر
- افتح الصفحة أو المقالة في WPBakery Page Builder.
- انقر على العنصر الذي تريد الارتباط به وانتقل إلى إعداداته.
- In the settings, find the “معرّف العنصر” field and enter a unique ID (e.g., section1).
الخطوة 2: إنشاء رابط الارتباط
- حدد النص أو الزر الذي تريد الربط منه.
- افتح إعدادات الرابط وأدخل #القسم1 كعنوان URL.
- احفظ التغييرات.
الخطوة 3: الحفظ والمعاينة
بعد حفظ عملك، قم بمعاينة الصفحة لاختبار الرابط.
أفضل الممارسات لاستخدام الروابط المرساة
لتحقيق أقصى استفادة من روابط الربط، اتبع أفضل الممارسات التالية:
- ضمان المعرفات الفريدة
Each ID must be unique within a page. If two elements have the same ID, the browser won’t know where to scroll, and the link may not work properly.
- تجنب الأحرف الخاصة
يجب ألا تحتوي المعرفات على مسافات أو علامات ترقيم أو أحرف خاصة. التزم بالأحرف والأرقام والواصلات. على سبيل المثال، لا بأس بالقسم 1، لكن القسم 1 أو القسم #1 قد يسبب مشاكل.
- استخدام نص ارتباط واضح
Avoid vague anchor text like “Click here” or “Learn more.” Instead, use descriptive text that tells users exactly where the link will take them. For example, “Go to the On-Page SEO section” is much more informative.
- اختبر روابطك
Always test your anchor links before publishing. Make sure that each link scrolls to the correct section. Your browser’s developer tools can help diagnose any issues.
- تجنب عناوين URL العارية
تجنب عرض عناوين URL للرابط الخام في النص الخاص بك (مثل https://example.com/#section1). بدلاً من ذلك، استخدم نص رابط واضح ووصفي يوفر السياق للمستخدم.
حالات استخدام الروابط المرساة
روابط التثبيت مفيدة في العديد من السيناريوهات. إليك بعض الأمثلة الشائعة:
- جدول المحتويات
بالنسبة لمنشورات المدونة الطويلة، فإن إضافة جدول محتويات في البداية يتيح للمستخدمين الانتقال إلى أقسام محددة دون الحاجة إلى التمرير. وهذا يحسّن التصفح ويجعل المحتوى أكثر سهولة في الهضم.
- مواقع الويب ذات الصفحة الواحدة
Anchor links are a great way to create navigation menus on single-page websites. Clicking on menu items like “About Us” or “Services” will scroll the user to those sections on the same page.
- أزرار الحث على اتخاذ إجراء (CTA)
Use anchor links to direct users to specific actions, such as filling out a form or viewing a product. For example, a “Learn More” button can link to a detailed section further down the page.
- أزرار التمرير إلى الأعلى
Adding a “Scroll to Top” button allows users to quickly return to the top of a long page without manually scrolling.
الأسئلة المتداولة
- كيف تختلف روابط الربط عن الروابط العادية؟
تتنقل روابط الارتكاز داخل الصفحة نفسها، بينما تنقلك الروابط العادية عادةً إلى صفحة مختلفة. غالبًا ما تعزز الروابط المرساة التنقل داخل المحتوى الطويل أو المواقع الإلكترونية ذات الصفحة الواحدة.
- هل تساعد روابط الربط في تحسين محركات البحث؟
Yes, anchor links can be part of a good internal linking strategy, helping search engines understand your page’s structure and improving your page’s accessibility and user experience.
- كيف يمكنني اختبار روابط الارتباط؟
أبسط طريقة هي النقر على الرابط ومعرفة ما إذا كان ينقلك إلى القسم الصحيح. يمكنك أيضًا استخدام أدوات مطور المتصفح لفحص أي مشكلات في روابط الارتباط واستكشافها وإصلاحها.
- هل هناك أي إضافات لإنشاء روابط الارتساء؟
نعم، تتيح لك العديد من أدوات إنشاء الصفحات مثل WPBakery و Elementor إنشاء روابط ربط بسهولة. يمكنك أيضًا استخدام إضافات جدول المحتويات المخصصة التي تنشئ روابط ربط للعناوين تلقائيًا.
الخاتمة
تعد روابط الارتباط ضرورية لتحسين تنقل المستخدم، خاصة في المحتوى الطويل والمواقع الإلكترونية ذات الصفحة الواحدة. إن السماح للمستخدمين بالانتقال مباشرةً إلى أقسام محددة يعزز من سهولة القراءة، ويعزز المشاركة، ويساهم بشكل إيجابي في تحسين محركات البحث. سواء كنتَ تستخدم المحرِّر الكلاسيكي أو Gutenberg أو WPBakery Page Builder، فإن إضافة روابط الربط عملية بسيطة يمكنها تحسين تجربة المستخدم على موقعك بشكل كبير. من خلال اتباع أفضل الممارسات - مثل استخدام معرّفات فريدة، ونصوص ربط واضحة، واختبار روابطك - يمكنك ضمان التنقل السلس وسهولة الاستخدام بشكل أفضل لزوار موقعك.