Hướng dẫn chỉnh sửa code HTML, CSS trong WordPress

WordPress là nền tảng dễ sử dụng mà bạn không cần đụng đến dòng code nào. Nhưng nếu biết cách sửa code WordPress thì còn tốt hơn nữa, vì bạn sẽ kiểm soát mã nguồn này chặt chẽ hơn. Bạn cũng có thể khắc phục sự cố hoặc thực hiện tùy chỉnh nâng cao để cải thiện trang WordPress. Bài viết này sẽ hướng dẫn lý do tại sao nên sửa code WordPress và hướng dẫn nó.

Tại sao cần phải biết cách sửa code WordPress?

WordPress là một nền tảng cực kỳ trực quan và thân thiện với người dùng. Có nhiều cách để tùy chỉnh và thay đổi trang web của bạn mà không cần chạm vào bất kỳ một dòng code nào nhờ các theme và plugin.

Về mặt kỹ thuật, bạn không cần phải truy cập vào bất kỳ file hoặc code của website để nó hoạt động đầy đủ. WordPress Dashboard, plugin và theme đều giúp việc điều chỉnh và cá nhân hóa trang web của bạn trở nên nhanh chóng và dễ dàng.

Tuy nhiên, đôi khi bạn có thể muốn triển khai nhiều quyền kiểm soát hơn và thực hiện các tùy chỉnh nâng cao. Có lẽ thay đổi bạn đang muốn thực hiện không phải là một tùy chọn với theme hoặc plugin.

Một khả năng khác là trang web của bạn gặp sự cố hoặc gặp một số lỗi khác khiến bạn không thể truy cập Admin Dashboard. Bạn có thể sẽ cần chỉnh sửa code trong WordPress của mình để khắc phục sự cố.

Trong những trường hợp như vậy, sẽ rất hữu ích nếu bạn biết cách sửa code trong WordPress. Cũng như cách truy cập và sửa đổi source code khác một cách an toàn và hiệu quả. Bao gồm PHP, CSS và Javascript. Nói một cách đơn giản, học một số vị trí mã hóa WordPress cơ bản để bạn kiểm soát và linh hoạt trong việc thiết kế, quản lý và duy trì WordPress.

Sửa code WordPress

Sẽ có nhiều cách để sửa code WordPress. Sau đây chúng tôi sẽ liệt kê hướng dẫn sửa code WordPress đơn giản.

Cách chỉnh sửa code HTML trong WordPress

Lưu ý rằng việc sửa code WordPress có thể mang lại một số rủi ro. Việc chỉnh sửa HTML tương đối an toàn với các kỹ thuật khác mà chúng ta sẽ tham khảo trong bài này, nhưng vẫn nên tiến hành cẩn thận và tạo các backup trước.

Chỉnh sửa code HTML trong WordPress với Classic Editor

Nếu bạn muốn thêm hoặc sửa HTML trong WordPress của trang hoặc bài đăng WordPress, bạn thực sự không cần truy cập source code của website của mình. Trong Classic Editor, tất cả những gì bạn phải làm là chuyển từ Visual Editor sang Text Editor. Điều này sẽ hiển thị hoạt động của HTML.

Từ Text editor, bạn có thể truy cập, thay đổi và cập nhật HTML trên bất kỳ trang hoặc bài đăng nào chỉ với một cú nhấp chuột. Bạn có thể xem các thay đổi của mình bất kỳ lúc nào bằng cách chuyển về Visual editor. Khi hoàn tất, hãy lưu lại bài đăng hoặc trang của bạn.

Chỉnh sửa code HTML WordPress với Block Editor

Nếu bạn đang sử dụng Block Editor (Gutenberg), việc chuyển từ Visual Editor sang Text Editor cần thêm một vài bước. Tuy nhiên, bạn cũng có nhiều tùy chọn có sẵn để sửa code WordPress của mình. Bao gồm thực hiện các thay đổi đối với toàn bộ trang hoặc bài đăng đối với các block riêng lẻ.

Để chỉnh sửa code WordPress của toàn bộ trang hoặc bài đăng, hãy nhấp vào ba chấm dọc nằm ở góc trên cùng bên phải, sau đó chọn Code Editor.

Thao tác này sẽ mở WordPress HTML Editor. Để chuyển từ Visual Editor sang Text Editor ở một block cụ thể. Hãy nhấp vào ba chấm dọc trên block toolbar, sau đó chọn Edit as HTML:

Một cách khác để thêm HTML vào trang hoặc bài đăng là sử dụng block Custom HTML:

Bạn có thể viết HTML code của mình trực tiếp vào trong khối, sau đó nhấp vào Preview trước khi xem code sẽ trông như thế nào trên giao diện người dùng:

Khi hoàn tất, hãy lưu các thay đổi vào bài đăng hoặc trang của bạn.

Chỉnh sửa HTML trang chủ trong WordPress

Trong một số theme, trang chủ hoạt động như một trang cá nhân của riêng nó. Do đó, quá trình sửa code WordPress của nó giống như được mô tả ở trên. Chỉ cần chọn trang có liên quan từ danh sách trong dashboard của bạn:

