إضافة جدول المحتويات في مدونات بلوجر

27

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

عبر عالم التقنية نقدم لكم إضافة جدول المحتويات وهي إضافة رائعة تم كتابتها بلغة جافا و CSS3.

تقوم هذه الإضافة بإنشاء جدول مُتعدد المستويات من عناوين صفحة الويب عند تحميل الصفحة في جزء من الثانية!

صورة المعاينة: تم إنشاء القائمة عند تحميل الصفحة.

اضافة جدول المحتويات

اضافة جدول المحتويات أكثر ديناميكية في وظائفها ومميزاتها، هي سكربت فريد يقوم تلقائيًا بإنشاء جدول من علامات العناوين (H1 و H2 و H3 و H4 و H5 و H6) للصفحة ويضيف روابط ارتساء إلى كل عنصر قائمة متداخل.

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

لماذا علينا استخدام اضافة جدول المحتويات؟

صورة

بالنسبة لمشرفي المواقع والمدونين الذين يكتبون مقالات مطولة ويقسمون المقالة في عدة أقسام فرعية ، قد يجد القراء صعوبة في قراءة مثل هذه المنشورات الطويلة بدون تصفح سهل. الحل الوحيد لتقديم مقالات طويلة طويلة بشكل أفضل هو عرض “جدول المحتويات”.

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

هل اضافة جدول المحتويات صديقة لمحركات البحث؟

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

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

نتيجة بحث من جوجل

أنظر إلى الروابط في صفحة البحث في المستطيل الأحمر.

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

مميزات جدول المحتويات

يحتوي هذا الإصدار على بعض الميزات الإضافية كما هو موضح أدناه:

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

تثبيت اضافة جدول المحتويات في بلوجر

يُمكنك تثبيت الإضافة بسهولة، يتكون دليل التثبيت من ثلاث خطوات رئيسية:

  • إضافة كود جافا سكربت وكود CSS أعلى الوسم </head>.
  • إضافة post-toc إلى قسم المحتوى في القالب.
  • إضافة الحاوية div ووظيفة الاستدعاء إلى صفحة المقال حيث توّد عرض الجدول.

اضافة جدول المحتويات في مشاركات وصفحات بلوجر

لاب توب

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

  1. من الصفحة الرئيسية في بلوجر > المظهر.
  2. قُم بعمل نسخة احتياطية من القالب الخاص بك.
  3. انقر فوق “تعديل HTML

فوق هذه العلامة </head> الصق الكود التالي:

<script type='text/javascript'>
//<![CDATA[
// TOC Plugin by Ahmed Saleh | https://techwidly.com
function a2ztoc(){var a=1,b=0,c="";document.getElementById("post-toc").innerHTML=document.getElementById("post-toc").innerHTML.replace(/<h([d]).*?>(.*?)</h([d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#point'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='point"+b+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("a2ztoc").innerHTML+=c}function mbtToggle2(){var a=document.getElementById("a2ztoc"),b=document.getElementById("Tog");"none"===a.style.display?(a.style.display="block",b.innerHTML="إخفاء"):(a.style.display="none",b.innerHTML="إظهار")}
//]]>
</script>

]]></b:skin> ابحث عن الوسم التالي
وضع فوقه مباشرتاً هذا الكود:

<style type='text/css'>
// TOC Plugin by Ahmed Saleh | https://techwidly.com
.a2ztoc{border:1px solid #ccc;background-color:#FFF7;color:#666;font-family:inherit;font-size:18pxline-height:1.4em;margin:30px 10px 0 0;padding:20px 10px 20px 30px;display:block;width:50%;float:left}
.a2ztoc button{background:#FFF7;font-size:22px;font-family:inherit;position:relative;outline:none;border:none;color:#1d2129;padding:0 15px 0 0}
.a2ztoc button a{color:#777;padding:0 2px;cursor:pointer}
.a2ztoc button a:hover,.a2ztoc li a:hover{text-decoration:underline}
.a2ztoc button span{font-size:15px;margin:0 10px}
.a2ztoc li{margin:10px 0}
.a2ztoc li a{color:#212537;text-decoration:none;font-size:18px}
.a2ztoc li li{margin:4px 0}
.a2ztoc li li a{color:#2370b1;font-size:15px}
.a2ztoc ol{counter-reset:section1;list-style:none}
.a2ztoc ol ol{counter-reset:section2}
.a2ztoc ol ol ol{counter-reset:section3}
.a2ztoc ol ol ol ol{counter-reset:section4}
.a2ztoc ol ol ol ol ol{counter-reset:section5}
.a2ztoc li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 0 0 8px;font-size:18px}
.a2ztoc li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px}
.a2ztoc li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}
.a2ztoc li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}
.a2ztoc li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5}
</style>

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

ملاحظة: ستجد هذا الكود مرتين أو أكثر داخل القالب، استبدل جميع الأكواد المتشابهة، لن يعمل الجدول إذا قمت باستبدال الكود هذا مرة واحدة فقط.
<div id="post-toc"><data:post.body/></div>

احفظ القالب الخاص بك.

استخدام جدول المحتويات داخل المشاركة

اضافة جدول داخل المشاركة

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

يمكنك إضافة الجدول داخل مشاركة المدونة بخطوتين.

1. مكان حاوية جدول المحتويات

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

<div class="a2ztoc">
<button>جدول المحتويات <span><a onclick="a2ztoggle()" id="Tog">إخفاء</a></span></button>
<div id="a2ztoc"></div>
</div>

2. استدعاء جدول المحتويات

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

<script>a2ztoc();</script>

انشر مشاركتك وشاهد الإضافة تعمل 🙂

أنتهينا من مقالنا ، وإذا كان لديك سؤال فلا تتردد في ترك تعليق.

شارك برأيك.. ضع تعليقاً..