Lưu trữ danh mục: Thủ thuật
02
Th3
Th3
Mở file functions.php trong child theme của bạn (nếu chưa có child theme, bạn nên tạo child theme để tránh mất thay đổi khi update theme). Thêm đoạn code sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// Hiệu ứng trỏ chuột function color_changing_cursor_effect() { ?> <div class="color-changing-cursor"></div> <style> .color-changing-cursor { position: fixed; width: 15px; height: 15px; border-radius: 50%; pointer-events: none; z-index: 9999; background: red; transform: translate(-50%, -50%); } </style> <script> document.addEventListener("mousemove", function (e) { const cursor = document.querySelector(".color-changing-cursor"); cursor.style.top = `${e.pageY}px`; cursor.style.left = `${e.pageX}px`; cursor.style.background = `rgb(${e.pageX % 255}, ${e.pageY % 255}, ${(e.pageX + e.pageY) % 255})`; }); </script> <?php } add_action('wp_footer', 'color_changing_cursor_effect', 1000); |
Hiệu ứng “Wave” (Gợn sóng khi di chuyển chuột) Vòng tròn tạo hiệu ứng lan tỏa khi chuột di chuyển.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
function wave_cursor_effect() { if (!wp_is_mobile()) { ?> <div class="wave-cursor"></div> <style> .wave-cursor { position: fixed; width: 20px; height: 20px; border-radius: 50%; background: rgba(0, 181, 232, 0.8); pointer-events: none; transform: translate(-50%, -50%); animation: ripple 1s infinite; z-index: 9999999; } @keyframes ripple { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(3); opacity: 0; } } </style> <script> document.addEventListener("mousemove", function (e) { const cursor = document.querySelector(".wave-cursor"); cursor.style.top = e.clientY + "px"; cursor.style.left = e.clientX + "px"; }); </script> <?php } } add_action('wp_footer', 'wave_cursor_effect', 1000); |
Hiệu ứng…
CSS, Kiến thức Wordpress, Thủ thuật
Hiệu ứng chiếu sáng (shine effect) (hiệu ứng ánh sáng lướt qua) khi hover vào logo
22
Th2
Th2
Dán CSS sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.header-logo a { position: relative; display: inline-block; overflow: hidden; /* Ẩn hiệu ứng dư */ } .header-logo a::before { content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 100%); transform: skewX(-25deg); } .header-logo a:hover::before { animation: shine 0.75s; } @keyframes shine { 100% { left: 150%; } } |
CSS, Kiến thức Wordpress, Thủ thuật
Hiệu ứng chiếu sáng (shine effect) (hiệu ứng ánh sáng lướt qua) khi hover vào banner
22
Th2
Th2
Dán CSS sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
.banner { position: relative; width: 100%; max-width: 800px; /* Điều chỉnh độ rộng banner */ height: 250px; /* Điều chỉnh chiều cao banner */ background: url('https://via.placeholder.com/800x250') no-repeat center/cover; border-radius: 10px; overflow: hidden; /* Ẩn hiệu ứng dư */ display: flex; align-items: center; justify-content: center; color: white; font-size: 32px; font-weight: bold; text-transform: uppercase; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); } .banner::before { content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); transform: skewX(-25deg); } .banner:hover::before { animation: shine 1s; } @keyframes shine { 100% { left: 150%; } } |
CSS, Kiến thức Wordpress, Thủ thuật
Hiệu ứng chiếu sáng (shine effect) (hiệu ứng ánh sáng lướt qua) khi hover vào button
22
Th2
Th2
Dán CSS sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
.button { position: relative; display: inline-block; padding: 12px 24px; font-size: 16px; font-weight: bold; color: white; background: #007bff; border: none; border-radius: 8px; cursor: pointer; overflow: hidden; /* Ẩn phần dư của hiệu ứng */ text-transform: uppercase; } .button:hover { background: #0056b3; } .button::before { content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 100%); transform: skewX(-25deg); } .button:hover::before { animation: shine 0.75s; } @keyframes shine { 100% { left: 150%; } } |
🔥 Khi di chuột vào button, hiệu ứng ánh sáng quét ngang qua tạo cảm giác chuyên nghiệp!
CSS, Kiến thức Wordpress, Thủ thuật
Hiệu ứng chiếu sáng (shine effect) (hiệu ứng ánh sáng lướt qua) khi hover vào hình ảnh
10
Th1
Th1
Dán CSS vào
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
.product-small .box-image:hover::before{ -webkit-animation:shine .75s;animation:shine .75s } @-webkit-keyframes shine{ 100%{left:125%} } @keyframes shine{ 100%{left:125%} } .product-small .box-image::before{ position:absolute; top:0; left:-75%; z-index:2; display:block; content:''; width:50%; height:100%; background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%); background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%); -webkit-transform:skewX(-25deg);transform:skewX(-25deg) } |
20
Th3
Th3
Bạn có thể dán code script bằng các cách sau: Cách 1: Vào Giao diện → Tùy biến → Advanced (Nâng cao) cuộn xuống Custom JS (JavaScript tùy chỉnh) Cách 2: tạo file .js riêng và enqueue nó trong functions.php Cách 3: Dùng UX Blocks (theme Flatsome) hoặc các plugin có mục dán code js…
20
Th3
Th3
Bạn có thể dán code script bằng các cách sau: Cách 1: Vào Giao diện → Tùy biến → Advanced (Nâng cao) cuộn xuống Custom JS (JavaScript tùy chỉnh) Cách 2: tạo file .js riêng và enqueue nó trong functions.php Cách 3: Dùng UX Blocks (theme Flatsome) hoặc các plugin có mục dán code js…
Code function, Kiến thức Wordpress, Thủ thuật
Hướng dẫn tùy chỉnh mô tả danh mục sản phẩm hiển thị sau danh sách sản phẩm thay vì phía trên
20
Th3
Th3
Mở file functions.php trong child theme của bạn (nếu chưa có child theme, bạn nên tạo child theme để tránh mất thay đổi khi update theme). Thêm đoạn code sau:
|
1 2 3 4 5 6 7 8 9 10 11 |
//tùy chỉnh mô tả danh mục sản phẩm hiển thị sau danh sách sản phẩm thay vì phía trên add_action( 'wp', 'webdy_move_archive_description' ); function webdy_move_archive_description() { if ( is_archive() ) { remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 ); remove_action( 'woocommerce_archive_description', 'woocommerce_product_archive_description', 10 ); add_action( 'woocommerce_after_main_content', 'woocommerce_taxonomy_archive_description', 10 ); add_action( 'woocommerce_after_main_content', 'woocommerce_product_archive_description', 10 ); } } |
Code function, Kiến thức Wordpress, Thủ thuật
Hướng dẫn thêm chữ “Giá: ” vào trước giá sản phẩm trên trang sản phẩm và giỏ hàng
20
Th3
Th3
Mở file functions.php trong child theme của bạn (nếu chưa có child theme, bạn nên tạo child theme để tránh mất thay đổi khi update theme). Thêm đoạn code sau:
|
1 2 3 4 5 6 7 8 9 |
/*thêm chữ "Giá: " vào trước giá sản phẩm trên trang sản phẩm và giỏ hàng*/ add_filter( 'woocommerce_get_price_html', 'webdy_change_product_price_display' ); add_filter( 'woocommerce_cart_item_price', 'webdy_change_product_price_display' ); function webdy_change_product_price_display( $price ) { $text = __('Giá: '); return $text . ' ' . $price; } |
