Chia Sẻ Code Tạo Nút Download Trong Bài Viết Đẹp, Chuẩn SEO Cho WordPress

Khi viết bài chia sẻ tài nguyên, phần mềm, hay tài liệu trên website, một nút bấm tải về (Download Button) bắt mắt chính là yếu tố quyết định kích thích người dùng hành động. Thay vì sử dụng những dòng text link đơn điệu dễ bị bỏ qua, một nút bấm có thiết kế hiện đại, màu sắc nịnh mắt sẽ giúp nâng tầm chuyên nghiệp cho trang blog của bạn.

Hôm nay, Kho theme WP của Theme Mới (thememoi.vn) sẽ chia sẻ cho bạn đoạn code  tạo nút Download đổ bóng, bo góc cực đẹp mà không cần dùng đến plugin nặng máy.

Tại sao bạn nên dùng Code Nút Download tự chế thay vì Plugin?

Nhiều anh em khi muốn tạo nút tải đẹp thường tìm đến các plugin tạo shortcode. Tuy nhiên, việc lạm dụng quá nhiều plugin sẽ khiến website của bạn bị phình to dữ liệu và làm chậm tốc độ load trang.

• Tối ưu tốc độ tải trang: Đoạn code siêu nhẹ, giúp website của bạn mượt mà hơn, đạt điểm số cao trên Google PageSpeed Insights.

• Chuẩn SEO và an toàn: Code thuần túy sạch 100%, không chứa mã độc, cấu trúc chuẩn giúp Google dễ dàng cào dữ liệu bài viết trên theme wordpress của bạn.

• Giao diện responsive hiện đại: Tự động co giãn vừa vặn trên giao diện máy tính lẫn màn hình điện thoại di động (Mobile).

• Hiệu ứng Gradient đổ bóng thời thượng: Tông màu xanh dương thời thượng kết hợp hiệu ứng di chuột (Hover) nhấc nhẹ nút lên cực kỳ kích thích trải nghiệm người dùng.

Cách làm như sau :

Bước 1 :Tạo file : phongvt-download.js vào chid theme

(function() {

    tinymce.PluginManager.add('phongvt_download_btn', function(editor) {

        editor.addButton('phongvt_download_btn', {

            text: 'Download',

            icon: false,

            onclick: function() {

                var frame = wp.media({

                    title: 'Chọn file download',

                    button: {
                        text: 'Chèn nút download'
                    },

                    multiple: false

                });

                frame.on('select', function() {

                    var attachment = frame.state().get('selection').first().toJSON();

                    editor.insertContent(
`<p>
<a class="phongvt-download-btn" href="${attachment.url}" target="_blank">
⬇ Download Plugin
</a>
</p>`
                    );

                });

                frame.open();

            }

        });

    });

})();

Bước 2 chèn vào function của chid theme

add_filter('mce_buttons', 'phongvt_add_download_button');

function phongvt_add_download_button($buttons){

    array_push($buttons, 'phongvt_download_btn');

    return $buttons;
}

add_filter('mce_external_plugins', 'phongvt_download_plugin');

function phongvt_download_plugin($plugin_array){

    $plugin_array['phongvt_download_btn'] =
    'https://thememoi.vn/wp-content/themes/phongvt-download.js';

    return $plugin_array;
}

nhớ thay cho đúng đường dẩn file js lúc nãy

Bước 3 : thêm vào css bổ sung

.phongvt-download-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:15px 34px;

    background:linear-gradient(135deg,#2563eb,#0ea5e9);
    color:#fff !important;

    border-radius:16px;

    font-size:18px;
    font-weight:700;
    text-decoration:none;

    box-shadow:
    0 12px 30px rgba(37,99,235,.28);

    transition:.3s;
    position:relative;
    overflow:hidden;
}

/* shine effect */
.phongvt-download-btn:before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;

    width:80%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transition:.6s;
}

.phongvt-download-btn:hover:before{
    left:130%;
}

.phongvt-download-btn:hover{
    transform:translateY(-4px);
    box-shadow:
    0 18px 40px rgba(37,99,235,.35);
}

.phongvt-download-btn:active{
    transform:scale(.97);
}

Một bài viết chia sẻ link tải đẹp chỉ phát huy hết tác dụng khi được đặt trong một cấu trúc theme wp chuẩn SEO, giao diện mượt mà và load nhanh.

Nếu bạn đang sở hữu một website cũ kỹ, tỷ lệ chuyển đổi kém, hoặc đang muốn xây dựng một trang blog chia sẻ tài nguyên chuyên nghiệp, hãy tham khảo ngay kho theme wp tại thememoi.vn. Chúng tôi chuyên cung cấp các mẫu theme mới, giao diện hiện đại độc quyền được tối ưu sẵn code nút bấm, form đăng ký và tốc độ tối đa.

Đặc biệt, Theme Mới luôn hỗ trợ anh em cài đặt các mẫu theme wp giá rẻ với chi phí tối ưu nhất, cam kết bảo hành kỹ thuật trọn đời để bạn yên tâm làm nội dung kéo traffic!

Hy vọng đoạn code tạo nút download này sẽ giúp các bài viết của bạn trông chuyên nghiệp và thu hút lượt click hơn. Chúc website của bạn sớm bùng nổ traffic!

Hãy theo dõi danh mục thủ thuật tại thememoi.vn để không bỏ lỡ những đoạn code tiện ích và các chương trình ưu đãi khi mua theme wp độc quyền nhé!

(Lưu ý: Nếu gặp bất kỳ khó khăn nào trong quá trình cài đặt lên theme wp của bạn, đừng ngần ngại chat với bộ phận hỗ trợ của thememoi.vn để được hỗ trợ cấu hình hoàn toàn miễn phí nhé!)