Thủ thuật Theme Flatsome, Bài Viết, Tất cả bài viết
Tối ưu hiển thị và sao chép code trong Flatsome bằng Blockquote
Trong quá trình xây dựng website bằng Flatsome, rất nhiều người gặp phải tình trạng mỗi khi đăng code lên bài viết thì nội dung lại bị chèn thêm các thẻ HTML không mong muốn như <p> hay <br>. Điều này khiến người dùng copy lại code sẽ bị lỗi định dạng, dính ký tự thừa, gây khó khăn khi đem sử dụng.
Để giải quyết vấn đề đó mà không phải cài thêm plugin, bạn hoàn toàn có thể tận dụng chính thẻ blockquote để biến nó thành một “hộp hiển thị code” đẹp mắt, rõ ràng và có chức năng copy tự động.
Giải pháp này cực kỳ phù hợp cho những website chia sẻ snippet, bài hướng dẫn kỹ thuật, hoặc blog lập trình trên nền tảng WordPress. Tất cả những gì bạn cần chỉ là một chút CSS và JavaScript nhỏ gọn – hoàn toàn không ảnh hưởng đến tốc độ tải trang. Bài viết này dành cho độc giả của Muathemewpgiare.com, giúp bạn triển khai mọi thứ một cách chuyên nghiệp nhất.
Vì sao nên dùng Blockquote thay cho plugin hiển thị code?
Thông thường, khi cần trình bày code, nhiều người chọn cài thêm plugin hỗ trợ. Tuy nhiên, việc lạm dụng plugin đôi khi gây nặng web, xung đột theme hoặc không phù hợp với UX Builder. Ngược lại, việc tùy biến blockquote đem lại nhiều lợi ích đáng giá:
1. Hiển thị mã nguồn rõ ràng, cân đối và dễ đọc
Blockquote được xử lý để trông giống một code box thực sự, phù hợp với phong cách thiết kế của Flatsome.
2. Copy mã nguồn chỉ với một cú nhấp
Thay vì bôi đen – copy thủ công, người dùng chỉ cần nhấp vào blockquote để sao chép nội dung.
3. Loại bỏ hoàn toàn thẻ HTML thừa khi copy
Toàn bộ nội dung được chuyển thành văn bản thuần túy (plain text), không còn dính <p> hay <br> như trước.
4. Không cần dùng plugin, cực nhẹ và an toàn
Giải pháp bằng CSS + JavaScript đảm bảo giữ nguyên hiệu suất website.
5. Dễ dàng tùy chỉnh giao diện theo ý thích
Bạn có thể thay đổi màu nền, hiệu ứng chuyển động hoặc kiểu tooltip mà không giới hạn.
Bước 1: Chuẩn bị cấu trúc HTML
Khi cần hiển thị đoạn code trong bài viết, bạn chỉ cần bọc nó bằng thẻ:
1 2 3 4 5 | <blockquote> ... nội dung code dạng text ... </blockquote> |
Ví dụ:
1 2 3 4 5 6 7 8 9 | <blockquote> <div class="container"> <h2>Xin chào WordPress!</h2> </div> </blockquote> |
Hoặc với CSS:
1 2 3 4 5 6 7 8 9 10 11 | <blockquote> body { margin: 0; font-family: sans-serif; } </blockquote> |
Tất cả định dạng dư thừa (như <p> hoặc <br>) sẽ được xử lý ở bước cuối cùng, nhờ JavaScript tự động chuyển nội dung sang văn bản thuần.
Bước 2: Tạo giao diện hiển thị code bằng CSS tùy chỉnh
Bạn dán đoạn CSS dưới đây vào:
- Flatsome → Tối ưu giao diện → CSS bổ sung, hoặc
- File style.css của Child Theme.
Đoạn CSS này được tái cấu trúc hoàn toàn mới, đẹp mắt, tinh gọn và mượt mà:
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 93 94 95 96 97 98 99 100 | blockquote { --box-bg: rgba(0, 180, 120, 0.08); --box-hover: rgba(0, 180, 120, 0.18); --border-color: #00c070; --tip-bg: rgba(0,0,0,0.75); --tip-success: #4CAF50; position: relative; padding: 14px 20px; margin: 18px 0; font-size: 15px; line-height: 1.6; background: var(--box-bg); border-left: 5px solid var(--border-color); cursor: pointer; transition: .25s ease; overflow: hidden; } blockquote:hover { background: var(--box-hover); } blockquote::after { content: "Nhấp để sao chép"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--tip-bg); opacity: 0; pointer-events: none; transition: .25s ease; padding: 8px 14px; font-size: 13px; color: #fff; border-radius: 5px; } blockquote:hover::after { opacity: 1; } blockquote.copied::after { content: "Đã sao chép!"; background: var(--tip-success); opacity: 1; } |
Điểm nổi bật của CSS:
- Tooltip hiển thị đẹp mắt, mềm mại khi hover
- Tooltip tự động đổi nội dung khi sao chép thành công
- Màu sắc dùng biến CSS (CSS Variables) → chỉnh sửa cực dễ
- Hoàn toàn tương thích với Flatsome và UX Builder
Bước 3: Kích hoạt chức năng sao chép code bằng JavaScript
Để blockquote nhận tính năng copy tự động, bạn thêm đoạn script này vào:
- Flatsome → Advanced → HTML → Footer,
hoặc - File functions.php (enqueue),
hoặc - WPCode / Insert Headers & Footers.
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 | <script> document.addEventListener("DOMContentLoaded", () => { const blocks = document.querySelectorAll("blockquote"); blocks.forEach(block => { block.addEventListener("click", () => { const content = block.innerText.trim(); navigator.clipboard.writeText(content) .then(() => { block.classList.add("copied"); setTimeout(() => block.classList.remove("copied"), 2000); }) .catch(error => console.error("Không thể sao chép:", error)); }); }); }); </script> |
- Copy cực nhanh, không giật lag
- Loại bỏ hoàn toàn HTML rác khi sao chép
- Tự chuyển thành văn bản thuần
- Tương thích mọi thiết bị hỗ trợ Clipboard API
Kết luận
Sau khi hoàn tất cả 3 bước trên, bạn đã có một hệ thống hiển thị code vô cùng trực quan:
- Blockquote trở thành một Code Box đúng nghĩa
- Hover hiển thị hướng dẫn sao chép
- Nhấp chuột là copy ngay
- Tooltip báo trạng thái ngay lập tức
- Giao diện đồng bộ hoàn toàn với phong cách Flatsome
Giải pháp này giúp website của bạn trông chuyên nghiệp hơn, dễ dùng hơn và thân thiện hơn với người đọc – đặc biệt là các bạn làm lập trình hoặc chia sẻ thủ thuật WordPress.
Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.
Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!
Bài viết cùng chủ đề:
Share Code WordPress, Topcode và Sharecode.vn – Có an toàn không?
Tổng Hợp Những Tính Năng Mới Nổi Bật Của WordPress 6.9
Share Code Game Tết Giật Lì Xì
Mua Hosting và Máy chủ cao cấp tại AZDIGI có uy tín không?
Những bước đơn giản để tối ưu SEO cho website mới của bạn
Google Discover là gì? Tìm hiểu về tính năng này
Tổng hợp kiến thức toàn diện về SEO Google cho người mới bắt đầu
Hosting Sinh Viên Giá Rẻ – Chất Lượng – Uy Tín tại Muathemewpgiare.com
Avada vs Flatsome – Đâu là theme bán hàng tốt nhất cho WordPress & WooCommerce?
ThemeForest là gì? Giải thích chi tiết & Hướng dẫn mua theme WordPress siêu đơn giản (chuẩn SEO – Update 2025)
CodeCanyon – Kho plugin, script và source code cao cấp cho mọi dự án website
Cloudflare gặp sự cố máy chủ khiến ChatGPT Và Grok tê liệt
Hướng Dẫn Fix Lỗi Vui lòng bỏ chặn challenges.cloudflare.com để tiếp tục
Tại sao hiện tại Cloudflare bị lỗi toàn cầu
Khuyến Mãi Black Friday Mua Theme WordPress – Tặng Ngay Drive 2TB
-
Dịch vụ thiết kế website uy tín tại TP. Hồ Chí Minh
