WordPress là một trong những nền tảng website phổ biến hiện nay. Tuy nhiên để sở hữu 1 site WordPress chuyên nghiệp thì bạn cần phải biết cách chỉnh sửa header, footer và background. Bài viết này, BKNS sẽ hướng dẫn bạn cách chỉnh sửa header, footer và background vô cùng đơn giản.
Cách chỉnh sửa header
Với header, sau khi đăng nhập vào tài khoản quản trị, lệnh chuyển sẽ đưa bạn đến với Theme Panel. Tại đây chứa các tính năng cấu hình giao diện được cung cấp sẵn. Mỗi theme sẽ hỗ trợ những chức năng tương ứng khác nhau nhưng các theme có giá cao thường mang đến nhiều tính năng hơn.
Chỉnh sửa với Header Style WordPress
Trước tiên, bạn click chọn Header để thay đổi Header Style (kiểu giao diện cho phần đầu website). Theme Newspaper sẽ cung cấp 12 kiểu khác nhau cho bạn, sau khi thay đổi hãy nhấn SAVE SETTINGS và refresh (F5) lại website để trải nghiệm thành quả.
Chỉnh sửa Top Bar WordPress
Top Bar WordPress cũng là một có thể điều chỉnh khi thực hiện chỉnh sửa Header. Khu vực này là nơi chứa các chuyên mục giống như thanh menu. Vị trí của Top Bar sẽ nằm ở trên cùng menu và thường được sử dụng khi website có quá nhiều chuyên mục.
Khác với menu, các theme hỗ trợ Top Bar luôn đi kèm nút để enable/disable (bật/tắt). Nếu không sử dụng, hãy disable tính năng này để giảm thời gian tải trang.
Tùy chỉnh mục Main Menu WordPress
Main Menu là khu vực cấu hình menu, những trang web sử dụng mã nguồn WordPress có thể được thiết kế khá phức tạp. Vì vậy đôi khi phải sử dụng nhiều hơn một menu. Theme Newspaper là một ví dụ điển hình, dưới đây là chú thích cho các tính năng trong Main Menu.
Header Menu
Lựa chọn Menu hiển thị chính trong website.
Mega Menu Preloader
Khi được chọn menu con sẽ đổ xuống từ thanh menu chính. Tuy nhiên thì đây không phải option phổ biến và sắp xếp hơi lộn xộn vì thế bạn nên chọn “No Preloading” để tắt chức năng.
Sticky Menu
Việc chỉnh sửa Header ở Sticky Menu cho phép thanh menu di chuyển theo thanh cuộn khi người dùng kéo – thả. Bạn có thể chọn “Always Sticky => SAVE”, refresh lại website và kéo thanh trượt để xem hiệu ứng.
Logo on Sticky Menu
Chọn logo trên Sticky Menu. Hãy chọn “Mobile logo” để rút gọn logo, một bản nhỏ hơn so với logo chính có kích thước lớn.
Cách tạo Widget cho Header WordPress
Bước 1: Tạo một widget area
Thêm đoạn code bên dưới vào file function.php của theme tại Appearance => Editor.
Lưu lại và tìm đến “Appearance => Widget”, bạn sẽ thu được một Widget mới có tên là “Custom Header Widget Area” như ảnh – vậy là quá trình tạo Widget Header đã thành công. Cách sử dụng tương tự các Widget khác, bạn có thể kéo thả các tiện ích vào như lịch, quảng cáo…
Bước 2: Đưa widget vừa tạo mới ra ngoài trang web
Lúc này, dù đã có thể cấu hình Widget cho Header nhưng bạn vẫn chưa thể nhìn thấy nó xuất hiện trên website. Hãy gọi widget bằng dòng lệnh bên dưới, copy và dán vào file header.php tại “Appearance => Editor”. Lưu ý, muốn widget xuất hiện tại đâu thì chèn đoạn code ở vị trí đó.
Refresh (F5) lại website để kiểm tra lại widget vừa tạo. Nếu Widget xuất hiện là thành công, ngược lại, thử một vị trí khác trong file header.php. Đối với banner bạn cần chèn link hình ảnh vào widget hoặc chọn một đối tượng khác như lịch để kiểm tra.
Bước 3: Thêm CSS cho tiện ích widget
Để hình ảnh hiển thị tối ưu. Bạn có thể bổ sung thêm CSS để giúp căn chỉnh và sắp xếp vị trí gọn gàng hơn. Copy và dán đoạn code dưới vào file style.css theo “Appearance => Customize => Additional CSS”.
Sau đó, lưu lại và refresh website một lần nữa để kiểm tra.
Thao tác chỉnh sửa Footer cũng có nhiều điểm tương đồng với quá trình chỉnh sửa Header phía trên. Tuy nhiên, bởi Footer thường dùng để bổ sung thông tin cho website, nằm ở phần cuối trang nên bạn cần xác định để phân chia bố cục sao cho hợp lý.
Tại Theme Panel, chọn Footer, khu vực Footer Setting là nơi cài đặt bố cục, thông tin liên hệ, các địa chỉ mạng xã hội, sở hữu bản quyền…
Theme Newspaper sẽ hỗ trợ bạn một số mẫu giao diện cho Footer. Bằng cách này bạn có thể chia cột, chỉnh sửa nội dung trong từng cột… trong lúc tùy chỉnh Footer. Tuy nhiên, không nhiều theme WordPress có chức năng này, thông thường bạn phải kết hợp chỉnh sửa trong khu vực Widget.
Kết nối trực tiếp đến tài khoản Instagram và hiển thị các hình ảnh nổi bật trong Footer. Tính năng này thường không phổ biến và việc tải lên nhiều hình ảnh có thể mất nhiều thời gian.
Footer cho website với logo, thông tin và social icon
Người dùng cũng có thể tùy chỉnh Footer ở phần Footer Info Content:
- Footer Logo & Footer Retina Logo: Cho phép tải logo lên ở cột đầu tiên của Footer.
- Logo ALT Attribute & Logo Title Attribute: Tương tự như thông tin cho logo ở Header. Tại đây, hãy nhập đầy đủ và chính xác tất cả các mục cần thiết.
- Footer text: Nội dung bên dưới logo ở cột đầu tiên của Footer.
- Your email: Nhập địa chỉ email để hiển thị trong Footer hoặc bạn có thể điền trong Footer text như ảnh minh họa.
- Show Social Icon: Sử dụng các biểu tượng mạng xã hội bằng cách chèn đường dẫn liên kết.
Bạn có thể tùy chỉnh Background Footer ở các phần sau:
Footer background: Chọn ảnh nền cho Footer, nên hạn chế dùng ảnh để giảm dung lượng website.
Repeat, Size, Position và Background Opacity: Tùy chỉnh kích thước, hiệu ứng cho ảnh nền Footer. Nếu không dùng ảnh thì bạn không cần cấu hình các phần này.
Sub Footer Setting
Tại khu vực Sub Footer Setting, bạn cũng có thể tùy chỉnh Footer:
- Show Sub-footer: Bổ sung thêm thông tin cho website bên dưới Footer.
- Footer Copyright Text: Thông tin về bản quyền ví dụ: abc.com 2008 – 2009.
- Copyright symbol: Hiển thị thêm biểu tượng bản quyền.
- Footer Menu: Thêm một menu bất kỳ bên dưới Footer.
Chỉnh sửa Background WordPress
Cách thiết lập và tùy chỉnh Background WordPress
Bước 1: Truy cập khu vực cài đặt background WordPress tại “Appearance => Background”.
Bước 2: Tiếp tục click vào “Select Image”, chọn một hình ảnh từ thư viện hoặc upload từ máy tính.
Bước 3: Sau khi thiết lập xong, refresh lại website bạn sẽ nhìn thấy ảnh nền xuất hiện bên dưới.
Bình luận bài viết