Hướng Dẫn Tạo Plugin trong WordPress

function highlight_h2_custom_css() {
    echo '<style>
        h2.highlight-h2 {
            background-color: #05C066; /* Màu nền */
            padding: 5px;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
            box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
            font-size: 1.2em; /* Kích thước chữ */
            font-weight: bold;
            color: #ffffff; /* Màu chữ trắng */
            transition: all 0.3s ease;
            border-radius: 5px; /* Bo góc */
            position: relative; /* Để sử dụng cho hiệu ứng ánh sáng */
            overflow: hidden; /* Đảm bảo ánh sáng không vượt ra ngoài box */
            display: inline-block; /* Thay đổi kiểu hiển thị */
        }
        h2.highlight-h2::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 10%;
            height: 100%;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3));
            animation: light-sweep 3s linear infinite; /* Hiệu ứng ánh sáng quét liên tục */
            z-index: 1;
            transition: background 0.3s ease; /* Chuyển đổi nền ánh sáng khi hover */
        }
        h2.highlight-h2:hover::before {
            background: linear-gradient(90deg, rgba(255, 0, 0, 0.5), rgba(255, 127, 0, 0.5), rgba(255, 255, 0, 0.5), rgba(0, 255, 0, 0.5), rgba(0, 0, 255, 0.5), rgba(75, 0, 130, 0.5), rgba(143, 0, 255, 0.5));
            animation: rainbow-sweep 3s linear infinite; /* Hiệu ứng cầu vồng khi hover */
        }
        h2.highlight-h2:hover {
            background-color: #04a55e; /* Nền tối hơn khi hover */
            font-size: 1.3em; /* Tăng kích thước chữ khi hover */
        }
        @keyframes light-sweep {
            0% {
                left: -100%;
            }
            100% {
                left: 100%;
            }
        }
        @keyframes rainbow-sweep {
            0% {
                left: -100%;
            }
            100% {
                left: 100%;
            }
        }
    </style>';
}
add_action('wp_head', 'highlight_h2_custom_css');

function highlight_h2_in_content($content) {
    libxml_use_internal_errors(true);
    $dom = new DOMDocument();
    $dom->loadHTML('<?xml encoding="utf-8" ?>' . $content, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
    $xpath = new DOMXPath($dom);

    foreach ($xpath->query('//h2') as $h2) {
        $h2->setAttribute('class', 'highlight-h2');
    }

    $content = $dom->saveHTML();
    libxml_clear_errors();

    return $content;
}
add_filter('the_content', 'highlight_h2_in_content');