الدليل الشامل لإضافة جدول محتويات بلوجر تلقائي -Table of Contents

أهمية إضافة جدول محتويات بلوجر لموقعك

في عالم التدوين الرقمي المتسارع، لم يعد المحتوى الجيد وحده كافياً لتصدر نتائج البحث. تجربة المستخدم (User Experience) أصبحت عاملاً حاسماً في بقاء الزائر داخل مدونتك أو مغادرتها فوراً. عندما تكتب مقالات طويلة ومفصلة – وهو أمر محبب لمحركات البحث – قد يشعر القارئ بالضياع وسط بحر الكلمات. هنا يأتي دور جدول محتويات بلوجر (Table of Contents)، الذي يعمل بمثابة خريطة طريق ترشد الزائر إلى وجهته مباشرة.

تخيل أنك تقرأ كتاباً ضخماً بدون فهرس؛ سيكون البحث عن معلومة محددة أشبه بالبحث عن إبرة في كومة قش. الأمر نفسه ينطبق على المقالات التقنية والشروحات الطويلة. إضافة جدول المحتويات ليست مجرد "إضافة جمالية"، بل هي أداة وظيفية قوية تساهم في تحسين سيو المدونة بشكل مباشر وغير مباشر.

نموذج توضيحي لأهمية هيكلة المحتوى.

في هذا الدليل الشامل والحصري، سنغوص في تفاصيل تركيب إضافة جدول المحتويات بشكل تلقائي واحترافي، مع شرح الأكواد المستخدمة، وكيفية تخصيصها لتناسب تصميم مدونتك، ولماذا تعتبر هذه الخطوة استثماراً حقيقياً في نجاح مشروعك الإلكتروني.أقرأ حول-إضافة صندوق عرض الأكواد مع زر النسخ بلوجر

ما هو جدول المحتويات (TOC) وكيف يعمل؟

ببساطة، جدول المحتويات هو قائمة منظمة تحتوي على روابط داخلية (Anchor Links) تشير إلى العناوين الفرعية (H2, H3, H4) الموجودة داخل المقال. عندما يضغط الزائر على عنوان معين في الجدول، يقوم المتصفح بالتمرير تلقائياً وبشكل سلس إلى الفقرة المرتبطة بهذا العنوان.

في منصة بلوجر، وبسبب عدم وجود إضافة رسمية مدمجة لهذه الميزة كما هو الحال في ووردبريس، نلجأ لاستخدام أكواد برمجية (HTML, CSS, JavaScript) لإنشاء هذا الجدول بشكل أوتوماتيكي. الجميل في الطريقة التي سنشرحها اليوم هو أنها ديناميكية؛ أي أنك لن تحتاج لإنشاء الجدول يدوياً في كل مرة تكتب فيها مقالاً. الكود سيقوم بفحص مقالك، استخراج العناوين، وبناء الجدول نيابة عنك.

هل جدول المحتويات مفيد للسيو (SEO)؟

الإجابة المختصرة هي: نعم، وبقوة. دعنا نستعرض الأسباب التقنية التي تجعل عناكب بحث جوجل تعشق المواقع التي تستخدم جدول محتويات منظم:

1. ظهور روابط أقسام الصفحة (Sitelinks) 📌عندما يكون مقالك منظماً بجدول محتويات، تقوم جوجل أحياناً بإظهار روابط مباشرة للأقسام الداخلية لمقالك تحت النتيجة الرئيسية في صفحة البحث. هذا يزيد من مساحة مقالك في النتائج ويرفع نسبة النقر (CTR).
2. تحسين معدل الارتداد (Bounce Rate) 📌الزائر الذي يجد صعوبة في الوصول للمعلومة يغادر فوراً. وجود الجدول يساعده في الوصول لطلبه بسرعة، مما قد يدفعه للبقاء وقراءة المزيد، وهو مؤشر إيجابي لجوجل.
3. المقتطفات المميزة (Featured Snippets) 📌جوجل يعتمد في كثير من الأحيان على العناوين الفرعية المنظمة (H2, H3) للإجابة على الأسئلة المباشرة. وجود هيكلية واضحة يعزز فرصك في الظهور في "النتيجة صفر".
4. تجربة مستخدم أفضل على الجوال 📌التمرير في شاشات الجوال للمقالات الطويلة عملية مرهقة. جدول المحتويات القابل للطي (Collapsible) يوفر تجربة تصفح مثالية لمستخدمي الهواتف الذكية.

