Tạo Shortcode Button Nhập Tên Nút Và Link

Để tạo một shortcode cho button có text và link trong WordPress, bạn có thể thêm mã vào file ‘functions.php’ của theme đang sử dụng hoặc tạo một plugin riêng. Dưới đây là hướng dẫn từng bước để thực hiện điều này.

Để tạo shortcode button có text và link

Bước 1: Mở file functions.php

Truy cập vào bảng điều khiển WordPress, sau đó đi đến Giao diện > Chỉnh sửa (hoặc Theme Editor) và mở file ‘functions.php’ của theme hiện tại.

Bước 2: Thêm mã shortcode

Thêm đoạn mã bên dưới vào cuối file ‘functions.php’:

function custom_button_shortcode($atts) {

// Định nghĩa các thuộc tính mặc định

$atts = shortcode_atts(

array(

'text' => 'Click Here', // Text mặc định

'link' => '#', // Link mặc định

$atts,

'button'

);

// Tạo code HTML cho button

return '<div class="sc-button-center">

</div>';

}

add_shortcode('sc_button', 'custom_button_shortcode');

Bước 3: Thêm CSS (Tùy chọn)

Nếu bạn muốn style cho button, bạn có thể thêm CSS vào file style.css của theme hoặc tùy chỉnh trong phần tùy chỉnh giao diện:

.sc-button-center {
    text-align: center;
    margin-bottom: 30px;
    margin-top: 30px;
}
.sc-button {
    padding: 0.8em 2em;
    border: none;
    outline: none;
    color: rgb(255, 255, 255) !important;
    background: #111;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
    transition: all 0.5s;
}
.sc-button:before {
    content: "";
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    -webkit-filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing-sc-button 20s linear infinite;
    transition: opacity 0.3s ease-in-out;
    border-radius: 10px;
}
.sc-button:after {
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #222;
    left: 0;
    top: 0;
    border-radius: 10px;
}
@keyframes glowing-sc-button {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 400% 0;
    }
    100% {
        background-position: 0 0;
    }
}

.sc-button-center {

text-align: center;

margin-bottom: 30px;

margin-top: 30px;

}

.sc-button {

padding: 0.8em 2em;

border: none;

outline: none;

color: rgb(255, 255, 255) !important;

background: #111;

font-weight: 600;

cursor: pointer;

position: relative;

z-index: 0;

border-radius: 10px;

transition: all 0.5s;

}

.sc-button:before {

content: "";

background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);

position: absolute;

top: -2px;

left: -2px;

background-size: 400%;

z-index: -1;

filter: blur(5px);

-webkit-filter: blur(5px);

width: calc(100% + 4px);

height: calc(100% + 4px);

animation: glowing-sc-button 20s linear infinite;

transition: opacity 0.3s ease-in-out;

border-radius: 10px;

}

.sc-button:after {

z-index: -1;

content: "";

position: absolute;

width: 100%;

height: 100%;

background: #222;

left: 0;

top: 0;

border-radius: 10px;

}

@keyframes glowing-sc-button {

0% {

background-position: 0 0;

}

50% {

background-position: 400% 0;

}

100% {

background-position: 0 0;

}

Bước 4: Sử dụng Shortcode

Bây giờ bạn có thể sử dụng shortcode button trong bất kỳ bài viết hoặc trang nào. Ví dụ:
Khi đó sẽ xuất hiện một nút với văn bản “Đến trang chủ”, và khi nhấn vào nó sẽ dẫn đến “https://www.example.com”.

1	[sc_button text="Nhấn vào đây" link="https://tunlamweb.com/"]

Để tạo một shortcode cho button có text và link trong WordPress Demo text 1

Tunlamweb 1

Để tạo một shortcode cho button có text và link trong WordPress Demo text 2

Xem thêm bài viết khác

Tunlamweb 2

Để tạo một shortcode cho button có text và link trong WordPress Demo text 3

Tunlamweb 3

Lưu ý:

Đảm bảo rằng bạn đã sao lưu website trước khi thay đổi code.

Nếu không quen với việc sửa code PHP, hãy cân nhắc tạo một child theme hoặc sử dụng plugin để quản lý custom code nhằm tránh việc mất dữ liệu khi cập nhật theme.

Xem thêm: Tạo nút tải về đếm ngược không cần plugin cho bài viết WordPress

Theo dỗi thêm mình qua Fanpage hoặc Youtube nhé.