Chúng ta sẽ tiếp tục phần cuối, ở phần này chúng ta sẽ tiếp tục lập trình phần social share và post navigation. Hãy cùng bắt đầu nào!
Tạo nút chia sẻ xã hội Genesis Child Theme
Việc thêm liên kết chia sẻ lên mạng xã hội giúp trang web của bạn trở nên phổ biến và thuận tiện hơn cho người dùng không phải sao chép & dán.
Sao chép mã bên dưới dán vào tệp chủ đề con function.php của bạn để tạo nút liên kết chia sẻ xã hội.
// Create Social Share Buttons .
if ( ! function_exists( 'socialshare_buttons' ) ):
add_action( 'genesis_entry_footer', 'socialshare_buttons', 18 );
function socialshare_buttons() { if( is_single( ) ) { // Get current page URL $quicksiteURL = urlencode(get_permalink()); // Get current page title $quicksiteTitle = htmlspecialchars(urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')), ENT_COMPAT, 'UTF-8'); // Get Post Thumbnail for pinterest $quicksiteThumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); // Construct sharing URL without using any script $twitterURL = 'https://twitter.com/intent/tweet?text='.$quicksiteTitle.'&url='.$quicksiteURL; $facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$quicksiteURL; $bufferURL = 'https://bufferapp.com/add?url='.$quicksiteURL.'&text='.$quicksiteTitle; $linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$quicksiteURL.'&title='.$quicksiteTitle; $pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$quicksiteURL.'&media='.$quicksiteThumbnail[0].'&description='.$quicksiteTitle; // Add sharing button at the end of page/page content $content='<div class="quicksite-social"> <div class="quicksite-link social-title"><h5>SHARE ON</h5></div> <a class="quicksite-link quicksite-twitter" href="'. $twitterURL .'" target="_blank">Twitter</a> <a class="quicksite-link quicksite-facebook" href="'.$facebookURL.'" target="_blank">Facebook</a> <a class="quicksite-link quicksite-buffer" href="'.$bufferURL.'" target="_blank">Buffer</a> <a class="quicksite-link quicksite-linkedin" href="'.$linkedInURL.'" target="_blank">LinkedIn</a> <a class="quicksite-link quicksite-pinterest" href="'.$pinterestURL.'" data-pin-custom="true" target="_blank">Pin It</a> </div>'; echo $content; }
}
endif;Copy đoạn code CSS bên dưới dán ở cuối file style.css
/* Social share button */.quicksite-social { margin: 10px 0px; padding: 10px; -webkit-font-smoothing: antialiased; font-size: 12px; border: 1px solid #eee;
}
.quicksite-link { padding: 4px 8px !important; color: #fff !important; font-size: 12px; border-radius: 2px; margin-right: 2px; cursor: pointer; margin-top: 2px; display: inline-block; text-decoration: none;
}
.social-title h5 { padding: 0px !important; margin: 0 !important;
}
.quicksite-link:hover,.quicksite-link:active { color: white;
}
.quicksite-twitter { background: #00aced;
}
.quicksite-twitter:hover,.quicksite-twitter:active { background: #0084b4;
}
.quicksite-facebook { background: #3B5997;
}
.quicksite-facebook:hover,.quicksite-facebook:active { background: #2d4372;
}
.quicksite-buffer { background: #444;
}
.quicksite-buffer:hover,.quicksite-buffer:active { background: #222;
}
.quicksite-pinterest { background: #bd081c;
}
.quicksite-pinterest:hover,.quicksite-pinterest:active { background: #bd081c;
}
.quicksite-linkedin { background: #0074A1;
}
.quicksite-linkedin:hover,.quicksite-linkedin:active { background: #006288;
}Điều hướng bài viết cho Genesis Child Theme
Điều hướng bài đăng là thêm các bài đăng trước và sau trên trang đăng bài. Đây cũng là một cách hay để giúp bạn có thêm một vài lượt xem trang vì một số độc giả sẽ nhấp vào liên kết bài đăng tiếp theo và trước đó của bạn.
Liên kết tất cả các bài đăng của bạn với nhau không phải là một cách tồi để đảm bảo tất cả chúng đều được lập chỉ mục trong kết quả tìm kiếm.
// Add Previous & Next Links in Genesis Single Post Page.
add_action('genesis_entry_footer', 'genesis_post_navigation', 20 );
function genesis_post_navigation() { if ( is_single ( ) ) { ?> <div class="adjacent-entry-pagination pagination"> <div class="pagination-previous alignleft"> <span class="prev"><?php _e( 'Previous Post', 'genesis-child' ); ?></span><br><?php previous_post_link('%link', '%title'); ?> </div> <div class="pagination-next alignright"> <span class="next"><?php _e( 'Next Post', 'genesis-child' ); ?></span><br><?php next_post_link('%link', '%title'); ?> </div> </div> <?php }
}Thêm một chút CSS vào tệp style.css
.adjacent-entry-pagination { margin: 40px 0;
}Genesis Hook
Các hook được tích hợp trong Genesis được sử dụng để sửa đổi hoặc thêm chức năng vào hệ thống cốt lõi của Genesis Theme.
Đoạn mã bên dưới giúp bạn hiển thị tất cả các hook của Genesis Framework. Vui lòng sử dụng nó như một hàm bằng cách sao chép và dán nó vào tệp chủ đề con function.php.
Khi quá trình phát triển chủ đề kết thúc, bạn có thể xóa chúng khỏi chủ đề.
// Display action-hook Genesis.
add_filter( 'all', 'genesis_action_hook' );
function genesis_action_hook () { global $wp_actions; if( ! is_admin ( ) ) { $current_action = current_filter(); if ( 'genesis_' !== substr( $current_action, 0, 8 ) ) { return; } if ( ! isset( $wp_actions[ $current_action ] ) ) { return; } echo '<div class="genesis-action-hook" style=" border: 1px solid red;padding: 5px;margin: 5px 0;">' . $current_action . '</div>'; }
}Bằng cách đó bạn có thể thấy tất cả các hook của Genesis Framework. Bây giờ trong quá trình phát triển Genesis Child, hãy để chức năng này hoạt động.
Vậy là bạn đã có code tốt để sử dụng cho Genesis theme rồi! Chúc may mắn!
