Cách ẩn vùng tiện ích sau một thời gian nhất định bằng jQuery

Thủ thuật WordPress
1

Trong diễn đàn cộng đồng StudioPress, người dùng hỏi:

Tôi có một số nội dung trong tiện ích văn bản trong khu vực tiện ích Trước tiêu đề mà tôi muốn biến mất sau vài giây.

Trong bài viết này, tôi trình bày cách có thể đặt vùng widget trước tiêu đề tùy chỉnh thành ẩn ban đầu khi tải trang, sau đó từ từ trượt xuống chế độ xem và sau 3 giây, trượt lên khỏi chế độ xem trong Magazine Pro.

Bước 1

Thêm phần sau vào functions.php của Magazine Pro :

// Register before-header widget area
genesis_register_sidebar( array(
'id' => 'before-header',
'name' => __( 'Before Header', 'magazine' ),
'description' => __( 'This is the before header section', 'magazine' ),
) );

// Display before-header widget area before the header
add_action( 'genesis_before_header', 'sk_before_header' );
function sk_before_header() {
genesis_widget_area( 'before-header', array(
'before' => '<div class="before-header widget-area"><div class="wrap">',
'after' => '</div></div>',
) );
}

Bước 2

Trong style.css thay thế

/*
Site Header
---------------------------------------------------------------------------------------------------- */

.primary-nav .site-header {
	padding-top: 64px;
}

.site-header .wrap {
	border-bottom: 2px solid #222;
	padding: 30px 0;
}

với

/*
Site Header
---------------------------------------------------------------------------------------------------- */

/*.primary-nav .site-header,*/
.primary-nav .before-header.hidden + .site-header,
.primary-nav .before-header {
	padding-top: 64px;
}

.before-header .wrap {
	padding: 30px 0;
	border-bottom: 1px solid #222;
}

.site-header .wrap {
	border-bottom: 2px solid #222;
	padding: 30px 0;
}

Bước 3

Trong js / responsive-menu.js thêm

	// Slide down before-header widget area and slide it up out of view after 3s
	var tId;

	$(".before-header").hide().slideDown("slow");

	clearTimeout(tId);

	tId=setTimeout(function(){
		$(".before-header").slideUp("slow").addClass("hidden");
	}, 3000);

trước khi đóng cửa });

Bước 4

Tại Giao diện> Tiện ích, kéo tiện ích mong muốn của bạn vào vùng tiện ích và định cấu hình nó.Before Header