شرح طريقة إضافة جدول محتويات المقالة في بلوجر

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

ما هو جدول المحتويات؟

جدول المحتويات هو قائمة بجميع العناوين والعناوين الفرعية لمنشور أو مقال بتنسيق جدولي. عادة ، تظهر في الجزء العلوي من المنشور أو المقال.

ما هو جدول المحتويات التلقائي؟

يسهِّل جدول المحتويات الآلي عليك إضافة جدول محتويات إلى مقالات مدونتك. جدول المحتويات ليست أكثر من قائمة كاملة بالعناوين والعناوين الفرعية لمقالك. يقوم جدول المحتويات الآلي بترتيب هذه القائمة تلقائيًا مما يعني أنك لست بحاجة إلى كتابة أي أكواد لجدول المحتويات. تحتاج فقط إلى وضع رمز قصير حول ما إذا كنت تريد إظهار هذه القائمة.

مزايا استخدام جدول المحتويات:

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

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

الفوائد الرئيسية لاستخدام جدول المحتويات في مقالاتك:

1. إن وجود جدول محتويات يجعل منشورك أكثر احترافية
2. لن يشعر القراء بالملل من مشاركة مدونتك
3. رتب موضوع مشاركتك بطريقة منهجية
4. يمكن للجمهور التنقل بسهولة إلى مشاركتك
5. يساعد على تحسين تجربة مستخدم مدونتك

كيف يعمل جدول المحتويات على تحسين السيو SEO للمدونة؟

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

هل يمكن لجدول المحتويات تحسين تجربة المستخدم؟

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

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

الملامح الرئيسية لجدول المحتويات الآلي:

• تمت كتابة التعليمات البرمجية باستخدام HTML و CSS و JS
• مصمم بتقنية حديثة
• خفيف جدًا ولن يؤثر على متوسط ​​وقت تحميل الصفحة
• مُحسّن للغاية لتحسين محركات البحث وسيساعدك على الترتيب في SERPs
• يحتوي على زر تبديل لإخفاء / إظهار جدول المحتويات
• سريع الاستجابة وسهل التخصيص

ملاحظة: يرجى عمل نسخة احتياطية من القالب الحالي الخاص بك قبل إجراء أي تغييرات على القالب الخاص بك حتى تتمكن من استعادة القالب الأصلي الخاص بك إذا حدث خطأ ما.

كيف تضيف جدول محتويات في بلوجر؟

1- قم بالدخول إلى لوحة تحكم بلوجر
2- اذهب إلى "المظهر" وانقر على "تعديل HTML"
3- ابحث الآن عن </body> والصق الكود أدناه أعلى (فوق) علامة </body> مباشرةً

<script>/*<![CDATA[*/ /* Table of Content, Credit: blustemy.io/creating-a-table-of-contents-in-javascript */
class TableOfContents { constructor({ from, to }) { this.fromElement = from; this.toElement = to; this.headingElements = this.fromElement.querySelectorAll("h1, h2, h3, h4, h5, h6"); this.tocElement = document.createElement("div"); }; getMostImportantHeadingLevel() { let mostImportantHeadingLevel = 6; for (let i = 0; i < this.headingElements.length; i++) { let headingLevel = TableOfContents.getHeadingLevel(this.headingElements[i]); mostImportantHeadingLevel = (headingLevel < mostImportantHeadingLevel) ? headingLevel : mostImportantHeadingLevel; } return mostImportantHeadingLevel; }; static generateId(headingElement) { return headingElement.textContent.replace(/\s+/g, "_"); }; static getHeadingLevel(headingElement) { switch (headingElement.tagName.toLowerCase()) { case "h1": return 1; case "h2": return 2; case "h3": return 3; case "h4": return 4; case "h5": return 5; case "h6": return 6; default: return 1; } }; generateToc() { let currentLevel = this.getMostImportantHeadingLevel() - 1, currentElement = this.tocElement; for (let i = 0; i < this.headingElements.length; i++) { let headingElement = this.headingElements[i], headingLevel = TableOfContents.getHeadingLevel(headingElement), headingLevelDifference = headingLevel - currentLevel, linkElement = document.createElement("a"); if (!headingElement.id) { headingElement.id = TableOfContents.generateId(headingElement); } linkElement.href = `#${headingElement.id}`; linkElement.textContent = headingElement.textContent; if (headingLevelDifference > 0) { for (let j = 0; j < headingLevelDifference; j++) { let listElement = document.createElement("ol"), listItemElement = document.createElement("li"); listElement.appendChild(listItemElement); currentElement.appendChild(listElement); currentElement = listItemElement; } currentElement.appendChild(linkElement); } else { for (let j = 0; j < -headingLevelDifference; j++) { currentElement = currentElement.parentNode.parentNode; } let listItemElement = document.createElement("li"); listItemElement.appendChild(linkElement); currentElement.parentNode.appendChild(listItemElement); currentElement = listItemElement; } currentLevel = headingLevel; } this.toElement.appendChild(this.tocElement.firstChild); } } /*]]>*/</script>