Bạn cũng có thể nhấp vào Edit Page trong thanh admin từ trang chủ của mình để truy cập Classic hoặc Block Editor:

Nếu cả hai tùy chọn đó đều không hoạt động để sửa code WordPress trên trang chủ của bạn, bạn có thể đang sử dụng Page Builder hoặc theme với homepage editor được tích hợp sẵn. Nếu đúng như vậy, bạn có thể tham khảo tài liệu về công cụ liên quan.

Chỉnh sửa HTML WordPress với Widget

Cuối cùng bạn có thể muốn thêm HTML vào thanh thanh bên hoặc chân trang WordPress của mình. Nhiều theme WordPress cũng sử dụng widget để kiểm soát nội dung trên trang chủ của website. Bạn có thể thực hiện việc điều chỉnh trang chủ, header và footer này thông qua tiện ích Custom HTML widget.

Chỉ cần điếu hướng đến “Appearance > Widgets“, thêm tiện ích Custom HTML widget vào thanh bên hoặc chân trang và chỉnh sửa nó theo ý muốn của bạn. Nhấp vào nút Save để publish nó trên trang của bạn.

Cách chỉnh CSS và PHP trong WordPress

Quá trình chỉnh sửa CSS trong WordPress của bạn khá giống với quá trình sửa đổi JavaScript. Có ba phương pháp bạn có thể sửa code WordPress của mình như vậy:

• Chỉnh sửa file CSS của bạn trong Theme Editor.
• Sử dụng CSS Editor được tích hợp sẵn của theme trong WordPress Customizer.
• Thêm CSS bằng plugin.

Phương pháp nào phù hợp nhất với bạn sẽ phụ thuộc vào mức độ chỉnh sửa mà bạn định thực hiện cũng như tần suất bạn định thực hiện thay đổi.

Chỉnh sửa CSS thông qua Theme Editor

Tất cả file CSS được sử dụng cho theme của trang web WordPress có thể được tìm thấy trong Theme Editor (Appearance > Theme Editor). Trong danh sách bên phải, hãy tìm các file kết thúc bằng phần mở rộng .css:

Bạn có thể thực hiện các thay đổi mong muốn của mình trong editor. Khi bạn hoàn tất, hãy nhấp vào Update File để lưu các thay đổi của bạn.

Sửa CSS với WordPress Customize

Ngoài WordPress Theme Editor, bạn cũng có thể sửa code WordPress của mình bằng WordPress Customizer. Để truy cập nó, hãy điều hướng đến “Appearance > Customize” từ WordPress Dashboard

Tiếp theo, nhấp vào Additional CSS ở cuối bảng bên trái:

Một code editor sẽ được mở ra nơi bạn có thể thêm CSS tùy chỉnh vào đây.

Như bạn đã thấy, editor này khá nhỏ và chủ yếu dành cho các sửa đổi nhỏ thay vì viết lại toàn bộ phong cách của website của bạn.

Việc thực hiện các thay đổi quy mô lớn Theme Editor hoặc sử dụng plugin sẽ dễ dàng hơn. Khi hoàn tất việc thêm CSS vào Customizer, nhấp vào nút Publish để lưu các thay đổi của bạn.

Sử dụng plugin CSS Hero

CSS Hero là một công cụ trực quan cho phép bạn chỉnh sửa các khía cạnh thiết kế và phong cách website của mình mà không cần sửa đổi các file theme.

Đây là một WordPress Theme editor cho phép bạn lưu trữ snapshot các thay đổi của mình, bao gồm các phiên bản khác nhau và đưa chúng vào hoạt động. Nó tạo ra một CSS extra đi kèm với theme của bạn. Do đó, bạn sẽ không cần phải lo lắng về việc gây ra bất kỳ thiệt hại nào bằng cách chỉnh sửa trực tiếp file CSS của mình.

Các tính năng của CSS Hero bao gồm:

• Các đoạn văn được tạo sẵn, có thể chỉnh sửa.
• Tích hợp và hỗ trợ Google Font và TypeKit
• Visual editor cho phép xem trước các thay đổi khi thực hiện chúng.

Sử dụng Theme Editor để sửa code WordPress

Trong trường hợp khác, WordPress cung cấp editor thích hợp cho phép bạn chỉnh sửa online các file theme của mình. Trong Theme Editor, bạn có thể truy cập PHP, CSS, JavaScript và tất cả các file liên quan để sửa code WordPress của mình. Ngoài ra bạn cũng có thể thêm nhiều code hay cho WooCommerce để website trở nên chuyên nghiệp, hấp dẫn người dùng hơn.

Nếu trang web WordPress của bạn vẫn hoạt động, bạn có thể tìm thấy source code của trang web của mình trong “Appearance > Theme Editor”

Trong khu vực chỉnh sửa này, bạn có thể thực hiện bất kỳ thay đổi nào mà bạn thấy phù hợp với thiết kế và cấu trúc theme của mình:

Nếu bạn đã cài đặt nhiều theme, bạn có thể chuyển đổi theme ở góc trên bên phải của Editor.

Để chọn các file theme cụ thể cho việc sửa code WordPress, bạn có thể chọn từ danh sách ở bên phải của Editor:

Các file có sẵn ở đây tùy thuộc vào theme của bạn, nhưng tối thiểu bạn nên thấy:

• style.css: Đây là stylesheet của bạn, chứa nhiều tính năng liên quan đến thiết kế, chẳng hạn như phông chữ và bảng mã màu của theme của bạn.
• functions.php: File chức năng của theme bao gồm PHP code sửa đổi các tính năng mặc định của WordPress.

Sau khi chỉnh sửa code WordPress của mình trong Theme Editor xong, hãy nhớ lưu các thay đổi của bạn. Chỉ cần nhấp vào nút Update File ở cuối màn hình để thực hiện việc đó.

WordPress sẽ ngăn bạn lưu các thay đổi nếu nó thấy có lỗi trong code. Đây là một phần của những gì làm cho công việc sửa code WordPress bằng Theme Editor trở nên an toàn hơn so với sửa code WordPress thông qua FTP ( chúng ta sẽ thảo luận ở phần sau).

Cách chỉnh sửa code WordPress qua FTP

Như bạn có thể nhớ lại ở phần trước, việc sử dụng Theme Editor để sửa code WordPress là một phương pháp để truy cập và thay đổi source code của trang web. Cách khác là sử dụng FTP client chẳng hạn như FileZilla. Các loại công cụ này cho phép bạn kết nối với server của website để truy cập các file được lưu trữ ở đó.

Cách tiếp cận này liên quan đến việc thực hiện các thay đổi cục bộ với file của bạn. Sau đó tải lại các file đã được sửa code WordPress lên môi trường lưu trữ. Dưới đây là bốn bước để sửa code WordPress qua FTP.

Bước 1: Định vị hoặc tạo thông tin đăng nhập FTP của bạn

Trước tiên, để kết nối với server của bạn qua FTP, bạn sẽ cần thông tin đăng nhập FTP, bao gồm username, password và hostname. Bạn sẽ có thể tìm thấy chúng được liệt kê trong tài khoản hosting của mình.

Nếu không, bạn có thể tạo username và password của mình trong cPanel trong “File > FTP Accounts“

Nhấp vào biểu tượng này, sau đó chọn Add FTP Account:

Trên Add FTP Account, hãy hoàn thành các bước sau:

1. Thêm số nhận dạng duy nhất cho FTP username của bạn. FTP username sẽ là uniqueidentifier@primarydomain.com, vì vậy hãy copy/paste nó vào một vị trí an toàn.
2. Tạo một password mạnh. Chúng tôi khuyên bạn nên sử dụng trình tạo password đạt xếp hạng độ mạnh 100/100. Đây sẽ là password FTP của bạn.
3. Đối với Directory, hãy luôn sử dụng public_html.
4. Quota của bạn luôn là Unlimited.

Nhấp vào Create FTP Account và bạn đã hoàn tất! Nếu gặp sự cố khi tạo thông tin đăng nhập FTP, bạn có thể muốn Google “[your hosting provider] FTP”. Thông thường, điều này sẽ cung cấp ít nhất một vài hướng dẫn hữu ích.

Bước 2: Tải xuống một FTP Client chẳng hạn như FileZilla

Đây là giải pháp FTP miễn phí cho phép bạn truyền file qua lại giữa máy tính và server của website. Tuy nhiên, có những FTP Client khác, vì vậy hãy sử dụng phần mềm phù hợp với nhu cầu của bạn.

Bước 3: Đăng nhập vào môi trường web hosting thông qua FileZilla

Sau khi hoàn tất tải xuống FileZilla, hãy mở nó và nhập tên FTP hostname, username và password.

Nếu cPanel của bạn liệt kê một địa chỉ IP, bạn có thể sử dụng nó để làm host. Sau khi bạn nhập các thông tin đăng nhập này, hãy nhấp vào nút Quickconnect.

Nó sẽ kết nối với server trong vài giây.

Bước 4: Bắt đầu sửa code WordPress của bạn

Sau khi đăng nhập, bạn có quyền truy cập vào file nguồn WordPress để chỉnh sửa HTML, CSS, PHP và JS khi bạn thấy phù hợp. Chỉ cần nhấp chuột phải vào bất kỳ file nào và chọn View/Edit.

Khi bạn đã sửa code WordPress của mình xong, hãy lưu tệp. Sau đó FileZilla sẽ tự động tải lên thay cho phiên bản cũ.

Trong trường hợp bạn đang có nhu cầu xây dựng một website chất lượng và lâu dài thì nên đầu tư các theme WordPress trả phí. Tuy nhiên, chi phí này không hề rẻ đối với những ai đang bước đầu làm website.

Lời kết

Trên đây là các cách chỉnh sửa code WordPress cơ bản, để bạn có thể nắm được và biết cách để duy trì, tùy chỉnh hay khắc phục trên website WordPress của mình. Chúc các bạn thành công. Cản ơn bạn đã theo dõi bài viết.