Dù bạn có thuê thiết kế website chuyên nghiệp thì cũng không tránh khỏi những lúc muốn chỉnh sửa yếu tố nào đó của theme. Dưới đây, mình sẽ chia sẻ cách chỉnh sửa theme WordPress dạng cơ bản cho những bạn chưa có nhiều kinh nghiệm về lập trình và cách chỉnh sửa nâng cao.
Với cả hai hướng dẫn chỉnh sửa theme WordPress dưới đây, bạn đều phải thực hiện chung các bước ban đầu là:
- Sao lưu trang web: Nếu bạn chưa có kinh nghiệm tùy biến theme WordPress, bạn nên sao lưu trước khi thực hiện bất kỳ thay đổi nào. Như vậy, nếu sự cố xảy ra, bạn vẫn có thể khôi phục website về trạng thái ban đầu.
- Truy cập vào trang quản trị WordPress của website.
Cách chỉnh sửa Theme WordPress cơ bản
Chỉnh sửa giao diện chính
Trong trang quản trị WordPress, bạn chọn Appearance (Giao diện) -> Themes Editor (trình chỉnh sửa chủ đề). Bước truy cập này cũng có thể thay đổi tùy vào cài đặt cụ thể của theme và quyền truy cập.
Nếu bạn muốn tùy chỉnh theme WordPress mới, hãy cài đặt trước theme mới từ thư viện hoặc tải theme đó lên.
Cách chỉnh theme WordPress ở bước này bao gồm: Trong trình chỉnh sửa mã nguồn, bạn có thể lựa chọn và chỉnh sửa tệp style.css để tùy chỉnh CSS hoặc chỉnh sửa các tệp template PHP (như header.php, footer.php) để thay đổi cấu trúc của website.
Hãy sử dụng trình chỉnh sửa mã nguồn để thay đổi HTML, CSS và PHP tùy theo mong muốn. Tuy nhiên, để làm được điều này, bạn cần phải có kiến thức về lập trình. Nếu theme WordPress sử dụng các trình tạo trang kéo – thả sẽ dễ dàng hơn cho bạn. Bạn có thể linh hoạt chọn lựa các tùy chỉnh giao diện trên theme mà chỉ cần kéo và thả là được.
Sau khi chỉnh sửa xong, bạn chọn Update hoặc Save để lưu lại thay đổi, rồi kiểm tra lại xem giao diện có hiển thị đúng như mong muốn hay chưa.
Bạn cũng có thể thực hiện một cách khác, đó là sử dụng chủ đề con. Đầu tiên, hãy tạo và kích hoạt một chủ đề con trước khi chỉnh sửa, sau đó hãy sửa đổi trên đây. Như vậy, bạn có thể tùy biến theme WordPress gốc ban đầu mà không bị mất các chỉnh sửa khi cập nhật theme.
Hướng dẫn chỉnh sửa Identity của WordPress theme
Chỉnh sửa identity của theme WordPress có thể bao gồm việc thay đổi tiêu đề, mô tả, logo, biểu trưng và các yếu tố khác liên quan đến thương hiệu hoặc đặc điểm nhận diện của trang web.
Trong trang quản trị WordPress, bạn có thể thực hiện các bước sửa Identity theme WordPress cơ bản sau đây:
- Sửa tiêu đề và mô tả: bạn chọn Settings (cài đặt) -> General (tổng quan). Ở đây, bạn có thể chỉnh sửa tiêu đề trang web (Site Title) và mô tả (Tagline)
- Chỉnh sửa logo và biểu trưng: bạn chọn Appearance (Giao diện) -> Customize (Tùy chỉnh). Tùy theo theme, bạn có thể tìm các phần tùy chỉnh cho logo và biểu trưng (favicon) trong mục Site Identity hoặc Header. Hãy thay đổi hoặc tải lên logo mới và biểu trưng.
- Chỉnh sửa menu: bạn chọn Appearance -> Menus (Thực đơn). Tại đây, bạn có thể tạo và chỉnh sửa (thêm, xóa, tạo liên kết menu,…) các menu cho trang web.
- Chỉnh sửa biểu trưng trình duyệt (favicon): để thay đổi biểu trưng trình duyệt (favicon), bạn cần tạo một biểu trưng có kích thước nhỏ (thường 16×16 pixel hoặc 32×32 pixel) và tải lên trong mục tùy chỉnh của theme hoặc sử dụng một plugin quản lý biểu trưng (All in One Favicon, Favicon Rotator, Favicon by RealFaviconGenerator, Custom Favicon,…).
- Chỉnh sửa hình ảnh nền và màu sắc: bạn chọn Appearance -> Customize. Trong phần Background Image (Hình ảnh nền) và Colors (Màu sắc), bạn có thể thay đổi hình ảnh nền và màu sắc của trang web.
Cuối cùng, sau khi hoàn thành các tùy biến theme WordPress, bạn hãy chọn Publish hoặc Save để lưu các thay đổi. Nhớ kiểm tra lại website xem các identity mới có hiển thị đúng như mong muốn không nhé.
Cách chỉnh sửa mục thông tin Widget
Trước khi thực hiện sửa theme WordPress ở mục thông tin Widget, bạn cần biết vị trí của nó trong theme. Thông thường, những mục này nằm ở tệp template của theme hoặc trong tệp functions.php.
Hướng dẫn chỉnh sửa mục thông tin Widget qua tệp functions.php
Bạn vào mục Appearance và chọn Theme Editor.
Tìm tệp functions.php và mở nó để chỉnh sửa.
Bạn có thể sử dụng PHP để tùy chỉnh mục thông tin widget. Ví dụ, để thay đổi tiêu đề của widget, bạn có thể sử dụng hàm register_sidebar và thêm đoạn mã tùy chỉnh như sau:
function custom_sidebar_widget() {
register_sidebar(array(
‘name’ => ‘Custom Widget Area’,
‘id’ => ‘custom-widget’,
‘description’ => ‘This is a custom widget area.’,
‘before_widget’ => ‘<div class=”widget”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2 class=”widget-title”>’,
‘after_title’ => ‘</h2>’,
));
}
add_action(‘widgets_init’, ‘custom_sidebar_widget’);
Sau khi chỉnh sửa xong, hãy lưu lại tệp functions.php.
Hướng dẫn chỉnh sửa mục thông tin Widget thông qua tệp template
Nếu mục thông tin widget được định nghĩa trong tệp template, bạn cũng có thể tùy chỉnh nó bằng cách chỉnh sửa tệp template. Ví dụ, để thay đổi giao diện của một widget area, bạn có thể mở tệp template chứa nó rồi chỉnh sửa mã HTML và CSS.
Cách tùy chỉnh theme WordPress ở Header Image
Hình ảnh đầu trang có vai trò rất quan trọng bởi nó là điểm đầu tiên khách hàng nhìn thấy khi vừa truy cập vào website. Do đó, khi sửa theme WordPress, bạn nên chú trọng đến header image. Sau khi chọn được hình ảnh ưng ý, hãy làm các bước như hướng dẫn sau đây:
Mỗi theme sẽ có cách tùy chỉnh riêng nhưng thông thường, bạn có thể tìm cài đặt header image trong Customizer hoặc Theme Options.
- Tùy chỉnh qua Customizer: Chọn Appearance -> chọn Customize -> tìm và chọn Header hoặc Header Image. Lúc này, bạn có thể thấy tùy chọn tải lên hình ảnh hoặc tùy chỉnh theo cách cụ thể của theme.
- Tùy chỉnh qua Theme Options: Một số theme sẽ cho chỉnh sửa header image trong mục Theme Options hoặc Theme Settings. Bạn điều hướng đến phần này để tải lên hình ảnh và chỉnh sửa header image.
Bạn lưu ý rằng hầu như các theme sẽ yêu cầu hình ảnh có kích thước hoặc tỷ lệ cụ thể, hãy kiểm tra kĩ trong hướng dẫn của theme để chuẩn bị hình đúng yêu cầu.
Một số theme cũng cho phép bạn cài đặt cách hiển thị header image. Bạn có thể chọn hiển thị hình ảnh này trên tất cả các trang, trang chủ, trang con hoặc chỉ một trang cụ thể nào đó.
Sau khi tùy chỉnh xong, hãy chọn Publish hoặc Save để lưu các thay đổi. Cuối cùng, kiểm tra trang web để đảm bảo rằng header image mới hiển thị đúng.
CSS chỉnh sửa vấn đề bên ngoài WordPress
Bước đầu, bạn phải tìm trình chỉnh sửa CSS. Từ trang quản trị, hãy chọn Appearance (Giao diện) -> Customize (Tùy chỉnh). Trong trình tùy chỉnh, bạn thường sẽ thấy mục Additional CSS hoặc tương tự. Đây là nơi bạn có thể nhập mã CSS tùy chỉnh.
Bạn mở mục Additional CSS và bắt đầu nhập mã CSS. Mã CSS sẽ phải theo cú pháp của CSS (Cascading Style Sheets). Ví dụ như:
/* Thay đổi màu nền */
body {
background-color: #f2f2f2;
}
/* Đổi màu văn bản */
p {
color: #333;
}
/* Tùy chỉnh kích thước font chữ */
h1 {
font-size: 24px;
}
Sau khi chỉnh sửa xong, hãy nhấn Publish hoặc Save để lưu rồi kiểm tra lại xem CSS mới được áp dụng và vấn đề đã được giải quyết chưa.
Nếu bạn muốn can thiệp sâu hơn vào mã CSS hoặc thực hiện tùy chỉnh phức tạp hơn, bạn có thể sử dụng một plugin quản lý mã CSS tùy chỉnh hoặc chỉnh sửa tệp CSS của theme trực tiếp. Tuy nhiên, nếu bạn chỉnh sửa mã CSS của theme trực tiếp, các thay đổi này có thể ghi đè khi theme được cập nhật. Mình khuyên bạn nên sử dụng chủ đề con (child theme) để không gặp phải nguy cơ này.
Ngoài ra, hãy học cách sử dụng trình kiểm tra phần mở rộng (inspector) của trình duyệt để xác định các lỗi CSS và tìm kiếm các phần tử HTML cụ thể rồi chỉnh sửa CSS của chúng.
Hướng dẫn chỉnh sửa theme WordPress nâng cao
Dưới đây, mình sẽ hướng dẫn bạn thay đổi một số yếu tố nâng cao về giao diện.
Tùy chỉnh Menu chính
- Bạn chọn Appearance (Giao diện) -> Menus (Thực đơn).
- Trong mục Menus có danh sách các menu đã tạo. Chọn menu chính mà bạn muốn chỉnh sửa hoặc tạo một menu mới bằng cách nhấn vào Create a new menu.
- Để thêm liên kết menu, bạn có thể chọn từ danh sách các trang, bài viết hoặc URL tùy chỉnh và nhấn Add to Menu.
- Để xóa liên kết menu, bạn chỉ cần nhấn vào liên kết đó trong danh sách menu và sau đó chọn Remove
- Bạn có thể kéo và thả liên kết menu để sắp xếp chúng theo thứ tự bạn muốn. Bạn cũng có thể nhấn vào một liên kết menu để tùy chỉnh các thuộc tính như tiêu đề, mô tả và mục tiêu của liên kết.
- Tạo mục menu con (dropdown menu) bằng cách kéo liên kết menu và đặt nó bên dưới liên kết gốc. Khi bạn thấy liên kết menu nằm phía bên phải và thụt vào trong, nó sẽ trở thành mục menu con.
- Sau khi chỉnh sửa xong, hãy nhấn Save Menu để lưu các thay đổi.
Trong trường hợp bạn muốn thiết lập menu chính trên trang web, hãy điều hướng đến mục Appearance và chọn Customize. Tại đây, hãy chọn một menu đã tạo làm menu chính.
Bước cuối cùng luôn là kiểm tra trang web của bạn để chắc chắn rằng menu mới được hiển thị đúng cách.
Cách điều chỉnh các hiển thị khi xem bài viết
Từ bảng điều khiển WordPress, bạn chọn Appearance -> Customize. Ở đây, bạn sẽ thấy các tùy chọn chỉnh sửa bố cục bài viết, bao gồm cách hiển thị tiêu đề, hình ảnh đại diện, các phần nội dung và chia sẻ mạng xã hội,… Bạn có thể làm theo các cách sau đây:
- Sử dụng theme options hoặc settings của plugin: Một số theme và plugin cung cấp các tùy chọn tùy chỉnh cho cách hiển thị bài viết. Điều hướng đến mục Theme Options (Tùy chọn theme) hoặc Settings (Cài đặt) của plugin để tìm các tùy chọn này.
- Sử dụng plugin tùy chỉnh bài viết: Có nhiều plugin tùy chỉnh bài viết cho WordPress mà bạn có thể cài đặt và sử dụng như Advanced Custom Fields và Custom Post Type UI. Các plugin này cho phép bạn tạo các loại bài viết tùy chỉnh và tùy chỉnh cách hiển thị chúng.
- Chỉnh sửa mã nguồn trực tiếp: Nếu bạn muốn can thiệp sâu hơn vào mã nguồn, bạn có thể sử dụng chủ đề con (child theme) để tạo một phiên bản tùy chỉnh của tệp single.php hoặc content.php (tùy theo từng theme). Sau đó, bạn có thể chỉnh sửa mã HTML và CSS để tùy chỉnh cách hiển thị bài viết.
Sau khi chỉnh sửa xong, hãy nhấn Publish hoặc Save để lưu thay đổi rồi kiểm tra lại website lần cuối.
Hướng dẫn cách sửa theme WordPress trên định dạng Sidebar
Để tùy chỉnh sidebar, bạn cần tìm và chỉnh sửa tệp mã nguồn của theme của bạn. Thường, sidebar được định nghĩa trong tệp sidebar.php, tuy nhiên, tên tệp có thể khác tùy theo theme.
Mở tệp sidebar.php bằng một trình soạn thảo mã nguồn hoặc trình quản lý tệp. Trong tệp này, bạn có thể thêm, sửa hoặc xóa mã HTML và PHP để tùy chỉnh giao diện của sidebar.
Sau khi chỉnh sửa xong, hãy lưu tệp và kiểm tra trang web để đảm bảo rằng sidebar đã được tùy chỉnh theo mong muốn.
Cách tùy chỉnh các thẻ HTML trong theme WordPress
Các thẻ HTML trong theme WordPress thường được định nghĩa trong tệp mã nguồn của theme hoặc trong các tệp template. Điều hướng đến các tệp này để tìm và chỉnh sửa các thẻ HTML theo mong muốn.
Cuối cùng, bạn lưu và kiểm tra lại website.
Trên đây là những cách sửa theme WordPress theo từng thành phần, từ cơ bản đến nâng cao. Bạn có thể chỉnh sửa thủ công, sử dụng các plugin chỉnh sửa theme WordPress hoặc can thiệp vào mã nguồn. Bạn lưu ý rằng việc chỉnh sửa theme có thể gây phát sinh lỗi nếu thực hiện không đúng cách. Vì vậy, hãy bám sát hướng dẫn của mình nhé! Trong trường hợp bạn không hoàn toàn tự tin, đặc biệt là khi can thiệp mã nguồn, bạn có thể liên hệ mình để chỉnh sửa theme hoặc mua theme wordpress giá rẻ theo mong muốn của bạn.
