Lưu trữ danh mục: JS
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…
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 như Code Snippets ,… Cách 4: Riêng theme Flatsome: wp-admin/admin.php?page=optionsframework…
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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
<style> /* Tùy chỉnh placeholder */ .search-field::placeholder { font-size: 16px; font-style: italic; color: #888; } </style> <script type="text/javascript"> jQuery(document).ready(function ($) { !function (t) { "use strict"; t.fn.placeholderTypewriter = function (e) { var n = t.extend({ delay: 50, // Thời gian gõ từng ký tự pause: 1000, // Thời gian nghỉ sau khi gõ xong cursorBlinkSpeed: 500, // Tốc độ nháy con trỏ text: [] }, e); function r(t, e) { t.attr("placeholder", ""); // Xóa placeholder trước let cursor = "|"; // Biểu tượng con trỏ nhấp nháy function typeEffect(el, textIndex, charIndex, callback) { var text = n.text[textIndex]; if (charIndex < text.length) { el.attr("placeholder", text.substring(0, charIndex + 1) + cursor); setTimeout(() => typeEffect(el, textIndex, charIndex + 1, callback), n.delay); } else { setTimeout(callback, n.pause); } } function deleteEffect(el, callback) { var placeholderText = el.attr("placeholder"); if (placeholderText.length > 1) { el.attr("placeholder", placeholderText.slice(0, -2) + "|"); // Xóa ký tự cuối cùng, giữ con trỏ setTimeout(() => deleteEffect(el, callback), n.delay); } else { callback(); } } typeEffect(t, e, 0, function () { setTimeout(() => deleteEffect(t, function () { r(t, (e + 1) % n.text.length); }), n.pause); }); // Hiệu ứng nháy con trỏ setInterval(() => { let placeholder = t.attr("placeholder"); if (placeholder.endsWith("|")) { t.attr("placeholder", placeholder.slice(0, -1)); // Ẩn con trỏ } else { t.attr("placeholder", placeholder + "|"); // Hiện con trỏ } }, n.cursorBlinkSpeed); } return this.each(function () { r(t(this), 0); }); }; }(jQuery); var placeholderText = [ "Thủ thuật Theme Flatsome", "WordPress cơ bản", "Custom WooCommerce nâng cao", "Link download theme Flatsome", "WordPress nâng cao" ]; $(".search-field").placeholderTypewriter({ text: placeholderText, delay: 70, // Điều chỉnh tốc độ gõ chữ pause: 1200, // Điều chỉnh thời gian nghỉ giữa các chuỗi cursorBlinkSpeed: 600 // Điều chỉnh tốc độ nhấp nháy của con trỏ }); }); </script> |
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:
Trong CSS hoặc JavaScript (function), việc để dư nhiều dòng trắng không trực tiếp ảnh hưởng đến tốc độ web hay hiệu suất trình duyệt. Tuy nhiên, có một số điểm cần lưu ý: 1. CSS (Style Sheets): Dòng trắng trong CSS: Trình duyệt sẽ bỏ qua tất cả các ký tự không cần thiết…