4- الآن ابحث]]> </ b: skin> والصق كود CSS التالي أعلاه (فوقه)

/* Table of Contents by wikipoka.com */ 
 .pS details summary{list-style:none;outline:none}
 .pS details summary::-webkit-details-marker{display:none}
 details.sp{padding:20px 15px}
 details.sp summary{display:flex;justify-content:space-between;align-items:baseline}
 details.sp summary::after{content:attr(data-show);font-size:12px; opacity:.7;cursor:pointer}
 details.sp[open] summary::after{content:attr(data-hide)}
 details.toc a:hover{text-decoration:underline}
 details.toc a{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; color:inherit}
 details.toc ol{list-style:none;padding:0;margin:0; line-height:1.6em; counter-reset:toc-count}
 details.toc ol ol ol ol{display:none}
 details.toc ol ol, .tocIn li:not(:last-child){margin-bottom:5px}
 details.toc li li:first-child{margin-top:5px}
 details.toc li{display:flex;flex-wrap:wrap; justify-content:flex-end}
 details.toc li::before{flex:0 0 23px; content:counters(toc-count,'.')'. ';counter-increment:toc-count}
 details.toc li a{flex:1 0 calc(100% - 23px)}
 details.toc li li::before{flex:0 0 28px; content:counters(toc-count,'.')}
 details.toc li li a{flex:1 0 calc(100% - 28px)}
 details.toc li li li::before{flex:0 0 45px}
 details.toc li li li a{flex:1 0 calc(100% - 45px)}
 details.toc .toC >ol{margin-top:1em}
 details.toc .toC >ol >li >ol{flex:0 0 calc(100% - 23px)}
 details.toc .toC >ol >li >ol ol{flex:0 0 calc(100% - 28px)}
 details.toc .toC >ol >li >ol ol ol{flex:0 0 calc(100% - 45px)} 
 

5- أخيرًا ، ابحث عن <data: post.body /> واستبدله بالكود أدناه

<div id='postBody'><data:post.body/></div>

6- الآن احفظ القالب وانتقل للخطوات التالية.

كيف تظهر جدول المحتويات في منشورات المدونة؟

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

<details class='sp toc'>
  <summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary>  
  <div class='toC' id='toContent'></div>
</details>

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

<!--[ Script to activate ToC ]-->
<script>document.addEventListener('DOMContentLoaded', () =>
  new TableOfContents({
      from: document.querySelector('#postBody'),
      to: document.querySelector('#toContent')
  }).generateToc()
);</script>

تذكر ، بدون مقال متوافق مع السيو SEO ، لا يمكنك التصدّر في محركات البحث بمجرد إظهار جدول المحتويات في منشورات مدونتك. آمل أن يساعدك هذا المنشور في تركيب جدول المحتويات على مدونتك بشكل سهل وبدون صعوبات.