Hướng dẫn chỉnh sửa header trong wordpress mới nhất 2020

Chỉnh sửa header trong wordpress là một trong những vấn đề đau đầu của những người mới bắt đầu làm website nhưng thực ra nó lại rất đơn giản. Trong bài viết này, Lamweb.vn sẽ viết một bài viết Hướng dẫn chỉnh sửa header trong wordpress mới nhất 2020.

Hướng dẫn chỉnh sửa header trong wordpress mới nhất 2020

I. KHAI BÁO TẠO THÊM MỘT KHU VỰC CHỨA WIDGET TRONG WORDPRESS

Bước 1: Để hiển thị Widget trong trang quản trị WordPress, bạn cần mở và chỉnh sửa tệp functions.php bằng phương pháp chọn Appearance ở thanh thực đơn trái » Editor. Trong giao diện Edit Themes, bạn chọn Theme Functions (functions.php) nằm phía bên phải màn hình.

Bước 2: Dán đoạn mã dưới đây vào tệp functions.php để khai báo thêm Widget cho Theme WordPress bạn đang sử dụng:

function wpb_widgets_init() 

	register_sidebar( array(
		'name'          => 'Custom Header Widget Area',
		'id'            => 'custom-header-widget',
		'before_widget' => '

', 'before_title' => '

', 'after_title' => '

', ) ); add_action( 'widgets_init', 'wpb_widgets_init' );

» click cập nhật File để cập nhật thêm hàm bạn vừa bổ sung vào functions.php.

Sau khi thực hiện xong thao tác này, bạn sẽ thấy hiển thị thêm một khu vực chứa Widget bạn vừa tạo có tên Custom Header Widget Area xuất hiện trong phần quản lý Widget trên WordPress (Appearance » Widgets)

Bước 3: Bạn kéo thả một Widget vào khu vực Custom Header Widget Area. ngoài ra, lúc này trên trang giao diện user sẽ chưa xuất hiện Widget đó. Chúng ta cần phải thực hiện bước kế tiếp.

Xem thêm: Tổng hợp các widget đẹp cho wordpress mới nhất 2020

II. HIỂN THỊ CUSTOM HEADER WIDGET AREA

Bước 1: chọn Appearance trong thanh menu trái » Editor » Trong màn hình Edit Themes, bạn lựa chọn Theme Header (header.php). Sau đó dán đoạn mã dưới đây vào vị trí bạn muốn hiển thị Widget trong Header:

» click update File để cải tiến cải thiện trong tệp header.php.

Giờ, Widget đã xuất hiện trong trang giao diện người dùng:

như bạn thấy, chúng ta sẽ cần chỉnh sửa thêm để Widget được hiển thị đẹp mắt hơn bằng cách thêm đoạn mã CSS của Theme WordPress này.

III. THÊM MỚI ĐOẠN MÃ CSS định dạng HIỂN THỊ WIDGET

Bước 1: Bạn đủ nội lực dùng Plugin CSS Hero, hoặc các Plugin không giống để thêm mới đoạn mã CSS. Hoặc, nếu bạn k mong muốn dùng Plugin, bạn đủ sức lựa chọn Appearance » Customize » Additional CSS.

Bước 2: Dán đoạn mã dưới đây vào phần Additional CSS:

div#header-widget-area 
    width: 100%;
    background-color: #f7f7f7;
border-bottom:1px solid #eeeeee;
    text-align: center;
	
h2.chw-title 
    margin-top: 0px;
    text-align: left;
    text-transform: uppercase;
    font-size: small;
    background-color: #feffce;
    width: 130px;
    padding: 5px;
    

» click Save & Publish để lưu lại đoạn mã CSS trên.

Giờ, hãy tận hưởng thành quả của bạn:

Nguồn: vandon.com.vn

Xem thêm: Tổng hợp các plugin thống kê truy cập wordpress mới nhất 2019