Cách dùng HTML editor để thêm HTML vào website WordPress

HTML (HyperText Markup Language) là một trong những ngôn ngữ lập trình phổ biến để tạo nên một website. Nghe thì có vẻ đậm chất “code” và chỉ dành cho các lập trình viên, nhưng trong nhiều trường hợp, chủ website vẫn nên biết cách sử dụng HTML editor để thêm HTML vào trang WordPress của mình.

Cụ thể, khi bạn cần xử lý một số nội dung, ví dụ như tạo bảng, thay kiểu chữ, cỡ chữ, thêm khung viền tùy chỉnh, thì chính là lúc bạn cần sử dụng HTML editor bởi vì WordPress không hỗ trợ sẵn những phần tùy chỉnh này. Bạn có thể thêm và chỉnh sửa code HTML cho website ở một số vị trí như trang chỉnh sửa bài viết, chỉnh sửa trang, và widget. Trước hết, có một vài điều bạn cần lưu ý khi thêm HTML code vào website WordPress như sau:

Lưu ý khi dùng HTML editor cho trang web

Để đảm bảo HTML code hiển thị đúng như mong muốn trên trang WordPress, bạn cần kiểm tra cú pháp đã đúng chưa bằng cách test thử trên các code editor như Notepad++. Việc sai cú pháp có thể gây lỗi giao diện website của bạn. 

Thứ hai, bạn không nên viết thẻ <script> vào trong HTML code mà bạn định nhập vào trang vì nó có thể bị xóa đi và khiến cho nội dung bạn cần hiển thị không như mong muốn. 

Sau đây, mình sẽ hướng dẫn cách dùng HTML editor để thêm đoạn code sau nhằm tạo một bảng đơn giản. Đây chỉ là đoạn code ví dụ thôi, tùy theo nhu cầu, bạn có thể tự code một đoạn riêng của riêng mình nhé.

 <table style = "background-color: # 87ceeb;">
  <tbody>
    <tr>
      <td> Books </td>
      <td> Authors </td>
    </tr>
    <tr>
      <td> The magical power of emotional appeals </td>
      <td> Roy Garn </td>
    </tr>
    <tr>
      <td> How to win friends and influence people </td>
      <td> Dale Carnegie </td>
    </tr>
  </tbody>
</table>

Sử dụng HTML editor trong trang hoặc bài viết

Bạn có thể thêm HTML vào bài viết hoặc trang bằng cách dùng trang chỉnh sửa bài viết của WordPress. Các thao tác đơn giản giống như cách bạn viết và đăng bài trên WordPress bình thường thôi. Cả hai trình soạn thảo Classic editor và Gutenberg editor đều hỗ trợ chức năng này. 

Với Gutenberg editor

Trong giao diện của trang chỉnh sửa bài viết/trang của Gutenberg editor, bạn click vào dấu (+) để thêm một khối mới và chọn khối Custom HTML. Bạn nên dùng thanh tìm kiếm để tìm từ khóa HTML cho nhanh.

Sử dụng HTML editor trong trang hoặc bài viết với Gutenberg editor

Sau đó, chèn đoạn code HTML vào khối vừa chọn.

 chèn đoạn code HTML vào block Gutenberg vừa chọn.

Bạn có thể click vào Preview để xem đoạn code HTML hiển thị ngoài trang web như thế nào. 

đoạn code HTML hiển thị ngoài website WordPress

Với Classic editor

Nhiều người không quen với trình soạn thảo Gutenberg mới của WordPress nên sẽ chuyển đổi từ Gutenberg sang Classic. Chèn HTML code vào Classic editor đơn giản hơn so với dùng Gutenberg. Bạn chỉ cần mở phần chỉnh sửa bài viết, click vào tab Text, sau đó chèn đoạn code vào chỗ cần hiển thị:

Sử dụng HTML editor trong trang hoặc bài viết với Classic editor

Để xem kết quả hiển thị của code vừa chèn, bạn click vào tab Visual:

Code HTML hiển thị trong classic editor

Lưu và kiểm tra kết quả

Sau đó khi chèn HTML code vào trang/bài viết, bạn ấn Save hoặc Update để lưu thông tin lại. Bây giờ ra ngoài trang web, bạn thấy bảng đã hiển thị đúng như ý muốn rồi.

Code HTML hiển thị ngoài front end của website WordPress

Sử dụng HTML editor trong widget

Widget là một trong các thành phần của WordPress giúp bạn thêm nội dung như media, văn bản, đường dẫn, danh sách, … vào các khu vực widget như sidebar, footer, slide-out menu, … tùy theo từng theme WordPress bạn dùng. Bạn thêm HTML vào widget bằng cách sử dụng Customizer hoặc thực hiện trong Admin Dashboard. 

Dùng HTML editor trong Customizer 

Bạn cần thêm một widget có tên là Custom HTML vào khu vực đặt widget. Cách làm tương tự như việc thêm widget thông thường bằng Customizer thôi. Bạn có thể tham khảo bài viết này để biết thêm về cách dùng Customizer.

Bạn đi tới Customizer > Widget  chọn khu vực chèn widget và click vào nút Add New.

Dùng HTML editor trong Customizer

Sau đó, bạn chèn HTML code vào đây và thấy bảng đã hiển thị ra vị trí đặt code (ở ví dụ của mình là sidebar). Đừng quên click Publish để lưu nhé. Vậy là bạn đã xong rồi đó.

Chèn code HTML vào trong widget

Dùng HTML editor trong Admin Dashboard

Trong Admin Dashboard > Appearance > Widget, bạn chọn Custom HTML và kéo thả widget này vào khu vực widget cần chèn.

Dùng HTML editor trong Admin Dashboard

Tiếp đến, bạn thêm code vào widget đó, sau đó ấn Save để lưu.

Thêm code vào widget trong phần customizer của website WordPress

Lưu xong, bạn ra ngoài front end để xem kết quả hiển thị. Bảng mình lập đã hiện ra ở footer rồi.

Kết quả hiển thị ngoài front end của website WordPress

Việc dùng HTML editor trong Dashboard có hơi bất tiện vì bạn không thể xem trực tiếp kết quả hiển thị ngoài trang web được nên mình khuyên dùng Customizer hơn.

Lời kết

Việc biết cách sử dụng HTML editor để thêm code vào trang web sẽ giúp bạn “lên trình” cho website và cải thiện nội dung cũng như hình ảnh đáng kể. Còn lại, tùy vào khả năng mà bạn thêm và tùy chỉnh nội dung code nhé. 

Để lại bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *