بهترین روش ساخت فهرست مطالب در وردپرس بدون افزونه

سورس کد آماده فهرست مطالب در وردپرس (کپی + استفاده)

داشتن یک فهرست مطالب خودکار در وردپرس باعث می‌شود مقاله‌های بلند و پیچیده، به شکل بسیار حرفه‌ای برای کاربران سازمان‌دهی شوند. این فهرست مطالب نه تنها تجربه کاربری (UX) را بهبود می‌دهد، بلکه سئو سایت را هم تقویت می‌کند، چون موتورهای جستجو ساختار محتوا و لینک‌دهی داخلی را راحت‌تر شناسایی می‌کنند.

استفاده از کد آماده به جای افزونه، مزایای زیادی دارد:

کاهش بار اضافی روی سایت و افزایش سرعت لود صفحات

کنترل کامل روی ظاهر و عملکرد TOC

امکان سفارشی‌سازی سبک‌ها و رفتار فهرست بدون محدودیت افزونه‌ها

در این مقاله، به طور مفصل توضیح می‌دهیم که بخش‌های PHP، CSS و JavaScript چگونه با هم کار می‌کنند تا یک فهرست مطالب اتوماتیک و واکنش‌گرا بسازید.

<?php
function avinpress_auto_toc($content) {
    if (!is_single() || !in_the_loop() || !is_main_query()) return $content;

    libxml_use_internal_errors(true);
    $dom = new DOMDocument();
    $dom->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'));
    libxml_clear_errors();

    $xpath = new DOMXPath($dom);
    $headings = $xpath->query('//h2 | //h3');
    if ($headings->length === 0) return $content;

    $toc  = '<div class="avinpress-toc-wrapper">';
    $toc .= '<div class="avinpress-toc-header">';
    $toc .= '<span class="avinpress-toc-title"> در این مقاله چه می‌خوانیم؟</span>';
    $toc .= '<button class="avinpress-toc-toggle" onclick="avinpressToggleToc(this)">▼</button>';
    $toc .= '</div>';
    $toc .= '<div class="avinpress-toc-body">';
    $toc .= '<ul class="avinpress-toc-list">';

    $counter = 0;
    $open_h3_list = false;

    foreach ($headings as $heading) {
        $level = (int)$heading->nodeName[1]; 
        $title = trim($heading->textContent);
        $id = 'avinpress-toc-item-' . $counter;
        $counter++;

        if (!$heading->hasAttribute('id')) {
            $heading->setAttribute('id', $id);
        } else {
            $id = $heading->getAttribute('id');
        }

        if ($level === 2) {
            if ($open_h3_list) {
                $toc .= '</ul>';
                $open_h3_list = false;
            }
            $toc .= '<li class="avinpress-toc-level-2"><a href="#'.$id.'">'.$title.'</a>';
        } elseif ($level === 3) {
            if (!$open_h3_list) {
                $toc .= '<ul>';
                $open_h3_list = true;
            }
            $toc .= '<li class="avinpress-toc-level-3"><a href="#'.$id.'">'.$title.'</a></li>';
        }

        $next = $heading->nextSibling;
        while ($next && !in_array(strtolower($next->nodeName), ['h2','h3'])) {
            $next = $next->nextSibling;
        }
        if ($next && strtolower($next->nodeName) === 'h2') {
            if ($open_h3_list) {
                $toc .= '</ul>';
                $open_h3_list = false;
            }
            $toc .= '</li>';
        }
    }

    if ($open_h3_list) {
        $toc .= '</ul></li>';
    } else {
        $toc .= '</li>';
    }

    $toc .= '</ul></div></div>';

    // CSS و JS
    $toc .= '
    <style>
    .avinpress-toc-wrapper {
        background: #ffffff;
        border-radius: 12px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 8px 24px rgba(0,0,0,0.05);
        margin: 30px 0;
        font-family: "Vazir", "Segoe UI", Tahoma, sans-serif;
        overflow: hidden;
    }
    .avinpress-toc-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 18px;
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
    }
    .avinpress-toc-title {
        font-weight: 600;
        font-size: 15px;
        color: #0f172a;
    }
    .avinpress-toc-toggle {
        background: transparent;
        border: none;
        font-size: 16px;
        cursor: pointer;
        transition: transform 0.3s ease;
        color: #0ea5e9;
    }
    .avinpress-toc-toggle.active {
        transform: rotate(-180deg);
    }
    .avinpress-toc-body {
        padding: 16px 20px;
        transition: max-height 0.4s ease, opacity 0.4s ease;
        max-height: 1000px;
        opacity: 1;
        overflow: hidden;
    }
    .avinpress-toc-body.hide {
        max-height: 0;
        opacity: 0;
        padding: 0 20px;
    }

    .avinpress-toc-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .avinpress-toc-level-2 {
        margin-bottom: 10px;
        font-size: 14px;
        color: #1e293b;
        font-weight: 600;
    }

    .avinpress-toc-level-2 > ul {
        margin-top: 6px;
        margin-bottom: 12px;
        margin-right: 20px;
        padding-right: 15px;
        border-right: 2px dashed #e2e8f0;
    }
    .avinpress-toc-level-3 {
        margin-bottom: 6px;
        font-size: 13px;
        color: #475569;
        font-weight: normal;
    }

    .avinpress-toc-list a {
        text-decoration: none;
        color: inherit;
        transition: color 0.3s;
    }
    .avinpress-toc-list a:hover {
        color: #0ea5e9;
    }

    @media(max-width:768px){
        .avinpress-toc-wrapper { margin:20px 0; }
        .avinpress-toc-title { font-size:14px; }
        .avinpress-toc-list li { font-size:13px; }
    }
    </style>

    <script>
    function avinpressToggleToc(btn){
        const wrapper = btn.closest(".avinpress-toc-wrapper");
        const body = wrapper.querySelector(".avinpress-toc-body");
        body.classList.toggle("hide");
        btn.classList.toggle("active");
    }
    document.addEventListener("DOMContentLoaded",function(){
        document.querySelectorAll(".avinpress-toc-list a").forEach(link=>{
            link.addEventListener("click",function(e){
                e.preventDefault();
                const target=document.querySelector(this.getAttribute("href"));
                if(target){
                    const headerOffset = 80;
                    const elementPosition = target.getBoundingClientRect().top + window.pageYOffset;
                    const offsetPosition = elementPosition - headerOffset;
                    window.scrollTo({top: offsetPosition, behavior:"smooth"});
                }
            });
        });
    });
    </script>
    ';

    $body = $dom->getElementsByTagName("body")->item(0);
    $innerHTML = "";
    foreach ($body->childNodes as $child) {
        $innerHTML .= $dom->saveHTML($child);
    }

    return $toc . $innerHTML;
}
add_filter("the_content","avinpress_auto_toc");
?>

