Kiểu thư viện HTML5 của Genesis WordPress

Các phòng trưng bày của Genesis và WordPress HTML5 thân thiện với thiết bị di động và các phòng trưng bày sẽ thay đổi kích thước để vừa với màn hình thiết bị. Nhưng kiểu mặc định có hình ảnh nhỏ hơn cho các màn hình nhỏ hơn. Hướng dẫn này chỉ cho bạn cách giữ hình ảnh lớn hơn trên màn hình nhỏ hơn bằng cách sử dụng khối nội tuyến. Lưu ý rằng trong khi tôi sẽ sử dụng chủ đề Genesis Sample, hướng dẫn này áp dụng cho hầu hết các chủ đề WordPress khác.

Kiểu mặc định là bắt đầu với hình ảnh kích thước hình thu nhỏ trong các cột; số lượng cột bạn có thể chọn nằm trong khoảng từ 1 đến 9. Sau đó, khi màn hình thiết bị nhỏ hơn, các hình ảnh đầu tiên sẽ gần nhau hơn và sau đó các hình thu nhỏ có kích thước nhỏ hơn. Tôi đã thêm đường viền 2px màu xám xung quanh thư viện để bạn có thể nhìn thấy nó.

Bạn sẽ lưu ý rằng các hình ảnh nhỏ hơn và chạm vào nhau. Nếu bạn muốn hình ảnh thu nhỏ luôn lớn hơn ở kích thước màn hình nhỏ, bạn sẽ cần thêm CSS bổ sung vào các @mediaphần cho các kích thước màn hình khác nhau trong style.css của bạn.

Phong cách thay thế

Một phương pháp khác để tạo kiểu cho các phòng trưng bày là luôn giữ cho hình ảnh thu nhỏ có cùng kích thước, nhưng sau đó khi màn hình nhỏ hơn, bạn có thể cho phép hình ảnh thả xuống, do đó số lượng cột sẽ ít hơn một. Vì vậy, bạn có thể bắt đầu với hình thu nhỏ trong bốn cột cho màn hình lớn, sau đó cho phép số lượng cột chuyển sang ba cột, sau đó đến hai cột và sau đó đến một cột, nếu kích thước hình thu nhỏ của bạn lớn hơn 150px X mặc định Kích thước 150px.

Vì vậy, hãy xem chúng ta có thể làm điều này dễ dàng như thế nào.

Kiểm tra hỗ trợ chủ đề

Rất nhiều chủ đề con của Genesis có hỗ trợ HTML5 cho các phòng trưng bày; Genesis Sample thì không, nhưng bạn có thể thêm nó vào.

Mở functions.php trong trình soạn thảo văn bản. Tìm dòng sau:

<?php // Remove this line

//* Add HTML5 markup structure
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list' ) );

Chỉnh sửa dòng này thành:

<?php // Remove line above

//* Add HTML5 markup structure
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );

Lưu ý ’ gallery’ và ’ caption’. Nếu chúng có mặt, chủ đề con của bạn đã có hỗ trợ HTML5 cho các phòng trưng bày.

Chỉnh sửa kiểu CSS

Tiếp theo, mở style.css trong trình soạn thảo văn bản. Tìm và nhận xét những dòng sau đây. Để nhận xét, hãy thêm / * ở đầu và * / ở cuối, như tôi đã làm.
/* ## Gallery
--------------------------------------------- */
/*
.gallery {
	overflow: hidden;
}

.gallery-item {
float: left;
margin: 0 0 28px;
text-align: center;
}

.gallery-columns-2 .gallery-item {
width: 50%;
}

.gallery-columns-3 .gallery-item {
width: 33%;
}

.gallery-columns-4 .gallery-item {
width: 25%;
}

.gallery-columns-5 .gallery-item {
width: 20%;
}

.gallery-columns-6 .gallery-item {
width: 16.6666%;
}

.gallery-columns-7 .gallery-item {
width: 14.2857%;
}

.gallery-columns-8 .gallery-item {
width: 12.5%;
}

.gallery-columns-9 .gallery-item {
width: 11.1111%;
}

.gallery img {
border: 1px solid #ddd;
height: auto;
padding: 4px;
}

.gallery img:hover {
border: 1px solid #999;
}
*/

Thêm CSS thư viện mới

.gallery {
	overflow: hidden;
	text-align: center;
}

.gallery-item {
display: inline-block;
margin: 0 2.5% 24px;
text-align: center;
vertical-align: bottom;
}

Giải thích về CSS

Phần đầu tiên căn giữa các phần tử bên trong bộ chọn .gallery. Các thay đổi chủ yếu là trên .gallery-item.
  • Sử dụng inline-block, thay vì float.
  • Thêm phần trăm lề trái và phải, ngoài lề dưới 24px; Tôi đã sử dụng 2,5%.
  • Căn giữa mọi thứ được bao gồm trong .gallery-item, như trước đây.
  • Căn chỉnh dọc xuống dưới cùng.

CSS khác

Genesis Sample cũng bao gồm CSS bên dưới để thêm một số phần đệm và đường viền cho mỗi hình ảnh. Bạn có thể nhận xét nó ra hoặc giữ nó, tùy thích.
.gallery img {
	border: 1px solid #ddd;
	height: auto;
	padding: 4px;
}

.gallery img:hover {
border: 1px solid #999;
}


Bạn có thể thấy phương pháp này đơn giản hơn bao nhiêu để tạo kiểu.