كود إضافة Table of Contents (TOC) داخل مواضيع مدونة بلوجر

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

ما هو جدول المحتويات (ToC)

جدول المحتويات أو جدول المحتويات باللغة المصرية عبارة عن مجموعة من القوائم المنظمة التي تحتوي على فصول أو أقسام مناقشة أو عناوين مواد مرفقة بالصفحة الأولى أو أعلى المقال.

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

وظيفة جدول المحتويات في مقالات المدونة

إن إنشاء جدول محتوى على بلوجر/ Wordpress له عدة أغراض ووظائف، بما في ذلك:

يجعل من السهل على القراء التنقل

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

دليل الكتابة

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

هل يؤثر جدول المحتويات على تحسين محركات البحث؟

السؤال هو هل تثبيت جدول المحتوى ضروري؟ وهل لها تأثير على SEO للمدونة؟

في الواقع، يعد إنشاء جدول محتويات (TOC) عاملاً قيمًا في إنشاء منشورات صديقة لمحركات البحث SEO. خاصة عن طريق تثبيت جدول محتويات في المقالة، سيؤدي ذلك إلى تحسين تحسين محركات البحث للمنشور على الصفحة، بحيث تتم فهرسة المدونة بسرعة بواسطة Google. علاوة على ذلك، فإن المقالة التي تكتبها طويلة جدًا، مما يعني أنها ستجعل القراء يشعرون بالملل والملل بسرعة أكبر، كما أن وجود جدول المحتويات (TOC) سيساعد القراء حقًا في العثور على هدفهم.

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

كيفية إنشاء Table of Contents (TOC) في منشورات بلوجر

قم بتثبيت كود CSS أعلى الكود ]]></b:skin>

/* Table of Contents by aweywashk.xyz */
.toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px; display:table; line-height:1.6em;}
.toc h2 {display:inline-block; margin-right:10px}
.toc a {text-decoration:none}
.toc a:hover {text-decoration:underline}
.toc ul {list-style-type:none; list-style-image:none; margin:0px; padding:0px; text-align:left}
.toc ul li {list-style-type:none;}
.toc ul li a {margin-left:.5em}
.toc ul li ul {margin-left:2em}
.toctogglelabel {cursor:pointer; color:#0645ad}
:not(:checked) > .toctoggle {display:inline !important; position:absolute;  opacity:0}
:not(:checked) > .toctogglespan:before {content:'['}
.toctoggle:not(:checked) + .toctitle .toctogglelabel:after {content:'sembunyikan';display: inline}
.toctoggle:checked + .toctitle .toctogglelabel:after {content:'tampilkan'}
:not(:checked) > .toctogglespan:after {content:']'}
.toctoggle:checked ~ ul{display:none}
:target::before {content:''; display:block; height:0px; margin-top:0px; visibility:hidden}

تثبيت كود HTML TOC في منشورات المدونة

<div class="toc">
  <input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h2>قائمة المحتويات</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
  <ul>
    <li>1 <a href="#toc1" title="العنوان الاول">العنوان الاول</a></li>
    <li>2 <a href="#toc2" title="العنوان الثاني">العنوان الثاني</a></li>
    <li>3 <a href="#toc3" title="العنوان الثالث">العنوان الثالث</a></li>
    <li>4 <a href="#toc4" title="العنوان الرابع">العنوان الرابع</a></li>
    <li>5 <a href="#toc5" title="العنوان الخامس">العنوان الخامس</a>
      <ul>
      <li>5.1 <a href="#toc5_1" title="العنوان الفرعي 5:1">العنوان الفرعي خمسة إلى واحد</a></li>
      <li>5.2 <a href="#toc5_2" title="العنوان الفرعي 5:2">العنوان الفرعي خمسة إلى واحد</a></li>
      </ul>
    </li>
    <li>6 <a href="#toc6" title="العنوان السادس">العنوان السادس</a></li>
  </ul>
</div>

كيفية تنفيذ HTML TOC في مقالات المدونة

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

<h2 id="toc1">العنوان الأول</h2>
...املأ الفقرة الأولى

<h2 id="toc2">العنوان الثاني</h2>
...املأ الفقرة الثانية

<h2 id="toc3">العنوان الثالث</h2>
...املأ الفقرة الثالثة

<h2 id="toc4">العنوان الرابع</h2>
...املأ الفقرة الرابعة

<h2 id="toc5">العنوان الخامس</h2>
...املأ الفقرة الخامسة

<h3 id="toc5_1">العنوان الفرعي من خمسة إلى واحد</h3>
...املأ الفقرة الخامسة الجزء الأول

<h3 id="toc5_2">العنوان الفرعي من خمسة إلى اثنين</h3>
...املأ الفقرة الخامسة الجزء 2

<h2 id="toc6">العنوان السادس</h2>
...املأ الفقرة السادسة

تثبيت جدول محتويات مشابه لويكيبيديا

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

HTML 1

<div class="toc">
  <input type="checkbox" role="button" id="toctoggle" class="toctoggle">
  <div class="toctitle">
    <h2>جدول المحتويات</h2>
    <span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span>
  </div>
  <ul>
    <li>1 <a href="#toc1" title="Biography">Biography</a></li>
    <li>2 <a href="#toc2" title="Solo career">Solo career</a></li>
    <li>3 <a href="#toc3" title="Personal life">Personal life</a></li>
    <li>4 <a href="#toc4" title="Paramore">Paramore</a></li>
    <li>5 <a href="#toc5" title="Discography">Discography</a>
      <ul>
      <li>5.1 <a href="#toc5_1" title="Other singles">Other singles</a></li>
      <li>5.2 <a href="#toc5_2" title="Other appearances">Other appearances</a></li>
      </ul>
    </li>
    <li>6 <a href="#toc6" title="Awards and Nominations">Awards and Nominations</a></li>
  </ul>
</div>

Css 2

.toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px; display:table; line-height:1.6em;}
.toc h2 {display:inline; margin-right:10px}
.toc a {text-decoration:none}
.toc a:hover {text-decoration:underline}
.toc ul {list-style-type:none; list-style-image:none; margin-left:0px; margin-bottom:0px; padding:0px; text-align:left}
.toc ul li a {margin-left:.5em}
.toc ul li ul {margin-left:2em}
.toctogglelabel {cursor:pointer; color:#0645ad}
:not(:checked) > .toctoggle {display:inline !important; position:absolute;  opacity:0}
:not(:checked) > .toctogglespan:before {content:'['}
.toctoggle:not(:checked) + .toctitle .toctogglelabel:after {content:'sembunyikan';display: inline}
.toctoggle:checked + .toctitle .toctogglelabel:after {content:'tampilkan'}
:not(:checked) > .toctogglespan:after {content:']'}
.toctoggle:checked ~ ul{display:none}
.tocbody h2 {border-bottom: 1px solid #a2a9b1; font-family: 'Linux Libertine','Georgia','Times',serif; line-height: 1.3; margin-bottom: 0.25em; padding: 0;}
.tocbody p {margin: 0.5em 0;}
:target::before{content:''; display:block; height:0px; margin-top:0px; visibility:hidden}

الخلاصة: إنشاء جدول محتوى على مدونة

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