Cách dễ dàng hiển thị mã trên trang web WordPress của bạn

Bạn muốn hiển thị mã trong bài viết blog WordPress của bạn? Nếu bạn đã cố thêm mã dưới dạng văn bản thuần túy, WordPress sẽ không hiển thị chính xác.

WordPress chạy nội dung của bạn thông qua nhiều bộ lọc dọn dẹp mỗi khi bạn lưu một bài đăng. Các bộ lọc này tồn tại để đảm bảo rằng không ai đang tiêm mã thông qua trình chỉnh sửa thư để hack trang web của bạn.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách đúng để dễ dàng hiển thị mã trên trang web WordPress của bạn. Chúng tôi chỉ cho bạn các phương pháp khác nhau và bạn có thể chọn phương pháp phù hợp nhất với nhu cầu của mình.

Cách dễ dàng hiển thị mã trong bài viết WordPress

phương pháp 1. Xem mã với trình chỉnh sửa mặc định trong WordPress

Phương pháp này được khuyến nghị cho người mới bắt đầu và người dùng không cần hiển thị mã thường xuyên.

Chỉ cần chỉnh sửa bài viết trên blog hoặc trang nơi bạn muốn xem mã. Thêm một khối mã mới vào bài đăng của bạn trên màn hình chỉnh sửa bài đăng.

Thêm khối mã vào bài đăng WordPress của bạn

Bây giờ bạn có thể nhập đoạn mã trong vùng văn bản khối.

Thêm mã vào bài viết trên blog của bạn

Sau đó, bạn có thể lưu bài đăng trên blog và xem trước để xem khối mã đang hoạt động.

Mã PHP được hiển thị trong WordPress

Tùy thuộc vào chủ đề WordPress của bạn, khối mã có thể trông khác nhau trên trang web của bạn.

phương pháp 2. Xem mã trong WordPress với một plugin

Đối với phương pháp này, chúng tôi sẽ sử dụng plugin WordPress để hiển thị mã trong các bài đăng trên blog của bạn. Phương pháp này được khuyến nghị cho người dùng thường hiển thị mã trong bài viết của họ.

Nó cung cấp cho bạn những lợi thế sau so với khối mã tiêu chuẩn:

Nó cho phép bạn dễ dàng hiển thị bất kỳ mã nào trong bất kỳ ngôn ngữ lập trình nào. Hiển thị mã với đánh dấu cú pháp và số dòng. Người dùng có thể dễ dàng nghiên cứu mã và sao chép nó.

Trước tiên, bạn cần cài đặt và kích hoạt plugin SyntaxHighlighter Evolution. Để biết thêm thông tin, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.

Sau khi kích hoạt, bạn có thể tiếp tục và chỉnh sửa bài đăng blog nơi bạn muốn xem mã. Thêm khối Mã SyntaxHighlighter Code vào bài đăng trên màn hình chỉnh sửa.

Cú pháp

Bây giờ bạn sẽ thấy một khối mã mới trong trình chỉnh sửa thư nơi bạn có thể nhập mã của mình. Sau khi thêm mã, bạn phải chọn cài đặt khối từ cột bên phải.

Thiết lập đánh dấu cú pháp khóa mã

Đầu tiên, bạn cần chọn ngôn ngữ cho mã của bạn. Sau đó, bạn có thể vô hiệu hóa số dòng, nhập số dòng đầu tiên, chọn dòng bạn muốn và vô hiệu hóa chức năng để nhấp vào liên kết.

Khi bạn đã hoàn tất, hãy lưu bài đăng của bạn và nhấp vào nút xem trước để xem nó hoạt động.

Mã được hiển thị với cú pháp tô sáng

Plugin đi kèm với một số phối màu và chủ đề. Để thay đổi chủ đề màu sắc, bạn phải truy cập Cài đặt »Cú pháp trang.

Cài đặt cú pháp

Từ trang cài đặt, bạn có thể chọn chủ đề màu và thay đổi cài đặt SyntaxHighlighter. Bạn có thể lưu cài đặt của mình để xem bản xem trước của khối mã ở cuối trang.

Xem trước các khối mã

Sử dụng Syntax Highlighter với Classic Editor

Nếu bạn vẫn đang sử dụng trình chỉnh sửa WordPress cổ điển cũ, đây là nơi bạn sẽ sử dụng plugin SyntaxHighlighter để thêm mã vào bài đăng trên blog WordPress của mình.

Chỉ cần nhập mã của bạn trong ngoặc vuông với tên ngôn ngữ. Ví dụ: nếu bạn thêm mã PHP, hãy thêm nó như thế này:

(Php)

hàm phpprived get_time_tags () {$ time = get_the_time (‘d M, Y’); return $ time;}?> (/ php)

Tương tự, nếu bạn muốn thêm mã HTML, nó sẽ bọc mã xung quanh mã thẻ HTML như sau:

(HTML)

Một liên kết mẫu (/ html)

phương pháp 3. Xem mã trong WordPress theo cách thủ công (không có plugin hoặc chặn)

Phương pháp này dành cho người dùng nâng cao vì nó đòi hỏi nhiều công việc hơn và không phải lúc nào cũng hoạt động như dự định.

Nó phù hợp cho người dùng vẫn đang sử dụng trình chỉnh sửa cổ điển cũ và muốn hiển thị mã mà không cần sử dụng plugin.

Trước tiên, bạn cần gửi mã của mình thông qua một công cụ mã hóa thiết bị HTML trực tuyến. Nó sẽ thay đổi đánh dấu mã của bạn thành các đơn vị HTML, vì vậy bạn có thể thêm mã và bỏ qua các bộ lọc dọn dẹp WordPress.

Sau đó sao chép và dán mã của bạn vào trình soạn thảo văn bản và bọc nó

và nhãn

Thêm thủ công mã vào trình soạn thảo cổ điển

Mã của bạn trông như thế này:

Đây là một liên kết ví dụ

Bây giờ bạn có thể lưu bài viết của mình và xem trước mã trong hành động. Trình duyệt của bạn chuyển đổi các thiết bị HTML và người dùng có thể xem và sao chép mã chính xác.

Hiển thị mã thủ công trong WordPress

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách dễ dàng xem mã trên trang web WordPress của bạn. Bạn cũng có thể muốn xem danh sách cuối cùng của chúng tôi về các mẹo, thủ thuật và hack được tìm kiếm nhiều nhất trên WordPress.

Nếu bạn thích bài viết này, đăng ký kênh của chúng tôi YouTube để xem video hướng dẫn WordPress. Bạn cũng có thể tìm thấy chúng tôi tại Twitter và Facebook.