Tạo Thanh Tiện ích Phía trên Tiêu đề Chủ đề Avada

Thêm tiện ích hoặc thanh thông báo phía trên tiêu đề chủ đề Avada. Tôi sẽ hiển thị thanh này trên toàn bộ các trang của trang web ngoại trừ trang bán hàng. Vì vậy, tôi đã thêm đoạn mã PHP sau vào tệp functions.php của chủ đề con Avada.

add_action( 'avada_before_body_content', 'cp_utility_bar' );
function cp_utility_bar() {
if( is_page( 123 ) ) // 123 is my sales page ID
return;
echo '<div class="utility-bar"><a href="ENTER PAGE LINK" target="_self">ENTER YOUR ANNOUNCEMENT HERE.</a></div>' . "\n";
}

Nếu bạn nhìn vào tệp header.php của chủ đề Avada, bạn sẽ nhận được hook avada_before_body_content này . Tôi đã nhắm mục tiêu móc này và thêm thanh phía trên đánh dấu tiêu đề trang web.

Dòng số 5-6: Tôi không hiển thị thanh tiện ích trên trang bán hàng của mình. Vì vậy, tôi sẽ quay lại sớm nếu trang là trang bán hàng và thanh sẽ không xuất hiện trên trang đó. 123 là ID trang bán hàng của tôi. Bạn sẽ thay thế nó bằng ID trang của mình nếu bạn đang tuân theo logic này. Nếu không, bạn hoàn toàn có thể xóa mã.

Dòng số 8: Thêm đánh dấu HTML cho thanh tiện ích.

Sau đó, tôi chỉnh sửa style.css của chủ đề con Avada và tạo thanh tiện ích có chiều rộng đầy đủ. Đây là CSS:

.utility-bar {
	background: #4982c3;
	color: #fff;
	cursor: pointer;
	font-size: 20px;
	padding: 12px 20px;
	text-align: center;
}
.utility-bar a {
	color: #fff;
}
.utility-bar a:hover {
	color: #ebebeb;
}