Đây là một bài khách của Josh Pollock
Pinterest Post Grid Views đã được thiết kế phổ biến cho các trang chỉ mục blog WordPress trong một thời gian. Nó phổ biến không chỉ vì nó bắt chước giao diện của trang truyền thông xã hội phổ biến mà còn vì nó tận dụng tốt nhất không gian màn hình. Trong một chỉ mục blog WordPress, nó cho phép mỗi bản xem trước của bài đăng có kích thước tự nhiên, không để lại thêm dung lượng.
Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách sử dụng Thư viện JavaScript Masonry phổ biến để tạo bố cục lưới xếp tầng cho chỉ mục blog của bạn cũng như các trang lưu trữ cho chủ đề của bạn. Tôi sẽ giải quyết một số vấn đề mà bạn cần lưu ý để tối ưu hóa điện thoại di động và cách giải quyết chúng.
Lưu ý: Đây là hướng dẫn cấp độ nâng cao dành cho những người thoải mái chỉnh sửa các chủ đề WordPress và có đủ kiến thức về HTML / CSS.
Anh ấy đã qua 1: Thêm các thư viện cần thiết vào chủ đề của bạn
Cập nhật: WordPress 3.9 bây giờ bao gồm phiên bản mới nhất của Masonry.
Trước tiên, bạn phải tải Masonry vào chủ đề của mình, sử dụng mã này:
if (! function_exists('slug_scripts_masonry') ) :
if ( ! is_admin() ) :
function slug_scripts_masonry() {
wp_enqueue_script('masonry');
wp_enqueue_style('masonry’, get_template_directory_uri().'/css/’);
}
add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' );
endif; //! is_admin()
endif; //! slug_scripts_masonry exists
Mã này chỉ đơn giản là tải nề và làm cho nó có sẵn cho các tệp mẫu của chủ đề của bạn (xem hướng dẫn của chúng tôi về cách thêm JavaScripts và Styles trong WordPress). Cũng lưu ý rằng chúng tôi cũng không thêm jQuery làm phụ thuộc cho bất kỳ. Một trong những lợi thế của Masonry 3 là nó không yêu cầu jQuery, nhưng nó có thể được sử dụng với nó. Theo kinh nghiệm của tôi, việc khởi tạo Masonry mà không có jQuery đáng tin cậy hơn và mở ra khả năng bỏ qua việc tải jQuery, điều này có thể giúp cả về thời gian tải trang và các vấn đề tương thích.
Anh ấy đã qua 2: khởi tạo Javascript
Hàm sau cấu hình Masonry, xác định các thùng chứa được sử dụng với nó và cũng đảm bảo rằng mọi thứ xảy ra theo đúng thứ tự. Masonry cần tính toán kích thước của từng yếu tố trên trang để tự động thiết kế lưới của nó. Một vấn đề tôi gặp phải với Masonry trong nhiều trình duyệt là Masonry sẽ tính toán sai chiều cao của các phần tử với hình ảnh tải chậm sẽ khiến các phần tử chồng lấp. Giải pháp là sử dụng hình ảnhLoaded để ngăn Masonry tính toán bố cục cho đến khi tất cả các hình ảnh được tải. Điều này đảm bảo kích thước phù hợp.
Đây là chức năng và hành động mà tập lệnh khởi tạo sẽ tạo ra ở chân trang:
if (! function_exists ('slug_masonry_init')):
función slug_masonry_init () {?>
php}
// agregar a wp_footer
add_action ('wp_footer', 'slug_masonry_init');
terminara si; //! slug_masonry_init existe
Tính năng này được giải thích từng bước với các bình luận trực tuyến. Chức năng Javascript làm gì là bảo Masonry nhìn vào bên trong một thùng chứa với id “masonry-loop” để tìm kiếm các mục với lớp “masonry-entry” và chỉ tính toán lưới sau khi tải hình ảnh. Chúng tôi cấu hình bộ chứa bên ngoài với querySelector và bộ chứa bên trong với itemSelector.
Anh ấy đã qua 2: Tạo vòng lặp Masonry
Thay vì thêm đánh dấu HTML cho Masonry trực tiếp vào một mẫu, hãy tạo một phần mẫu riêng cho nó. Tạo một tệp mới gọi là “content-masonry.php” và thêm nó vào chủ đề của bạn. Điều này sẽ cho phép bạn thêm vòng lặp nề vào nhiều mẫu khác nhau tùy thích.
Trong tệp mới của bạn, bạn sẽ thêm mã hiển thị bên dưới. Đánh dấu là tương tự như những gì bạn thường thấy cho bất kỳ xem trước nội dung. Bạn có thể sửa đổi nó theo bất kỳ cách nào bạn cần, chỉ cần đảm bảo phần tử ngoài cùng có lớp “mục nhập nề” mà chúng ta đặt làm itemSelector ở bước cuối cùng.
> " title="">
Đánh dấu này có các lớp cho mỗi phần của nó, vì vậy bạn có thể thêm đánh dấu để phù hợp với chủ đề của bạn. Tôi muốn thêm một đường viền đẹp, hơi tròn vào .masonry-entry. Một lựa chọn tốt khác là không có đường viền cho .masonry-entry, nhưng để cho nó một cái bóng nhẹ. Điều đó có vẻ đặc biệt tốt khi hình thu nhỏ của bài đăng mở rộng ra rìa của thùng chứa, có thể được thực hiện bằng cách cung cấp lề hình thu nhỏ của khối xây và trám 0 trong tất cả các hướng. Bạn sẽ cần thêm tất cả các kiểu này trong một tệp có tên masonry.css trong thư mục css của chủ đề.
Anh ấy đã qua 3: Thêm vòng lặp nề vào các mẫu
Bây giờ chúng tôi có phần mẫu của chúng tôi, bạn có thể sử dụng nó trong bất kỳ mẫu nào trong chủ đề của bạn mà bạn muốn. Bạn có thể thêm nó vào index.php, nhưng không phải vào category.php nếu bạn không muốn nó được sử dụng cho các tệp danh mục. Nếu bạn chỉ muốn nó được sử dụng trên trang chủ của chủ đề, khi nó được thiết lập để hiển thị các bài đăng trên blog, bạn sẽ sử dụng nó trong home.php. Bất cứ nơi nào bạn chọn, tất cả những gì bạn cần làm là bọc vòng lặp của bạn trong một thùng chứa với id “masonry-loop” và thêm phần mẫu vào vòng lặp bằng cách sử dụng get_template_part (). Hãy chắc chắn để bắt đầu trình bao bọc vòng lặp trước khi while (have_posts ()).
Ví dụ, đây là vòng lặp chính của index.php của hai mươi ba:
Và ở đây, nó được sửa đổi để sử dụng vòng lặp nề của chúng tôi:
Anh ấy đã qua 4: Đặt độ rộng đáp ứng của các phần tử khối
Có một số cách để đặt chiều rộng của mỗi vật phẩm xây. Bạn có thể đặt chiều rộng bằng cách sử dụng một số pixel khi khởi tạo khối xây. Tôi không phải là người thích làm việc đó vì tôi sử dụng các chủ đề phản hồi và nó yêu cầu một số truy vấn phương tiện phức tạp để có được nó ngay trên màn hình nhỏ. Đối với bố cục đáp ứng, tôi thấy rằng điều tốt nhất cần làm là đặt giá trị độ rộng cho mục nhập .masonry với tỷ lệ phần trăm, dựa trên số lượng mục bạn muốn liên tiếp và để Masonry thực hiện phần còn lại của toán học cho bạn.
Tất cả điều này đòi hỏi là chia 100 cho số phần tử bạn muốn đặt tỷ lệ phần trăm thành một mục đơn giản trong style.css của chủ đề. Ví dụ: nếu bạn muốn bốn mục trong mỗi hàng, bạn có thể thực hiện trong tệp masonry.css của mình:
.masonry-entry {width: 25%}
Anh ấy đã qua 5: tối ưu hóa điện thoại
Chúng tôi có thể dừng lại ở đây, nhưng tôi không nghĩ rằng kết quả cuối cùng hoạt động cực kỳ tốt trên màn hình điện thoại nhỏ. Một khi bạn hài lòng với giao diện của chủ đề với lưới nề mới trên máy tính để bàn của bạn, hãy kiểm tra nó trên điện thoại của bạn. Nếu bạn không hài lòng với giao diện của điện thoại, bạn sẽ cần thực hiện một công việc nhỏ.
Tôi không nghĩ có đủ không gian trên màn hình điện thoại cho tất cả những gì chúng tôi thêm vào một phần của mẫu nề nội dung. Hai giải pháp tốt có sẵn cho bạn là rút ngắn câu lệnh điện thoại hoặc bỏ qua hoàn toàn. Đây là một chức năng bổ sung mà bạn có thể thêm vào các chức năng của theme.php để làm như vậy. Vì tôi không nghĩ những vấn đề này là vấn đề trên máy tính bảng, tôi đang sử dụng một plugin Mobble tuyệt vời trong tất cả các ví dụ trong phần này để chỉ thay đổi trên điện thoại, không phải máy tính bảng. Tôi cũng đang kiểm tra xem Mobble có hoạt động hay không trước khi sử dụng và nếu cần, dựa trên tính năng phát hiện di động chung hơn wp_is_mobile, được tích hợp trong WordPress.
if (! function_exists('slug_custom_excerpt_length') ) :
function slug_custom_excerpt_length( $length ) {
//set the shorter length once
$short = 10;
//set long length once
$long = 55;
//if we can only set short excerpt for phones, else short for all mobile devices
if (function_exists( 'is_phone') {
if ( is_phone() ) {
return $short;
}
else {
return $long;
}
}
else {
if ( wp_is_mobile() ) {
return $short;
}
else {
return $long;
}
}
}
add_filter( 'excerpt_length', 'slug_custom_excerpt_length', 999 );
endif; // ! slug_custom_excerpt_length exists
Như bạn có thể thấy, chúng tôi bắt đầu bằng cách lưu trữ độ dài của trích xuất dài và độ dài của trích xuất ngắn trong các biến, vì chúng tôi sẽ sử dụng các giá trị đó hai lần và muốn có thể thay đổi chúng từ một nơi nếu cần thiết sau này. Từ đó, chúng tôi kiểm tra xem chúng tôi có thể sử dụng is_phone () của Mobble không. Nếu vậy, chúng tôi đặt câu lệnh ngắn cho điện thoại và câu lệnh dài nếu không. Sau đó, chúng tôi làm điều cơ bản tương tự, nhưng sử dụng wp_is_mobile, điều này sẽ ảnh hưởng đến tất cả các thiết bị di động, nếu không thể sử dụng is_phone (). Hy vọng rằng phần khác của tính năng này không bao giờ được sử dụng, nhưng thật tuyệt khi có một bản sao lưu chỉ trong trường hợp. Khi logic độ dài trích xuất được thiết lập, nó sẽ kết nối chức năng với bộ lọc excerpt_length.
Rút ngắn trích xuất là một tùy chọn, nhưng chúng tôi cũng có thể loại bỏ nó hoàn toàn với một quy trình đơn giản. Đây là phiên bản mới của nội dung nề, với toàn bộ phần trích đoạn được bỏ qua trên điện thoại:
> "tiêu đề ="">
"tiêu đề ="">
