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

function rayawp_tablex_shortcode() {
    $nonce = wp_create_nonce('rayawp_tablex_nonce');
    ob_start(); ?>
    <div class="rayawp-tablex" data-rayawp-tablex-nonce="<?php echo esc_attr($nonce); ?>">
        <div class="rayawp-tablex-header">
            <div class="rayawp-tablex-title">
                <div class="title-glow"></div>
                <h2>فهرست<span> مطالب</span></h2>
            </div>
            <div class="rayawp-tablex-controls">
                <button class="tablex-btn" id="tablex-expand">
                    <span>بستن فهرست</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="7 11 12 6 17 11"></polyline>
                        <polyline points="7 18 12 13 17 18"></polyline>
                    </svg>
                </button>
            </div>
        </div>

        <div class="rayawp-tablex-container">
            <div class="rayawp-tablex-items" id="rayawp-tablex-list"></div>
        </div>
    </div>

    <script>
    document.addEventListener("DOMContentLoaded", function() {
        const tablexContainer = document.querySelector(".rayawp-tablex");
        const tablexList = document.getElementById("rayawp-tablex-list");
        const headings = document.querySelectorAll(".contenty h2, .contenty h3, .contenty h4, .contenty h5");
        const tablexExpand = document.getElementById('tablex-expand');
        const tablexContainerEl = document.querySelector('.rayawp-tablex-container');
        
        if (!headings.length) {
            tablexContainer.style.display = 'none';
            return;
        }
        
        let isExpanded = true;
        
        headings.forEach((heading, index) => {
            if (heading.textContent.trim() === "فهرست مطالب") {
                return; 
            }
            
            const id = heading.textContent.trim().replace(/\s+/g, "-").toLowerCase();
            heading.id = id;
            
            const itemNumber = (index + 1).toString().padStart(2, '0');
            
            const tablexItem = document.createElement("a");
            tablexItem.href = `#${id}`;
            tablexItem.className = `tablex-item rayawp-tablex-${heading.tagName.toLowerCase()}`;
            
            tablexItem.innerHTML = `
                <div class="tablex-item-bg"></div>
                <div class="tablex-item-number">${itemNumber}</div>
                <div class="tablex-item-content">
                    <div class="tablex-item-title">${heading.textContent}</div>
                </div>
                <div class="tablex-item-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M5 12h14"></path>
                        <path d="M12 5l7 7-7 7"></path>
                    </svg>
                </div>
            `;
            
            tablexList.appendChild(tablexItem);
            
            tablexItem.addEventListener("click", function(event) {
                event.preventDefault();
                document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
            });
        });
        
        tablexExpand.addEventListener('click', function() {
            isExpanded = !isExpanded;
            
            if (isExpanded) {
                tablexContainerEl.classList.remove('collapsed');
                tablexExpand.querySelector('span').textContent = 'بستن فهرست';
                tablexExpand.querySelector('svg').innerHTML = `
                    <polyline points="7 11 12 6 17 11"></polyline>
                    <polyline points="7 18 12 13 17 18"></polyline>
                `;
            } else {
                tablexContainerEl.classList.add('collapsed');
                tablexExpand.querySelector('span').textContent = 'مشاهده تمام مطالب';
                tablexExpand.querySelector('svg').innerHTML = `
                    <polyline points="7 13 12 18 17 13"></polyline>
                    <polyline points="7 6 12 11 17 6"></polyline>
                `;
            }
        });
        
        const tablexItems = document.querySelectorAll('.tablex-item');
        tablexItems.forEach((item, index) => {
            item.style.opacity = '0';
            item.style.transform = 'translateY(20px)';
            item.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
            
            setTimeout(() => {
                item.style.opacity = '1';
                item.style.transform = 'translateY(0)';
            }, 100 * index);
        });
        
        window.addEventListener('scroll', function() {
            let current = "";
            headings.forEach(heading => {
                if (heading.textContent.trim() === "فهرست مطالب") {
                    return;
                }
                
                const sectionTop = heading.getBoundingClientRect().top;
                if (sectionTop >= 0 && sectionTop < 150) {
                    current = heading.id;
                }
            });
            
            tablexItems.forEach(item => {
                const href = item.getAttribute('href').substring(1);
                item.classList.toggle('active', href === current);
            });
        });
    });
    </script>
    <?php return ob_get_clean();
}
add_shortcode('RayaWp-TableX', 'rayawp_tablex_shortcode');

