Backstretch Image to CSS Background Image in Agent Focused Theme

Chủ đề con của Agent Focused Genesis sử dụng Backstretch, một tập lệnh jQuery, để thêm hình ảnh lớn trên trang đầu của chủ đề. Một câu hỏi thường gặp là làm thế nào để kiểm soát nhiều hơn vị trí của hình nền. Việc chuyển đổi chủ đề sang sử dụng hình nền CSS khá dễ dàng, điều này giúp việc định vị trở nên đơn giản hơn.

Các bước trong hướng dẫn này để thêm hình nền CSS thường có thể được áp dụng cho các chủ đề khác có hình ảnh backstretch, mặc dù có thể cần một số thay đổi.

 

Các bước thực hiện

  • Đầu tiên, chúng tôi sẽ nhận xét các phần thêm tập lệnh backstretch.
  • Tiếp theo, chúng tôi sẽ thêm một chức năng mới để thêm kiểu hình nền của nội dung, cả trong front-page.php.
  • Và sau đó, chúng tôi sẽ thêm các kiểu định vị vào style-front.css.
Tất cả các thay đổi mã đều có trong GitHub Gist này.

(Chủ đề Tập trung vào Tác nhân là một chủ đề dành cho các nhà môi giới, nhưng cũng có thể được sử dụng cho các mục đích khác, từ StudioPress và Win Agent.)

Bước 1. Bình luận Phần Backstretch trong front-page.php

Ở trên cùng của front-page.php là phần này - Enqueue script cho hình nền . Thêm / * và * /, vì vậy nó trông giống như sau:
<!--?php // Do not add this line when you copy and paste code.

// Enqueue scripts for background image.
add_action( ‘wp_enqueue_scripts’, ‘agentfocused_front_page_enqueue_scripts’ );
function agentfocused_front_page_enqueue_scripts() {

wp_enqueue_style( 'agentfocused-front-page-styles', get_stylesheet_directory_uri() . 'https://g3f2z8v4.rocketcdn.me/style-front.css', array(), CHILD_THEME_VERSION );

/*
$image = get_option( ‘agentfocused-front-image’, sprintf( ‘%s/images/front-page-image.jpg’, get_stylesheet_directory_uri() ) );

// Load scripts only if custom background is being used.
if ( ! empty( $image ) &amp;&amp; is_active_sidebar( 'front-page-1' ) ) {

	// Enqueue Backstretch scripts.
	wp_enqueue_script( 'agentfocused-backstretch', get_stylesheet_directory_uri() . 'https://g3f2z8v4.rocketcdn.me/js/backstretch.js', array( 'jquery' ), '1.0.0' );

	wp_enqueue_script( 'agentfocused-backstretch-set', get_stylesheet_directory_uri() . 'https://g3f2z8v4.rocketcdn.me/js/backstretch-set.js' , array( 'jquery', 'agentfocused-backstretch' ), '1.0.0' );

	wp_localize_script( 'agentfocused-backstretch-set', 'BackStretchImg', array( 'src' =--&gt; str_replace( 'http:', '', $image ) ) );

}

*/

// Enqueue Modernizr for object-fit.
wp_enqueue_script( 'agentfocused-modernizr-object-fit', get_stylesheet_directory_uri() . 'https://g3f2z8v4.rocketcdn.me/js/modernizr-custom.js', array( 'jquery' ), '1.0.0' );

}

Bước 2. Thêm một phần mới

<!--?php // Do not add this line when you copy and paste code.

// Add background image style to WP head.
add_action( ‘wp_head’, ‘agentfocused_background_styles’, 99 );
function agentfocused_background_styles() {

$image = get_option( 'agentfocused-front-image', sprintf( '%s/images/front-page-image.jpg', get_stylesheet_directory_uri() ) );

// Add style only if background image is being used.
if ( ! empty( $image ) &amp;&amp; is_active_sidebar( 'front-page-1' ) ) {

	echo '&lt;style type="text/css" media="screen"--&gt;
		body.front-page {
			background-image: url(' . esc_html( $image ) . ');
		}
	';

}

}


