كيفية إنشاء جدول محتوى في WordPress Post

نشرت: 2021-06-10

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

جدول المحتويات إخفاء

1. طرق إنشاء جدول المحتويات
2. الطريقة الأولى: استخدم البرنامج المساعد لإنشاء جدول المحتويات
1. 2.1. الخطوة 1: إنشاء وإعداد المحتويات لجدول المحتويات
2. 2.2. الخطوة 2: أدخل جدول المحتويات في المنشور
3. 2.3 الخطوة 3: تخصيص عرض جدول المحتويات
4. 2.4 تخصيص جدول المحتويات في كل منشور
3. الطريقة الثانية: استخدم التعليمات البرمجية لإنشاء جدول محتويات.
1. 3.1 الخطوة 1: أنشئ جدول المحتويات للنشر
2. 3.2 الخطوة 2: استخدم CSS للتخصيص
4. الكلمات الأخيرة

طرق إنشاء جدول المحتويات

هناك طريقتان لإنشاء جدول محتويات في منشور WordPress.

الطريقة الأولى هي استخدام البرنامج المساعد. هذا بسيط وسريع ومجاني لكل من خبراء الكود والمبتدئين في WordPress.

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

دعنا نتصفح عملية إنشاء جدول محتويات باستخدام مكون إضافي أولاً:

الطريقة الأولى: استخدم البرنامج المساعد لإنشاء جدول المحتويات

الخطوة 1: إنشاء وإعداد المحتويات لجدول المحتويات

هناك العديد من المكونات الإضافية المجانية لإنشاء جدول محتويات في WordPress. نختار جدول محتويات LuckyWP لأنه يوفر لنا نتيجة رائعة وقابلة للتخصيص بدرجة عالية. ومع ذلك ، يحتوي هذا المكون الإضافي على الكثير من الإعدادات ، والتي قد تربكك في البداية. لذا ، اتبع تعليماتنا لتوفير وقتك.

LuckyWP Table of Contents هو مكون إضافي مجاني ومتاح على wordpress.org. ما عليك سوى تثبيت وتنشيط المكون الإضافي على لوحة القيادة .

بعد ذلك ، انتقل إلى الإعدادات > جدول المحتويات ، سترى شاشة الإعدادات.

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

في هذه الخطوة، عليك العمل على علامة التبويب عام.

هناك الكثير من الإعدادات في هذا القسم. لتوفير الوقت ، يجب التركيز على الأجزاء المهمة التالية:

الترقيم: لترقيم العناوين. يجب عليك اختيار واحد من هذه الخيارات: بدون ترقيم ، أرقام عشرية (متداخلة) ، أرقام رومانية (متداخلة) .

اخترت الأرقام العشرية (متداخلة) ، لذلك يبدو جدول المحتويات الخاص بي كما يلي:

العنوان: عنوان جدول المحتويات. هي المحتويات في الوضع الافتراضي.

دعنا نترك باقي الإعدادات كإعدادات افتراضية ، لأن ذلك لا يؤثر كثيرًا على جدول المحتويات.

انقر فوق حفظ التغييرات للإنهاء. لذلك ، قمنا بإعداد الإعدادات العامة لجدول المحتويات. دعنا ننتقل إلى الخطوة التالية.

الخطوة 2: أدخل جدول المحتويات في المنشور

هناك طريقتان لإدراج جدول محتويات في منشورك: الإدراج تلقائيًا ويدويًا.

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

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

سوف نقدم كلا الطريقتين بالتفصيل. يمكنك اختيار الخيار الذي يناسبك.

الإدراج تلقائيا

انتقل إلى علامة التبويب إدراج تلقائي> تمكين . يختار المكون الإضافي Post كإعداد افتراضي. إذا كنت لا ترغب في ذلك ، يمكنك التغيير إلى نوع منشور آخر.

في قسم الموضع ، اختر المكان الذي تريد إدراج جدول المحتويات فيه. لا تنس النقر فوق حفظ التغييرات !

لذلك ، تحتوي جميع المنشورات في نوع المنشور المختار على جداول المحتويات.

يدويا الإدراج

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

