Chia sẻ code hiển thị menu khi click chuột phải vào trang web

Nếu bạn thử click chuột phải vào trang chủ Tss247 sẽ có một menu hiển thị với nội dung cùng với liên hệ đã được thiếp lập sẵn, điều này giúp cho người dùng tương tác với trang web của bạn, cũng như dễ dàng đưa ra liên hệ của bạn cho người dùng dễ dàng liên lạc

Cách đưa chức năng vào WordPress

Sao chép toàn bộ code bên dưới dán vào file functions.php trong thưc mục theme đang sử dụng là xong

function tss_right_click_menu() {
ob_start(); ?>
<div id="contextMenu" class="context-menu">
    <ul>
        <li><a title="Dịch vụ" href="/dich-vu/thiet-ke-website-chuyen-nghiep">Dịch vụ</a></li>
        <li><a title="Tài liệu" href="/blogs">Tài liệu</a></li>
        <li><a title="Tài nguyên" href="/tai-nguyen">Tài nguyên</a></li>
    </ul>

    <!-- đoạn này là tạo chức năng copy text và new tab + copy link -->
    <ul>
        <li id="copycontent">
            <button title="Sao chép" onclick="copySelectedText()"><i class="fa-sharp fa-regular fa-copy"></i> Sao
                chép</button>
        </li>
        <li id="opencopyItem" style="display: none;">
            <button onclick="copyLink()"><i class="fa-regular fa-copy"></i> Sao chép link</button>
        </li>
        <li id="openNewTabItem" style="display: none;">
            <button onclick="openNewTab()"><i class="fa-regular fa-plus"></i> Mở tab mới</button>
        </li>
    </ul>

    <!-- ket thuc chức năng copy text và new tab + copy link -->

    <ul class="menu-lh">
        <li><a title="Messenger" href="https://m.me/tss247.vn " target="_blank">Messenger</a></li>
        <li><a title="Telegram" href="https://telegram.me/0902132536" target="_blank">Telegram</a></li>
        <li><a title="Zalo" href="https://zalo.me/0899.303.247" target="_blank">Zalo</a></li>
    </ul>
</div>
<style>
    .context-menu {
        display: none;
        position: absolute;
        background-color: #fff;
        padding: 15px;
        z-index: 999;
        border-radius: 10px;
        width: 170px;
        box-shadow: 0px 0px 7px #00000038;
        animation: popup 0.5s;
    }

    .context-menu ul {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
    }

    .context-menu button {
        border: none;
        width: 100%;
        background: none;
        text-align: left;
        padding: 0px;
        display: grid;
    }

    .context-menu a {
        text-decoration: none;
    }

    #contextMenu ul li {
        padding: 5px 10px;
    }

    #contextMenu ul li:hover {
        background: #ccc;
        padding: 5px 10px;
        border-radius: 7px;
    }

    #contextMenu ul li i {
        margin-right: 7px;
        color: #0c0;
    }

    ul.menu-lh {
        border-top: 2px solid #ccc;
        padding-top: 10px;
        margin-top: 10px;
    }
</style>
<script>
    // chuc nang chinh
    document.addEventListener('contextmenu', (event) => {
        event.preventDefault();
        const contextMenu = document.getElementById('contextMenu');
        const mouseX = event.clientX + window.pageXOffset;
        const mouseY = event.clientY + window.pageYOffset;
        const pageWidth = document.body.scrollWidth;
        const pageHeight = document.body.scrollHeight;
        const menuWidth = contextMenu.offsetWidth;
        const menuHeight = contextMenu.offsetHeight;
        let adjustedX = mouseX;
        let adjustedY = mouseY;
        if (mouseX + menuWidth > pageWidth) {
            adjustedX = pageWidth - menuWidth;
        }
        if (mouseY + menuHeight > pageHeight) {
            adjustedY = pageHeight - menuHeight;
        }
        contextMenu.style.display = 'block';
        contextMenu.style.top = `${adjustedY}px`;
        contextMenu.style.left = `${adjustedX}px`;
    });
    document.addEventListener('click', () => {
        const contextMenu = document.getElementById('contextMenu');
        contextMenu.style.display = 'none';
    });


    // open new tab va copy link
    let selectedLink = null;
    function showOpenNewTabButton(x, y) {
        const openNewTabItem = document.getElementById('openNewTabItem');
        const opencopyItem = document.getElementById('opencopyItem');
        if (selectedLink) {
            openNewTabItem.style.display = 'block';
            opencopyItem.style.display = 'block';
            openNewTabItem.innerHTML = `<button onclick="openNewTab()"><i class="fa-regular fa-plus"></i> Mở tab mới</button>`;
            opencopyItem.innerHTML = `<button onclick="copyLink()"><i class="fa-regular fa-copy"></i> Sao chép link</button>`;
            openNewTabItem.style.top = `${y}px`;
            openNewTabItem.style.left = `${x}px`;
        } else {
            openNewTabItem.style.display = 'none';
            opencopyItem.style.display = 'none';
        }
    }
    function openNewTab() {
        window.open(selectedLink, '_blank');
    }
    function copyLink() {
        const linkTextArea = document.createElement('textarea');
        linkTextArea.value = selectedLink;
        document.body.appendChild(linkTextArea);
        linkTextArea.select();
        document.execCommand('copy');
        document.body.removeChild(linkTextArea);
        console.log('Đã sao chép:', selectedLink);
    }
    document.addEventListener('contextmenu', (event) => {
        const target = event.target;
        if (target.tagName === 'A' || target.closest('a')) {
            selectedLink = target.tagName === 'A' ? target.href : target.closest('a').href;
        } else if (target.tagName === 'BUTTON' || target.closest('button')) {
            const buttonElement = target.tagName === 'BUTTON' ? target : target.closest('button');
            const onclickAttribute = buttonElement.getAttribute('onclick');
            if (onclickAttribute) {
                const urlMatch = onclickAttribute.match(/location.href=['"](.*?)['"]/);
                if (urlMatch && urlMatch[1]) {
                    selectedLink = urlMatch[1];
                }
            }
        } else {
            selectedLink = null;
        }
        showOpenNewTabButton(event.clientX, event.clientY);
    });
    document.addEventListener('click', () => {
        selectedLink = null;
        showOpenNewTabButton(0, 0);
    });

    // sao chep text
    function copySelectedText() {
        const content = document.getElementById('content');
        const selectedText = window.getSelection().toString();
        if (selectedText) {
            const dummyTextArea = document.createElement('textarea');
            dummyTextArea.value = selectedText;
            document.body.appendChild(dummyTextArea);
            dummyTextArea.select();
            document.execCommand('copy');
            document.body.removeChild(dummyTextArea);
            console.log('Đã sao chép:', selectedText);
        }
    }
    const copycontent = document.getElementById('copycontent');
    document.addEventListener('selectionchange', () => {
        const selectedText = window.getSelection().toString();
        if (selectedText) {
            copycontent.style.display = 'block';
        } else {
            copycontent.style.display = 'none';
        }
    });
</script>
<?php
    echo ob_get_clean();
    }
    add_action( 'wp_footer', 'tss_right_click_menu' );

Sửa lại html theo ý bạn rồi lưu lại để thưởng thức thành quả nhé