前言

本站目前使用的是 puock 主题，主题设置可以在文章中显示目录，如图：

‍

但是每次点击文章，无法自动打开目录，需要手动点击，对于用户来说不友好。

并且主题中也没有配置项可以配置自动打开。

‍

​​

‍

配置

1. 记录文件权限

   # ll /usr/local/wordpress/volumes/html/wp-content/themes/wordpress-theme-puock-2.7.10/functions.php
   -rwxrwxr-x 1 www-data www-data 27789 Aug 28 15:39 /usr/local/wordpress/volumes/html/wp-content/themes/wordpress-theme-puock-2.7.10/functions.php*
   

   ‍

2. 修改配置，添加以下代码到 functions.php​，放在文件内容末尾即可

   # vim /usr/local/wordpress/volumes/html/wp-content/themes/wordpress-theme-puock-2.7.10/functions.php
   // 配置进入文章后自动打开目录
   function auto_open_post_menu() {
       if (is_single()) {
           echo '<script>
               function openPostMenu() {
                   var postMenuState = document.getElementById("post-menu-state");
                   var postMenuContent = document.getElementById("post-menu-content");
                   if (postMenuState && postMenuContent) {
                       postMenuState.classList.add("active");
                       postMenuContent.style.display = "block";
                   }
               }
   
               openPostMenu(); // 在这里调用一次
   
               window.addEventListener("load", function() {
                   openPostMenu();
               });
   
               var currentURL = window.location.href;
               var observer = new MutationObserver(function(mutations) {
                   if (window.location.href !== currentURL) {
                       currentURL = window.location.href;
                       openPostMenu();
                   }
               });
               observer.observe(document.documentElement, { childList: true, subtree: true });
           </script>';
       }
   }
   add_action('wp_footer', 'auto_open_post_menu');
   

   ‍

3. 还原文件权限（属组和属主在上述编辑操作后会变为 执行vim 时的用户权限，需要回滚）

   # 还原文件权限(属组和属主在上述编辑操作后会变为 执行vim 时的用户权限，需要回滚)
   chown www-data:www-data /usr/local/wordpress/volumes/html/wp-content/themes/wordpress-theme-puock-2.7.10/functions.php
   

‍

效果如下，当进入文章后会自动打开目录：

​​

‍