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

ساخت فهرست مطالب حرفه‌ ای در وردپرس بدون افزونه – سلام رفیق! 👋🏼 اگه تو هم از اون دسته آدم‌هایی هستی که همیشه دنبال راه‌حل‌های سریع و ساده برای بهتر کردن تجربه کاربری سایتت می‌گردی، این آموزش دقیقاً برای توئه! تو این مقاله می‌خوام بهت نشون بدم چطور می‌تونی به راحتی و بدون هیچ افزونه‌ای فهرست مطالب حرفه‌ای و سفارشی در وردپرس بسازی. این فهرست مطالب فقط به کاربران کمک نمی‌کنه سریع‌تر به محتوا دسترسی پیدا کنن، بلکه سئو سایتت رو هم ارتقا می‌ده.

نگران نباش، لازم نیست حتما کد نویسی بلدی باشی! با چند خط کد ساده و ترفندهایی که بهت میگم، می‌تونی فهرست مطالب رو به شکلی تمیز و جذاب درست کنی که هم برای بازدیدکننده‌ها خوشایند باشه، هم گوگل حسابی ازت راضی باشه! 😉 پس با من همراه شو تا گام به گام این کار رو انجام بدیم!

فهرست مطالب یا جدول محتوا چیه؟ 🤔

فهرست مطالب یا همون جدول محتوا (Table of Content به اختصار TOC)، یه لیست از لینک‌هاست که معمولاً توی صفحات طولانی یا مقالات با بخش‌های مختلف میزارن تا کاربر بتونه سریع به بخش مورد نظرش بره. این فهرست معمولاً شامل لینک‌هایی هست که به عناوین یا هدینگ های مختلف محتوا اشاره می‌کنن. برای مثال، اگه یه مقاله بلند داری که شامل چندین بخش مختلف مثل “مقدمه”، “محتوا”، “نتیجه‌گیری” و … باشه، فهرست مطالب این بخش‌ها رو لیست می‌کنه و با کلیک روی هر بخش، کاربر رو مستقیماً به همون قسمت می‌بره.

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

× ✨ فیلم و سریال های جدید رو از اینجا دانلود کن✨ کلیک کن AD

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

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

مرحله اول: افزودن کد php برای ایجاد فهرست مطالب

خب، حالا که با فهرست مطالب آشنا شدی، وقتشه که کد PHP لازم رو برای ایجاد این فهرست تو سایت وردپرست اضافه کنی. این کد کارش اینه که تمامی عناوین H2 تا H5 رو از محتوای صفحه استخراج می‌کنه و به یه فهرست مرتب تبدیلش می‌کنه. اصلاً نگران نباش، اصلاً نیاز نیست استاد برنامه‌نویسی باشی! فقط کافی هست کد زیر رو تو فایل functions.php قالب سایتت اضافه کنی:

// Table of Contents by RayaWp.ir
function RayaWp_Toc_shortcode() {
    ob_start(); ?>
    <div id="RayaWp-toc-container" class="RayaWp-toc-container">
        <h3 class="RayaWp-toc-title-container">
             آنچه در این مطلب خواهید خواند
        </h3>
        <ul id="RayaWp-toc-list" class="RayaWp-toc-list"></ul>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const tocContainer = document.getElementById("RayaWp-toc-container");
            const tocList = document.getElementById("RayaWp-toc-list");
            const headings = document.querySelectorAll(".contenty h2, .contenty h3, .contenty h4, .contenty h5");

            if (!headings.length) return;

            tocContainer.style.display = 'block';

            headings.forEach(heading => {
                const tocItem = document.createElement("li");
                const anchor = document.createElement("a");

                const id = heading.textContent.trim().replace(/\s+/g, "-").toLowerCase();
                heading.id = id;

                anchor.href = `#${id}`;
                anchor.textContent = heading.textContent;
                tocItem.classList.add(`RayaWp-toc-${heading.tagName.toLowerCase()}`);
                tocItem.appendChild(anchor);
                tocList.appendChild(tocItem);

                anchor.addEventListener("click", function(event) {
                    event.preventDefault();
                    document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
                });
            });

            window.addEventListener('scroll', function() {
                let current = "";
                headings.forEach(heading => {
                    if (heading.getBoundingClientRect().top >= 0 && heading.getBoundingClientRect().top < 150) {
                        current = heading.id;
                    }
                });

                tocList.querySelectorAll("li").forEach(item => {
                    item.classList.toggle('active', item.querySelector("a").hash === `#${current}`);
                });
            });
        });
    </script>
    <?php return ob_get_clean();
}
add_shortcode('RayaWp_Toc', 'RayaWp_Toc_shortcode');