.rayawp-tablex {
    background: linear-gradient(135deg, #1a103e 0%, #160c33 100%);
    border-radius: 16px;
    overflow: hidden;
    justify-content: center; 
    margin: 2rem ;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 
                0 0 20px rgba(139, 92, 246, 0.3),
                inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.rayawp-tablex-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(90deg, #1a103e, rgba(26, 16, 62, 0.7));
}

.rayawp-tablex-title {
    position: relative;
}

.title-glow {
    position: absolute;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.5) 0%, rgba(139, 92, 246, 0) 70%);
    border-radius: 50%;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    filter: blur(10px);
    z-index: 0;
}

.rayawp-tablex-title h2 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 800;
    color: #ffffff !important;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
}

.rayawp-tablex-title h2 span {
    color: #8b5cf6;
    background: linear-gradient(90deg, #8b5cf6, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.rayawp-tablex-controls {
    display: flex;
    align-items: center;
}

.tablex-btn {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    justify-content: center;
    color: #c7b8ff;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tablex-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #8b5cf6;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
}

.tablex-btn svg {
    margin-right: 8px;
}

.rayawp-tablex-container {
    padding: 1.5rem;
    max-height: 420px;
    overflow-y: auto;
    transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), padding 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.rayawp-tablex-container.collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

.rayawp-tablex-container::-webkit-scrollbar {
    width: 8px;
}

.rayawp-tablex-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.rayawp-tablex-container::-webkit-scrollbar-thumb {
    background: #5b21b6;
    border-radius: 4px;
}

.rayawp-tablex-container::-webkit-scrollbar-thumb:hover {
    background: #6d28d9;
}

.rayawp-tablex-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tablex-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.5rem 1.2rem;
    background: #20134d;
    border-radius: 12px;
    color: #ffffff;
    text-decoration: none;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tablex-item-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, #271654, #20134d);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.tablex-item:hover .tablex-item-bg {
    opacity: 1;
}

.tablex-item:hover {
    transform: none;
}

.tablex-item:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(90deg, #6d28d9, transparent);
    width: 3px;
    transition: all 0.3s ease;
}

.tablex-item:hover:after {
    width: 6px;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}

.tablex-item-number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(109, 40, 217, 0.15);
    color: #8b5cf6;
    font-weight: 700;
    font-size: 1.2rem;
    margin-left: 1rem;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.tablex-item:hover .tablex-item-number {
    background: rgba(109, 40, 217, 0.25);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
    border-color: rgba(139, 92, 246, 0.4);
    color: white;
}

.tablex-item-content {
    flex-grow: 1;
    position: relative;
    z-index: 1;
}

.tablex-item-title {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
    color: #ffffff;
    transition: all 0.3s ease;
}

.tablex-item:hover .tablex-item-title {
    transform: translateX(-5px);
    color: white;
}

.tablex-item-icon {
    margin-right: 1rem;
    opacity: 0.5;
    transform: translateX(5px);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.tablex-item:hover .tablex-item-icon {
    opacity: 1;
    transform: translateX(0);
}

.rayawp-tablex {
    margin-right: 1.5rem;
}

@media (max-width: 768px) {
    .rayawp-tablex-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.25rem;
    }
    
    .rayawp-tablex-controls {
        width: 100%;
    }
    
    .tablex-btn {
        width: 100%;
        justify-content: center;
    }
    .tablex-item {
        padding: 1rem;
        flex-wrap: wrap;
    }
    
    .tablex-item-number {
        margin-left: 0.75rem;
        min-width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .tablex-item-content {
        width: calc(100% - 120px);
    }
    
    .tablex-item-title {
        font-size: 1rem;
    }
}

.tablex-item.active {
    background: #271654;
    border-right: 4px solid #6d28d9;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
}

.tablex-item.active .tablex-item-number {
    background: rgba(109, 40, 217, 0.3);
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
}