Cách tùy chỉnh Header, Footer và Background WordPress đơn giản

WordPress là mã nguồn linh hoạt, giao diện trực quan. Bạn trọn vẹn trọn vẹn hoàn toàn hoàn toàn hoàn toàn hoàn toàn hoàn toàn hoàn toàn hoàn toàn hoàn toàn hoàn toàn có thể tùy chỉnh những 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ảnCác thao tác sử dụng và tùy chỉnh WordPress khá đơn giản

Bạn Đang Xem: Cách tùy chỉnh Header, Footer và Background WordPress đơn giản

Việc sử dụng website trước đây đòi hỏi người dùng phải trang bị những kỹ năng và 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 những thành phần đã thiết lập. Tuy nhiên, sự Open 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ổ cập nhất hiện nay.

Cách tùy chỉnh WordPress - Header và Footer được cung ứng tùy chỉnh có sẵnHeader 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 thông tin tài khoản quản trị của website. Cụ thể, tổng thể tất cả 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 thông dụng 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 thuầ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 NewspaperKhu 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 những tính năng thông số kỹ thuật giao diện được cung cấp sẵn. Mỗi theme sẽ tương hỗ những công dụng tương ứng khác nhau nhưng những 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ổ trợ thông tin khi có quá nhiều mụcTop bar bổ trợ 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 những chuyên mục, tương tự như 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, những theme tương hỗ 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

Cách tùy chỉnh WordPress - Khu vực thông số kỹ thuật menu của theme NewspaperKhu vực thông số kỹ thuật menu của theme Newspaper

Main Menu là khu vực thông số kỹ thuật menu, những website sử dụng mã nguồn WordPress có thể được phong cách 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 những 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ổ cập vì vậy bạn nên chọn “No Preloading” để tắt chức năng.

  • Sticky Menu

Tùy chỉnh Header ở Sticky Menu được cho phép thanh menu chuyển dời 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ó size lớn.

Cách tùy chỉnh WordPress - Ví dụ về mẫu logo trên Header và Sticky MenuVí 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ú ý quan tâm 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, size 20×20 pixel.

Cách tùy chỉnh WordPress - Favicon có size nhỏ và nằm trên tab trình duyệtFavicon có kích thước nhỏ và nằm trên tab trình duyệt

  • Logo Alt Attribute

Nhập diễn đạt cho logo, những dòng này không được hiển thị trên website vì thế, thường dùng để tương hỗ SEO.

  • Logo Title Attribute

Xem Thêm : Sơ lược về thiết kế và gia công điện cực

Nhập tên cho logo, tên logo sẽ Open khi khách truy vấn 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 logoRê 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 miêu tả cho logo, 1 số ít kiểu menu có thể đưa những thông tin này lên web. Hãy chú ý điền không thiếu và đúng chuẩn 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ẽ Open trong Bookmark của trình duyệt safari trên IOS.

Khu vực cấu hình cho Footer của theme NewspaperKhu 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 quy trình thay đổi Header phía trên. Tuy nhiên, bởi Footer thường dùng để bổ trợ thông tin cho website, nằm ở phần cuối trang nên bạn cần xác định để phân loại bố cục tổng quan sao cho hợp lý.

Tại Theme Panel, chọn Footer, khu vực Footer Setting là nơi thiết lập bố cục, thông tin liên hệ, những địa chỉ mạng xã hội, sở hữu bản quyền…

Theme Newspaper sẽ tương hỗ bạn 1 số ít 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ó công dụng này, thông thường bạn phải kết hợp chỉnh sửa trong khu vực Widget.

Instagram

Kết nối trực tiếp đến tài khoản Instagram và hiển thị những hình ảnh điển hì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.

Cách tùy chỉnh WordPress - Footer cho website với logo, thông tin và social iconFooter 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 tiên phong 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 khá đầy đủ và đúng chuẩn 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 hình 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.

Cách tùy chỉnh WordPress - Phần bổ sung giúp bạn chèn thêm các thông tin và menuPhầ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:

Cách tạo Widget cho Header trong WordPress

Trong WordPress, ngoài các theme tương hỗ nhiều tính năng vẫn sống sót một số theme thiếu những tính năng cơ bản, ví dụ điển hình 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?

Cách tùy chỉnh WordPress - Khu vực Widget Header thường được đặt các banner quảng cáoKhu 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 quan trọng 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 lôi cuốn đ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 xem xét 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' );

Cách tùy chỉnh WordPress - Widget mới Open sau khi chèn code vào file function.phpWidget mới Open 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à quy 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ó Open 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' ) ) : ?>

Cách tùy chỉnh WordPress - Widget đã xuất hiện bên dưới header sau khi chèn codeWidget đã 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 người tiêu dù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.

Cách tuy chỉnh WordPress - Bổ sung CSS giúp banner trở nên phù hợp và cân đối với websiteBổ 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”.

Cách tùy chỉnh WordPress - WordPress hỗ trợ chức năng cài đặt background cho websiteWordPress 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ínhChọ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 websiteBackground 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 năng lực tùy chỉnh Header, Footer và Background website thuận tiện nhất hiện nay. Nếu website được kiến thiết xây dựng trên nền tảng WordPress Hosting, chúng tôi kỳ vọng rằng bài viết đã mang đến những thông tin có ích cho bạn. 

Gợi ý các nội dung độc giả nên tham khảo thêm:

Nguồn: https://dontu.net
Danh mục: noindex

Related Posts