☰

WordPress 后台文章列表美化脚本

美化 WordPress 后台文章列表，取消换行，增加鼠标悬浮显示

  1. // ==UserScript==
  2. // @name         WordPress 后台文章列表美化脚本
  3. // @namespace    http://21zys.com/
  4. // @version      1.0.0
  5. // @description  美化 WordPress 后台文章列表，取消换行，增加鼠标悬浮显示
  6. // @match        *://*/wp-admin/*
  7. // @author       21zys
  8. // @license      MIT
  9. // @grant        GM_addStyle
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // 添加 CSS 样式
  16.     function replace_css_style() {
  17.         GM_addStyle(`th#title{width:20%;}th#author{width:3%;}th#categories{width:12%;}th#tags{width:12%;}th#taxonomy-series{width:5%;}th#date{width:12%;}th#cao_price{width:3%;}th#cao_vip_rate{width:5%;}.widefat *{word-wrap:none !important;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}.el-tooltip{position:absolute;background-color:rgb(255,255,255) !important;border-radius:4px;-webkit-border-radius:5px;border:none;padding:5px 20px;font-size:12px;line-height:1.5;z-index:10000;visibility:hidden;white-space:nowrap;transition:opacity 0.2s ease-in-out;text-decoration:none;opacity:0;}.el-tooltip.show{visibility:visible;opacity:1;}.el-tooltip a{text-decoration:none;}`);
  18.     }
  19.  
  20.     // 创建一个 el-tooltip 元素
  21.     function create_tooltip() {
  22.         const tooltip = document.createElement('div');
  23.         tooltip.classList.add('el-tooltip');
  24.         document.body.appendChild(tooltip);
  25.         return tooltip;
  26.     }
  27.  
  28.     // 获取 <td> 标签中的 <strong> 子标签内容，仅当 class 包含 "title" 时
  29.     function get_strong_text(td) {
  30.         const strong = td.querySelector('strong');
  31.         return strong ? strong.innerHTML.trim() : '';
  32.     }
  33.  
  34.     // 获取 <td> 标签的内部 HTML，支持 <br> 换行
  35.     function get_td_html(td) {
  36.         return td.innerHTML.trim();  // 获取 td 标签的完整 HTML 内容
  37.     }
  38.  
  39.     // 为所有 <td> 标签添加 el-tooltip 悬浮提示功能，支持 "title" class 和 <br> 换行
  40.     function add_hover_show() {
  41.         const tooltip = create_tooltip();
  42.         const tdElements = document.querySelectorAll('td');
  43.  
  44.         tdElements.forEach(td => {
  45.             td.addEventListener('mouseenter', function() {
  46.                 let content;
  47.  
  48.                 // 如果 td 的 class 包含 "title"，则只显示 <strong> 标签内的内容
  49.                 if (td.classList.contains('title')) {
  50.                     content = get_strong_text(td);
  51.                 } else {
  52.                     content = get_td_html(td); // 否则显示整个 td 的 HTML 内容
  53.                 }
  54.  
  55.                 if (content) {
  56.                     tooltip.innerHTML = content;  // 设置 tooltip 的内容为 HTML
  57.                     const rect = td.getBoundingClientRect();
  58.                     const tooltipX = rect.left + window.scrollX + rect.width / 2 - tooltip.offsetWidth / 2;
  59.                     const tooltipY = rect.top + window.scrollY - tooltip.offsetHeight - 10;
  60.                     tooltip.style.left = `${tooltipX}px`;
  61.                     tooltip.style.top = `${tooltipY}px`;
  62.                     tooltip.classList.add('show');  // 显示 tooltip
  63.                 }
  64.             });
  65.  
  66.             td.addEventListener('mouseleave', function() {
  67.                 tooltip.classList.remove('show');  // 隐藏 tooltip
  68.             });
  69.         });
  70.     }
  71.  
  72.     // 执行添加样式和悬浮显示功能
  73.     replace_css_style();
  74.     add_hover_show();
  75.  
  76. })();