Hướng dẫn hiển thị bài viết liên quan với hình thu nhỏ trong Genesis child theme.
Hiển thị bài viết liên quan đến bài viết trong theme Genesis: Bài viết có liên quan sẽ giúp lượt xem, và giảm tỷ lệ thoát, đó là dấu hiệu tốt cho trang web của bạn, có rất nhiều plugin có sẵn, nhưng sẽ làm chậm tốc độ load của website khi tìm kiếm dịch vụ Seo Google, trang web nên tải nhanh để có được thứ hạng tốt hơn trong kết quả tìm kiếm. Nếu không sử dụng bất kỳ plugin WordPress trong Genesis child Theme, bạn có thể thêm các bài viết liên quan với hình thu nhỏ, dựa trên danh mục và các thẻ (Tags). Các bước để làm theo để hiển thị bài viết liên quan với hình thu nhỏ trong theme child Genesis:
1.Khai báo kích thước hình ảnh trong tập tin functions.php.
2. Thêm PHP code vào trong file functions.php child theme của bạn.
3. Thêm code các bài viết liên quan đến hình ảnh trong style.css.
Bước 1: Khai báo kích thước hình ảnh trong tập tin functions.php.
Trong trường hợp của mình, child theme là Megazine Pro phù hợp với kích thước hình ảnh là 100x100px, vì vậy tôi đã thêm code sau vào file function.php.
//* Thêm ảnh thu nhỏ vào file function.php của child theme:
add_image_size( 'related', 100, 100, true ); Bước 2: Thêm code hiển thị bài viết vào file function.php child theme. Sau đó dán mã trong tập tin functions.php cùng như trong code php image.This sẽ giúp bạn để hiển thị bài viết liên quan với hình thu nhỏ trong theme genesis. Giao diện> sửa> functions.php
//for XHTML themes
add_action( 'genesis_after_post_content', 'child_related_posts' );
//for HTML5 themes
add_action( 'genesis_after_entry_content', 'child_related_posts' );
/**
* Outputs related posts with thumbnail
*
* @author Dịch vụ seo
* @url https://seosieutoc.com
* @global object $post
*/
function child_related_posts() {
if ( is_single ( ) ) {
global $post;
$count = 0;
$postIDs = array( $post->ID );
$related = '';
$tags = wp_get_post_tags( $post->ID );
$cats = wp_get_post_categories( $post->ID );
if ( $tags ) {
foreach ( $tags as $tag ) {
$tagID[] = $tag->term_id;
}
$args = array(
'tag__in' => $tagID,
'post__not_in' => $postIDs,
'showposts' => 5,
'ignore_sticky_posts' => 1,
'tax_query' => array(
array(
'taxonomy' => 'post_format',
'field' => 'slug',
'terms' => array(
'post-format-link',
'post-format-status',
'post-format-aside',
'post-format-quote'
),
'operator' => 'NOT IN'
)
)
);
$tag_query = new WP_Query( $args );
if ( $tag_query->have_posts() ) {
while ( $tag_query->have_posts() ) {
$tag_query->the_post();
$img = genesis_get_image() ? genesis_get_image( array( 'size' => 'related' ) ) : '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/related.png" alt="' . get_the_title() . '" />';
$related .= '<li><a href="' . get_permalink() . '" rel="bookmark" title="Permanent Link to' . get_the_title() . '">' . $img . get_the_title() . '</a></li>';
$postIDs[] = $post->ID;
$count++;
}
}
}
if ( $count <= 4 ) {
$catIDs = array( );
foreach ( $cats as $cat ) {
if ( 3 == $cat )
continue;
$catIDs[] = $cat;
}
$showposts = 5 - $count;
$args = array(
'category__in' => $catIDs,
'post__not_in' => $postIDs,
'showposts' => $showposts,
'ignore_sticky_posts' => 1,
'orderby' => 'rand',
'tax_query' => array(
array(
'taxonomy' => 'post_format',
'field' => 'slug',
'terms' => array(
'post-format-link',
'post-format-status',
'post-format-aside',
'post-format-quote' ),
'operator' => 'NOT IN'
)
)
);
$cat_query = new WP_Query( $args );
if ( $cat_query->have_posts() ) {
while ( $cat_query->have_posts() ) {
$cat_query->the_post();
$img = genesis_get_image() ? genesis_get_image( array( 'size' => 'related' ) ) : '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/related.png" alt="' . get_the_title() . '" />';
$related .= '<li><a href="' . get_permalink() . '" rel="bookmark" title="Permanent Link to' . get_the_title() . '">' . $img . get_the_title() . '</a></li>';
}
}
}
if ( $related ) {
printf( '<div class="related-posts"><h3 class="related-title">Related Posts</h3><ul class="related-list">%s</ul></div>', $related );
}
wp_reset_query();
}
}Bước 3: Khai báo kích thước hình ảnh, bài viết hiển thị trong file style.css.
Dán mã dưới đây để hiển thị bài viết liên quan và hình thu nhỏ trong theme genesis.
/************ Related Posts *************/
.related-posts {
overflow: hidden;
margin: 0 0 10px;
}
.related-list li {
float: left;
list-style-type: none;
margin: 0 10px 0 0;
text-align: center;
width: 105px;
}
.related-list img {
display: block;
margin: 0 auto;
padding: 5px;
}Và một điều đặc biệt nữa là chúng ta tạo 1 ảnh với tên là related.png với kích thước: 100x100px Sau đó upload vào thư mục images trong theme child. Thật đơn giản phải không nào, chỉ với 3 bước là chúng ta có thể hiển thị bài viết liên quan và hình thu nhỏ dưới bài viết. Còn một mẹo nhỏ nữa: Mặc định sẽ hiển thị 5 bài viết liên quan, bạn muốn hiển thị nhiều hơn thì hãy tìm code trên chỗ nào có 5 thì sửa bằng 6,7 theo ý mình. Thật tuyệt vời khi sử dụng theme Genesis vì có tốc độ load nhanh, ổn định và tối ưu seo nữa. Chúc các bạn thành công và hãy theo dõi bằng cách chia sẻ và like bài viết nhé.
Facebook