عنصر واجهة المستخدم لجدول محتويات العنصر، لا حاجة إلى Pro
تأتي أداة جدول المحتويات الخاصة بـ Elementor مع Elementor Pro. تعمل أداة جدول المحتويات في Master Addons على Elementor بدون Pro. قم بإسقاطه على منشور أو صفحة ويقرأ العناوين هناك، ثم أنشئ قائمة مرتبطة منها بترتيب العناوين. يؤدي النقر فوق أي عنصر إلى تمرير القارئ إلى هذا القسم. يمكنك اختيار علامات العناوين التي تريد تضمينها وما إذا كانت القائمة تعرض نقاطًا أم أرقامًا. يمكن للقراء طي المربع بعيدًا، ويقوم السهم من الخلف إلى الأعلى بإبرازها مرة أخرى، وتبقي قاعدة CSS القصيرة المربع معروضًا في الشريط الجانبي.
كيفية إضافة جدول المحتويات في العنصر
أنت بحاجة إلى Elementor وMaster Addons. العنصر برو غير مطلوب. تحتاج الصفحة أيضًا إلى علامات عناوين حقيقية (H2 وH3 وما إلى ذلك)، لأن القائمة مبنية منها.
- تثبيت وتنشيط الإضافات الرئيسية من WordPress.orgوتحقق من تمكين جدول المحتويات في لوحة تحكم Master Addons.
- افتح منشورك أو صفحتك باستخدام Elementor وابحث في لوحة الأدوات جدول المحتويات.
- اسحبه إلى المكان الذي يجب أن توجد فيه القائمة، عادةً أعلى القسم الأول أو في عمود الشريط الجانبي.
- في محتوى، اضبط العنوان، واختر نمط القائمة واختر علامات العناوين التي تريد تضمينها.
- يفتح قابل للطي و يمرر لإضافة التبديل والسهم الخلفي إلى الأعلى.
- قم بتصميم العنوان والفاصل والروابط في علامة التبويب "النمط"، ثم قم بمعاينة الصفحة وانقر فوق بعض العناصر لاختبار القفزات.
يتم تغطية كل إعداد في جدول إعدادات عناصر واجهة المستخدم للمحتويات مرشد.
جدول المحتويات في لمحة
ما تفعله الأداة، اقرأ من Master Addons 3.2.3.
| عنصر | جدول المحتويات القطعة |
|---|---|
| حيث يجد العناوين | داخل محتوى الإدخال أولاً، ثم محتوى الصفحة، ثم منطقة محتوى العنصر |
| مستويات العنوان | أي من H1 إلى H6، مع تحديد H2 وH3 وH4 افتراضيًا |
| اترك عنوانا واحدا | أضف عنوان إخفاء فئة CSS jltma-toc إلى هذا العنوان |
| نمط القائمة | الافتراضي (بدون علامة)، الرصاص أو الأرقام |
| التعشيش | متداخلة دائمًا حسب مستوى العنوان |
| صندوق قابل للطي | قم بالتبديل بجوار العنوان، مع الاحتفاظ بالانهيار في البداية |
| التمرير | تمرير سلس يتوقف عند حوالي 30 بكسل فوق العنوان |
| العودة إلى الأعلى | السهم في الزاوية اليمنى السفلية بعد 250 بكسل من التمرير |
| العنصر النشط | العنصر الذي نقر عليه القارئ آخر مرة (لا يوجد تجسس تمرير) |
| لزجة | لا يوجد مفتاح؛ الموضع: لزج من خلال CSS المخصص، أو Elementor Pro Motion Effects |
| الاحتياجات | Elementor وMaster Addons، لا يوجد Elementor Pro |
يبني القائمة من عناوينك
اختر المستويات الموجودة علامات العنوان. يتم تحديد H2 وH3 وH4 افتراضيًا، ويمكن إضافة أي من H1 إلى H6. عند تحميل الصفحة، تجد الأداة تلك العناوين، وتعطي كل عنوان معرفًا إذا لم يكن به أي معرف، وتتداخل مع القائمة حسب مستوى العنوان. أعد تسمية عنوان أو أضف عنوانًا وستلتقطه القائمة عند التحميل التالي، لذلك لا توجد روابط ربط لمواكبة ذلك يدويًا.
- نمط القائمة: الافتراضي (بدون علامة)، الرصاص أو الأرقام.
- تخطي عنوان واحد: أضف فئة CSS
jltma-toc-hide-headingفي علامة التبويب المتقدمة لهذا العنوان. - إظهار الفاصل: سطر اختياري تحت العنوان بأسلوبه ولونه وسمكه وتباعده.
- يتم إنشاء معرفات العناوين من نص العنوان، لذا يمكنك أيضًا الارتباط مباشرة بقسم من مكان آخر.
صندوق قابل للطي للأشرطة الجانبية والجوال
تشغيل جعل المحتوى قابلاً للطي ويظهر رمز التبديل بجوار العنوان. ينقر عليه القراء لفتح القائمة أو إغلاقها، ثم ينزلق بدلاً من القفز. تشغيل استمر في الانهيار في البداية إذا كنت تريد تحميل المربع الذي يعرض عنوانه فقط، مما يساعد على الصفحات القانونية الطويلة وفي أعمدة الشريط الجانبي الضيقة.
- حجم الأيقونة وعناصر التحكم في لون الأيقونة للتبديل.
- يتم طي الفاصل بعيدًا بالقائمة.
- لا تحتوي الأداة على مفتاح لاصق خاص بها. لإبقاء المربع في الأفق أثناء قراءة الأشخاص، راجع جعل جدول المحتويات ثابتًا أدناه.
قفزات سلسة وسهم العودة إلى الأعلى
يؤدي النقر فوق عنصر إلى تمرير الصفحة بسلاسة إلى عنوانها ويتوقف فوقها بحوالي 30 بكسل، بحيث لا يظل العنوان متساطحًا مع الجزء العلوي من الشاشة. إذا كان موقعك يحتوي على رأس ثابت طويل، فإن الأسئلة الشائعة أدناه تحتوي على إصلاح CSS مكون من سطرين يبقي العناوين بعيدة عنه.
- انتقل إلى الأعلى يضيف سهمًا صغيرًا في الزاوية اليمنى السفلية يظهر بمجرد تمرير الزائر لأسفل.
- يعيد السهم القراء إلى جدول المحتويات، أو إلى الموضع الذي قمت بتعيينه في التمرير إلى أعلى الإزاحة.
- الحجم ولون الأيقونة وعناصر التحكم في لون الخلفية للسهم.
- العنصر الذي نقر عليه القارئ يحتفظ باللون النشط من قسم نمط المحتوى، حتى يتمكنوا من رؤية المكان الذي قفزوا فيه.
اجعل جدول المحتويات لزجًا
لا تحتوي الأداة على مفتاح لاصق خاص بها. يمكنك تثبيته عن طريق جعل الأداة لزجة داخل عمود الشريط الجانبي، ويمكن لـ Elementor بدون Pro القيام بذلك من خلال الإضافات الرئيسية امتداد CSS مخصص.
- ضع المقالة وجدول المحتويات في صف واحد: عمود عريض للمحتوى وعمود ضيق لعنصر واجهة المستخدم جدول المحتويات. اترك العمود الضيق عند ارتفاعه الافتراضي بحيث يمتد إلى ارتفاع الصف.
- حدد عنصر واجهة المستخدم جدول المحتويات، افتح متقدمثم الإضافات الرئيسية Css مخصص القسم، واللصق
selector { position: sticky; top: 32px; } - ارفع القيمة العليا إذا كان موقعك يحتوي على رأس ثابت، على سبيل المثال 110px تحت رأس 80px.
- معاينة الصفحة والتمرير. يبقى المربع في العرض حتى نهاية الصف.
مع Elementor Pro يمكنك استخدامه متقدم، تأثيرات الحركة، لزجة: الأعلى بدلاً من ذلك، مع تشغيل Stay In Column.
هناك شيئان يتوقفان عن العمل: الحاوية الأصلية مع ضبط الفائض على المخفي، وعمود الشريط الجانبي الذي لا يزيد طوله عن الصندوق. على الهواتف، ينخفض الشريط الجانبي أسفل المقالة، لذا قم بتشغيل "جعل المحتوى قابلاً للطي" هناك، أو قم بإخفاء هذه النسخة على الهاتف المحمول ووضع جدول محتويات مطوي فوق المقالة.
ال عرض الشريط الجانبي اللزج في منتصف الصفحة. يبقى المربع في أعلى العمود أثناء تمرير المقالة.
القاعدة الثابتة في قسم Master Addons Custom CSS في عنصر واجهة المستخدم.
جدول محتويات Elementor Pro مقابل جدول محتويات الإضافات الرئيسية
تحتاج أداة جدول محتويات Elementor إلى ترخيص Elementor Pro، وتمنحك مزيدًا من التحكم في العناوين التي تظهر وكيف تتصرف القائمة أثناء التمرير. يتعامل Master Addons مع المهمة اليومية بدون Pro ويضيف سهمًا للخلف إلى الأعلى.
| ميزة | إليمنتور برو | الإضافات الرئيسية |
|---|---|---|
| سعر | يحتاج العنصر برو | متضمن في الإضافات الرئيسية، لا يوجد Elementor Pro |
| أي العناوين | المراسي حسب العلامات (H1 إلى H6) بالإضافة إلى محدد الحاوية للحد من منطقة البحث | علامات العنوان (H1 إلى H6) من المنشور الرئيسي أو محتوى الصفحة |
| ترك العناوين خارجا | المراسي بواسطة المحدد، أي محدد CSS | فئة CSS jltma-toc- إخفاء العنوان على كل عنوان |
| علامات | أرقام، أو رصاصات مع أيقونة تختارها | الافتراضي، الرصاص أو الأرقام |
| التعشيش | عرض هرمي لتبديل العناصر الفرعية وتقسيمها | متداخلة دائمًا حسب مستوى العنوان |
| ينهار | تصغير المربع الذي يحتوي على أيقونات التوسيع والطي، ونقطة التوقف حيث يبدأ التصغير | اجعل المحتوى قابلاً للطي وحافظ على انهياره في البداية |
| العنصر النشط | يتبع القسم في العرض أثناء تمرير القارئ | وضع علامة على العنصر الذي نقر عليه القارئ |
| إعدادات التمرير | لا توجد عناصر تحكم في السرعة أو الإزاحة في الأداة | تمرير سلس يتوقف عند حوالي 30 بكسل فوق العنوان |
| لزجة | لا يوجد إعداد في القطعة؛ استخدم تأثيرات الحركة اللاصقة على الأداة أو عمودها | لا يوجد إعداد في القطعة؛ أضف الموضع: لاصق مع CSS مخصص، أو استخدم تأثيرات الحركة لاصق مع Pro |
| العودة إلى السهم العلوي | لا أحد | قم بالتمرير إلى الأعلى باستخدام عناصر التحكم في الحجم واللون |
إذا كنت تدفع بالفعل مقابل Elementor Pro وتريد أن تقوم القائمة بتتبع القارئ أثناء التمرير، فاستخدم عنصر واجهة المستخدم الخاص به. إذا كنت تريد جدول محتويات بدون Elementor Pro، مع مربع قابل للطي وسهم من الخلف إلى الأعلى، فاستخدم هذا الجدول.
أزواج جيدة مع: شريط تقدم القراءة للحصول على شريط يمتلئ كما يقرأ الناس، الأكورديون المتقدم و علامات التبويب لطي المقاطع الطويلة، محتوى خارج القماش (Pro) لقائمة الشرائح، و مدونة بالنسبة لقوائم المنشورات، توجد تلك المقالات الطويلة.
جدول المحتويات البرنامج المساعد أو عنصر واجهة المستخدم العنصر؟
يحتوي WordPress على نوعين من جدول المحتويات: المكونات الإضافية التي تعمل على محتوى المنشور، والأدوات التي تضعها في محرر Elementor. يعتمد الخيار الصحيح على كيفية إنشاء الصفحة.
| خيار | حيث يعمل | الأفضل ل |
|---|---|---|
| جدول محتويات الإضافات الرئيسية | في أي مكان تضعه فيه Elementor، بما في ذلك القوالب | مواقع العناصر التي تريد تصميم الصندوق بالتصميم والسهم من الخلف إلى الأعلى |
| جدول محتويات Elementor Pro | في أي مكان في Elementor، مع ترخيص Elementor Pro | المواقع الموجودة بالفعل على Pro والتي تريد أن يتبع العنصر النشط التمرير |
| جدول محتويات سهل، LuckyWP | نشر المحتوى، ويتم إدراجه تلقائيًا أو باستخدام رمز قصير | المدونات المكتوبة في محرر الكتلة أو المحرر الكلاسيكي |
| كتلة جدول محتويات Rank Math | حظر منشورات المحرر على المواقع التي تستخدم Rank Math | منشورات جوتنبرج التي تحتاج فقط إلى قائمة بسيطة |
لدينا تقرير إخباري عن أفضل المكونات الإضافية لجدول المحتويات لـ WordPress يقارن ثمانية منها، مع عدد التثبيتات والرموز القصيرة والخيارات الثابتة.
جدول المحتويات أمثلة
أربعة عروض توضيحية حية تم إنشاؤها باستخدام الأداة. افتح واحدًا، ثم قم باستيراد نفس التخطيط من عارض القالب أدناه.
- شريط جانبي لزجة: قائمة مرقمة في عمود ضيق تظل مرئية أثناء تمرير المقالة، وH3s متداخلة تحت H2s الخاصة بها، وعنوان واحد مهمل بعنوان jltma-toc-hide-heading.
- أنماط القائمة: الافتراضي، الرصاص والأرقام جنبًا إلى جنب، مبنية من نفس العناوين.
- صفحة الشروط والأحكام: المربع الموجود في الشريط الجانبي الأيمن يسرد كل قسم من صفحة قانونية طويلة.
- صفحة سياسة الخصوصية: المربع الموجود على اليسار، مع العنصر الذي تم النقر عليه باللون النشط.
أنماط القائمة الثلاثة في نفس العناوين.
الأسئلة المتداولة لجدول المحتويات
هل أحتاج إلى Elementor Pro لجدول المحتويات هذا؟
رقم تعد أداة جدول المحتويات جزءًا من Master Addons وتعمل على Elementor بدون Pro. يتم تضمين كل إعداد في هذه الصفحة. أداة جدول المحتويات الخاصة بـ Elementor هي التي تحتاج إلى Elementor Pro.
كيف يمكنني استبعاد عنوان من جدول المحتويات؟
لإسقاط مستوى كامل، قم بإزالة تلك العلامة من علامات العناوين، على سبيل المثال H4. لإخفاء عنوان واحد، حدده في Elementor، وافتح علامة التبويب Advanced وأضف jltma-toc-hide-heading إلى حقل فئات CSS. يبقى على الصفحة ولكن يتم استبعاده من القائمة.
هل يتغير العنصر النشط أثناء تمرير القارئ؟
رقم اللون النشط في النمط، يقوم المحتوى بتصميم العنصر الذي ينقر عليه القارئ، ويتحرك عندما ينقر على عنصر آخر. القائمة لا تتتبع القسم الذي يظهر على الشاشة أثناء التمرير. تقوم أداة جدول المحتويات الخاصة بـ Elementor Pro بذلك.
هل يمكنني جعل جدول المحتويات لزجًا؟
نعم، ولكن ليس من مفتاح في القطعة. ضعه في عمود الشريط الجانبي، ثم أضف selector { position: sticky; top: 32px; } في CSS المتقدم والمخصص. باستخدام Elementor Pro، يمكنك استخدام Motion Effects، Sticky بدلاً من ذلك. ارفع القيمة العليا إذا كان هناك رأس ثابت فوقها.
كيف يمكنني الحفاظ على جدول المحتويات موسعًا أو مطويًا عند تحميل الصفحة؟
قم بتشغيل جعل المحتوى قابلاً للطي. مع إيقاف تشغيل Keep Collapsed في البداية، يتم تحميل الصندوق مفتوحًا ويمكن للقراء طيه. مع تشغيله، يتم تحميل الصندوق ليظهر عنوانه فقط. لا يوجد إعداد لكل جهاز، لذلك بالنسبة للصندوق المغلق على الهواتف والصندوق المفتوح على سطح المكتب، استخدم نسختين وأخفي كل منهما في وضع متقدم ومستجيب.
هل سيظهر سهم التمرير إلى الأعلى في كل صفحة؟
فقط على الصفحات التي تحتوي على عنصر واجهة المستخدم هذا مع تشغيل التمرير إلى الأعلى. يقع السهم في الزاوية اليمنى السفلية ويظهر بعد أن يقوم الزائر بالتمرير بسرعة 250 بكسل تقريبًا إلى أسفل الصفحة.
هل يمكنني استخدام أيقونات مخصصة لعلامات القائمة؟
ليس من لوحة عناصر واجهة المستخدم. يقدم List Style العناصر الافتراضية والنقاط والأرقام، ويقوم قسم نمط المحتوى بتعيين الخط والألوان. ستحتاج أيقونات العلامات المخصصة إلى CSS الخاص بك. تحتوي أداة Elementor Pro على منتقي أيقونات للنقاط.
لماذا جدول المحتويات الخاص بي فارغ أو يسرد العناوين الخاطئة؟
تبحث الأداة عن العناوين داخل محتوى الإدخال أولاً، ثم محتوى الصفحة، ثم منطقة محتوى العنصر، وفقط عن العلامات المختارة في علامات العناوين. يعرض المربع الفارغ “أضف رأسًا لبدء إنشاء جدول المحتويات” ويعني عادةً أن العناوين تستخدم علامة لم تحددها أو تجلس خارج تلك المنطقة. إذا قام مكون إضافي للتخزين المؤقت بتأخير JavaScript حتى التمرير أو النقر الأول، فستظل القائمة فارغة حتى ذلك الحين، لذا استبعد البرامج النصية لـ Master Addons من التأخير.
يغطي الرأس الثابت العنوان بعد القفزة. كيف أصلحه؟
تتوقف القفزة عند حوالي 30 بكسل فوق العنوان، وهو ما لا يكفي تحت رأس ثابت طويل. أضف هذا في المظهر، والتخصيص، وCSS الإضافي: .elementor-heading-title[id] { padding-top: 90px; margin-top: -90px; } ثم ينخفض كل عنوان بمقدار 90 بكسل ويبدو كما هو على الصفحة. استخدم ارتفاع رأسك بالإضافة إلى مساحة صغيرة.
عناصر واجهة المستخدم والملحقات الشائعة
إنشاء مواقع متطورة في وقت أقل.
التشكل الزجاجي
إضافات الحاويات
أنماط
![ملحق Master Addons Post/Page Duplicator لـ Elementor: رابط صف MA Duplicator في قائمة صفحات WordPress لإنشاء صفحة مقصودة - مسودة [مكررة #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
ناسخ البريد/الصفحة