یک نکته مهم! 👀 در کد بالا، عنوان پیش‌فرض فهرست مطالب (که به صورت پیش‌فرض نوشته شده: «آنچه در این مطلب خواهید خواند») قابل تغییره. می‌تونی این عنوان را به هر چیزی که دوست داری تغییر بدی. این فهرست مطالب به طور نرم و روان با کلیک روی هر بخش، به قسمت مربوطه (هدینگ) اسکرول میکنه.

با اضافه کردن کد بالا به فایل فانکشن قالب سایتت، یه شورت‌کد به نام [RayaWp_Toc]ایجاد می‌شه. یعنی از این به بعد می‌تونی این شورت‌کد رو هر جایی از محتوای پست یا صفحه‌ات قرار بدی و فهرست مطالب به صورت خودکار نشون داده می‌شه. خیلی راحت و بدون دردسر!

🚨 توجه! کد PHP بالا به طور خودکار عناوین و هدینگ‌ها رو از محتوای صفحه با کلاس contenty می‌گیره. بنابراین وقتی کد رو تو فایل functions قالبت گذاشتی، باید بری تو المنتور، ویرایش قالب پست‌ها رو بزنی و تو ویجت محتوای صفحه، تو بخش کلاس‌های CSS، کلاس contenty رو بهش اختصاص بدی. 😉

مرحله دوم: افزودن کد CSS برای استایل دهی به فهرست مطالب

حالا که فهرست مطالب رو ساختی، وقتشه که ظاهرش رو به دلخواه خودت تغییر بدی و استایل بدی. این مرحله خیلی مهمه، چون یه استایل خوب می‌تونه تجربه کاربری سایتت رو به شدت بهتر کنه. 👌🏼

اگر از المنتور استفاده می‌کنی، کافیه یه ویجت شورت‌کد به صفحه مقاله‌ات اضافه کنی و داخلش شورت‌کد [RayaWp_Toc] رو قرار بدی. بعدش روی ویرایش ویجت بزن، به تب ‘پیشرفته’ برو و در قسمت ‘CSS سفارشی’ کدهای زیر رو پیست کن تا استایل فهرست مطالب خودت رو تنظیم کنی:

/* Table of Contents style by RayaWp.ir */
.RayaWp-toc-title-container {
    background: #FFF;
    border: 2px solid #1C1D22;
    box-shadow: 2px 2px 0 #1c1d22;
    border-radius: 8px;
    width: 214px;
    margin: -30px 0 20px;
    padding: 5px 10px 0;
    font-family: estedad;
    font-size: 15px;
}

#RayaWp-toc-container {
    background-color: transparent;
    border: 2px solid #1C1D22;
    border-radius: 10px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    padding: 10px 20px;
}

#RayaWp-toc-container h3 {
    font-size: 15px;
    padding: 8px 8px 8px 0;
    font-weight: 600;
}

#RayaWp-toc-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#RayaWp-toc-list li a {
    line-height: 1.8em;
    font-family: 'estedad';
    font-weight: 500;
    color: #675f5f;
    display: inline-flex;
    align-items: stretch;
}

#RayaWp-toc-list li a:hover {
    background-color: #ffebcc;
    color: #444;
    border-radius: 5px;
    text-decoration: none;
}

.RayaWp-toc-btn {
    padding: 6px 12px;
    font-size: 14px;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
}

.RayaWp-toc-btn:hover {
    color: #333;
}

.RayaWp-toc-wrap-center,
.RayaWp-toc-wrap-left,
.RayaWp-toc-wrap-right {
    margin-bottom: 1em !important;
}

.RayaWp-toc-wrap-left {
    margin-right: auto !important;
}

.RayaWp-toc-wrap-right {
    margin-left: auto !important;
}

سخن پایانی

✅ کار تمومه. هورااااااااا، حالا یه فهرست مطالب مشابه سایت لیمو هاست داری! 🎉 مرسی که تا آخر این مطلب منو با نگاه قشنگت دنبال کردی. امیدوارم این آموزش هم مثل آموزش‌های دیگه رایا وردپرس به دردت بخوره. اگر سوالی داشتی، می‌تونی تو قسمت دیدگاه‌ها مطرح کنی تا جواب بدم. 😊