💻 توضیح بخش PHP (افزودن فهرست مطالب خودکار به محتوای وردپرس)

بخش PHP وظیفه اصلی ایجاد فهرست مطالب را دارد. این کد محتوای هر مقاله را بررسی می‌کند و هدینگ‌های H2 و H3 را شناسایی می‌کند تا یک TOC خودکار بسازد.

عملکرد اصلی PHP شامل موارد زیر است:

1. بررسی نوع صفحه:
   کد تنها در صفحه مقاله اجرا می‌شود و مطمئن می‌شود که TOC در آرشیوها یا صفحات دیگر نمایش داده نشود.

2. شناسایی هدینگ‌ها:
   تمام هدینگ‌های H2 و H3 موجود در محتوا پیدا می‌شوند. این کار باعث می‌شود فهرست مطالب دقیقاً مطابق با ساختار مقاله ساخته شود.

3. لینک‌دهی داخلی خودکار:
   هر هدینگ یک شناسه یکتا دارد و فهرست مطالب لینک‌ها را به آن هدینگ‌ها متصل می‌کند. این لینک‌ها باعث می‌شوند کاربران با یک کلیک مستقیم به بخش مورد نظر بروند.

4. ساختار سلسله‌مراتبی TOC:
   H2ها به عنوان بخش‌های اصلی و H3ها به عنوان زیرمجموعه‌های آن‌ها نمایش داده می‌شوند. این طراحی باعث می‌شود TOC مرتب و کاربرپسند باشد.

