Code thêm nút In bài viết trong Elementor

Bài viết này mình sẽ hướng dẫn bạn cách thêm nút In bài viết trong Elementor nhé.

Bài viết hay, dài, nhiều người đọc muốn in ra giấy để đọc dần hoặc lưu hồ sơ, nhưng bấm Ctrl + P thì trình duyệt in cả header, menu, footer, sidebar, bình luận — vừa tốn giấy vừa rối. Một nút “In bài viết” đặt cuối bài, bấm vào chỉ in đúng nội dung bài viết thì gọn hơn hẳn. Elementor không có sẵn widget hay tùy chọn nào để thêm nút in cả, kể cả bản Pro, nên muốn có thì bạn phải code thêm bằng PHP nhé.

Thêm code nút In bài viết

Bạn chỉ cần thêm code dưới vào cuối file functions.php của child theme nhé. Nhớ sao lưu file trước khi sửa, và đừng chèn vào theme cha vì khi theme cập nhật sẽ mất code.

<?php
// Nút In bài viết cho bài viết dựng bằng Elementor
// Cách dùng: dán code này vào cuối file functions.php của child theme,
// rồi chèn shortcode [nut_in_bai_viet] bằng widget Shortcode vào mẫu bài viết
// trong Elementor (Theme Builder -> Mẫu bài viết), đặt ở cuối bài viết.
// Khi in, trình duyệt chỉ in nội dung bài viết, header và footer tự ẩn đi.
add_shortcode( 'nut_in_bai_viet', 'nn_nut_in_bai_viet_shortcode' );
function nn_nut_in_bai_viet_shortcode( $atts ) {
    $atts = shortcode_atts(
        array( 'nhan' => 'In bài viết' ),
        $atts,
        'nut_in_bai_viet'
    );
    return '<button type="button" class="nn-nut-in" onclick="window.print(); return false;">' . esc_html( $atts['nhan'] ) . '</button>';
}

add_action( 'wp_head', 'nn_nut_in_bai_viet_css' );
function nn_nut_in_bai_viet_css() {
    if ( ! is_singular( 'post' ) ) {
        return;
    }
    echo '<style>.nn-nut-in { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; color: #0f172a; font-size: 14px; font-weight: 600; cursor: pointer; } .nn-nut-in:hover { background: #f1f5f9; } .nn-nut-in::before { content: "\\2399  "; } @media print { .nn-nut-in, .site-header, .site-footer, #comments, .elementor-location-header, .elementor-location-footer { display: none !important; } }</style>';
}

Code trên đăng ký shortcode [nut_in_bai_viet]. Shortcode in ra một nút bấm với class nn-nut-in, thuộc tính onclick gọi window.print() để mở hộp thoại in của trình duyệt. Muốn đổi chữ trên nút thì thêm thuộc tính vào shortcode, ví dụ [nut_in_bai_viet nhan=”In công thức này”]. Phần CSS đi kèm chỉ nạp ở trang bài viết đơn nhờ móc wp_head kiểm tra is_singular(‘post’): nút hiện dạng viên thuốc viền xám nhạt, còn khối @media print ẩn nút, header, footer và bình luận khi in để bản in chỉ còn nội dung bài viết.

Chèn shortcode vào mẫu bài viết

Code chỉ tạo ra shortcode, bạn cần đặt nó vào chỗ muốn hiện nút in. Cách gọn nhất là mở mẫu bài viết trong Elementor → Theme Builder → Mẫu bài viết, kéo một widget Shortcode vào cuối mẫu, ngay sau widget Post Content, rồi nhập [nut_in_bai_viet]. Nếu bạn viết bài bằng trình soạn thảo thường thì chỉ cần chèn shortcode vào cuối nội dung bài viết là được.

Lưu ý khi dùng

CSS ẩn header và footer trong code dùng class chung .site-header và .site-footer cùng class của Elementor .elementor-location-header và .elementor-location-footer; theme của bạn dùng class khác thì thêm class đó vào danh sách trong @media print. Nút in không hoạt động trong bản xem trước của Elementor vì đó là khung nhúng, bạn mở bài viết ở ngoài trang thật rồi bấm thử. Tính năng này đi chung với bài code thêm nút sao chép link bài viết trong Elementor là thành bộ nút tiện ích cuối bài viết.

Kết luận

Vậy là chỉ với 1 đoạn code ngắn bạn đã thêm nút In bài viết trong Elementor mà không cần cài thêm plugin rồi nhé. Tính năng này đi chung với bài code thêm nút sao chép link bài viết trong Elementor và bài code hiển thị ngày cập nhật lần cuối cho bài viết trong Elementor là thành bộ tiện ích gọn gàng cho bài viết dựng bằng Elementor.

Nếu cần mình kèm 1-1 về Elementor thì cứ liên hệ mình nhé.