Tiếp theo trong front-page.php, chúng tôi sẽ thêm một phần mới để thêm hình ảnh của bạn từ tùy biến WP làm hình nền cho trang đầu. Thêm mã này ngay bên dưới phần trên.

Vì vậy, bây giờ chúng ta hãy xem lại những gì mã này làm.

  • add_action( ... ) - Điều này ghi CSS hình nền của chúng tôi vào đầu WP.
  • $image = get_option( ... )- Điều này đến từ tệp /agent-focused/lib/customize.php, dòng 52 đến 55, thêm hình ảnh được sử dụng trong tùy biến WP. /
  • Câu if ( ... )lệnh kiểm tra xem chúng ta có hình nền hay không và liệu chúng ta có đang sử dụng tiện ích con trong khu vực tiện ích Trang trước 1 hay không.
  • echo ...- Cái này viết kiểu CSS, vì vậy nó nằm trên trang đầu của chúng tôi.

Bước 3. Thêm một số CSS để định vị hình ảnh

CSS để định vị hình nền có thể được thêm vào style-front.php hoặc vào trình chỉnh sửa CSS tùy chỉnh. Bạn có thể sử dụng CSS bổ sung, hiện là một phần của công cụ tùy biến WP, (Từ menu WordPress, Giao diện> Tùy chỉnh và sau đó chọn CSS bổ sung) hoặc một plugin.

Nếu sử dụng style-front.css, hãy thêm phần sau ngay dưới phần Mục lục và trước phần còn lại của CSS. Nó có thể được dán ở bất kỳ đâu trong CSS hoặc plugin bổ sung của bạn.

body.front-page {
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size:    cover;
    background-size:         cover;
}

Đường kẻ background-position: center center;đường mà chúng ta sẽ sử dụng để thay đổi vị trí của hình ảnh.

Bây giờ bạn có thể tải lên (sử dụng FTP) các tệp đã chỉnh sửa - front-page.php và style-front.php, nếu bạn đã chỉnh sửa ở đó.

Bước 4. Xem hình ảnh trên trang web của bạn

Bây giờ bạn có thể tải lên (sử dụng FTP) các tệp đã chỉnh sửa - front-page.php và style-front.php, nếu bạn đã chỉnh sửa ở đó.

Sau khi hoàn tất, bạn có thể cần phải xóa bộ nhớ đệm cho trang web và trình duyệt của mình. Ngoài ra, bạn cần có một số nội dung trong một widget trong khu vực widget Trang 1.
Hình ảnh của bạn sẽ được hiển thị dưới dạng hình nền trên trang web của bạn ngay bây giờ.

Bước 5. Thay đổi vị trí hình ảnh

Hình ảnh lấp đầy toàn bộ khung nhìn, vì vậy không phải tất cả hình ảnh sẽ được nhìn thấy cùng một lúc, tùy thuộc vào nội dung tiện ích bạn đã thêm vào vùng tiện ích Trang 1 và chiều rộng của cửa sổ trình duyệt.

Đường kẻ background-position: center center;sẽ giúp định vị hình ảnh theo ý muốn.
“Tâm” đầu tiên căn giữa hình ảnh theo chiều ngang từ, trái sang phải; “trung tâm” thứ hai căn giữa hình ảnh theo chiều dọc, từ trên xuống dưới.

Nếu bạn muốn phần trên cùng của hình ảnh luôn hiển thị, hãy sử dụng:
background-position: center top;

Nếu bạn muốn phần dưới cùng của hình ảnh luôn hiển thị nhiều hơn, hãy sử dụng:
background-position: center bottom;

Để bên trái của hình ảnh luôn hiển thị, hãy sử dụng:
background-position: left center;

Để bên phải của hình ảnh luôn hiển thị, hãy sử dụng:
background-position: right center;

Nếu bạn thay đổi hình ảnh, bạn có thể dễ dàng chỉnh sửa vị trí nền cho hình ảnh mới của mình.

Tất nhiên, bạn có thể sử dụng bất kỳ kết hợp nào trong số đó; bạn có thể biết thêm thông tin về vị trí nền CSS tại đây.

Vui lòng cho tôi biết nó định vị hình ảnh của bạn như thế nào.