اضافه کردن فهرست مطالب در المنتور، یکی از قابلیت های ضروری برای مقالات سایت داشتن قابلیت فهرست مطالب هست تا کاربر بتونه خیلی راحت به تمام قسمت های مقاله به راحتی و بدون دردسر دسترسی داشته باشه. اضافه کردن فهرست مطالب در المنتور باعث میشه علاوه بر بهبود تجربه کاربری، گوگل و موتور های جست و جو به مقالات شما امتیاز بالاتری بدن و رتبه کلی سئو سایت شما افزایش پیدا کنه. با توجه به ضرورت این نکته توی این مقاله از سایت کنترل وب ما این قابلیت ضروری یعنی اضافه کردن فهرست مطالب در المنتور رو به صورت کامل بررسی می کنیم تا شما یتونین این قابلیت رو برای مقالات سایتتون به وجود بیارین.
توی این مقاله چی یاد میگیریم؟
Toggleاهمیت اضافه کردن فهرست مطالب در المنتور چیست؟
اول از همه قبل از هر چیزی میخوایم بدونیم که چرا باید تمامی مقالات سایتمون دارای فهرست مطالب باشن. پاسخ به این سوال رو میشه از دو جانب بررسی کرد:
- بهبود تجربه کاربری: فرض کنین که برای تحقیق در مورد موضوعی کتابی رو خریداری کردین و میخواین برای پیدا کردن پاسخ به سرفصلی از کتاب نگاهی بیاندازین. حالا فرض کنین که فهرستی برای مطالب این کتاب وجود نداشته باشه! اون وقت شما مجبورید تا برای پیدا کردن جوابتون کل کتاب رو زیر و رو کنید تا پاسختونو پیدا کنین. اینجاست که به اهمیت داشتن یک فهرست که تمامی موارد اون کتاب رو به صورت مرتب لیست کرده باشه پی مبرین.حالا فرض کنین که درست مانند مقالات یک کتاب قصد دارین برای خوندن همین مقاله و یا آموزش های رایگان دیگر وارد کنترل وب شدین و میخواین بدون صرف زمان و اتلاف وقت پاسخ سوالتون رو پیدا کنین. می بینید که اگر مقاله نوشته شده فهرست مطالبی نداشته باشه باید چقدر زمان و وقت صرف کنین تا به پاسخ سوالتون برسین. پس مسلما داشتن یک تجربه کاربری خوب مستلزم داشتن یک فهرست محتوا از قسمت های کلیدی مقاله شماست.
- بهبود سئو و افزایش رتبه مقاله: گوگل همواره دنبال این بوده که تجربه کاربری رو افزایش بده . کاربر ها رو راضی نگه داره. پس وقتی کاربر مطلبی رو داخل این موتور جست و جو سرج میکنه مقالاتی رو به کاربر نمایش میده که تجربه کاربری بهتری رو به کاربر میده. پس اضافه کردن فهرست مطالب در المنتور باعث میشه تا نمراتی که گوگل برای مقالات سایت شما در نطر می گیره افزایش چشمگیری داشته باشه.
حالا که با اهمیت داشتن فهرست محتوا در مقالات سایتتون آشنا شدین، وقت این رسیده تا ببینیم با چه روشی می تونیم این قابلیت رو ایجاد کنیم.
برای این منظور پلاگین های وردپرس محتلفی وجود داره که این امکان رو برای شما فراهم میکنن اما خوشبختانه افزونه صفحه ساز المنتور این امکان رو به در نسخه پرو خودش به صورت یک ویجت ( المان ) طراحی کرده تا شما اگر دارید از المنتور استفاده می کنین بدون نیاز به هیچ افزونه اضافی اضافه کردن فهرست مطالب در المنتور رو درون مقالات وب سایتتون انجام بدین.
پس قبل از انجام هر کاری لازمه تا پلاگین المنتور رو در سایتتون داشته باشین.
![اضافه کردن فهرست مطالب در المنتور 2 المان فهرست مطالب در المنتور | کنترل وب](https://ctrlweb.ir/wp-content/uploads/2024/07/تصویر-داخل-مقاله-فهرست-مطالب-در-المنتور-3.png)
المان موردنیاز برای اضافه کردن فهرست مطالب در المنتور:
برای اضافه کردن فهرست مطالب در المنتور، به ویجت فهرست مطالب یا table of content یا اختصارا TOC نیاز دارید. با استفاده از این ویجت شما می تونین فقط به کمک المنتور پرو این قابلیت ضروری رو برای مقالات سایتتون به وجود بیارید. پس کافیه تا اسم این عبارت رو در قسمت جست و جو سرچ کنین تا اضافه کردن فهرست مطالب در المنتور رو انجام بدین.
تنطیمات این المان از قسمت های مختلفی تشکیل شده که با دونستن اینکه هر کدوم از این قسمت ها چه کاری رو انجام میدن، می تونین فهرست محتوای شخصی سازی شده و مناسب مقالات خودتون رو ایجاد کنین. پس در ادامه مقاله اضافه کردن فهرست مطالب در المنتور با ما همراه باشین تا هر قسمت از تنطیمات این المان رو بررسی کنیم.
تنطیمات المان فهرست مطالب در المنتور(TOC) از چه قسمت هایی تشکیل شده است؟
این المان از 3 تب محتوا، استایل و پیشرفته تشکیل شده که هر کدوم از این بخش ها دارای نطیمات زیر هستند:
- تب محتوا: این تب شامل قسمت های مربوط به تنطیم محتوای المان فهرست مطالب هست که وطیفه تنطیم کارکرد مورد نظر برای این المان رو دارن. تنطیماتی که این قسمت به شما ارائه میده شامل تیتر، تگ html ، کانتینر و نمای نشانگر و ... است.
- تب استایل: با استفاده از این تب میتونین تنظیمات ظاهری مثل رنگ جعبه، تایپوگرافی متن ها و تیتر و قسمت های دیگر مربوط به نمایش ظاهری المان رو تنطیم کنین. این تب شامل تنظیمان فاصله داخلی، رنگ پس زمینه، گردی کادر جعبه، تنظیمات قسمت فعال لیست، حداقل ارتفاع باکس محتوا و … میشه .
- تب پیشرفته: این تب برای تمام المان های المنتور یکسان است و تنظیمات اصافی رو برای اعمال بر روی المان ارائه می دهند. این تنطیمات شامل کلاس سی اس اس، شناسه سی اس اس، تنظیمات فاصله خارحی (margin) و فاصله داخلی(padding)، ایندکس z و ... می شود.
آموزش کامل بخش های المان فهرست مطالب در المنتور:
برای اینکه فهرست محتوا رو درون مقاله خودتون قرار بدین باید اول به صفحه طراحی مقاله برید و در قسمت جست و جوی المان ها، المان موردنیاز یعنی “فهرست مطالب” رو جست و جو کنید. اگز به زبان انگلیسی جست و جو رو انجام میدین میتونین عبارت “table of content یا TOC” رو جست جو کنید:
![اضافه کردن فهرست مطالب در المنتور 3 جست و جوی المان فهرست مطالب در المنتور | کنترل وب](https://ctrlweb.ir/wp-content/uploads/2024/07/تصویر-داخل-مقاله-فهرست-مطالب-در-المنتور-2.png)
بعد از پیدا کردن این المان، المان مورد نظر رو به صورت کشیدن و رها کردن (drag & drop) در جایی که میخواین فهرست محتوا قرار بگیره قرار بدین.
حال باید تنطیمات موردنظز خودمون رو برای هر کدام از 3 تب تنطیم المان انجام بدیم:
مشخص کردن قسمت محتوا برای ویجت فهرست مطالب در المنتور:
اگر دقت کنین وقتی که این المان رو به مقاله اضافه کردیم، این ویجت تمامی قسمت هایی از سایت که شامل تگ های مشخص شده برای المان هست رو لیست کرده و به عنوان فهرست قرار داده است. این موضوع به این دلیل هست که اضافه کردن فهرست مطالب در المنتور تمامی تگ هایی که در صفحه با تگ موردنطر یکسان هستند رو به عنوان محتوای مطلب شناسایی می کنه و تمایزی به صورت پیشفرض بین محتوا مطلب و بقیه محتوای صفحه نمیزاره. پس اولین کاری که بعد از اضافه کردن فهرست مطالب در المنتور باید انجام بدیم اینه که با استفاده از روشی محتوای صفحه رو برای المان مشخص کنیم. برای اینکار مراحل زیر رو انجام بدید:
- ابتدا المانی که محتویات صفحه رو نمایش میده انتخاب میکنیم و در قسمت تنطیمات المان به قسمت “پیشرفته -> کلاس css” میریم و نام دلخواهی رو برای کلاس المان وارد می کنیم.
- بعد از انتخاب نام کلاس برای قسمت محتوای نوشته لازمه که این کلاس رو به عنوان محتوای نوشته به المان فهرست مطالب معرفی کنیم. برای اینکار داخل تنطیمات المان TOC به قسمت “پیشرفته -> کانتینر” میریم و نامی که در مرحله قبلی تعیین کردیم رو با نقطه در اول نام وارد می کنیم. توجه کنید که اگر اول نام کلاس نقطه نگذارید و به همون صورت وارد کنین کارکرد ویجت مختل میشه و اضافه کردن فهرست مطالب در المنتور به درستی اعمال نمیشه.
نحوه صحیح وارد کردن کلاس برای کانتینر
تنطیمات مربوط به تب ها:
تب محتوا:
1.در محتوا-> قسمت فهرست مطلب میتونیم تنطیمات کلی فهرست رو انجام بدیم. در قسمت “عنوان” میتونیم متن اصلی عنوان فهرست محتوا رو تعیین کنیم:
![اضافه کردن فهرست مطالب در المنتور 5 تنطیم عنوان فهرست محتوا در المنتور | کنترل وب](https://ctrlweb.ir/wp-content/uploads/2024/07/تصویر-داخل-مقاله-فهرست-مطالب-در-المنتور-4.png)
2.در قسمت تگ های HTML میتونین مشخص کنین که تگ مربوط به عنوان فهرست مطالب که در مرحله قبل مشخص کردین چه تگی باشه:
![اضافه کردن فهرست مطالب در المنتور 6 مشخص کردن تگ عنوان فهرست مطالب](https://ctrlweb.ir/wp-content/uploads/2024/07/تصویر-داخل-مقاله-فهرست-مطالب-در-المنتور-12.png)
3.داخل گزینه مشاهده نشانگر میتونین مشخص کنین که گزینه های فهرست مطالب به صورت شماره ای باشه یا به صورت لیست نقطه گذاری مشخص بشه. اگر این گزینه رو روی نقطه های صفحه بندی تنطیم کردین فهرست به صورت زیر نمایش داده می شود:
![اضافه کردن فهرست مطالب در المنتور 7 مشاهده نشاگر به صورت نقطه های صفحه بندی](https://ctrlweb.ir/wp-content/uploads/2024/07/تصویر-داخل-مقاله-فهرست-مطالب-در-المنتور-15.png)
4.در تب گزینه های اضافی با قسمت وارپ کلمه (wrap) این امکان رو داربن که همیشه لیست های فهرست رو یک خطی کنین. اگر این گزینه فعال باشه در صورتی که گزینه لیستی بیشتر از یک خط شد ادامه خط به صورت نقطه چین نمایش داده می شه:
![اضافه کردن فهرست مطالب در المنتور 8 وارپ کلمه در تنطیمات فهرست مطالب المنتور](https://ctrlweb.ir/wp-content/uploads/2024/07/تصویر-داخل-مقاله-فهرست-مطالب-در-المنتور-17-1.png)
5.داخل گزینه مینیمایز جعبه میتونین حالت باز و بسته شده به صورت کشویی رو برای المان طراحی کنین. اگز این گزینه رو غیر فعال کنین مسلما آیکون باز و بسته شدن و تنطیمات آیکون در زیر این تنطیم نیز ناپدید میشه:
![اضافه کردن فهرست مطالب در المنتور 9 مینیمایز جعبه در فهرست مطالب المنتور](https://ctrlweb.ir/wp-content/uploads/2024/07/تصویر-داخل-مقاله-فهرست-مطالب-در-المنتور-20.png)
6. در قسمت مشاهده سلسه مراتبی میتونین مشخص کنین که لیست ها و زیر دسته هاشون به صورت سلسه مراتبی با شماره گذازی مراتبی نمایش داده شن یا به ترتیب از یک تا آخرین عدد شماره گذاری بشن.
تب استایل:
1.در قسمت جعبه میتونین استایل های کلی مربوط به المان رو مشخص کنین. مثلا میتنونین توی قسمت پس زمینه رنگ جعبه فهرست مطالب رو مشخص کنین.
میتونین از طریق گزینه تایپوگرافی مثل بقیه گزینه های تایپوگرافی در سایر المان ها تنطیمات مربوط به متن رو انجام بدین.
از طریق گزینه های ضخامت حاشیه می تونین اندازه مرز حاشیه جعبه فهرست رو انجام بدین.
از طریق گزینه گردی کادر میتونین میزان border radius رو مشخص کنین.
2.در قسمت لیست می تونین تنطیمات استایل مربوط به لیست فهرست محتوا که اضافه کردن فهرست مطالب در المنتور بهتون ارائه داد رو تنطیم کنین. این گزینه شامل تنطیمات رنگ پس زمینه، تایپوگرافی لیست و … میشه.
در اینجا گزینه ای با نام حداکثر ارتفاع وجود داره که اگر برای این گزینه عددی رو تنظیم کنین، همیشه ارتفاع به اندازه این عدد ثابت باقی میمونه و اگر اندازه ارتفاع محتوا بیشتر از این مقدار شد باعث میشه تا مقدار باقی مونده به صورت اسکرول شده نمایش داده بشه. این مورد میتونه بزای قسمت هایی که ما کمبود فضا دارید خیلی به کارتون بیاد.
خلاصه مراحل اضافه کردن فهرست مطالب در المنتور:
- اول از همه برای دسترسی به المان فهرست مطالب، افزونه المنتور پرو رو نصب کنید.
- در قسمت جست و جوی ویجت ها، المان فهرست مطالب یا TOC (table of content) رو سرچ کنید.
- برای اضافه کردن فهرست مطالب در المنتور المان موردنظر رو درگ کنید و در قسمتی که میخواین قرار بدید.
- المان محتوای نوشته ی خود رو در صفحه انتخاب کنید.
- به قسمت پیشرفته -> کلاس css برید و کلاسی برای این قسمت تعریف کنید.
- المان فهرست مطالب رو انتخاب کنید.
- در قسمت محتوا -> کانتینر کلاس css تعرف شده را به همراه نقطه وارد کنید.
- استایل های موردنطر رو از قسمت استایل برای هر بخش از فهرست مطلب مشخص کنید.
پس توی این مقاله به صورت کامل با روش صحیح اضافه کردن فهرست مطالب در المنتور آشنا شدیم و مراحل طراحی و تنطیمات هر قسمت رو شناختیم. امیدوارم که این مقاله به شما کمک کرده باشه تا یک فهرست محتوای جذاب و حرفه ای برای مقالاتتون ایجاد کنین.
اگز هنوز سوال و یا مشکلی در مورد اضافه کردن فهرست مطالب در المنتور دارید خوشحال میشیم که توی کامنت از ما بپرسین.
2 پاسخ
خیلی ممنون واقعا کامل و عالی توضیح دادین. من خیلی دنبال این آموزش بودم.
خوشحالیم که مورد استفادتون بود.