Trong một thời gian, tôi đã lưu bài viết này trên viget.com trong bảng ghim của mình. Tôi đã thử mã CSS đường dẫn clip được đưa ra trong bài viết đó một vài lần và không chắc chắn những giá trị đang đại diện cho những gì hoặc chúng đến từ đâu và không thể làm cho nó hoạt động trong Firefox.
Cuối cùng tôi đã dành thời gian ngày hôm qua để nghiên cứu về chủ đề này và trình bày trong hướng dẫn này bằng cách sử dụng một ví dụ, một bản tóm tắt từng bước ngắn gọn về những phát hiện của tôi về cách làm cho các cạnh của các phần tử nghiêng / góc trong Genesis bằng cách sử dụng thuộc tính CSS clip-path .
Mặc dù hướng dẫn đã được viết cho chủ đề con Genesis Sample, nó sẽ hoạt động với những điều chỉnh nhỏ trong bất kỳ chủ đề con nào của Genesis.
Bước 1
Hãy đăng ký một khu vực widget tùy chỉnh và hiển thị nó bên dưới tiêu đề trên trang chủ.Home Featured
Trong functions.php của chủ đề con , hãy thêm
// Register Home Featured widget area
genesis_register_widget_area(
array(
'id' => 'home-featured',
'name' => __( 'Home Featured', 'my-theme-text-domain' ),
'description' => __( 'Home Featured widget area', 'my-theme-text-domain' ),
)
);
// Display Home Featured widget area below header
add_action( 'genesis_after_header', 'sk_home_featured' );
function sk_home_featured() {
// if we are not on front page, abort.
if ( ! is_front_page() ) {
return;
}
genesis_widget_area( 'home-featured', array(
'before' => '<div class="home-featured widget-area"><div class="wrap">',
'after' => '</div></div>',
) );
}
Bước 2
Đi tới Giao diện> Tiện ích và điền vào Khu vực tiện ích nổi bật Trang chủ.
Bước 3
Hãy thực hiện một số tạo kiểu cơ bản cho khu vực widget của chúng ta. Trong style.css của chủ đề con, hãy thêm
.home-featured {
background-color: #039be5;
color: #fff;
padding: 150px 0;
}
Bước 4
Để dễ dàng triển khai clip-path (IE không được hỗ trợ, hãy xem hỗ trợ trình duyệt tại đây), chúng tôi sẽ sử dụng plugin jQuery clip-path-polygon.
Tải clip-path-polygon.min.js lên thư mục chủ đề con của bạn js .
Bước 5
Trong bước tiếp theo, chúng ta cần khởi tạo clip-path trên div trong khi chỉ định 4 tọa độ tạo nên các đỉnh xác định đường dẫn clip. Đường dẫn clip về cơ bản xác định vùng mà bạn muốn giữ / hiển thị trong khi loại bỏ (không hiển thị trong trình duyệt) phần còn lại..home-featured
Cách dễ nhất để lấy các giá trị của tọa độ là sử dụng trình tạo đường dẫn clip Clippy.
Trên trang Clippy, chọn Hình thang từ phía bên phải và kéo 4 góc để khớp với hình dạng mong muốn của phần tử nghiêng.
Lưu ý các giá trị được tạo ở dưới cùng.
Bán tại.:
0 0, 100% 0, 100% 80%, 0 100%
Bước 6
Tạo một tệp có tên say, home.js trong js thư mục của chủ đề con có mã sau:
jQuery(function( $ ){
var home_featured = [[0, 0], [100, 0], [100, 80], [0, 100]];
$('.home-featured').clipPath(home_featured, {
isPercentage: true,
svgDefId: 'home-featured'
});
});
Các cặp số được phân tách bằng dấu phẩy trong dấu ngoặc vuông là các cặp số ở bước trước với dấu%.
Bước 7
Hãy tải hai tệp .js trên trang đầu của trang web của chúng tôi.
Quay lại functions.php thêm
//* Enqueue scripts
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
function sk_enqueue_scripts() {
// if we are not on front page, abort.
if ( ! is_front_page() ) {
return;
}
wp_enqueue_script( 'clip-path-polygon', get_stylesheet_directory_uri() . '/js/clip-path-polygon.min.js', array( 'jquery' ), '0.1.10', true );
wp_enqueue_script( 'home', get_stylesheet_directory_uri() . '/js/home.js', array( 'clip-path-polygon' ), CHILD_THEME_VERSION, true );
}
Đó là nó. Bây giờ bạn có thể thực hành với các hình dạng khác nhau cho các cạnh của bạn nếu bạn muốn.
Trong hướng dẫn tiếp theo, tôi sẽ mở rộng kỹ thuật này để thiết lập những thứ sau trong Altitude Pro:
Một số lưu ý:
- Thứ tự của các tọa độ không quan trọng. Trong hầu hết các ví dụ và trình tạo, chúng tôi bắt đầu ở góc trên cùng bên trái, đi sang phải, sau đó đi xuống, sau đó sang trái và sao lưu.
Trên cùng bên trái = 0 0
Trên cùng bên phải = 100%, 0
Dưới cùng bên phải = 100%, 100%
Dưới cùng bên trái = 0, 100%
- Đây là định dạng của mã được tạo:
<svg width="0" height="0">
<defs>
<clipPath id="home_featured" clipPathUnits="objectBoundingBox">
<polygon points="0 0, 1 0, 1 0.8, 0 1" />
</clipPath>
</defs>
</svg>
.home-featured {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
clip-path: url("#home_featured");
}