كيف تضيف لائحة المحتويات إلى تدويناتك

أحد الفروق (الكثيرة!) التي ألاحظها بين المدونات الإنجليزية و العربية هو أن العديد من الأولى توفر “لائحة محتويات” داخل التدوينة نفسها. وتكاد تكون هذه الخدمة معدومة في المواقع والمدونات العربية حتى التقنية منها أو تلك التي تحتوي على تدوينات طويلة متفرعة ومنقسمة لعدة أقسام. وقد قمت أثناء تطوير قالب “تكيكون” بتعريب إضافة ووردبرس بسيطة تسمح بتقديم هذه الخدمة وأضفت لها كود css خاص لعرضها بطريقة جذّابة وتتماشى مع القالب.

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

هدف الإضافة

عرض لائحة المحتويات داخل التدوينة.

مثال حيّ

لمزيد من المعلومات حول الشكل النهائي لللائحة راجع مثلاً تدوينتي عن خدمة الخلاصات.

تعريب

تعريب: ووردبرس بالعربي

طريقة العمل

1- حمّل ملف الإضافة

2- إرفع ملف الإضافة إلى مجلد wp-content>plugins بإستخدام برنامج FTP (لمزيد من التفاصيل راجع تدوينتي هذه)

3- إذهب إلى قسم الإضافات (Plugins) في لوحة التحكم وقم بتفعيلها (Activate)

4- إذهب الآن إلى ملف style.css وأضف الكود التالي:

.tocbox
{
border: 1px solid #dadada;
background-color: #f1f1f1;
background-image: none;
background-repeat: no repeat;
background-attachment: scroll;
background-position: 0% 0%;
float: right;
margin-right:0px;
margin-top:0px;
margin-left:20px;
padding-top: 4px;
padding-left: 0px;
padding-bottom: 4px;
padding-right: 2px;
margin-bottom: 12px;
font-size: 12px;
text-align:right;
width:185px;
}

#toctitle
{
border-bottom: 1px solid #dadada;
font-family:"Lucida Sans Unicode", Arial, sans-serif;
font-size: 17px;
color:#003366;
font-weight:bold;
margin-top: 0pt;
margin-bottom:0pt;
background-color: #f1f1f1;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
}

5 – أدخل الكود التالي في المكان الذي تريد أن تظهر عليه لائحة المحتويات (داخل شاشة HTML في صفحة التدوين ووضع أمر– TOC–! داخل أقواس < > وليس كما تراه):

<table id="toc" class="tocbox" dir="rtl" border="0" summary="Contents">
<tbody>
<tr>
<td>
<div id="toctitle">المحتويات</div>
!-- TOC --</td>
</tr>
</tbody></table>

هذا كل شيئ! ستشاهد الآن مربع يحتوي على كلمة “المحتويات” ولائحة المحتويات داخل تدوينتك. يمكنك بالطبع تعديل كل شيئ عبر الكود الذي وفرته لك.

ملاحظة: هذه الإضافة تعمل عن طريق تعريفات <h1>< h2> <h3><h4> إلخ المختصة بالخطوط. ولذلك إذا لم تعرّف عناوين الأقسام داخل التدوينة بهذه الخطوط فإنها لن تعمل.