بعد ذلك ، انتقل إلى محرر النشر في نوع المنشور الذي اخترته ، وانقر فوق تمكين جدول المحتويات .

الآن ، تم الانتهاء من جدول المحتويات الخاص بك. بالإضافة إلى ذلك ، يمكننا تصميم لونها وخطها وحجمها ... لجعلها أجمل. اتبع الخطوة التالية.

الخطوة 3: تخصيص عرض جدول المحتويات

هناك أيضًا طريقتان لتخصيص عرض جدول المحتويات: تخصيصه في جميع المنشورات مرة واحدة وتخصيصه بشكل فردي في كل منشور.

تخصيص جدول المحتويات في كل المنشورات

يمكنك تخصيص جميع جداول المحتويات بالتفصيل من خلال الانتقال إلى علامة التبويب " المظهر" . هناك العديد من الإعدادات مثل حجم خط العنوان ، وحجم خط العناصر ، ولون الارتباط ، ...

ليس من الضروري ملاحظة جميع الإعدادات ، فقط ركز على ما تريد.

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

يبدو جدول المحتويات بعد التخصيص كما يلي:

الآن ، يبدو أكثر انسجاما.

ومع ذلك ، ربما ترغب في الحصول على جداول محتويات مختلفة في منشورات مختلفة ، ما عليك سوى التمرير لأسفل لقراءة كيفية تخصيصها في كل منشور.

تخصيص جدول المحتويات في كل منشور

هذا العمل أيضًا بسيط وسريع. أولاً ، انتقل إلى محرر النشر ، واختر جدول المحتويات> تخصيص .

تظهر نافذة منبثقة تخصيص جدول المحتويات . سترى بعض علامات التبويب المألوفة على النحو الوارد أعلاه. هم العامة والمظهر ومتفرقات. .

انتقل إلى علامة التبويب " المظهر" وقم بتغيير بعض الإعدادات بالمثل ، وقم بالتحرير على لوحة التحكم الخاصة بالمكوِّن الإضافي. انقر فوق " حفظ" للإنهاء!

الآن ، دعنا نرى النتيجة النهائية لتخصيص جدول المحتويات.

تجلب كلتا طريقتي التخصيص جداول محتويات جميلة جدًا ومفصلة. لذلك أنت حر في اختيار الطريقة التي تريدها.

الآن ، دعنا نذهب ونرى كيفية استخدام التعليمات البرمجية لإنشاء جدول محتويات.

الطريقة 2: استخدم التعليمات البرمجية لإنشاء جدول محتويات.

الخطوة 1: أنشئ جدول المحتويات للنشر

انتقل إلى المظهر> الموضوع> المحرر> وظائف . php .

ثم أضف الكود التالي إلى ملف functions.php لإدراج جداول المحتويات في التدوينات.

ملاحظة: هذا الرمز هو لإضافة مستويين فقط من العناوين إلى جدول المحتويات .

 دالة create_toc ($ html) {
    $ toc = "" ؛
    إذا (is_single ()) {
        إذا كان (! $ html) يُرجع $ html؛
        $ dom = DOMDocument جديد () ؛
        libxml_use_internal_errors (صحيح) ،
        $ dom-> loadHTML (mb_convert_encoding ($ html، 'HTML-ENTITIES'، 'UTF-8'))؛
        libxml_clear_errors () ،
        $ toc = '<div class = "toc-bound">
            <div class = "toc-ctr">
                جدول المحتويات
            </div>
            <ul class = "toc"> '؛
        h2_status دولار = 0 ؛
        h3_status دولار = 0 ؛
        أنا دولار = 1 ؛
        foreach ($ dom-> getElementsByTagName ('*') كعنصر $) {
            إذا كان ($ element-> tagName == 'h2') {
                إذا (h3_status دولار) {
                    $ toc. = '</ul>'؛
                    h3_status دولار = 0 ؛
                    }
                 إذا (h2_status دولار) {
                    $ toc. = '</li>'؛
                    h2_status دولار = 0 ؛
                  }
                  h2_status دولار = 1 ؛
                  $ toc. = '<li> <a href="'. get_the_permalink().'#toc-'. $i.'">'. $ element-> textContent. "</a>" ؛
                  $ element-> setAttribute ('id'، 'toc-'. $ i)؛
                  أنا ++ دولار ؛
            } elseif ($ element-> tagName == 'h3') {
                إذا (! $ h3_status) {
                    $ toc. = '<ul class = "toc-sub">'؛
                    h3_status دولار = 1 ؛
                }
                $ toc. = '<li> <a href="'. get_the_permalink().'#toc-'. $i.'">'. $ element-> textContent. "</a> </li>" ؛
                $ element-> setAttribute ('id'، 'toc-'. $ i)؛
                أنا ++ دولار ؛
            }
        }
        إذا (h3_status دولار) {
            $ toc. = '</ul>'؛
        }
        إذا (h2_status دولار) {
            $ toc. = '</li>'؛
        }
        $ toc. = '</ul> </div>'؛
        $ html = $ dom-> saveHTML () ؛
    }
    إرجاع $ toc. html $؛
}
add_filter ('the_content'، 'create_toc') ؛