به طور خلاصه، بخش PHP قلب تپنده فهرست مطالب است و لینک‌دهی داخلی و ساختار سازمان‌یافته محتوا را فراهم می‌کند.

آموزش اختصاصی بخش CSS (استایل مدرن و واکنش‌گرا برای TOC)

CSS نقش ظاهری و تجربه بصری فهرست مطالب را به عهده دارد. بدون طراحی مناسب، حتی یک TOC کامل نمی‌تواند کاربر را جذب کند.

ویژگی‌های کلیدی CSS در این پروژه:

• ظاهر مدرن و مینیمال: طراحی ساده با گوشه‌های گرد، پس‌زمینه روشن و سایه‌های ملایم برای جذابیت بصری.

• سلسله‌مراتب واضح: H2ها به صورت برجسته و H3ها تو در تو نمایش داده می‌شوند تا ساختار مقاله قابل فهم باشد.

• تعامل کاربر: لینک‌ها با افکت Hover تغییر رنگ می‌دهند تا کاربر بداند روی کدام بخش کلیک کرده است.

• واکنش‌گرا (Responsive): در موبایل، اندازه فونت و فاصله‌ها بهینه می‌شوند تا TOC کاملاً قابل استفاده باشد.

• قابلیت جمع و باز شدن: کاربران می‌توانند TOC را ببندند یا باز کنند تا فضای صفحه را مدیریت کنند، مخصوصاً در نمایشگرهای کوچک.

CSS باعث می‌شود فهرست مطالب فقط یک ابزار کاربردی نباشد، بلکه یک المان طراحی حرفه‌ای و زیبا نیز باشد.

آموزش قسمت JavaScript (اسکرول نرم به هدینگ‌ها + باز و بسته شدن TOC)

JavaScript تعامل و عملکرد TOC را مدیریت می‌کند. بدون JS، TOC تنها یک لیست ایستا خواهد بود.

ویژگی‌های اصلی JavaScript:

1. اسکرول نرم به هدینگ‌ها:
   وقتی کاربر روی لینک TOC کلیک می‌کند، صفحه به آرامی به بخش مربوطه اسکرول می‌شود. این کار باعث تجربه کاربری بهتر و حس حرفه‌ای بودن سایت می‌شود.

2. باز و بسته شدن TOC:
   دکمه‌ای در ابتدای فهرست مطالب امکان نمایش یا مخفی کردن TOC را فراهم می‌کند، که مخصوصاً در موبایل اهمیت دارد.

3. سازگاری با هدر ثابت سایت:
   JS موقعیت اسکرول را طوری تنظیم می‌کند که هدینگ‌ها زیر هدر ثابت نمایش داده شوند و بخش‌ها از دید کاربر مخفی نمانند.

به این ترتیب، ترکیب PHP، CSS و JS یک TOC کاملاً حرفه‌ای، خودکار و کاربرپسند ایجاد می‌کند که هم تجربه کاربری و هم سئو سایت را بهبود می‌بخشد.

چرا باید فهرست مطالب در مقالات وردپرس داشته باشیم؟

داشتن یک فهرست مطالب در مقالات بلند و مفصل، بیش از یک عنصر تزئینی است. این ابزار هم تجربه کاربری را بهبود می‌دهد و هم سئو سایت را تقویت می‌کند. در ادامه، مزایای کلیدی TOC را بررسی می‌کنیم.

تاثیر فهرست مطالب بر سئو (SEO)

فهرست مطالب باعث می‌شود ساختار مقاله به موتورهای جستجو واضح‌تر شود. برخی از تاثیرات سئو عبارتند از:

