القائمة الرئيسية

الصفحات

طريقة اضافة جدول المحتويات الى مدونات بلوجر و ووردبريس table of content



جدول المحتويات Table of contents كيفية إضافة جدول محتويات تلقائي في Blogger أو WordPress



كيفية إضافة جدول محتويات تلقائي في Blogger أو WordPress


  • هل قمت بزيارة احد المواقع الكبيرة من قبل ووجدت خاصية جدول المحتويات Table of contents  والتى تسهل عليك التنقل فى المقال وايجاد المعلومات التى تريدها بكل بساطة وبدون ان تخرج وتبحث عن مقال اخر على موقع اخر .

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


جدول المحتويات Table of contents 



 يعد  جدول المحتويات Table of contents  ميزة متقدمة تم تقديمها إلى مواقع الويب بشكل رئيسي في WordPress منذ سنوات. 
  •  إذن ما هو جدول المحتويات؟ 
  •  كيف يمكن لجدول المحتويات تحسين مُحسنات محركات البحث في مدونتك؟

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


  1.  يعطي انطباعًا احترافيًا لموقعك على الويب .
  2.  يُسهل على الزائرين التنقل عبر الأجزاء المختلفة للمحتوى الخاص بك .
  3.  يحسن SEO الخاص بك لأنه يحسن مشاركاتك لمحركات البحث .
  4.  يربط الفهرسة بواسطة روبوتات الويب .
  5.  يبرز أهم الأجزاء في المنشور .
  6.  يولد العنوان تلقائيًا ولا داعي لكتابته بنفسك .
  7.  لا يؤثر على تحميل وأداء موقع الويب الخاص بك خاصة إذا كنت تستخدم قالبًا مشفرًا جيدًا أو سمة WordPress .
  8.  رموز صديقة للسيو .
  9.  يضيف جدول محتويات قابل للنقر عليه ToC لموضوعات صفحة الويب في Blogger و WordPress .




أولا : كيفية إنشاء جدول محتوى في منشورات وصفحات WordPress


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

 وإليك الإضافات التي نوصي بها:

يتمتع كلا المكونين الإضافيين بشعبية كبيرة حيث يتجاوز عدد المستخدمين والتثبيتات لهذه الاضافات 300.000 مستخدم . 
سيقومون بالمهمة بشكل تلقائي ومنهجي. 
ما زلت تخصص اختياراتك من خلال لوحة تكوين الملحقات. فقط قم بالتثبيت والنسيان 😉😉🙏.


 ثانيا : كيفية إضافة جدول محتويات ملائم لتحسين محركات البحث في Blogger


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


 الخطوة 01 :

  •  اتبع أولاً هذه الخطوات :
  1. تسجيل الدخول إلى لوحة تحكم Blogger.
  2. قم بعمل نسخة احتياطية من القالب الخاص بك أولاً.
  3. توجه إلى Template ثم قم بتحرير HTML. 
  4. باستخدام Ctrl + C للنسخ و Ctrl + V للصق الرموز التالية في أماكنها المناسبة.
  5.   ابحث عن سطر الكود بالضغط على Ctrl + F
  6.  احفظ القالب الخاص بك واخرج.
 
ملحوظة هامة : جميع الاكواد فى ملف اسفل المقال .

الخطوة 02 :


 بعد ذلك ، قم بلصق الكود التالي قبل </head> مباشرة .

بداية الكود :

<link href=’http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css’ rel=’stylesheet’/> <link href=’http://fonts.googleapis.com/css?family=Oswald’ rel=’stylesheet’ type=’text/css’/> <script type=’text/javascript’>//<![CDATA[//TOC Raqmedia.com function mbtTOC() { var mbtTOC=i=headlength=gethead=0; headlength = document.getElementById(“post-toc”).getElementsByTagName(“h2”).length;for (i = 0; i < headlength; i++) {gethead = document.getElementById(“post-toc”).getElementsByTagName(“h2”)[i].textContent;document.getElementById(“post-toc”).getElementsByTagName(“h2”)[i].setAttribute(“id”, “point”+i);mbtTOC = “<li><a href=’#point”+i+”‘>”+gethead+”</a></li>”;document.getElementById(“mbtTOC”).innerHTML += mbtTOC; }} function mbtToggle() { var mbt = document.getElementById(‘mbtTOC’);if (mbt .style.display === ‘none’) {mbt .style.display = ‘block’; } else { mbt .style.display = ‘none’; }}//]]></script>


نهاية الكود .


الخطوة 03 :



الآن ، ابحث عن وسم </ b: skin>  والصق رمز CSS التالي مباشرةً فوق ذلك الوسم </ b: skin> .


بداية الكود .

.mbtTOC { border: 5px solid #f7f0b8; box-shadow: 1px 1px 0 #EDE396; background-color: #FFFFE0; color: #707037; line-height: 1.4em; margin: 30px auto; padding: 20px 30px 20px 10px; font-family: oswald, arial; display: block; width: 70%; } .mbtTOC ol,.mbtTOC ul { margin: 0; padding: 0; } .mbtTOC ul { list-style: none; } .mbtTOC ol li,.mbtTOC ul li { padding: 15px 0 0; margin: 0 0 0 30px; font-size: 15px; } .mbtTOC a { color: #0080ff; text-decoration: none; } .mbtTOC a:hover { text-decoration: underline; } .mbtTOC button { background: #FFFFE0; font-family: oswald, arial; font-size: 20px; position: relative; outline: none; cursor: pointer; border: none; color: #707037; padding: 0 0 0 15px; } .mbtTOC button:after { content: “f0dc”; font-family: FontAwesome; position: relative; left: 10px; font-size: 20px; }

نهاية الكود .


الخطوة 03 :


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

بداية الكود .

<div id=”post-toc”><data:post.body/></div>

نهاية الكود .



كيفية إضافة جدول المحتويات تلقائيًا في منشورات بلوجر


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

بداية الكود .

<div class=”mbtTOC”> <button onclick=”mbtToggle()”>Contents</button> <ol id=”mbtTOC”></ol> </div>

نهاية الكود .


ملف جميع الاكواد  من هنا


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



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


NS/Eslam Gamal
Reactions:

تعليقات