Hướng dẫn thêm biểu tượng liên kết ngoài trong WordPress

Thủ thuật WordPress
1

Trong bài viết này, chúng ta sẽ học cách thêm biểu tượng liên kết ngoài (external-link icon) vào các liên kết ngoài trên trang WordPress. Đây là một tính năng hữu ích, giúp người dùng nhận biết liên kết nào sẽ dẫn ra khỏi website của bạn. Hướng dẫn này sẽ sử dụng mã PHP và JavaScript tích hợp trực tiếp vào WordPress.

Bước 1: Thêm đoạn mã PHP

Dưới đây là mã hoàn chỉnh cho chức năng này:

/**
 * Add link icons.
 *
 * Adds a external-link icon to external links only.
 */
function add_external_link_icon() {
    wp_register_script( 'external-link-icon', false );
    wp_enqueue_script( 'external-link-icon' );
    
    wp_add_inline_script( 'external-link-icon', "
        function externalLinkIcon() {
            var icon = '<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 20 20\">' +
                '<path d=\"M9 3h8v8l-2-1V6.92l-5.6 5.59l-1.41-1.41L14.08 5H10zm3 12v-3l2-2v7H3V6h8L9 8H5v7h7z\" fill=\"currentColor\"/>' +
                '</svg>';
            if (!document.querySelector('.entry-content')) return;
            var links = document.querySelector('#ftwp-postcontent').querySelectorAll('a');
            [...links].forEach(function (link) {
                if (link.host == window.location.host) {
                    link.innerHTML += ' ' + icon;
                }
            });
        }
        window.addEventListener('load', externalLinkIcon, false);
    " );
}
add_action( 'wp_enqueue_scripts', 'add_external_link_icon' );

Bước 2: Cách hoạt động của mã

  1. Đăng ký và xếp hàng script:
    Hàm wp_register_script() và wp_enqueue_script() được sử dụng để thêm mã JavaScript vào trang mà không cần file riêng. Script này chỉ đơn giản là một inline script, nên chúng ta sử dụng hàm wp_add_inline_script().

  2. Chức năng JavaScript externalLinkIcon:

    • Tạo biểu tượng SVG cho liên kết ngoài.
    • Dò tìm các liên kết trong phần nội dung bài viết (#ftwp-postcontent).
    • Kiểm tra nếu liên kết là liên kết ngoài (khác với domain của trang).
    • Thêm biểu tượng vào sau mỗi liên kết ngoài.

  3. Tự động kích hoạt khi tải trang:
    Sự kiện window.addEventListener('load', externalLinkIcon, false); đảm bảo rằng mã chỉ chạy sau khi trang đã tải hoàn toàn.

Bước 3: Thêm mã vào WordPress

  • Bạn có thể thêm đoạn mã trên vào file functions.php của theme hoặc child theme của bạn.
  • Sau khi lưu, biểu tượng liên kết ngoài sẽ tự động được thêm vào các liên kết ngoài trong nội dung bài viết.

Lời kết

Chức năng này là một cách đơn giản và hiệu quả để nâng cao trải nghiệm người dùng trên trang WordPress của bạn. Bạn có thể tùy chỉnh biểu tượng SVG theo ý muốn hoặc mở rộng mã để áp dụng với các khu vực khác trên trang.