تفسير:

رمز	تفسير
الوظيفة $ toc = '<div class = ”toc-bound”> <div class = ”toc-ctr”> جدول المحتويات </div> <ul class = ”toc”>	لإضافة عنوان لجدول المحتويات وعرضه فوق هذا. يمكنك استبدال النص " جدول المحتويات " بأي شيء تريد أن يكون في العنوان.
متغير h2، h3	يتم إدراج مستويات العناوين في جدول المحتويات. إذا كنت تريد استبدال h2 و h3 بعلامات أخرى ، فقم بتغيير المعلمات بالكامل مثل h2 و h3 إلى العلامات التي تريدها في التعليمات البرمجية.
الوظيفة $ toc. = '<li> <a href = ”'. get_the_permalink (). "# toc-". أنا $. ""> ". $ element-> textContent. "</a>" ؛	لإنشاء روابط قفزات إلى الأقسام المقابلة في المنشور بمجرد النقر فوقه.
الوظيفة *إذا ($ h3_status) {* *$ toc. = '</ul>'؛* } *إذا (h2_status دولار) {* *$ toc. = '</li>'؛* } *$ toc. = '</ul> </div>'؛* *$ html = $ dom-> saveHTML () ؛* } *إرجاع $ toc.* *html $؛*	لإضافة نقاط أمام كل عنوان في جدول المحتويات.

لا تنس النقر فوق ملف التحديث بعد إدخال الرمز.

ثم ها هي النتيجة:

بالطبع ، نحن بحاجة إلى تصميمه قليلاً. سنستخدم CSS - الأداة المفضلة لجميع المبرمجين.

الخطوة 2: استخدم CSS للتخصيص

للتخصيص بواسطة CSS ، انتقل إلى ملف style.css في Theme Editor . هناك ، تحتاج إلى إدخال الكود الذي تكتبه بنفسك لتخصيص جدول المحتويات كما تريد.

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

 مرتبط بامتداد .toc {
    لون الخلفية: # 619162 ؛
    اللون: #fff ؛
}
.toc-ctr {
    الحد السفلي: 1px صلب #fff ؛
    الحشو: 10 بكسل ؛
    حجم الخط: 20 بكسل ؛
    تحويل النص: الأحرف الكبيرة ؛
}
ul.toc {
    نوع نمط القائمة: لا شيء ؛
    الحشو: 10 بكسل ؛
    المساحة المتروكة: 25 بكسل ؛
}
.toc li a {
    اللون: #fff ؛
}
ul.toc> li {
    حجم الخط: 18 بكسل ؛
    وزن الخط: 700 ؛
    الحشو: 5 بكسل 0 ؛
}
ul.toc-sub {
    نوع نمط القائمة: لا شيء ؛
}
ul.toc-sub li a {
    وزن الخط: 200 ؛
}

لا تنس النقر فوق ملف التحديث لحفظه.

النتيجة النهائية تبدو كالتالي:

في الختام ، كل من استخدام البرنامج المساعد والترميز يعطينا نفس جداول المحتويات الجميلة. يمكنك اختيار أي خيار طالما أنك راضٍ.

الكلمات الأخيرة

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

إذا كان لديك أي أسئلة ، يرجى إعطائها في مربع التعليقات أدناه.