1. öncelikle temanızı ve içeriğinizi yedekleyin.
2. temanızdaki </head> kodundan önce aşağdaki kodları yapıştırın. koddaki <style> kısmı biçimlendirme öğelerini içerir, şeklini şemalini beğenmezseniz burayı kurcalayın. Tablo hide all ve show all butonu içeriyor. İçerik dilinize göre kodda bu yazıları güncelleyin.

<style>
/* TOC genel stili */
#custom-table-of-contents {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* TOC başlık stili */
#custom-table-of-contents h2 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
    border-bottom: 2px solid #007BFF;
    padding-bottom: 5px;
}

/* TOC liste stili */
#custom-table-of-contents ol {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

/* TOC liste öğesi stili */
#custom-table-of-contents li {
    margin: 8px 0;
}

/* TOC bağlantı stili */
#custom-table-of-contents a {
    text-decoration: none;
    color: #007BFF;
    font-size: 16px;
}

/* Bağlantı üzerine gelince */
#custom-table-of-contents a:hover {
    text-decoration: underline;
    color: #0056b3;
}

/* İç içe listeler için stili */
#custom-table-of-contents ol ol {
    margin-left: 20px;
    border-left: 2px solid #ddd;
    padding-left: 10px;
}

/* Responsive tasarım için TOC uyumu */
@media (max-width: 768px) {
    #custom-table-of-contents {
        padding: 10px;
        font-size: 14px;
    }

    #custom-table-of-contents h2 {
        font-size: 16px;
    }

    #custom-table-of-contents a {
        font-size: 14px;
    }
}
</style>
  
<script>
document.addEventListener(&quot;DOMContentLoaded&quot;, function () {
    var toc = document.getElementById(&quot;custom-table-of-contents&quot;);
    if (toc) {
        var contentArea = document.querySelector(&quot;.post-body&quot;);
        if (contentArea) {
            var headers = contentArea.querySelectorAll(&quot;h2, h3, h4, h5, h6&quot;);

            if (headers.length &gt; 0) {
                var tocList = document.createElement(&quot;ul&quot;);

                headers.forEach(function (header, index) {
                    if (!toc.contains(header)) {
                        var listItem = document.createElement(&quot;li&quot;);
                        var id = &quot;toc-header-&quot; + index;
                        header.id = id;

                        var link = document.createElement(&quot;a&quot;);
                        link.href = &quot;#&quot; + id;
                        link.textContent = header.textContent;

                        listItem.appendChild(link);
                        tocList.appendChild(listItem);
                    }
                });

                toc.appendChild(tocList);

                // &quot;Show all&quot; ve &quot;Hide all&quot; düğmelerini oluştur
                var toggleButtons = document.createElement(&quot;div&quot;);
                toggleButtons.style.textAlign = &quot;right&quot;;
                toggleButtons.style.marginBottom = &quot;10px&quot;;

                var showAllButton = document.createElement(&quot;button&quot;);
                showAllButton.textContent = &quot;Show all&quot;;
                showAllButton.style.marginRight = &quot;5px&quot;;
                showAllButton.onclick = function() {
                    tocList.style.display = &quot;block&quot;;
                };

                var hideAllButton = document.createElement(&quot;button&quot;);
                hideAllButton.textContent = &quot;Hide all&quot;;
                hideAllButton.onclick = function() {
                    tocList.style.display = &quot;none&quot;;
                };

                toggleButtons.appendChild(showAllButton);
                toggleButtons.appendChild(hideAllButton);

                toc.insertBefore(toggleButtons, tocList);
            }
        }
    }
});
</script>

3. Aşağıdaki kodu da içerikte tablo eklemek istediğiniz yere yerleştirin. içerik diline göre ya da tablo başlığında ne yazmasını istiyorsanız "Table of Content" yazısını buna göre güncelleyin.

<div id="custom-table-of-contents"><h2>Table of Content</h2> </div>

4. kodu ihtiyacım olduğu için gpt'ye yazdırdım, burada da paylaşmak istedim. Mobil uyumludur. Makaledeki altbaşlıkları çeker. Yalnızca tablo eklenen sayfada çalışır site hızına genel etki etmez. Uygulamada gördüğüm anlık bir sıkıntı yok. Herkese işlerinde kolaylıklar dilerim.