Nội dung chính
Xem Transparent Header là gì 2024
WordPress là mã nguồn linh hoạt, giao diện trực quan. Bạn có thể tùy chỉnh các thành phần Header, Footer và Background một cách dễ dàng.
Các thao tác sử dụng và tùy chỉnh WordPress khá đơn giản
Việc sử dụng website trước đây đòi hỏi người dùng phải trang bị các kiến thức và kỹ năng lập trình phức tạp để thiết kế, sửa chữa hay thay đổi các thành phần đã thiết lập. Tuy nhiên, sự xuất hiện của WordPress đã xóa bỏ hoàn toàn những hạn chế đó và nghiễm nhiên, nó đã trở thành mã nguồn phổ biến nhất hiện nay.
Header và Footer được cung cấp tùy chỉnh có sẵn
Để tùy chỉnh Header và Footer trên WordPress, trước hết bạn cần đăng nhập vào tài khoản quản trị của website. Cụ thể, chúng ta sẽ lấy theme Newspaper làm ví dụ trong trường hợp này vì đây là một theme có Panel tùy chỉnh tương đối phức tạp nhưng bù lại, Newspaper lại rất phổ biến nhờ giao diện đẹp mắt, ấn tượng, tích hợp nhiều tính năng hỗ trợ.
Một trong những ưu điểm lớn nhất được kể đến chính là: người dùng có thể tùy chỉnh WordPress Header, Footer hay Background một cách dễ dàng, đơn giản theo hướng dẫn dưới đây.
Tuy nhiên, ưu điểm trên cũng chính là nhược điểm bởi nếu bạn enable (khởi động) tất cả tính năng dù không sử dụng đến, website sẽ trở nên nặng nề, làm mất nhiều thời gian chờ đợi tải của người dùng.
Cách tùy chỉnh Header trong WordPress
Khu vực Theme Panel của theme Newspaper
Bắt đầu từ Header, sau khi đăng nhập vào tài khoản quản trị, lệnh chuyển sẽ đưa bạn đến Theme Panel. Đây là khu vực 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.
Cách tùy chỉnh Header Style WordPress
Đầu tiên, hãy chọn mục 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ả.
Cách tùy chỉnh Top Bar WordPress
Top bar bổ sung thông tin khi có quá nhiều mục
Top bar cũng là một bộ phận có thể thay đổi bởi người dùng khi tùy chỉnh Header. Bạn có thể hiểu khu vực này là nơi chứa các chuyên mục, tương tự 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.
Chính vì vậy, 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.
Cách tùy chỉnh mục Main Menu WordPress
Khu vực cấu hình menu của theme Newspaper
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. Lúc này, việc sử dụng nhiều menu trong cùng 1 website không có gì lạ. 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. Phong cách này không thật sự phổ biến vì thế bạn nên chọn No Preloading để tắt chức năng.
- Sticky Menu
Tùy chỉnh 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.
Ví dụ về mẫu logo trên Header và Sticky Menu
Logo & Favicon
Logo upload và Retina Logo upload: Tải lên logo cho website, chú ý dùng định dạng ảnh .png.
Favicon: Là hình ảnh nhỏ sẽ hiển thị bên trái của tab trên trình duyệt. Định dạng ảnh nên dùng là .png, kích thước 20×20 pixel.
Favicon có kích thước nhỏ và nằm trên tab trình duyệt
- Logo Alt Attribute
Nhập mô tả cho logo, những dòng này không được hiển thị trên website vì thế, thường dùng để hỗ trợ SEO.
- Logo Title Attribute
Nhập tên cho logo, tên logo sẽ xuất hiện khi khách truy cập website từ trình duyệt web.
Rê chuột vào logo trên trình duyệt web để xem tên của logo
- Text logo và Text Logo Tagline
Có thể hiểu là những thông tin mô tả cho logo, một số kiểu menu có thể đưa các thông tin này lên web. Hãy chú ý điền đầy đủ và chính xác cho cả 2 mục.
Logo for Mobile
- Logo Mobile & Retina Logo Mobile: Logo dành cho phiên bản di động.
- iOS Bookmarklet: Logo hoặc một hình bất kỳ sẽ xuất hiện trong Bookmark của trình duyệt safari trên IOS.
Khu vực cấu hình cho Footer của theme Newspaper
Thao tác tùy chỉnh Footer cũng có nhiều điểm tương đồng với quá trình thay đổi 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.
Phần bổ sung giúp bạn chèn thêm các thông tin và menu
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.
Cách tạo Widget cho Header trong WordPress
Trong WordPress, ngoài các theme hỗ trợ nhiều tính năng vẫn tồn tại một số theme thiếu những tính năng cơ bản, chẳng hạn như không hỗ trợ Widget cho Header. Dù vậy, chỉ với vài bước đơn giản là bạn có thể tự mình tạo một Widget.
Tại sao cần tạo Widget Header cho website WordPress?
Khu vực Widget Header thường được đặt các banner quảng cáo
Tạo widget Header rất hữu ích, đặc biệt khi bạn có muốn chèn các banner quảng cáo thật nổi bật trên website hoặc những thông báo quan trọng cần gửi đến người truy cập. Lý do lớn nhất là bởi vị trí này rất thu hút điểm nhìn, người dùng sẽ để ý chúng đầu tiên ngay khi vừa tải website lên. Vì vậy, hãy cân nhắc tạo Widget Header ngay cho website.
Hướng dẫ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. function wpb_widgets_init() { register_sidebar( array( ‘name’ => ‘Custom Header Widget Area’, ‘id’ => ‘custom-header-widget’, ‘before_widget’ => ‘ ‘, ‘after_widget’ => ‘ ‘, ‘before_title’ => ‘ ‘, ‘after_title’ => ”, ) ); } add_action( ‘widgets_init’, ‘wpb_widgets_init’ );
Widget mới xuất hiện sau khi chèn code vào file function.php
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í đó. if ( is_active_sidebar( ‘custom-header-widget’ ) ) : ?>
Widget đã xuất hiện bên dưới header sau khi chèn code
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
Trong ví dụ trên, chúng ta có một banner quảng cáo nhưng hình ảnh hiển thị chưa được 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.
Bổ sung CSS giúp banner trở nên phù hợp và cân đối với website
Cách tạo và tùy chỉnh Background WordPress
Background WordPress là gì?
Background WordPress là hình nền cho website, hình ảnh này sẽ nằm bên dưới các đối tượng trong trang web.
Vì vậy, background có kích thước lớn và thường chỉ có thể nhìn thấy các góc, cạnh. Trong WordPress, bạn hoàn toàn có thể tùy chỉnh Background theo ý muốn.
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.
WordPress hỗ trợ chức năng cài đặt background cho website
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.
Chọn hình ảnh hoặc tải lên hình ảnh 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.
Background sẽ xuất hiện phía sau các đối tượng trong website
Có thể nói rằng WordPress là một trong những mã nguồn có cách khả năng tùy chỉnh Header, Footer và Background website dễ dàng nhất hiện nay. Nếu trang web được xây dựng trên nền tảng WordPress Hosting, chúng tôi hy vọng rằng bài viết đã mang đến những thông tin hữu ích cho bạn.
Gợi ý các nội dung độc giả nên tham khảo thêm:
- Settings WordPress là gì? Cách thiết lập Setting WordPress
- Hướng dẫn sử dụng WordPress từ A tới Z
Video liên quan
Bạn đang tìm hiểu bài viết: Transparent Header là gì 2024
HỆ THỐNG CỬA HÀNG TRÙM SỈ QUẢNG CHÂU
Điện thoại: 092.484.9483
Zalo: 092.484.9483
Facebook: https://facebook.com/giatlathuhuongcom/
Website: Trumsiquangchau.com
Địa chỉ: Ngõ 346 Nam Dư, Trần Phú, Hoàng Mai, Hà Nội.
