إذا كنت تتساءل عن كيفية عمل قائمة أو رابط تنقّل سريع، وكيف أن النّقر على كلمة أو عنوان على صفحة معيّنة يؤدّي بك إلى جزء معيّن من صفحة، وكنت تريد تطبيقه على صفحة من موقعك الإلكتروني أو مدوّنتك فأنت في المكان المناسب.
إذ بعد انتهائك من قراءة وفهم هذه الصّفحة ستكون قادرا على إنشاء رابط وقائمة تنقّل سريع تؤدّي روابطها إلى أجزاء معيّنة على الصّفحة بشكل يدوي. سيكون من الجيّد مشاركة نتيجة عملك في التّعليقات في الأسفل.
حول سمة المعرّف
سمة ID هي واحدة من السمات الأساسية في لغة HTML وتستخدم لتحديد معرف فريد لعنصر HTML.
يتم استخدام السمة ID لتمييز عنصر HTML عن غيره من العناصر الأخرى في الصفحة، وذلك بتحديد معرف فريد يتم استخدامه للرجوع إلى العنصر في وقت لاحق.
عندما تضيف سمة ID إلى عنصر HTML، يتم تحديد المعرف الفريد لهذا العنصر. ويتم تحديد هذا المعرف في الكود باستخدام الرمز "#" متبوعًا بالاسم الذي تم تحديده في السمة ID. وبهذا الشكل يمكن الرجوع إلى العنصر بسهولة وتطبيق أي تعديلات أو تغييرات عليه في أي وقت.
على سبيل المثال، إذا كان لدينا عنصر HTML في الصّفحة عبارة عن صورة ونريد تطبيق بعض التعديلات عليها في وقت لاحق أو تسهيل الوصول إليها، يمكننا استخدام السمة ID لتحديد هذا العنصر. على سبيل المثال، يمكننا تحديد ID المعرف الفريد للصورة بالرمز "#image" ومن ثم تطبيق التعديلات عليه في أي وقت في المستقبل باستخدام هذا المعرف الفريد.
وأيضا يجب توفير معرف فريد (ID) لكل عنصر HTML في صفحة ويب، ولا يمكن استخدام نفس المعرف لأكثر من عنصر واحد.
يتعلق هذا بسمة ID في HTML بالخصوص، والتي تُستخدم لتحديد عنصر محدد بشكل فريد على صفحة معيّنة. وبما أن المعرف الفريد يُستخدم لتمييز العنصر والوصول إليه بسهولة في وقت لاحق، فإن استخدام نفس المعرف لأكثر من عنصر واحد يمكن أن يؤدي إلى اختلال الرّمز كلّه للصّفحة وجعله صعب الفهم والصيانة.
على سبيل المثال مرّة أخرى، إذا كان لدينا عنصر HTML هو عبارة عن زر وأردنا استخدام معرّف فريد لتحديد هذا الزر والوصول إليه بشكل سهل، يمكننا تحديد ID المعرف الفريد للزر بالرمز "#button". ولكن، لا يمكن استخدام هذا المعرف الفريد "#button" لأي عنصر HTML آخر في الصفحة. بشكل عام، يجب توفير معرف فريد لكل عنصر HTML في صفحة الويب والاستمرار في استخدام هذا المعرف بطريقة صحيحة وغير متعارضة، وذلك لتحسين صيانة الكود وتعزيز فهم الصفحة وتحسين تجربة المستخدم.
- سمة id حسّاسة، بهذا يجب التّعامل معها بحذر.
- يجب أن يحتوي اسم المعرف على حرف واحد على الأقل، ولا يمكن أن يبدأ برقم، ويجب ألا يحتوي على مسافات (مسافات، وعلامات جدولة، وما إلى ذلك).
خطوات إنشاء قائمة التّنقّل السّريع
السّمات والرّموز التي سيتمّ استخدامها:
id="TEXT_HERE"
#TEXT_HERE
ركّز جيّدا: نفترض أنك كتبتَ صفحة تتحدّث فيها صفحة أيّام الأسبوع باللّغة الإنجليزية، وتقدّم معلومات قيّمة حولها، وفصلت في كلّ يوم من تلك الأيّام بشكل موسَع -على الصّفحة- بحيث جعلتَ من كلّ اسم يومٍ عنوانًا فرعيّا على الصّفحة. وقمتَ كذلك بوضع قائمة (للتّنقّل السّريع) تضمّ أسماء الأيّام في أعلى الصّفحة أيضا.
أنت الآن تريد أن تكون قائمة الأيّام في الأعلى تضمّ روابطًا عند النّقر على إحداها، تأخذك إلى الجزء المخصّص من الصّفحة الذي يحمل اسم اليوم الذي نقرت عليه في قائمة الأيّام العليا.
نفترض القائمة في الأعلى ستكون على النّحو الآتي:
- Monday
- Tuesday
- Wednesday
- Thursday
- Friday
- Saturday
- Sunday
إعداد المعرّفات | الخطوة الأولى لإنشاء قائمة تنقّل سريع
1- ستقوم بتغيير عرض الصّفحة إلى وضع HTML. (تعرّف على كيفيّة الانتقال بين وضع الكتابة العادي ووضع HTML في بلوجر).
(خطوة إضافيّة اختياريّة) يُمكنك إنشاء ملفّ نصّي حتى تجهّز عليه معرّفات العناوين، والتي ستكون على الشّكل الآتي:
id="Monday"
id="Tuesday"
id="Wednesday"
id="Thursday"
id="Friday"
id="Saturday"
id="Saturday"
2- ستقوم بالبحث عن علامات العناوين الفرعية (h3) التي تتضمّن -في كلّ واحدة فيها- اسم اليوم، وستقوم بإدراج المعرّف المناسب في علامة العنوان المناسبة على الشّكل الآتي:
مظهر العناوين الفرعيّة قبل التّعديل:
<h3>Monday</h3>
<h3>Tuesday</h3>
<h3>Wednesday</h3>
<h3>Thursday</h3>
<h3>Friday</h3>
<h3>Saturday</h3>
<h3>Sunday</h3>
مظهر العناوين الفرعية بعد التّعديل
<h3 id="Monday" >Monday</h3>
<h3 id="Tuesday" >Tuesday</h3>
<h3 id="Wednesday">Wednesday</h3>
<h3 id="Thursday">Thursday</h3>
<h3 id="Friday">Friday</h3>
<h3 id="Saturday">Saturday</h3>
<h3 id="Saturday">Sunday</h3>
ملاحظات مهمّة
_____
لا داعي للقلق، الأمر سهل إذا تمّ النّظر إليه بالطّريقة السّهلة
- إذا قمت بإدخال تنسيقات على العناوين الفرعية مثل لون أو محاذات إلى اليمين، قد تظهر علامات عنوان h3 وبداخلها سمات أخرى. لا داعي للقلق، فقط قم بوضع المعرّف المناسب:
id="TEXT_HERE"
بعد علامة بداية السّمة، على سبيل المثال (في المكان المحدّد باللّون البرتقالي):
<h3 style="text-align: right;"><span style="color: #073763;">Monday</span></h3>
_____
البحث بسرعة، وبفعالية في نفس الوقت
- يُمكنك (في وضع HTML) العثور على العناوين الفرعية بشكل أسهل إذا:
- نقرت على زرّ "تنسيق HTML" (تعرّف على زرّ تنسيق HTML في بلوجر).
- بحثتَ باستخدام اختصار (Ctrl+F) أو (Cmnd+K)وتحديدا بعبارة "h3".
_____
-
نشر رابط التّنقّل السّريع | الخطوة الثّانية لإنشاء قائمة تنقّل سريع
بعد أن قمتَ بإعداد المعرِّفات على العناوين الفرعيّة، صار الآن بالإمكان طلبها من خلال رابط يُؤدّي إليها من خلال إدراج رابط يُؤدّي إلى الصّفحة ضمن عبارة على الصّفحة (داخليا أو خارجيّا)، والطّريقة كالآتي:
1- ضمن عرض الإنشاء في بلوجر (وضع الكتابة العادي)، ستذهب إلى القائمة التي قمتَ بإعدادها في أعلى الصّفحة من أجل التّنقّل السّريع، وستحدّد -مثلا- كلمة Monday كاملة، وستنقر على زر "إضافة ارتباط" (تعرّف على زرّ إضافة ارتباط في بلوجر).
2- بدل أن تكتب رابط الصّفحة، يُمكنك مباشرة كتابة المعرّف المناسب مسبوقا برمز الشّبّاك "#"، ولتكن الرّوابط مفرّقة على الأسماء في قائمة التّنقّل السّريع على النّحو الآتي:
#Monday
#Tuesday
#Wednesday
#Thursday
#Friday
#Saturday
#Sunday
في حال كان المعرّف يضمّ أكثر من كلمة واحدة، يُمكن تفرقة الكلمات فيما بينها باستخدام شرطة سفليّة "_"، على سبيل المثال: Day_Two.
ملاحظات مهمّة
_____
- بدل النّقر على زرّ "إدراج ارتباط" يُمكنك -مباشرة بعد تحديد النّصّ- النّقر على اختصار (Ctrl+K) أو (Cmnd+K) لوصول أسهل لخيار إدراج الرّابط في بلوجر.
- يُنصح بِعدم وضع اسم نطاق الموقع الإلكتروني في الرّوابط الدّاخليّة في بلوجر والاكتفاء بلصق جزء الرابط مباشرة بعد اسم النّطاق، على سبيل المثال:
❎ https://www.arsoporte.com//2022/11/Google-ranking-systems.html#MUM
✅ /2022/11/Google-ranking-systems.html#MUM
لا تقلق، سيظهر بالشّكل الذي تريده مباشرة بعد نشر الصّفحة.
- إذا أردت مشاركة رابط وصول سريع لجزء معيّن بشكل خارجي، يجب إضافة المعرّف مسبوقا بعلامة "#" في آخر الرّابط.
على سبيل المثال:
https://www.arsoporte.com/2022/11/Google-ranking-systems.html#MUM
- سواء وضعتَ الرّابط على نفس الصّفحة أو شاركتَه بشكل خارجي، سيتمكّن أي شخص -عند نقره عليه- من الوصول مباشرة إلى الجزء المعنيّ من الصّفحة.
- روابط الوصول السّريع ليست خاصّة بقائمة التّنقّل السّريع، ويُمكنك إنشاء روابط وصول سريع من أي مكان وإلى أي مكان من صفحتك. وإذا كان الأمر يتعلّق بصفحات في مواقع إلكترونية أخرى، فيُمكنك أيضا التّعرّف على طريقة إنشاء رابط لنصّ مميّز على الصّفحة.
- يُمكنك إدراج رابط الوصول السّريع على أيّ كلمة أو عبارة من الصّفحة، وسيعمل المتصفّح -بعد نقر المستخدِم على الارتباط- على نقل القارئ مباشرة إلى الجزء المعنيّ.
- يُمكنك إنشاء رابط تنقّل سريع لأي جزء من الصّفحة من خلال عمل معرّف لذلك الجزء وإعطائه تسمية فريدة، ليس الأمر مرتبطا فقط بالعناوين الفرعية أو العناوين أو قائمة التّنقّل السّريع، إذ يُمكن تطبيق الأمر على الصّور والفيديوهات والقوائم وأي شيء متوقّع على الصّفحة.
إذا كنت قد بدأت مسيرة تحسين مدوّنتك، فيُمكنك الاطّلاع أيضا على طريقة تعديل روابط الصّفحات الأساسية في بلوجر.
في ما يلي فيديو يوضحّ طُرق استخدام سمة id في HTML:
أكثر ما شجّعني على كتابة هذه الصّفحة "على فرحات فضل" ردّا على منشور لي في مجموعة "محترفي التّدوين ويوتيوب" يتعلّق بأخطاء فهرسة الفيديو في سيرش كونسول.
مصادر ومراجِع:
مدوّنة الدّعم العَربي: لفهم منتجات جوجل، تحقيق الرّبح من الإنترنت وتحسين الظّهور على نتائج محرّكات البحث العالميّة...
المشاركات
ليست هناك تعليقات
إرسال تعليق
شارك رأيك مع مدوّنة الدّعم العَربي! يرجى الالتزام بقواعد التعليقات. التعليقات التي تحتوي على إساءة أو تشهير أو دعاية أو محتوى مسيء لن يتم نشرها بعد المراجعة اليدويّة.