Hiển thị 3 cột Các bài viết nổi bật của Genesis trong Trang chủ Phần 2 của chủ đề Parallax PRO

Bằng ba bước, tôi đã tạo 3 cột bài đăng nổi bật trong khu vực widget Home Section 2 của chủ đề con Parallax PRO.

  1. Thiết lập kích thước hình thu nhỏ và tạo lại hình thu nhỏ

  2. Thiết lập Tiện ích bài đăng nổi bật của Genesis

  3. Thêm CSS vào tệp style.css

  4. Thiết lập kích thước hình thu nhỏ và tạo lại hình thu nhỏ

Đăng nhập vào bảng điều khiển và mở tệp functions.php trên trình chỉnh sửa chủ đề (Appearance-> Editor). Thêm mã sau:

add_image_size(‘square-thumb’, 365, 242, true); // you can change the image size based on your site design

Bây giờ hãy lưu tệp. Cài đặt plugin “Buộc tạo lại hình thu nhỏ” và tạo lại hình thu nhỏ của các hình ảnh hiện có của bạn.

  1. Thiết lập tiện ích bài đăng nổi bật của Genesis

Đi tới trang tiện ích (Giao diện-> Tiện ích) và kéo và thả tiện ích bài đăng Nổi bật của Genesis trong hộp Trang chủ Phần 2. Thiết lập “ Số lượng bài đăng để hiển thị: ”, bật hình ảnh nổi bật, chọn “ hình vuông (365 × 242) ” từ trình đơn thả xuống, chọn hộp kiểm “ hiển thị tiêu đề bài đăng ” và chọn “ Không có nội dung ” từ Loại nội dung thả xuống. Bây giờ nhấn vào nút lưu.

  1. Thêm CSS trong tệp style.css

mở tệp style.css trên trình chỉnh sửa chủ đề (Appearance-> Editor) và thêm CSS sau:

.featuredpost .post {
    width: 31.6239%;
    float: left;
    margin-left: 2.5641%;
 }
.featuredpost .post:nth-of-type(3n+1){
  margin-left: 0;
}
.featuredpost .entry-title {
    font-size: 24px;
}
@media only screen and (min-width: 481px) and (max-width: 767px) {
  .featuredpost .post {
    width: 48.717%;
  }
  .featuredpost .post:nth-of-type(3n+1) {
    margin-left: 2.5%;
  }  
  .featuredpost .post:nth-of-type(2n+1) {
    margin-left: 0;
  }
}
@media only screen and (max-width: 480px) {
  .featuredpost .post {
    float: none;
    margin-left: 0;
    width: 100%;
  }
}