Có được kỹ năng hiển thị mã hiệu quả trong WordPress là vô cùng quan trọng đối với các blogger và người tạo nội dung, những người luôn xuất bản mã trực tuyến để khán giả của họ sử dụng. Mã máy tính, như dự định, tạo ra một kết quả trực quan mới trên giao diện người dùng của trang web, khác biệt với các thẻ, dấu gạch chéo và dấu ngoặc có trong các đoạn mã thực tế.
Tuy nhiên, điều này dẫn đến tình trạng khó khăn cho các cá nhân viết về phát triển và thiết kế, vì họ yêu cầu một phương tiện để trình bày mã một cách thích hợp mà mã không thực thi chức năng dự định của nó, chẳng hạn như tạo nút hoặc áp dụng kiểu cho khối đoạn văn.
Nói một cách đơn giản, khi tạo một bài đăng trên blog bao gồm một đoạn mã làm ví dụ, bắt buộc phải ngăn đoạn mã đó thực thi. Cách tiếp cận này cho phép người đọc cảm nhận mã ở dạng ban đầu, xem mã trong một khối được định dạng tốt và thậm chí sao chép nội dung của mã cho nỗ lực phát triển của riêng họ.
Hướng dẫn này nhằm trình bày các phương pháp khác nhau để hiển thị mã trong WordPress, bất kể chủ đề WordPress đã chọn là gì. Ngoài ra, nó sẽ hỗ trợ bạn trong việc xác định phương pháp phù hợp nhất cho quy trình công việc cụ thể của bạn.
Tạo trang web tuyệt vời
Với trình tạo trang miễn phí tốt nhất Elementor
Bắt đầu bây giờĐiều gì xảy ra khi bạn thêm mã thông thường trong WordPress?
Khi bạn thêm mã thông thường trực tiếp vào bài đăng hoặc trang WordPress mà không thực hiện bất kỳ biện pháp cụ thể nào, mã có thể gây ra hậu quả không lường trước được. WordPress có các cơ chế tích hợp tự động xử lý và làm sạch nội dung để đảm bảo tính bảo mật và chức năng phù hợp. Do đó, khi mã thông thường được thêm vào, nó có thể bị WordPress sửa đổi hoặc loại bỏ hoàn toàn.
Dưới đây là một số điều có thể xảy ra khi bạn thêm mã thông thường vào WordPress:
- Thay đổi mã: WordPress có thể thay đổi mã bằng cách xóa hoặc sửa đổi một số thành phần nhất định để ngăn ngừa rủi ro bảo mật tiềm ẩn hoặc xung đột với chức năng của nền tảng. Điều này có thể dẫn đến việc mã không thực thi như dự định hoặc tạo ra lỗi.
- Tước mã: WordPress có sẵn các bộ lọc và biện pháp bảo mật có thể loại bỏ một số loại mã được coi là không an toàn hoặc không cần thiết. Điều này có thể dẫn đến việc loại bỏ các đoạn mã quan trọng hoặc toàn bộ khối mã.
- Méo hình ảnh: Mã thường chứa các ký tự, ký hiệu và định dạng đặc biệt có thể cản trở việc trình bày trực quan nội dung WordPress của bạn. Nó có thể gây ra các vấn đề về định dạng, căn chỉnh sai hoặc mã xuất hiện dưới dạng văn bản thuần túy thay vì được hiển thị dưới dạng mã.
- Thực thi mã: Trong một số trường hợp, nếu mã không được làm sạch hoặc xử lý đúng cách, mã có thể thực thi và thực hiện chức năng dự kiến. Điều này có thể gây ra những hậu quả ngoài ý muốn, chẳng hạn như tạo các nút, thay đổi giao diện của nội dung hoặc thậm chí ảnh hưởng đến hoạt động chung của trang web của bạn.
Để khắc phục những sự cố này và hiển thị mã một cách an toàn trong WordPress, bạn nên sử dụng các phương pháp hoặc plugin thích hợp được thiết kế riêng để hiển thị các đoạn mã. Các phương pháp này đảm bảo rằng mã được định dạng, lưu giữ và hiển thị đúng cách mà không có bất kỳ sửa đổi hoặc thực thi không mong muốn nào.
Ở đây chúng tôi sẽ thêm mã HTML sau vào đoạn trích:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: green;
color: white;
border: 4px solid black;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Chicago</h2>
<p>A nickname for Chicago is The City of Broad Shoulders.</p>
</div>
<div class="cities">
<h2>Los Angeles</h2>
<p>A nickname for Los Angeles is The City of Angels.</p>
</div>
<div class="cities">
<h2>New York</h2>
<p>A nickname for New York is The Big Apple.</p>
</div>
</body>
</html>
Đoạn mã cụ thể này sử dụng các yếu tố kiểu dáng HTML để tạo ra ba khối nội dung được tô điểm bằng màu xanh lá cây, hoàn chỉnh với các tiêu đề và đoạn văn.
Tuy nhiên, ý định của chúng tôi là trình bày mã chưa được xử lý trong một bài đăng trên blog, thay vì cho phép nó hiển thị trong các khối nhất định.
Có thể quan sát thấy các kết quả sau đây khi mã được dán trực tiếp vào Trình chỉnh sửa khối Gutenberg của WordPress:
Theo quan điểm đã nói ở trên, rõ ràng là WordPress nỗ lực sử dụng mã cho chức năng tạo nội dung chính của nó. Tuy nhiên, nó loại bỏ kiểu dáng khỏi mã, do đó không thể trình bày kết quả mong muốn cho người đọc.
Để ngăn chặn những trường hợp như vậy, chúng tôi cực kỳ ủng hộ việc sử dụng một trong các phương pháp được liệt kê dưới đây cho mục đích hiển thị mã.
4 cách để hiển thị mã trong WordPress
Các kỹ thuật sau đây được sắp xếp theo thứ tự độ khó tăng dần và chúng tôi cung cấp các phương pháp cụ thể phù hợp với những cá nhân hài lòng với việc soạn mã và nội dung trong trình chỉnh sửa đánh dấu, thay vì sử dụng WordPress.
Phương pháp 1: Sử dụng Gutenberg Block Editor
Trình chỉnh sửa Gutenberg bao gồm một khối Mã có sẵn giúp tạo điều kiện thuận lợi cho việc trình bày các đoạn mã trong khi vẫn giữ nguyên định dạng của chúng và không cần thực thi mã.
Để bắt đầu, hãy truy cập một bài đăng hoặc trang trong WordPress và tiến hành chọn một trong các nút Thêm khối.
Vui lòng chọn một trong các nút "Thêm khối" để tiếp tục.
Bằng cách đó, các loại khối có sẵn sẽ được tiết lộ. Bạn có tùy chọn tìm kiếm khối "Mã" hoặc nhập từ khóa chẳng hạn như "mã" vào thanh tìm kiếm.
Sau khi tìm thấy khối Mã, có thể nhận dạng bằng các biểu tượng dấu ngoặc của nó, hãy tiếp tục nhấp vào khối đó để chèn một đoạn mã vào bài viết.
Hiện tại, một khu vực có gợi ý "Soạn mã…" sẽ có thể quan sát được đối với bạn.
Trình chỉnh sửa Gutenberg của WordPress cung cấp hỗ trợ đánh dấu, cho phép khám phá và chèn các khối Mã thông qua việc sử dụng dấu gạch chéo lên (/) theo sau là đầu vào "C" hoặc "Mã" trong trình chỉnh sửa. WordPress sau đó sẽ hiển thị tất cả các khối thích hợp, tạo điều kiện thuận lợi cho quá trình chèn.
Điều quan trọng cần lưu ý là sự khác biệt giữa khối Mã và khối HTML Tùy chỉnh. Mặc dù khối HTML tùy chỉnh nhằm mục đích bao gồm mã HTML tùy chỉnh được hiển thị trên giao diện người dùng, nhưng khối Mã được thiết kế đặc biệt để bổ sung mã thô cho mục đích hiển thị.
Hiện tại, đây là thời điểm thích hợp để sao chép mã mong muốn và chèn mã đó vào khu vực được chỉ định có nhãn là "Viết mã..."
Mã bạn đã cung cấp hiện được đính kèm trong khối Mã được chỉ định.
Một khía cạnh thuận lợi của Khối mã là nó tuân theo định dạng của khoảng trắng và tab trong đoạn mã gốc. Do đó, mã được hiển thị phải duy trì tính nhất quán trực quan của nó với nguồn mà nó được sao chép.
Để hiển thị mã của bạn trong bài đăng hoặc trang WordPress của bạn, hãy kết thúc quy trình bằng cách nhấp vào nút "Xuất bản". Hơn nữa, bạn có tùy chọn để có được một bản trình bày trực quan về diện mạo của nó trước khi xuất bản bằng cách chọn "Xem trước".
Sau khi nhấp vào nút "Xuất bản", hãy tiếp tục truy cập phiên bản trực tiếp của bài đăng để xác minh rằng đoạn mã đang được hiển thị dưới dạng mã thô.
Theo quan sát, khối Mã được đặc trưng bởi tính đơn giản của nó, nhưng nó phục vụ mục đích thiết yếu là giữ nguyên định dạng khi trình bày mã trong các bài đăng trên blog.
Tham khảo ảnh chụp màn hình được cung cấp bên dưới. Trong ví dụ cụ thể này, đoạn mã gốc vẫn không thay đổi; nó chỉ được trình bày ở mặt trước trong một hộp màu xám.
Để tăng sự nổi bật của khối Mã, nên xem xét sửa đổi giao diện mặc định của nó.
Để truy cập các lựa chọn kiểu dáng có sẵn cho khối, vui lòng chọn khối Mã và tiếp tục nhấp vào nút Cài đặt (biểu tượng bánh răng). Hành động này sẽ mở tab Khối, hiển thị riêng cài đặt Khối áp dụng cho khối đã chọn, cụ thể là khối Mã trong trường hợp này.
Một người có khả năng tùy chỉnh khối Mã theo sở thích cá nhân, bao gồm tùy chọn sửa đổi các khía cạnh như văn bản và màu nền.
Cách 2: Sử dụng Plugin
Vui lòng sử dụng phương pháp cài đặt plugin ưa thích của bạn để kết hợp plugin Enlighter – Customizable Syntax Highlighter vào trang web WordPress của bạn.
Sau khi được kích hoạt, plugin sẽ có đầy đủ chức năng và cho phép bạn chèn mã vào bất kỳ bài đăng/trang nào thông qua khối Gutenberg hoặc nút Chèn Trình chỉnh sửa Cổ điển.
Nếu bạn đang sử dụng Trình chỉnh sửa khối Gutenberg của WordPress, hãy truy cập bài đăng mà bạn muốn hiển thị mã. Chọn một trong các nút Thêm khối (được xác định bằng ký hiệu "+") để hiển thị các loại khối có sẵn.
Đọc kỹ hoặc nhập một từ khóa liên quan đến khối Enlighten Sourcecode. Tiếp tục nhấp vào khối tương ứng để kết hợp nó trong bài đăng.
Sau đó, khối Enlighter Highlighter xuất hiện trong giao diện Trình chỉnh sửa khối, có tiêu đề được chỉ định có tiêu đề "Đánh dấu chung" và trường nhập văn bản có nhãn "Chèn mã nguồn..."
Vui lòng nhập hoặc sao chép và dán mã mong muốn dành cho hiển thị trên WordPress vào trường văn bản "Chèn mã nguồn..." được chỉ định.
Với khả năng là một công cụ đánh dấu cú pháp, plugin giữ lại tất cả các tùy chọn định dạng và bảng biểu. Khi đạt được sự hài lòng với kết quả, vui lòng tiếp tục chọn nút "Xuất bản".
Bằng cách sử dụng chức năng này, bạn có thể truy cập giao diện người dùng của bài đăng của mình để quan sát nội dung giống như khách truy cập trang web.
Plugin Enlighter cung cấp một chủ đề mặc định đơn giản để hiển thị mã, kèm theo số dòng hỗ trợ quá trình cấu trúc và tham chiếu.
Như đã đề cập trước đây, việc sử dụng plugin để hiển thị mã trên nền tảng WordPress mang lại những lợi thế khác biệt khi so sánh với các phương pháp thay thế. Một ví dụ minh họa về lợi thế như vậy là chức năng giao diện người dùng được cung cấp bởi plugin cú pháp Enlighter, trong đó các dòng mã được đánh dấu động khi người dùng cuộn qua nội dung.
Hơn nữa, trong hộp mã nằm ở góc trên bên phải, có một số nút giúp nâng cao trải nghiệm người dùng. Đáng chú ý, một trong những nút này cho phép trình bày mã ở định dạng văn bản thuần túy, không có số dòng.
Nút thứ hai, được ký hiệu là "Sao chép vào bảng tạm", tạo điều kiện sao chép tức thời tất cả nội dung trong hộp mã, cho phép người dùng chuyển và dán mã vào bất kỳ chương trình mong muốn nào một cách thuận tiện.
Cuối cùng, nút thứ ba sẽ mở mã trong cửa sổ mới, do đó hiển thị mã trong cửa sổ trình duyệt được định dạng dưới dạng văn bản thuần túy.
Plugin Enlighter cung cấp nhiều chủ đề và công cụ tùy chỉnh mạnh mẽ để điều chỉnh giao diện của hộp mã theo sở thích của bạn. Nếu bạn không muốn sử dụng chủ đề mặc định, bạn có thể điều hướng quay lại bài đăng của mình trong WordPress và chọn khối Mã nguồn Enlighter hiện đang hoạt động.
Hành động này sẽ tiết lộ thanh bên Khối trong WordPress. Trong trường hợp nó không xuất hiện ngay lập tức, vui lòng đảm bảo bạn nhấp vào nút Cài đặt (biểu tượng bánh răng) nằm ở góc trên cùng bên phải của cửa sổ WordPress.
Tùy chọn tùy chỉnh ban đầu cần xem xét là trường Ngôn ngữ, vì nó hướng dẫn plugin hiển thị ngôn ngữ mã nào, cho phép các tính năng tô sáng và định dạng thích hợp.
Có rất nhiều lựa chọn ngôn ngữ mã hóa để xem xét, do đó hãy xem qua danh sách và chọn ngôn ngữ phù hợp nhất.
Tính năng Dòng đặc biệt nhấn mạnh các dòng được chỉ định bằng cách cho phép người dùng nhập số dòng được phân tách bằng dấu phẩy.
Do đó, các dòng được chỉ định mà bạn đã chỉ định được nhấn mạnh trực quan cho tất cả các cá nhân truy cập trang web.
Tham số Lineoffset cung cấp một phương tiện để bắt đầu đoạn mã hóa của bạn ở một số dòng cụ thể, tỏ ra thuận lợi khi trình bày một tập hợp con mã từ một tập hợp các dòng lớn hơn.
Rõ ràng, bằng cách nhập giá trị "10" vào trường Lineoffset, toàn bộ hộp mã bắt đầu từ dòng số 10.
Phương pháp 3: Sử dụng Công cụ mã hóa
Vui lòng truy cập trang web Bộ mã hóa HTML của W3Docs. Trên trang này, bạn sẽ tìm thấy hai trường hộp liền kề. Cái bên trái được chỉ định để dán mã của bạn, trong khi cái bên phải hiển thị phiên bản được mã hóa mà bạn có thể sao chép và dán vào WordPress.
Trước khi tiếp tục, cần chỉ định loại bảo quản mã mong muốn:
- Chọn JavaScript Unicode nếu bạn định dán mã có chứa các phần tử JavaScript.
- Chọn ký hiệu HTML nếu bạn đang làm việc với HTML.
Vui lòng chèn mã mong muốn sẽ được hiển thị trong WordPress vào trường được chỉ định ở bên trái. Sau đó, xác định vị trí và chọn nút Mã hóa nằm ở phía trên bên phải.
Kết quả cuối cùng có thể khó hiểu; tuy nhiên, về cơ bản, nó là sự kết hợp của các thành phần HTML nhằm bảo toàn toàn bộ mã được chèn, đồng thời tránh mọi kích hoạt ngoài ý muốn hoặc hiển thị nội dung thay thế trên giao diện người dùng.
Vui lòng nhấp vào nút "Sao chép".
Quay lại WordPress và truy cập bài đăng hoặc trang dự định. Tiếp tục chọn menu Tùy chọn (được biểu thị bằng ba dấu chấm dọc) nằm ở góc trên bên phải. Sau đó, chọn tính năng Code Editor.
Giao diện hiện tại sẽ hiển thị Trình chỉnh sửa mã thay vì Trình chỉnh sửa khối trực quan. Xác định vị trí phần mong muốn để hiển thị mã và tiến hành chèn HTML được mã hóa của bạn vào trình chỉnh sửa.
Nếu bạn đang sử dụng trình chỉnh sửa Classic WordPress, thì bắt buộc phải điều hướng đến tab Văn bản, tab này tương ứng với Trình chỉnh sửa mã trong Trình chỉnh sửa khối Gutenberg.
Vui lòng chọn tùy chọn "Cập nhật" hoặc "Xuất bản" để hoàn thiện bài đăng và chuyển đến phần đầu của bài đăng để quan sát cách trình bày trực quan của bài đăng.
Bạn sẽ có thể quan sát mã nguyên vẹn ban đầu được chèn vào bộ mã hóa, trước khi đưa vào các phần tử mã hóa HTML. Điều quan trọng cần lưu ý là bộ mã hóa không cung cấp bất kỳ khả năng tạo kiểu nào, điều này làm cho phương pháp này trở nên lý tưởng để đạt được tính thẩm mỹ gọn gàng và tối giản.
Phương pháp 4: Sử dụng Mã ngắn tùy chỉnh
Việc tạo một mã ngắn tùy chỉnh hoàn thành nhiệm vụ chèn các khối mã có thể tái sử dụng mà không cần sao chép và dán thủ công. Đây chính xác là lý do tại sao các mã ngắn tùy chỉnh mang lại cơ hội mạnh mẽ để hiển thị mã trên nền tảng WordPress.
Ưu điểm của việc sử dụng mã ngắn tùy chỉnh để trình bày mã như sau:
- Mã ngắn tùy chỉnh cho phép lưu các phần mã phức tạp để sử dụng lại trong tương lai, loại bỏ nhu cầu nhập lặp đi lặp lại các đoạn mã dài.
- Có thể xác định các kiểu CSS được cá nhân hóa cho các công cụ đánh dấu và vùng chứa mã.
- Bất kỳ người dùng nào cũng có thể sử dụng mã ngắn, cho phép những người đóng góp khác dễ dàng tận dụng các công cụ đánh dấu mã và khối của bạn chỉ bằng một cú nhấp chuột đơn giản.
Tạo một mã ngắn tùy chỉnh đòi hỏi phải thành thạo trong việc sửa đổi các tệp chủ đề WordPress, làm việc với mã PHP và có khả năng phát triển các plugin WordPress. Do đó, việc tạo một mã ngắn tùy chỉnh cho WordPress có thể gây khó khăn cho những người mới sử dụng PHP.
Tuy nhiên, kết quả cuối cùng cung cấp một cách tiếp cận đơn giản hơn đáng kể để hiển thị mã trên nền tảng WordPress.
Người ta có quyền tự do chọn bất kỳ tên mong muốn nào cho mã ngắn tùy chỉnh và thiết lập nhiều lựa chọn thay thế khác nhau, chẳng hạn như [html] [/html] và [css] [/css], để phù hợp với các ngôn ngữ lập trình đa dạng.
Xin lưu ý rằng để đánh dấu cú pháp tối ưu, bạn nên sử dụng mã ngắn tùy chỉnh kết hợp với Trình soạn thảo văn bản (trong WordPress Classic) hoặc hộp HTML tùy chỉnh khi làm việc với Trình chỉnh sửa khối WordPress Gutenberg.
Mục tiêu là xây dựng một mã ngắn riêng biệt cho phép người dùng nhập hoặc chèn mã trong ranh giới được phân định của thẻ mở và thẻ đóng của mã ngắn.
Mục tiêu là phát triển một mã ngắn tùy chỉnh cho phép người dùng nhập hoặc chèn mã trong các thẻ mở và đóng được chỉ định của mã ngắn.
kết thúc
Hiển thị mã trong WordPress là rất quan trọng để chia sẻ các khái niệm lập trình, đảm bảo độ chính xác, cải thiện tính thẩm mỹ và thúc đẩy cộng tác. Nó cho phép các nhà phát triển giáo dục đối tượng của họ, cung cấp bằng chứng cụ thể, nâng cao trải nghiệm người dùng và khuyến khích sự tham gia của cộng đồng. Hiển thị các đoạn mã thúc đẩy tính minh bạch, tin cậy và thông tin đáng tin cậy. Mã ngắn hoặc plugin tùy chỉnh có thể đảm bảo hiển thị mã có cấu trúc tốt và hấp dẫn trực quan. Chia sẻ mã tạo điều kiện cho các cuộc thảo luận, phản hồi và đổi mới. Nhìn chung, hiển thị mã hiệu quả trong WordPress là điều cần thiết để phổ biến kiến thức, đảm bảo chất lượng và sự phát triển của cộng đồng phát triển WordPress.