ملاحظة هامة: عناكب البحث لا "تقرأ" المقال كما يقرأه البشر، بل تقوم بتحليل الهيكل (Structure). وجود العناوين وجدول يربط بينها يعطي إشارة قوية بأن المحتوى عميق، منظم، وذو قيمة عالية.

مميزات الإضافة التي سنقوم بتركيبها

الكود الذي قمنا بتطويره وتجهيزه لكم في هذا المقال ليس مجرد كود تقليدي، بل تم تحسينه ليكون خفيفاً وسريعاً ومتوافقاً مع معايير الويب الحديثة. إليكم أبرز خصائصه:

• تلقائي بالكامل: لا يحتاج لأي تدخل يدوي منك داخل المشاركات.
• خفيف وسريع: يعتمد على Vanilla Javascript و jQuery بشكل محسن لا يؤثر على سرعة تحميل الصفحة (PageSpeed).
• متجاوب (Responsive): يعمل بكفاءة على جميع أحجام الشاشات سواء سطح المكتب أو الجوال.
• ميزة الطي والفتح: يمكن للمستخدم إخفاء الجدول إذا لم يكن بحاجة إليه لتوفير مساحة القراءة.
• دعم التسلسل الهرمي: يميز بذكاء بين العناوين الرئيسية (H2) والفرعية (H3) ويقوم بإزاحتها لتوضيح الترتيب.

دليل التركيب العملي| خطوة بخطوة

الآن ننتقل للجزء العملي. يرجى اتباع الخطوات بدقة لضمان عمل الإضافة بدون مشاكل.
تنبيه: يُفضل دائماً أخذ نسخة احتياطية من القالب قبل إجراء أي تعديلات برمجية.

الخطوة الأولى| إضافة تنسيقات CSS

هذه الأكواد مسؤولة عن شكل الجدول، الألوان، الحدود، وطريقة عرض القائمة. يمكنك التعديل على الألوان لاحقاً لتناسب هوية موقعك.

1. اذهب إلى لوحة تحكم بلوجر > المظهر (Theme).
2. اضغط على السهم الصغير بجانب "تخصيص" واختار تعديل HTML.
3. اضغط داخل الكود واستخدم البحث (Ctrl+F) للبحث عن الوسم ]]></b:skin>.
4. الصق الكود التالي فوقه مباشرة:

/* بداية كود تنسيق جدول المحتويات */
.mhtoc * {
    box-sizing: border-box;
}
.mhtoc {
    display: block;
    width: 100%;
    height: auto;
    text-align: right;
    direction: rtl;
    overflow: hidden;
    border-radius: 8px; /* حواف دائرية عصرية */
    background-color: #f9f9f9; /* لون الخلفية */
    border: 1px solid #e0e0e0;
    margin: 20px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* ظل خفيف */
}
.mhtoc .mtochead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}
.mhtoc .mtoctitle {
    font-weight: bold;
    color: #0b5394; /* لون عنوان الجدول */
    display: flex;
    align-items: center;
    font-size: 16px;
}
.mhtoc .mtoctitle:before {
    content: "☰"; /* أيقونة القائمة */
    margin-left: 8px;
    font-size: 18px;
}
.mhtoc .mtochead:after {
    content: "إخفاء";
    font-size: 12px;
    background: #0b5394;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    transition: all 0.3s;
}
.mhtoc .mtocon:after {
    content: "إظهار";
    background: #777;
}
.mhtoc .mtoclist {
    padding: 15px;
    display: block;
}
.mhtoc .mtoclist ul {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: section;
}
.mhtoc .mtoclist ul li {
    margin-bottom: 8px;
    line-height: 1.6;
    position: relative;
}
.mhtoc .mtoclist ul li a {
    text-decoration: none;
    color: #444;
    transition: color 0.2s;
    font-size: 14px;
}
.mhtoc .mtoclist ul li a:hover {
    color: #0b5394;
    text-decoration: underline;
}
/* تنسيق الترقيم التلقائي */
.mhtoc .mtoclist ul li:before {
    counter-increment: section;
    content: counters(section, ".") " ";
    color: #0b5394;
    font-weight: bold;
    margin-left: 5px;
}
/* تنسيق العناوين الفرعية (إزاحة لليسار) */
.mhtoc .mtoclist ul li ul {
    margin-right: 20px;
    margin-top: 5px;
}
.mhtoc .mtoclist ul li ul li:before {
    content: "• ";
    counter-increment: none;
    color: #777;
    font-size: 12px;
}
/* تأثير الوميض عند الوصول للعنوان */
@keyframes highlightTitle {
    0% { background-color: #fff2cc; transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { background-color: transparent; transform: scale(1); }
}
.tocmatch {
    animation: highlightTitle 1.5s ease-out;
    border-radius: 5px;
    padding: 5px;
}
/* نهاية كود التنسيق */

الخطوة الثانية| كود الجافا سكريبت (المحرك)

هذا الكود هو "العقل المدبر" للإضافة. يقوم بالبحث عن العناوين في المقال، إنشاء الروابط، وتفعيل التنقل السلس.

1. في نفس صفحة تعديل HTML، ابحث عن وسم الإغلاق </body> (عادة يكون في آخر الملف).
2. الصق الكود التالي فوقه مباشرة:

<script type='text/javascript'>
//<![CDATA[
/* كود تشغيل جدول المحتويات المطور */
$(document).ready(function() {
    // إعدادات التحكم
    var TocMarginTop = 60;   // المسافة من الأعلى عند الوصول للعنوان (لعدم تغطية القائمة العلوية)
    var TocSpeed = 800;      // سرعة التمرير (بالميلي ثانية)
    var TocHeader = "h2,h3"; // العناوين المستهدفة (يمكنك إضافة h4)
    var ContentContainer = ".post-body"; // كلاس جسم المقال في بلوجر

    // التحقق من وجود عناوين في المقال
    if ($(ContentContainer).find(TocHeader).length > 0) {
        
        // إنشاء هيكل الجدول
        var tocCode = '
محتويات المقال
';
        
        // إضافة الجدول في بداية المقال (يمكن تغيير مكان الظهور)
        $(ContentContainer).prepend(tocCode);

        // حلقة تكرارية لاستخراج العناوين
        var i = 0;
        $(ContentContainer).find(TocHeader).each(function() {
            i++;
            var headerTag = $(this).prop("tagName").toLowerCase(); // معرفة نوع العنوان h2 أم h3
            var headerText = $(this).text(); // نص العنوان
            var anchorID = "toc-point-" + i; // معرف فريد للرابط
            
            // إضافة المعرف للعنوان الأصلي في المقال
            $(this).attr("id", anchorID);
            $(this).addClass("toc-target"); 

            // إنشاء عنصر القائمة
            var liClass = (headerTag === "h3") ? "sub-item" : "main-item";
            var linkHtml = '
' + headerText + '
';
            
            // إضافة الرابط للقائمة (منطق بسيط للتسلسل)
            if(headerTag === "h2") {
                $(".mtoclist > ul").append(linkHtml);
            } else {
                // إذا كان h3، نضيفه داخل آخر h2 (تحسين متقدم يمكن إضافته)
                // للتبسيط سنضيفه كعنصر مع كلاس مختلف للإزاحة بالـ CSS
                $(".mtoclist > ul").append(linkHtml);
            }
        });

        // تفعيل زر الإظهار والإخفاء
        $(".mtochead").click(function() {
            $(".mtoclist").slideToggle(400);
            $(this).toggleClass("mtocon");
        });

        // تفعيل التنقل السلس (Smooth Scroll)
        $(".mtoclist a").click(function(e) {
            e.preventDefault();
            var target = $(this.hash);
            if (target.length) {
                $('html, body').animate({
                    scrollTop: target.offset().top - TocMarginTop
                }, TocSpeed);
                
                // تأثير بصري على العنوان المستهدف
                target.addClass("tocmatch");
                setTimeout(function(){ target.removeClass("tocmatch"); }, 2000);
            }
        });
    }
});
//]]>
</script>

تنبيه تقني: يعتمد هذا الكود على مكتبة jQuery. أغلب قوالب بلوجر تحتوي عليها افتراضياً. إذا لم يعمل الكود، تأكد من وجود سطر استدعاء jQuery في قوالبك (عادة في قسم head).

شرح تخصيص الإعدادات (للمحترفين)

في كود الجافا سكريبت السابق، وضعنا بعض المتغيرات التي يمكنك تعديلها لتتناسب مع موقعك بشكل دقيق. إليك شرح وظيفة كل متغير:

المتغير (Variable)	الوظيفة	متى تقوم بتعديله؟
TocMarginTop	المسافة العلوية الفاصلة عند الانتقال للعنوان.	إذا كان لديك "قائمة علوية ثابتة" (Sticky Header) تغطي العنوان عند الضغط عليه، قم بزيادة هذا الرقم (مثلاً 100).
TocSpeed	سرعة الانزلاق (Scroll) بالميلي ثانية.	اجعله 1000 لحركة أبطأ وأكثر نعومة، أو 500 لحركة سريعة.
TocHeader	أنواع العناوين التي تظهر في الجدول.	افتراضياً هو "h2,h3". إذا كنت تستخدم h4 وتريد إظهاره، عدله ليصبح "h2,h3,h4".
ContentContainer	الكلاس الخاص بمحتوى المقال في القالب.	في 90% من قوالب بلوجر هو .post-body. إذا لم يظهر الجدول، قد يحتاج قالبك لكلاس مختلف مثل .entry-content.

كيف تكتب مقالاً متوافقاً مع جدول المحتويات؟

مجرد تركيب الكود لا يكفي. يجب أن تعتاد على أسلوب كتابة منظم لكي يعمل الجدول بفعالية. إليك أفضل الممارسات:

• استخدم العناوين بشكل هرمي: لا تستخدم العنوان "عريض" (Bold) فقط وتقول هذا عنوان. يجب عليك اختيار "عنوان رئيسي" أو "عنوان فرعي" من شريط أدوات بلوجر.
• ابدأ بـ H2: اجعل العناوين الأساسية في مقالك بصيغة H2 (عنوان رئيسي)، والعناوين المنبثقة منها H3 (عنوان فرعي). تجنب استخدام H1 داخل المقال لأن H1 محجوز عادة لعنوان المقال نفسه.
• اجعل العناوين جذابة: تذكر أن قارئ الجدول يقرأ العناوين ليقرر ما إذا كان سيكمل القراءة أم لا. اجعل عناوينك وصفية ومثيرة للاهتمام.
• لا تبالغ في التقسيم: إذا كان المقال قصيراً (أقل من 300 كلمة)، قد يكون جدول المحتويات مزعجاً أكثر منه مفيداً. الكود مجهز ليعمل، لكن يفضل استخدامه في المقالات الدسمة.

الخاتمة💁 إن الاستثمار في تحسين البنية التحتية لمدونتك، مثل إضافة جدول محتويات بلوجر، هو استثمار طويل الأمد. أنت لا تقوم فقط بتجميل الموقع، بل تقدم خدمة حقيقية للزائر تحترم وقته وجهده في البحث عن المعلومة. هذا الاحترام يترجم تلقائياً إلى ثقة، والثقة تتحول إلى زيارات متكررة، والزيارات المتكررة هي جوهر النجاح في عالم التدوين.

لا تتردد في تطبيق الخطوات، وتجربة الإضافة، ومراقبة تحسن مؤشرات الأداء في Google Analytics و Search Console. عالم السيو لا يتوقف عن التطور، وكونك مدوناً محترفاً يعني أن تظل مواكباً لكل أداة تمنحك الأسبقية على المنافسين.

تذكر عزيزي المدون: النجاح يكمن في التفاصيل الصغيرة. جدول محتويات بسيط قد يكون الفاصل بين قارئ يغلق الصفحة فوراً، وقارئ يقضي دقائق طويلة مستمتعاً بمحتواك. ابدأ التطوير الآن!

وفي النهاية! يسعدنا أنك وصلت إلى نهاية هذا الدليل حول الدليل الشامل لإضافة جدول محتويات بلوجر تلقائي -Table of Contents، والذي حرصنا فيه على تقديم شرح مفصل خطوة بخطوة. إذا وجدت المحتوى مفيدًا، فلا تبخل بمشاركته مع أصدقائك، ولا تنسى متابعة مدونتنا لاكتشاف المزيد من الشروحات والأدوات.

تنويه! المحتوى محمي بموجب قانون DMCA. يمنع نسخ أو إعادة نشر المحتوى دون إذن مسبق. جميع الحقوق محفوظة © بلوجربلس.

شاهد ايضا :