إضافة جدول محتويات تلقائي لمقالات بلوجر بطريقة احترافية
تعلم كيف تضيف جدول محتويات جميل وذكي يتولد تلقائياً من عناوين مقالاتك ويحسن تجربة القارئ والسيو
ما هو جدول المحتويات ولماذا تحتاجه؟
جدول المحتويات (Table of Contents) هو قائمة منظمة تظهر في بداية المقال تحتوي على روابط سريعة لكل قسم أو فقرة داخل المقال، بحيث يمكن للقارئ النقر على أي رابط والانتقال مباشرة إلى الجزء الذي يريد قراءته.
تخيل معي أنك كتبت مقالاً طويلاً من 2000 كلمة أو أكثر، القارئ الذي يدخل إلى مقالك لا يريد بالضرورة قراءة كل شيء، ربما يبحث فقط عن الخطوة الثالثة أو الكود المحدد، فيجد نفسه يمرر الصفحة للأسفل وقد يشعر بالإحباط ويغادر!
جدول المحتويات يحل هذه المشكلة تماماً ويجعل تجربة قرائة مقالك سلسة واحترافية.
فوائد جدول المحتويات لمدونتك
كود HTML لجدول المحتويات
هناك طريقتان لإضافة جدول المحتويات: يدوية تكتب فيها الروابط بنفسك، أو تلقائية بالجافاسكريبت تولّد جدول المحتويات من عناوين المقال تلقائياً. سنتعلم الطريقتين.
أولاً: الكود الأساسي لجدول المحتويات اليدوي، ضعه في بداية مقالك عبر وضع HTML:
<!-- جدول المحتويات --> <div class="toc-container"> <div class="toc-header"> <span>📋 محتويات المقال</span> </div> <ul class="toc-list" id="toc"> <li><a href="#section1">العنوان الأول</a></li> <li><a href="#section2">العنوان الثاني</a></li> <li><a href="#section3">العنوان الثالث</a></li> </ul> </div> <!-- ثم في كل عنوان داخل المقال أضف id --> <h2 id="section1">العنوان الأول</h2> <h2 id="section2">العنوان الثاني</h2> <h2 id="section3">العنوان الثالث</h2>
كود JavaScript التلقائي الذكي
هذا هو الكود الاحترافي الذي يولّد جدول المحتويات تلقائياً من جميع عناوين h2 و h3 في مقالك، لن تحتاج لكتابة أي شيء يدوياً بعد الآن!
الكود يقوم بثلاثة أشياء: يجد جميع العناوين، يضيف لها معرّف id تلقائي، ثم يبني قائمة الروابط بشكل كامل.
/* === جدول المحتويات التلقائي === */ /* 1. أولاً ضع هذا الـ HTML في بداية مقالك */ /* <div id="auto-toc"></div> */ /* 2. ثم أضف هذا الجافاسكريبت في نهاية القالب */ /* الإعدادات > تعديل HTML > قبل </body> */ <script> document.addEventListener('DOMContentLoaded', function() { // تحديد مكان جدول المحتويات const tocContainer = document.getElementById('auto-toc'); if (!tocContainer) return; // جمع كل العناوين h2 و h3 داخل المقال const article = document.querySelector('.post-body') || document.querySelector('.entry-content') || document.body; const headings = article.querySelectorAll('h2, h3'); if (headings.length < 2) return; // لا تظهر إن كان أقل من عنوانين // بناء جدول المحتويات let tocHTML = ` <div class="toc-box"> <div class="toc-title">📋 محتويات المقال</div> <ul class="toc-list"> `; headings.forEach(function(heading, index) { // إضافة id تلقائي لكل عنوان const id = 'toc-heading-' + index; heading.setAttribute('id', id); // تحديد المستوى h2 أو h3 const isH3 = heading.tagName === 'H3'; const indent = isH3 ? 'style="padding-right:20px;opacity:0.8"' : ''; tocHTML += ` <li ${indent}> <a href="#${id}">${heading.textContent}</a> </li> `; }); tocHTML += ` </ul> </div> `; tocContainer.innerHTML = tocHTML; // تمرير سلس عند النقر على الروابط tocContainer.querySelectorAll('a').forEach(function(link) { link.addEventListener('click', function(e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); }); </script>
خطوات التركيب في بلوجر
الدخول إلى محرر القالب
من لوحة تحكم بلوجر اذهب إلى المظهر ← تعديل HTML ليفتح محرر الكود الخاص بقالبك.
إضافة CSS في رأس الصفحة
ابحث عن الوسم </head> والصق كود CSS الخاص بجدول المحتويات قبله مباشرة داخل وسم <style>
إضافة JavaScript قبل نهاية Body
ابحث عن الوسم </body> والصق كود JavaScript قبله مباشرة. هذا يضمن تحميل الصفحة أولاً ثم تشغيل الكود.
وضع حاوية TOC في المقال
عند كتابة أي مقال جديد، اذهب إلى وضع HTML وضع <div id="auto-toc"></div> في بداية المقال قبل الفقرة الأولى مباشرة.
حفظ وتجربة النتيجة
احفظ القالب وافتح أي مقال يحتوي على عناوين h2 أو h3، ستجد جدول المحتويات يظهر تلقائياً في بداية المقال!
نصائح لتحسين جدول المحتويات
🔹 استخدم عناوين وصفية: اجعل عناوين h2 و h3 في مقالاتك واضحة ومختصرة لأنها ستظهر مباشرة في جدول المحتويات.
🔹 لا تفرط في العناوين: جدول المحتويات يكون مفيداً للمقالات الطويلة فقط (أكثر من 800 كلمة)، للمقالات القصيرة لا داعي له.
🔹 رتّب العناوين منطقياً: ابدأ بـ h2 للعناوين الرئيسية وh3 للعناوين الفرعية، وهذا يجعل جدول المحتويات هرمياً وسهل الفهم.
🔹 تخصيص التصميم: غيّر ألوان جدول المحتويات لتناسب ألوان قالبك، غيّر متغير --primary في CSS إلى لون مدونتك.
🔹 اختبار على الموبايل: تأكد دائماً أن جدول المحتويات يظهر بشكل جميل على الهاتف المحمول لأن أغلب زوارك يأتون منه.
scroll-margin-top: 80px لوسمات h2 و h3 في CSS إن كان موقعك يحتوي على هيدر ثابت (Sticky Header) حتى لا يختفي العنوان خلف الهيدر عند الضغط على روابط جدول المحتويات.
🎉 الآن مدونتك أصبحت أكثر احترافية!
جدول المحتويات التلقائي هو إضافة صغيرة بأثر كبير، يحسن تجربة قرائك، يرفع ترتيبك في جوجل، ويعطي مدونتك شكلاً مميزاً. جرّبه اليوم وشاركنا النتيجة في التعليقات!
مدونة قاسي للمعلومات 🚀🎉 تهانينا!
لقد قمت بإضافة لمسة احترافية لمدونتك ستساهم بشكل كبير في زيادة تفاعل الزوار وتحسين أرباحك ومكانتك في محركات البحث.
💬 رأيك يهمنا!
إذا أعجبك المقال أو عندك أي إضافة أو سؤال، لا تتردد في ترك تعليقك 👇
نحن نقرأ كل التعليقات ونرد عليها بكل اهتمام ❤️