1. لینک‌دهی داخلی خودکار: هر بخش مقاله با یک لینک داخلی به فهرست مطالب متصل است. این لینک‌ها به گوگل کمک می‌کنند محتوای سایت شما را بهتر ایندکس کند.

2. Rich Snippets و Featured Snippets: موتورهای جستجو می‌توانند بخش‌های مختلف مقاله را تشخیص دهند و در نتایج، بخش‌هایی از TOC را نمایش دهند.

3. کاهش نرخ پرش (Bounce Rate): وقتی کاربر به راحتی به بخش مورد نظرش هدایت شود، مدت زمان ماندگاری در صفحه افزایش می‌یابد، که یک سیگنال مثبت برای سئو محسوب می‌شود.

به طور خلاصه، TOC ساختار محتوا را برای موتورهای جستجو بهینه می‌کند و شانس دریافت نتایج ویژه (Featured Snippet) را بالا می‌برد.

بهبود تجربه کاربری (UX) و نرخ ماندگاری کاربر

یکی از مهم‌ترین مزایای فهرست مطالب، راحتی کاربر در پیمایش محتوا است.

• کاربران می‌توانند سریع به بخش مورد نظر خود بروند و نیازی نیست کل مقاله را اسکرول کنند.

• نمایش سلسله‌مراتبی H2 و H3 باعث می‌شود درک محتوا آسان‌تر شود.

• TOC امکان جمع و باز شدن دارد و فضای صفحه در موبایل مدیریت می‌شود.

این قابلیت‌ها باعث می‌شود کاربران مدت زمان بیشتری در سایت بمانند و احتمال بازدید از مقالات دیگر افزایش یابد، که هم برای UX و هم برای سئو مفید است.

افزایش نرخ کلیک داخلی (Internal Linking CTR)

وقتی TOC لینک‌دهی داخلی داشته باشد:

• کاربران مستقیماً روی لینک بخش مورد علاقه کلیک می‌کنند.

• بازدید صفحات داخلی افزایش می‌یابد و نرخ کلیک داخلی (Internal CTR) بهبود پیدا می‌کند.

• این رفتار باعث می‌شود اعتبار صفحات سایت بین مقالات منتقل شود و شانس رتبه گرفتن مقالات در گوگل بالاتر برود.

روش‌های مختلف ساخت فهرست مطالب در وردپرس

برای ساخت TOC در وردپرس، سه روش اصلی وجود دارد:

استفاده از افزونه‌های آماده (مثل TOC Plus و Easy TOC)

• مزایا:

  • نصب سریع و راه‌اندازی آسان

  • امکان سفارشی‌سازی ظاهر بدون نیاز به کدنویسی

  • امکانات پیشرفته مثل باز و بسته شدن خودکار و شمارنده هدینگ

• مخاطب: کاربران مبتدی یا کسانی که نمی‌خواهند کد بنویسند

محدودیت‌ها و معایب افزونه‌های فهرست مطالب

با وجود مزایا، افزونه‌ها محدودیت‌هایی دارند:

• افزایش حجم صفحات و کند شدن سایت

• محدودیت در سفارشی‌سازی کامل استایل‌ها و رفتار TOC

• وابستگی به به‌روزرسانی افزونه برای جلوگیری از مشکل امنیتی

بنابراین، همیشه بهترین گزینه استفاده از افزونه نیست، مخصوصاً برای سایت‌هایی که سرعت و SEO اهمیت بالایی دارد.

چرا کدنویسی اختصاصی بهترین گزینه است؟

استفاده از کد اختصاصی برای ساخت TOC مزایای زیر را دارد:

1. سرعت و سبک بودن سایت: بدون نیاز به بارگذاری فایل‌های اضافی افزونه.

2. کنترل کامل روی طراحی و عملکرد: می‌توانید ظاهر TOC، انیمیشن‌ها و اسکرول نرم را دقیقاً مطابق نیاز سایت پیاده کنید.

3. سازگاری کامل با SEO و UX: لینک‌دهی داخلی، ساختار سلسله‌مراتبی، و اسکرول نرم همگی قابل تنظیم هستند.

