Chào các bạn mình là mạnh leo đây hôm nay mình xin hướng dẫn các bạn các bước làm thế nào để thêm hình ảnh đặc trưng vào bài viết dành cho child theme của genesis framework.
Như mặc định thì một số child theme trong genesis không có chức năng hiển ảnh đặc trưng trên bài viết ví dụ theme genesis sample.
Xem thêm Hướng dẫn thay đổi logo Genesis Framework nhanh chóng.
Mặc dù mình đã chèn ảnh đại diện, nhưng hầu như không thấy nó hiện gì như các bạn đã nhìn thấy…
Vậy bài viết này mình sẽ hướng dẫn các bạn cách làm thế nào để hiển thị ảnh đại diện trong bài viết, giống như trang.
https://preview.arraythemes.com/publisher/2015/05/20/heydays-branding/
Demo ảnh:
Chúng ta có thể thêm một kích thước hình ảnh tùy chỉnh cho các hình ảnh đặc trưng hiển thị duy nhất trong bài viết (nếu có) sử dụng hàm genesis_before_entry trong Genesis framework.
Làm thế nào để hiển thị ảnh đại diện trong bài viết genesis framework.
Bước 1: thêm đoạn code sau vào cuối file functions.php trong thư mục child theme.
// Register a custom image size for featured image on single Posts.
add_image_size( 'post-image', 900, 540, true );
add_action( 'genesis_before_entry', 'sk_featured_image' );
/**
* Display featured image (if present) before entry on single Posts
*/
function sk_featured_image() {
// if we are not on a single Post having a featured image, abort.
if ( ! ( is_singular( 'post' ) && has_post_thumbnail() ) ) {
return;
}
// get the URL of featured image.
$image = genesis_get_image( 'format=url&size=post-image' );
// get the alt text of featured image.
$thumb_id = get_post_thumbnail_id( get_the_ID() );
$alt = get_post_meta( $thumb_id, '_wp_attachment_image_alt', true );
// if no alt text is present for featured image, set it to Post title.
if ( '' === $alt ) {
$alt = the_title_attribute( 'echo=0' );
}
// get the caption of featured image.
$caption = get_post( $thumb_id )->post_excerpt;
// build the caption HTML if caption is present for the featured image..
$caption_html = $caption ? '<figcaption class="wp-caption-text">'. $caption . '</figcaption>' : '';
// display the featured image with caption (if present) beneath the image.
printf( '<figure class="single-post-image wp-caption"><img src="%s" alt="%s" />%s</figure>', esc_url( $image ), $alt, $caption_html );
}
Bước 2: Cài đặt và kích hoạt plugin AJAX Thumbnail Rebuild.
Bước 3: Thêm đoạn css này vào file style.css trong child theme.
.single-post-image img {
vertical-align: top;
}
Và kết quả ta nhận được:
