Chỉnh sửa code theme WordPress là một công việc khá khó, đòi hỏi bạn phải có kiến thức về lập trình. Tùy theo phần bạn muốn sửa là gì mà cách thực hiện cũng sẽ có đôi chút khác nhau.
Dưới đây, mình sẽ chia sẻ tới các bạn tầm quan trọng của việc sửa code, những điều cần cân nhắc trước khi thực hiện và chi tiết cách sửa cho từng phần trong WordPress.
1. Biết chỉnh sửa code theme WordPress có lợi gì?
Biết cách chỉnh sửa mã nguồn (code) trong WordPress mang lại nhiều lợi ích cho những người quản trị trang web như:
- Dễ dàng tùy chỉnh giao diện (Theme): Bạn có thể tạo ra giao diện độc đáo cho trang web của mình, không bị hạn chế bởi các theme có sẵn. Bên cạnh đó, chỉnh sửa mã nguồn giúp bạn tối ưu hóa trang web cho các thiết bị di động, đảm bảo trải nghiệm người dùng tốt.
- Tối ưu hóa hiệu suất: Bạn sẽ dễ dàng tối ưu hóa mã nguồn để cải thiện tốc độ tải trang web. Việc tinh chỉnh code cũng giúp bạn loại bỏ các đoạn mã không cần thiết hoặc không sử dụng, giảm dung lượng trang web.
- Tự do thêm chức năng tùy chỉnh: Bạn có thể thêm các chức năng mới hoặc điều chỉnh chúng để đáp ứng nhu cầu cụ thể của website, chỉnh sửa code để kết nối với API bên ngoài và các dịch vụ.
- Sửa lỗi và bảo trì website nhanh chóng: Bạn sẽ có khả năng tự chỉnh sửa code theme WordPress để fix lỗi mà không cần đợi cập nhật từ theme hoặc plugin; cập nhật và bảo trì mã nguồn giúp duy trì tính ổn định và bảo mật của website.
- Hiểu rõ hơn về WordPress: Chỉnh sửa code giúp bạn hiểu rõ hơn về cấu trúc theme WordPress, cách WordPress hoạt động; đồng thời phát triển kỹ năng lập trình và phát triển web.
- Kiểm soát tối đa website: Bạn sẽ kiểm soát được hoàn toàn dữ liệu website, không phụ thuộc quá nhiều vào các plugin hay theme bên ngoài. Bạn cũng có thể tinh chỉnh mọi khía cạnh của website theo ý muốn của mình.
2. Cần cân nhắc những gì khi chỉnh sửa code theme WordPress?
Lưu ý rằng việc chỉnh sửa code cần phải được thực hiện cẩn thận để tránh tình trạng làm hỏng trang web. Bạn nên tìm cách để giảm thiểu rủi ro càng nhiều càng tốt.
Đầu tiên, bạn nên cân nhắc xem mục đích chỉnh sửa code theme WordPress là gì. Nó có thể là để thử nghiệm, để bạn học tập hay có những tùy chỉnh nâng cao cho website.
- Nếu mục tiêu của bạn chỉ là để thử nghiệm thì sử dụng child theme có lẽ sẽ an toàn hơn. Mọi thay đổi trên child theme sẽ không ảnh hưởng tới website nếu có xảy ra sai sót. Sau khi tùy chỉnh child theme, bạn có thể kiểm tra được xem những thay đổi đó có đúng với dự định hay không.
- Nếu mục tiêu của bạn là học tập thì bạn chỉ nên tác động đến mã nguồn càng ít càng tốt, tập trung đúng vào phần mà bạn muốn học hỏi. Điều này giúp giảm rủi ro đáng kể và tiết kiệm thời gian.
- Nếu bạn đang cần tùy chỉnh nâng cao, việc sửa đổi mã nguồn buộc bạn phải có một trình chỉnh sửa HTML, chẳng hạn như Textwrangler với Mac và Notepad++ với Windows. Bên cạnh đó, bạn phải chuẩn bị sẵn FTP client và trình duyệt web hiện đại.
Ngoài ra, việc chỉnh sửa code theme WordPress cần nhiều thời gian, hãy đảm bảo bạn có đủ kiên nhẫn cho công việc này. Trong trường hợp bạn bận rộn hoặc không chắc chắn về khả năng của mình thì nên thuê lập trình viên chuyên nghiệp.
3. Chia sẻ cách chỉnh sửa code HTML trong WordPress
Mình sẽ chia sẻ cách mình thường làm nhé!
3.1. Dùng Classic Editor chỉnh sửa code HTML
Classic Editor là một plugin cho WordPress được sử dụng để giữ lại trình soạn thảo Classic của WordPress thay vì sử dụng trình soạn thảo mới có tên là Gutenberg. Nếu bạn muốn chỉnh sửa mã HTML trong Classic Editor, bạn có thể thực hiện theo các bước sau:
- Đầu tiên, hãy cài đặt và kích hoạt plugin Classic Editor. Từ trang quản trị WordPress, điều hướng đến Plugins > Add New, sau đó tìm kiếm Classic Editor.
- Sau khi cài đặt xong, bạn cần kích hoạt Classic Editor. Từ trang Plugins, tìm Classic Editor và chọn nút Activate.
- Mở trang hoặc bài viết mà bạn muốn chỉnh sửa từ trang quản trị WordPress.
- Trong trình soạn thảo Classic Editor, bạn sẽ thấy có hai chế độ Visual và Text, chọn tab Text để chuyển sang chế độ soạn thảo HTML.
- Ở chế độ Text, bạn có thể thấy mã nguồn HTML của trang hoặc bài viết. Bạn có thể thực hiện các thay đổi trực tiếp vào mã HTML ở đây.
- Khi bạn đã chỉnh sửa xong mã HTML, nhấn nút Update (Cập nhật) hoặc Publish (Xuất bản) tùy thuộc vào trạng thái hiện tại của bài viết.
3.2. Dùng Block Editor chỉnh sửa code HTML WordPress
Block Editor (hay chính là Gutenberg) là trình soạn thảo mới trong WordPress, được giới thiệu từ phiên bản WordPress 5.0 trở đi. Bạn có thể chỉnh sửa code HTML WordPress với Block Editor như sau:
- Đăng nhập vào trang quản trị WordPress, mở trang hoặc bài viết bạn muốn chỉnh sửa.
- Trong Block Editor, có một khối (block) tên là Custom HTML hoặc HTML (tùy phiên bản). Bạn có thể thêm khối bằng cách nhấn vào biểu tượng + ở nơi bạn muốn thêm khối, tiếp theo tìm kiếm Custom HTML hoặc HTML trong danh sách các khối.
- Sau khi thêm khối Custom HTML, bạn sẽ thấy một khu vực chỉnh sửa với một trình soạn thảo mã nguồn. Ở đây, bạn có thể nhập hoặc chỉnh sửa mã HTML theo ý muốn.
- Khi bạn đã chỉnh sửa xong mã HTML, lưu lại bằng cách nhấn Update (Cập nhật) hoặc Publish (Xuất bản) tùy thuộc vào trạng thái hiện tại của bài viết.
Lưu ý rằng mặc dù bạn có thể sử dụng khối Custom HTML để chỉnh sửa mã nguồn nhưng Block Editor cũng thường xuyên cung cấp các khối khác có sẵn để thêm các phần tử HTML cụ thể mà không cần phải chỉnh sửa mã nguồn trực tiếp. Bạn có thể tìm kiếm các khối này trong danh sách khối và kéo thả chúng vào trang hoặc bài viết.
3.3. Cách chỉnh sửa code HTML trang chủ
Có nhiều cách để chỉnh sửa HTML của trang chủ trong WordPress, tùy theo theme mà bạn đang sử dụng. Dưới đây mình sẽ giới thiệu những cách sửa trực tiếp mã nguồn nhé:
Bạn mở thư mục của theme trên máy chủ và sửa các file như header.php, index.php và các file khác liên quan đến trang chủ. Từ đây, bạn tìm đoạn mã HTML tương ứng và sửa theo ý muốn. Tuy nhiên, mình khuyên bạn nên tạo child theme và sửa trong thư mục của child theme để tránh mất các thay đổi khi theme chính được cập nhật.
Ngoài ra, bạn cũng có thể sử dụng trình soạn thảo mã nguồn như VSCode hoặc Sublime Text để chỉnh sửa các file trực tiếp trên máy chủ thông qua FTP.
3.4. Làm sao để chỉnh sửa code HTML WordPress bằng Widget?
Chỉnh sửa HTML trong WordPress thông qua Widget có thể thực hiện bằng cách sử dụng một số widgets có sẵn hoặc thêm một widget tùy chỉnh. Cụ thể như sau:
Sử dụng text Widget
- Đăng nhập vào trang quản trị WordPress, điều hướng đến Appearance (Giao diện) -> Widgets (Widget).
- Tìm widget có tên Text trong danh sách các widget. Kéo và thả widget Text vào vùng sidebar hoặc khu vực widget mà bạn muốn hiển thị mã HTML.
- Trong widget Text mới tạo, bạn sẽ thấy một trình soạn thảo văn bản. Ở đây, bạn có thể nhập hoặc chỉnh sửa mã HTML của mình.
- Sau khi chỉnh sửa xong, nhấn nút Save để lưu lại thay đổi. Truy cập trang web của bạn để kiểm tra xem mã HTML đã được áp dụng hay chưa.
Sử dụng Widget tùy chỉnh
- Nếu bạn muốn có tính linh hoạt cao hơn, bạn có thể cài đặt plugin Custom HTML Widget từ thư viện plugin WordPress.
- Sau khi cài đặt và kích hoạt plugin, bạn sẽ thấy một widget mới có tên là Custom HTML trong danh sách widget. Thêm widget này vào vùng sidebar hoặc khu vực widget mong muốn.
- Trong widget Custom HTML, bạn sẽ thấy một trình soạn thảo văn bản giống như trường Text widget. Ở đây, bạn có thể nhập hoặc chỉnh sửa mã HTML.
- Sau khi chỉnh sửa xong, nhấn nút “Save” để lưu lại thay đổi.
- Truy cập trang web của bạn để kiểm tra xem mã HTML đã được áp dụng hay chưa. Nhớ kiểm tra và đảm bảo rằng mã HTML bạn nhập là hợp lệ và không làm ảnh hưởng đến tính ổn định của trang web. Nếu có bất kỳ vấn đề gì, bạn có thể quay lại và chỉnh sửa lại thông qua trang quản trị WordPress.
3.5. Cách chỉnh sửa mã nguồn CSS và PHP
Chỉnh sửa mã nguồn CSS và PHP trong WordPress có thể được thực hiện bằng nhiều cách khác nhau, tùy thuộc vào kỹ thuật và yêu cầu cụ thể. Dưới đây là một số cách phổ biến:
Chỉnh sửa CSS
- Sử dụng customizer: Điều hướng đến Appearance (Giao diện) -> Customize (Tùy chỉnh) trong trang quản trị WordPress. Trong trình tùy chỉnh, bạn sẽ thấy một phần có tên là Additional CSS (CSS Bổ sung). Ở đây, bạn có thể thêm mã CSS tùy chỉnh để tinh chỉnh giao diện.
- Chỉnh sửa file style.css: Mở trình soạn thảo mã nguồn và truy cập vào thư mục theme trên máy chủ WordPress. Tại đây, bạn có thể mở và chỉnh sửa file style.css trực tiếp để thêm mã CSS tùy chỉnh.
- Sử dụng plugin CSS tùy chỉnh: Cài đặt một plugin CSS tùy chỉnh như Simple Custom CSS để thêm mã CSS mà không cần phải sửa trực tiếp vào mã nguồn theme.
Chỉnh Sửa PHP
- Sử dụng child theme: Nếu bạn muốn sửa đổi mã PHP của theme, tạo một child theme để tránh mất các thay đổi khi theme chính được cập nhật. Tạo một thư mục con (child theme) trong thư mục “themes” của WordPress và tạo một file functions.php để thêm mã PHP tùy chỉnh.
- Chỉnh sửa file functions.php: Nếu bạn không sử dụng child theme, bạn có thể mở file functions.php của theme chính để thêm mã PHP tùy chỉnh. Hãy thật thận trọng vì mọi thay đổi sẽ bị mất khi theme cập nhật. Bạn điều hướng đến Appearance -> Theme Editor và chọn functions.php để chỉnh sửa trực tiếp.
- Sử dụng plugin PHP tùy chỉnh: Cài đặt một plugin PHP tùy chỉnh như Code Snippets để thêm mã PHP mà không cần phải sửa trực tiếp vào mã nguồn theme.
Mình lưu ý rằng việc sửa mã PHP đòi hỏi kiến thức kỹ thuật cao hơn và có thể gây ra lỗi bảo mật hoặc tương thích.
3.6. Chỉnh sửa code CSS WordPress thông qua Theme Editor
Trong WordPress, bạn có thể chỉnh sửa CSS thông qua Theme Editor trực tiếp từ trang quản trị WordPress. Dưới đây là hướng dẫn chi tiết:
- Đăng nhập vào trang quản trị WordPress bằng tài khoản quản trị
- Trong menu bên trái, điều hướng đến Appearance (Giao diện) và chọn Theme Editor (Trình soạn thảo Theme). Tại đây, bạn sẽ thấy danh sách các tệp trong theme
- Chọn tệp có tên là style.css hoặc stylesheet (tên có thể thay đổi tùy thuộc vào theme bạn đang sử dụng)
- Bạn sẽ thấy mã CSS của theme. Tìm đến vị trí bạn muốn thêm hoặc chỉnh sửa CSS và thực hiện các thay đổi cần thiết. Ghi nhớ rằng việc chỉnh sửa trực tiếp trong Theme Editor có thể gây rủi ro nên tốt hơn hãy sao lưu tệp CSS trước khi thực hiện bất kỳ thay đổi nào.
- Sau khi chỉnh sửa CSS, nhấp vào nút Update File để lưu các thay đổi của bạn.
- Mở trang web của bạn trong một tab mới và kiểm tra xem các thay đổi CSS đã được áp dụng chính xác hay không.
Lưu ý rằng nếu sau này bạn cập nhật theme thì những thay đổi bạn thực hiện trong Theme Editor có thể bị ghi đè. Vì vậy, nếu bạn có nhiều chỉnh sửa CSS thì nên xem xét việc sử dụng một plugin quản lý CSS tùy chỉnh hoặc tạo child theme sẽ an toàn hơn. Các chỉnh sửa code CSS WordPress không bị thay đổi khi có cập nhật theme.
3.7. Chỉnh sửa code CSS với WordPress Customize
Chỉnh sửa CSS thông qua WordPress Customizer là một cách an toàn và thuận tiện để tùy chỉnh giao diện của trang web của bạn.
- Đăng nhập vào trang quản trị WordPress.
- Trong menu bên trái, chọn Appearance (Giao diện) và sau đó chọn Customize (Tùy chỉnh).
- Trong WordPress Customizer, chọn Additional CSS (CSS bổ sung). Đây là nơi bạn có thể thêm và chỉnh sửa mã CSS tùy chỉnh.
- Trong mục Additional CSS, bạn sẽ thấy một ô văn bản trống để thêm hoặc chỉnh sửa mã CSS. Viết hoặc dán mã CSS đã copy trực tiếp vào ô văn bản này.
- Khi bạn thêm hoặc chỉnh sửa CSS, bạn sẽ thấy ngay những thay đổi trong trình xem trước bên phải. Nếu nó đã được như mong đợi thì nhấp vào nút Publish (Xuất bản) để lưu các thay đổi.
Lưu ý rằng mọi thay đổi bạn thực hiện trong phần Additional CSS chỉ áp dụng cho theme hiện tại và sẽ không bị mất khi bạn cập nhật theme. Tuy nhiên, nếu bạn chuyển sang một theme mới, bạn cần kiểm tra lại các chỉnh sửa CSS để đảm bảo chúng vẫn phù hợp với giao diện mới. Mình thấy đây là cách hay để thêm mã CSS tùy chỉnh mà không làm ảnh hưởng đến theme gốc và dễ quản lý hơn.
3.8. Hướng dẫn chỉnh sửa code theme WordPress với plugin CSS Hero
CSS Hero là một plugin WordPress mạnh mẽ để tùy chỉnh giao diện của trang web mà không cần biết mã CSS. Bạn có thể chỉnh sửa code theme WordPress theo cách sau:
- Cài đặt và kích hoạt CSS Hero: Đăng nhập vào trang quản trị WordPress -> chọn Plugins (Plugin) -> Add New (Thêm mới). Tìm kiếm CSS Hero trong hộp tìm kiếm. Chọn plugin CSS Hero và nhấp vào nút Install Now (Cài đặt ngay). Khi cài đặt hoàn tất, nhấp vào nút Activate (Kích hoạt).
- Mở CSS Hero: Sau khi kích hoạt, bạn sẽ thấy một biểu tượng CSS Hero ở phía trên trang web, nhấp vào biểu tượng đó.
- Chọn phần cần chỉnh sửa: Trong giao diện CSS Hero, nhấp vào phần của trang web bạn muốn chỉnh sửa. CSS Hero sẽ hiển thị một số lựa chọn tùy chỉnh cho phần đó.
- Sử dụng CSS Hero Editor: Trong giao diện CSS Hero Editor, bạn có thể sử dụng các công cụ kéo và thả để điều chỉnh các thuộc tính như màu sắc, kích thước, khoảng cách… Bạn cũng có thể chọn tab CSS để thêm hoặc chỉnh sửa mã CSS tùy chỉnh.
- Xem trước và lưu: CSS Hero cung cấp chế độ xem trước để bạn có thể kiểm tra các thay đổi trước khi áp dụng chúng. Nhấp vào nút Preview (Xem trước) để xem trước giao diện sau khi chỉnh sửa. Nếu bạn hài lòng với kết quả, nhấp vào nút Save and Publish (Lưu và Xuất bản) để áp dụng các thay đổi.
CSS Hero là một công cụ trực quan và dễ sử dụng, tuy nhiên bạn có thể phải trả phí để sử dụng toàn bộ tính năng của nó. Đối với người dùng không muốn thao tác trực tiếp với mã CSS, CSS Hero là một lựa chọn hay để tùy chỉnh giao diện WordPress.
4. Chỉnh sửa code theme WordPress bằng Theme Editor
Đây là cách sửa code theme WordPress trực tiếp.
- Đăng nhập vào trang quản trị WordPress.
- Trong menu bên trái, chọn Appearance (Giao diện) -> Theme Editor (Trình soạn thảo Theme).
- Tại đây, bạn sẽ thấy danh sách các tệp trong theme, chọn tệp muốn chỉnh sửa từ menu bên phải.
- Trong trình soạn thảo, bạn có thể xem mã nguồn của tệp đã chọn. Thực hiện các thay đổi mong muốn trong mã nguồn này.
- Sau khi chỉnh sửa mã nguồn, nhấp vào nút Update File (hoặc Save Changes hoặc một nút tương tự) để lưu các thay đổi.
- Cuối cùng, mở trang web trong một tab mới và kiểm tra xem các thay đổi đã được áp dụng chính xác hay không.
Chỉnh sửa trực tiếp trong Theme Editor có thể rủi ro nếu thao tác sai. Thay đổi này cũng có thể mất khi bạn cập nhật theme hoặc khi có sự cố. Nếu bạn có nhiều chỉnh sửa CSS hoặc một thay đổi lớn về mã nguồn thì nên xem xét sử dụng child theme.
5. Hướng dẫn cách chỉnh sửa code theme WordPress thông qua FTP
Chỉnh sửa mã nguồn của theme WordPress qua FTP là một phương pháp an toàn và linh hoạt. Dưới đây là cách bạn có thể thực hiện điều này:
Bước 1: Chuẩn bị tải và cài đặt một ứng dụng FTP
- Sử dụng một ứng dụng FTP như FileZilla, WinSCP, hoặc Cyberduck để kết nối với máy chủ của bạn. Tải và cài đặt ứng dụng này nếu bạn chưa có.
- Chuẩn bị thông tin đăng nhập FTP: Để kết nối với máy chủ qua FTP, bạn cần biết địa chỉ máy chủ FTP, tên đăng nhập, mật khẩu và cổng FTP (thông thường là cổng 21).
Bước 2: Kết nối với máy chủ qua FTP
- Mở ứng dụng FTP: Mở ứng dụng FTP bạn đã tải và cài đặt trước đó.
- Nhập thông tin đăng nhập: Nhập địa chỉ máy chủ FTP, tên đăng nhập, mật khẩu và cổng FTP vào ứng dụng FTP.
- Kết nối với máy chủ: Nhấn nút kết nối để kết nối với máy chủ của bạn.
Bước 3: Định vị và chỉnh sửa mã nguồn
- Điều hướng đến thư mục gốc của trang web WordPress trên máy chủ.
- Tìm và mở tệp mã nguồn bạn muốn chỉnh sửa bằng một trình soạn thảo văn bản, như Notepad++ hoặc Sublime Text. Ví dụ: Nếu bạn muốn chỉnh sửa file functions.php, điều hướng đến thư mục wp-content/themes/your-theme và mở tệp functions.php.
- Chỉnh sửa mã nguồn theo nhu cầu của bạn.
- Lưu thay đổi và đóng tệp mã nguồn.
Bước 4: Kiểm tra thay đổi
- Mở trình duyệt và kiểm tra trang web để đảm bảo rằng các thay đổi đã được áp dụng chính xác.
- Nếu có lỗi, kiểm tra lại mã nguồn để đảm bảo không có lỗi cú pháp hoặc lỗi logic.
Lưu ý quan trọng cho bạn: Luôn lưu bản sao lưu của tệp trước khi thực hiện bất kỳ thay đổi nào. Sử dụng trình soạn thảo văn bản chuyên nghiệp để tránh gặp vấn đề mã nguồn không mong muốn. Chỉ chỉnh sửa code theme WordPress nếu bạn hiểu rõ về tác động của các thay đổi và làm thế nào để khắc phục lỗi.
Hi vọng qua bài viết này bạn đã biết cách chỉnh sửa code theme WordPress để có thể tùy chỉnh và quản lý website của mình tốt hơn. Nếu cần những hỗ trợ nâng cao hơn từ chuyên gia, bạn có thể liên hệ Miliweb.vn để được xử lý nhanh chóng và chuyên nghiệp nhé!