4. قابلیت توسعه و سفارشی‌سازی: هر زمان می‌توانید امکانات جدید مثل باز و بسته شدن خودکار، شمارش هدینگ‌ها یا فیلتر نمایش برخی بخش‌ها را اضافه کنید.

در نتیجه، برای سایت‌های حرفه‌ای و مقالات بلند، کدنویسی اختصاصی گزینه‌ای مطمئن، سریع و بهینه است.

آموزش مرحله‌به‌مرحله ساخت فهرست مطالب بدون افزونه

ساخت فهرست مطالب بدون افزونه شاید در ابتدا کمی پیچیده به نظر برسد، اما اگر مراحل زیر را دنبال کنید، می‌توانید یک TOC کامل، سبک و حرفه‌ای بسازید که هم تجربه کاربری را بهبود دهد و هم برای سئو بهینه باشد.

شناسایی هدینگ‌ها (H2 و H3) در محتوا

اولین قدم، شناسایی هدینگ‌های مقاله است. در این مرحله باید تمام تگ‌های H2 و H3 در محتوای نوشته پیدا شوند.

• هدینگ‌های H2 معمولاً برای بخش‌های اصلی مقاله استفاده می‌شوند.

• هدینگ‌های H3 زیرمجموعه H2 هستند و به تفکیک جزئیات کمک می‌کنند.

• با شناسایی دقیق هدینگ‌ها، می‌توان ساختار سلسله‌مراتبی TOC را ایجاد کرد و هر بخش را به صورت جداگانه لینک‌دهی کرد.

این مرحله مهم است چون پایه تمام لینک‌دهی داخلی و طراحی TOC به شمار می‌رود.

ایجاد لینک‌دهی داخلی خودکار به بخش‌ها

پس از شناسایی هدینگ‌ها، هر بخش نیاز به شناسه (ID) یکتا دارد. این شناسه‌ها باعث می‌شوند لینک‌های فهرست مطالب به همان بخش هدایت شوند.

مزایای لینک‌دهی داخلی خودکار:

• کاربران می‌توانند با یک کلیک مستقیماً به بخش مورد نظر بروند.

• موتورهای جستجو ساختار مقاله را بهتر درک می‌کنند و ارزش سئو افزایش می‌یابد.

• نیاز به ایجاد لینک دستی برای هر بخش از بین می‌رود و مدیریت مقاله آسان‌تر می‌شود.

طراحی ظاهری TOC با CSS مدرن

بعد از ساختار HTML، ظاهر TOC اهمیت پیدا می‌کند. یک طراحی حرفه‌ای و جذاب باعث می‌شود کاربران راحت‌تر از فهرست استفاده کنند.

ویژگی‌های طراحی CSS مدرن:

• پس‌زمینه روشن و گوشه‌های گرد برای ظاهر مینیمال و زیبا

• برجسته‌سازی هدینگ‌های H2 و نمایش تو در تو H3

• افکت Hover روی لینک‌ها برای تعامل بهتر

• قابلیت جمع و باز شدن TOC، مخصوصاً در موبایل

• طراحی واکنش‌گرا برای نمایش صحیح در انواع نمایشگرها

با CSS درست، فهرست مطالب تبدیل به یک ابزار کاربرپسند و جذاب می‌شود، نه یک لیست ساده و خشک.

افزودن اسکرول نرم با جاوااسکریپت (Smooth Scroll)

JavaScript باعث می‌شود TOC تعامل‌پذیر و حرفه‌ای باشد:

• اسکرول نرم به بخش مورد نظر به جای پرش ناگهانی

• مدیریت فاصله از هدر ثابت سایت برای مشاهده کامل هدینگ

• امکان باز و بسته کردن TOC با دکمه Toggle

• افزایش تجربه کاربری و کاهش سردرگمی کاربران

این مرحله باعث می‌شود TOC نه تنها مفید، بلکه مدرن و هوشمند باشد.

نکات بهینه‌سازی فهرست مطالب برای سئو و UX

