HTML [HyperText Markup Language] là một trong những ngôn ngữ phổ biến để tạo ra một trang web. Nghe có vẻ như HTML chỉ dành cho nhà phát triển, tuy nhiên, ngay cả chủ sở hữu trang web không chuyên về công nghệ cũng nên biết cách sử dụng trình chỉnh sửa HTML để thêm HTML vào trang web WordPress của họ để giúp họ trong nhiều trường hợp
Cụ thể, khi bạn cần xử lý một số công việc như tạo bảng, thay đổi kiểu chữ hay cỡ chữ, thêm đường viền tùy chỉnh, v.v. nhưng WordPress không hỗ trợ các tùy chỉnh này nên bạn cần sử dụng trình soạn thảo HTML. Bạn có thể thêm và chỉnh sửa mã HTML trong trình chỉnh sửa bài đăng/trang và tiện ích. Nhưng trước hết, có một số điều bạn cần lưu ý khi thêm mã HTML vào trang web WordPress của mình
Lưu ý khi sử dụng Trình chỉnh sửa HTML cho trang web của bạn
Để đảm bảo mã HTML hiển thị trên trang WordPress đúng như ý muốn, bạn cần kiểm tra lại cú pháp đã đúng hay chưa bằng cách sử dụng các trình soạn thảo mã như Notepad++. Cú pháp sai có thể gây ra lỗi trong hiển thị của trang web
Đến bây giờ bạn đã biết rằng WordPress là một công cụ xây dựng trang web rất linh hoạt. Tùy thuộc vào các công cụ bạn sử dụng [chủ đề, trình tạo WordPress, plugin, tiện ích bổ sung, tiện ích], bạn có thể chơi với các khối hoặc kéo và thả. Không cần mã hóa
Thỉnh thoảng, bạn có thể muốn điều chỉnh mọi thứ một chút, khi bạn gặp phải các hạn chế về chủ đề, và khi đó một số kiến thức về HTML có thể hữu ích
Thông thường, mã HTML không đi một mình. Bạn cũng sẽ cần CSS. Trong khi HTML sẽ xử lý cấu trúc trang web, CSS xử lý phần tạo kiểu. Có một số kỹ năng mã hóa cơ bản có thể tiết kiệm thời gian và làm cho trang web đẹp hơn
Dưới đây là các tài nguyên bạn cần để có được một số kỹ năng mã hóa cơ bản trong vài tuần
- Khóa học HTML & CSS trên Udemy
- Khóa học HTML & CSS trên Khan Academy
- Các bài học HTML từ W3Schools
- thủ thuật CSS
Nếu bạn cần một số cửa hàng trực tuyến hoặc tùy chỉnh, bạn có thể cần tìm một nhà phát triển WordPress để giúp bạn một tay
Bây giờ, hãy xem cách bạn có thể thêm mã của riêng mình vào WordPress
Thêm HTML tùy chỉnh vào WordPress
Cách thêm HTML tùy chỉnh vào Trình chỉnh sửa WordPress cổ điển
Thông thường, bạn sẽ chỉnh sửa một trang hoặc một bài đăng trong Trình chỉnh sửa trực quan, như bên dưới
Các biểu tượng Trình soạn thảo trực quan cho phép bạn định dạng văn bản, chèn danh sách và liên kết, v.v.
Now, every time you edit something in here, behind the scenes, there is some HTML markup happening. For example, you are adding a heading, behind it you might see a
tag, links get inserted between tags, and lists inside tags. There aren’t many tags out there that you should know when organizing your content in HTML format.Bây giờ, làm thế nào bạn có thể truy cập mã này trong WordPress?
Tôi thường làm việc với Trình soạn thảo văn bản và bất cứ khi nào tôi cần thêm gia vị cho mọi thứ một chút, tôi đặt một số mã HTML bên trong Trình soạn thảo trực quan. Ví dụ, tôi đã từng làm điều này khi tạo anchor cho mục lục. Giờ đây, điều này có thể được thực hiện dễ dàng trong Trình chỉnh sửa mặc định bằng cách sử dụng các khối
Đối với những người quen thuộc hơn với HTML và sử dụng các công cụ như Sublime để viết mã, bạn có thể sử dụng. HTML Editor Syntax Highlighter để có một cái nhìn tương tự
Cách thêm HTML tùy chỉnh vào Trình chỉnh sửa WordPress mặc định
Như bạn có thể tưởng tượng, có một khối cho cái này được gọi là “HTML tùy chỉnh”
Bạn chỉ cần chèn khối sau đó dán mã của bạn
Bây giờ, nếu bạn muốn trực quan hóa mã cho toàn bộ trang, bạn có thể chuyển sang trình chỉnh sửa mã, tương tự như trình chỉnh sửa đã trình bày trước đó, khi nói về Trình chỉnh sửa cổ điển. Bạn có thể thực hiện việc này bằng cách chọn ba dấu chấm dọc ở góc trên bên phải
Tiếp theo, chỉ cần đi tới trình chỉnh sửa Mã. Từ giờ trở đi, bạn có thể thực hiện các thay đổi HTML
Thêm CSS tùy chỉnh vào WordPress
HTML xác định tất cả nội dung, văn bản, hình ảnh và liên kết của một trang. Nhưng chỉ HTML thôi thì không đủ khả năng làm đẹp trang web. Đó là nơi CSS bước vào. CSS và HTML luôn song hành. CSS không thể tồn tại nếu không có HTML vì sẽ không có gì để tạo kiểu nếu không có nó
Trong thiết kế web, kiểu dáng CSS có thể được thêm vào theo cách này
- Nội tuyến – bằng cách sử dụng thuộc tính kiểu bên trong các phần tử HTML. Nó sẽ giống như bên dưới nơi bạn đặt "kiểu" sau mỗi thẻ HTML mà bạn cần tạo kiểu
Điều này có ý nghĩa gì đối với bạn trong WordPress?
Điều này có thể được thực hiện trong
- Trình chỉnh sửa văn bản của trình chỉnh sửa WordPress cổ điển
- Khối “HTML tùy chỉnh” trong trình chỉnh sửa WordPress mặc định
- Trình chỉnh sửa mã cho trình chỉnh sửa WordPress mặc định
- Tiện ích “HTML tùy chỉnh” cho thanh bên
- Internal – by using a element in the section. In WordPress, you don’t usually have access to this.
- External – by using a element to link to an external CSS file. In WordPress, you don’t usually have access to this.
Ngoài ra, bạn có thể thêm kiểu CSS từ Trình tùy chỉnh WordPress
Đây là các bước cho việc này
- Từ bảng điều khiển WordPress đến Giao diện-> Tùy chỉnh.
- Từ Cài đặt chung chọn “CSS bổ sung”
- Thêm vào đây kiểu dáng CSS mong muốn của bạn. Nó sẽ trông giống thế này
Tùy chọn tạo kiểu CSS bổ sung này rất hữu ích khi bạn muốn làm cho trang web của mình phản hồi nhanh trên thiết bị di động. Bạn có thể điều chỉnh các yếu tố nhất định theo chiều rộng của các màn hình khác nhau. Đó là một mỏ vàng
Thêm các lớp CSS từ Trình chỉnh sửa WordPress mặc định
Bạn có thể sử dụng CSS để tạo kiểu cho từng phần tử khối riêng lẻ. Khi chọn một khối từ một trang, bạn sẽ thấy một số tùy chọn chỉnh sửa khối ở bên phải. Chỉ cần cuộn xuống “Nâng cao”, sau đó tìm phần “Các lớp CSS bổ sung”. Các lớp giúp nhóm các phần tử HTML nhất định theo cùng một kiểu dáng. Ví dụ: bạn có thể tạo một lớp round_borders cho một số hình ảnh trên một trang web. Tiếp theo, bạn có thể xác định loại đường viền, bán kính của nó, v.v. cho lớp đó. Điều này sẽ được thực hiện bên trong Customizer.
Thêm kiểu CSS thông qua trình tạo trang web Kubio
Nếu bạn đang sử dụng trình tạo trang web Kubio, thì có một cách khác để thêm kiểu CSS vào một khối hoặc phần. Chỉ cần thực hiện lựa chọn của bạn và đi tới bảng chỉnh sửa ở bên phải. Tùy chọn cuối cùng trong “Nâng cao” là “Chỉnh sửa CSS tùy chỉnh”. Dán vào đây mã mong muốn của bạn
Bây giờ, làm thế nào bạn có thể truy cập mã này trong WordPress?
Tôi thường làm việc với Trình soạn thảo văn bản và bất cứ khi nào tôi cần thêm gia vị cho mọi thứ một chút, tôi đặt một số mã HTML bên trong Trình soạn thảo trực quan. Ví dụ, tôi đã từng làm điều này khi tạo anchor cho mục lục. Giờ đây, điều này có thể được thực hiện dễ dàng trong Trình chỉnh sửa mặc định bằng cách sử dụng các khối
Đối với những người quen thuộc hơn với HTML và sử dụng các công cụ như Sublime để viết mã, bạn có thể sử dụng. HTML Editor Syntax Highlighter để có một cái nhìn tương tự
Cách thêm HTML tùy chỉnh vào Trình chỉnh sửa WordPress mặc định
Như bạn có thể tưởng tượng, có một khối cho cái này được gọi là “HTML tùy chỉnh”
Bạn chỉ cần chèn khối sau đó dán mã của bạn
Bây giờ, nếu bạn muốn trực quan hóa mã cho toàn bộ trang, bạn có thể chuyển sang trình chỉnh sửa mã, tương tự như trình chỉnh sửa đã trình bày trước đó, khi nói về Trình chỉnh sửa cổ điển. Bạn có thể thực hiện việc này bằng cách chọn ba dấu chấm dọc ở góc trên bên phải
Tiếp theo, chỉ cần đi tới trình chỉnh sửa Mã. Từ giờ trở đi, bạn có thể thực hiện các thay đổi HTML
Thêm CSS tùy chỉnh vào WordPress
HTML xác định tất cả nội dung, văn bản, hình ảnh và liên kết của một trang. Nhưng chỉ HTML thôi thì không đủ khả năng làm đẹp trang web. Đó là nơi CSS bước vào. CSS và HTML luôn song hành. CSS không thể tồn tại nếu không có HTML vì sẽ không có gì để tạo kiểu nếu không có nó
Trong thiết kế web, kiểu dáng CSS có thể được thêm vào theo cách này
- Nội tuyến – bằng cách sử dụng thuộc tính kiểu bên trong các phần tử HTML. Nó sẽ giống như bên dưới nơi bạn đặt "kiểu" sau mỗi thẻ HTML mà bạn cần tạo kiểu
Điều này có ý nghĩa gì đối với bạn trong WordPress?
Điều này có thể được thực hiện trong
- Trình chỉnh sửa văn bản của trình chỉnh sửa WordPress cổ điển
- Khối “HTML tùy chỉnh” trong trình chỉnh sửa WordPress mặc định
- Trình chỉnh sửa mã cho trình chỉnh sửa WordPress mặc định
- Tiện ích “HTML tùy chỉnh” cho thanh bên
- Internal – by using a element in the section. In WordPress, you don’t usually have access to this.
- External – by using a element to link to an external CSS file. In WordPress, you don’t usually have access to this.
Ngoài ra, bạn có thể thêm kiểu CSS từ Trình tùy chỉnh WordPress
Đây là các bước cho việc này
- Từ bảng điều khiển WordPress đến Giao diện-> Tùy chỉnh.
- Từ Cài đặt chung chọn “CSS bổ sung”
- Thêm vào đây kiểu dáng CSS mong muốn của bạn. Nó sẽ trông giống thế này
Tùy chọn tạo kiểu CSS bổ sung này rất hữu ích khi bạn muốn làm cho trang web của mình phản hồi nhanh trên thiết bị di động. Bạn có thể điều chỉnh các yếu tố nhất định theo chiều rộng của các màn hình khác nhau. Đó là một mỏ vàng
Thêm các lớp CSS từ Trình chỉnh sửa WordPress mặc định
Bạn có thể sử dụng CSS để tạo kiểu cho từng phần tử khối riêng lẻ. Khi chọn một khối từ một trang, bạn sẽ thấy một số tùy chọn chỉnh sửa khối ở bên phải. Chỉ cần cuộn xuống “Nâng cao”, sau đó tìm phần “Các lớp CSS bổ sung”. Các lớp giúp nhóm các phần tử HTML nhất định theo cùng một kiểu dáng. Ví dụ: bạn có thể tạo một lớp round_borders cho một số hình ảnh trên một trang web. Tiếp theo, bạn có thể xác định loại đường viền, bán kính của nó, v.v. cho lớp đó. Điều này sẽ được thực hiện bên trong Customizer.
Thêm kiểu CSS thông qua trình tạo trang web Kubio
Nếu bạn đang sử dụng trình tạo trang web Kubio, thì có một cách khác để thêm kiểu CSS vào một khối hoặc phần. Chỉ cần thực hiện lựa chọn của bạn và đi tới bảng chỉnh sửa ở bên phải. Tùy chọn cuối cùng trong “Nâng cao” là “Chỉnh sửa CSS tùy chỉnh”. Dán vào đây mã mong muốn của bạn