داشتن TOC کافی نیست؛ بهینه‌سازی نمایش و عملکرد آن برای موتورهای جستجو و کاربران اهمیت دارد.

انتخاب موقعیت مناسب برای نمایش فهرست مطالب

• بهترین مکان معمولاً در ابتدای مقاله، بعد از مقدمه است.

• اگر مقاله خیلی کوتاه است، TOC ممکن است ضروری نباشد.

• قرار دادن TOC در مکان مناسب باعث راحتی کاربر و افزایش نرخ کلیک داخلی می‌شود.

بهینه‌سازی موبایل (Responsive Design)

با توجه به افزایش بازدید موبایل:

• اندازه فونت، فاصله‌ها و عرض TOC باید بهینه شوند.

• قابلیت جمع و باز شدن TOC در موبایل بسیار مهم است تا فضای صفحه محدود نشود.

• طراحی واکنش‌گرا تضمین می‌کند تجربه کاربری در همه دستگاه‌ها یکسان و حرفه‌ای باشد.

استفاده از اسکیما برای فهرست مطالب (FAQ و Breadcrumbs)

برای بهبود سئو، می‌توان از اسکیماهای مخصوص فهرست مطالب و Breadcrumbs استفاده کرد:

• موتورهای جستجو ساختار مقاله و فهرست را بهتر می‌فهمند.

• احتمال نمایش Rich Snippet در نتایج گوگل افزایش می‌یابد.

• به کاربران و گوگل کمک می‌کند مقاله را به شکل سلسله‌مراتبی و منظم مشاهده کنند.

 

سوالات متداول درباره فهرست مطالب وردپرس

در این بخش، رایج‌ترین سوالاتی که کاربران درباره فهرست مطالب وردپرس دارند پاسخ داده شده است تا ابهامات برطرف شود.

آیا فهرست مطالب باعث بهبود رتبه در گوگل می‌شود؟

بله، به چند دلیل:

1. لینک‌دهی داخلی: هر بخش مقاله با TOC به هدینگ مربوطه لینک می‌شود که ارزش سئو را افزایش می‌دهد.

2. بهبود تجربه کاربری: کاربران راحت‌تر به بخش مورد نظر دسترسی پیدا می‌کنند و مدت زمان ماندگاری در صفحه بیشتر می‌شود، که یک سیگنال مثبت برای گوگل است.

3. Rich Snippet: گوگل می‌تواند فهرست مطالب را در نتایج جستجو به صورت لینک‌های داخلی نمایش دهد و CTR را افزایش دهد.

در نتیجه، وجود یک TOC حرفه‌ای هم برای کاربران و هم برای موتورهای جستجو مفید است.

چه فرقی بین افزونه و کدنویسی اختصاصی وجود دارد؟

• افزونه: سریع و راحت است، بدون نیاز به دانش برنامه‌نویسی، اما ممکن است باعث سنگین شدن سایت شود و امکانات محدودتری برای سفارشی‌سازی داشته باشد.

• کدنویسی اختصاصی: سبک، سریع و کاملاً قابل کنترل است. می‌توانید ظاهر، رفتار و لینک‌دهی TOC را به دلخواه خود تنظیم کنید و بهترین تجربه کاربری و سئو را فراهم کنید.

بنابراین، برای سایت‌های حرفه‌ای، کدنویسی اختصاصی گزینه‌ای مطمئن‌تر است.

چطور می‌توان فهرست مطالب را فقط در بعضی پست‌ها نمایش داد؟

با استفاده از شرط‌های PHP می‌توان TOC را تنها در پست‌های مشخص یا دسته‌بندی‌های خاص نمایش داد:

• بررسی دسته یا برچسب مقاله

• استفاده از متا فیلد اختصاصی برای هر پست

• نمایش TOC تنها در نوشته‌هایی با تعداد هدینگ مشخص

این روش به شما امکان می‌دهد کنترل کامل روی زمان و مکان نمایش TOC داشته باشید و از نمایش غیرضروری جلوگیری کنید.