Qua 5 bài hướng dẫn các bạn đã có blog sử dụng Genesis Child Themes do chính bạn tạo ra. Thật tuyệt vời phải không nào, blog tin tức thật nhẹ, tối ưu code, tốc độ loads cực nhanh.
Bạn muốn website của mình sinh động hơn đẹp hơn như những trang tin tức ? Bài viết này dành cho bạn. Hiển thị bài viết nổi bật Featured Post mà bạn muốn với các bố cục do bạn tạo ra.
Featured Post List On Home
Trong bài này chúng tôi sẽ hướng dẫn và cho bạn code để hiển thị bài viết nổi bật với một bố cục lưới. Bạn cần có kỹ năng css để tạo ra nhiều bố cục mà bạn muốn.
Để bắt đầu tạo chức năng riêng bạn hãy vào Folder child themes của bạn tạo thêm Floder “ lib ” nằm ngang với file Function.php. Trong Folder ” lib ” tạo file có tên featured-posts.php như vậy là xong khâu chuẩn bị, tiếp theo hãy làm như bên dưới.
Function.php file
Copy & pate code bên dưới vào file function.php để child theme gọi đến file featured-posts.php
// Add Featured Posts List. include_once( get_stylesheet_directory() . '/lib/featured-posts.php' );
Featured-posts.php file
Copy & pate code bên dưới vào file featured-posts.php để tạo Option Featured Post List và đưa nó vào trang chủ blog của bạn.
<?php
/**
* Featured Posts List.
*
* This file adds Featured Posts List to the Code Genesis Child Theme.
*
* @package Code Genesis Child
* @author LongViet
* @license GPL-2.0-or-later
* @link https://longvietweb.com/
*/
// Admin Setting
add_action('admin_menu', 'posts_add_pages');
function posts_add_pages() {
// Add new menu in Setting:
add_submenu_page('edit.php','Featured Posts List', 'Featured Posts List', 8, 'postsoptions', 'posts_options_page');
}
// Main function to diplay on front end
add_action( 'genesis_before_content', 'featuredpostsList' );
function featuredpostsList() {
global $post, $wpdb, $posts_settings;
if( is_home()){
// posts_id from database
$posts_id = $posts_settings['posts_id'];
?><div class="featured-posts-container"><?php
if($posts_id): $i = 0;
$posts_idarray = explode(',',$posts_id);
foreach ($posts_idarray as $list){
$post = new WP_Query('p='.$list.'');
$post->the_post();
$categories = get_the_category();
?> <div class="featured-posts list-<?php echo $i; ?>" style="background-image:url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>')">
<div class="featured-posts-content">
<div class="featured-posts-cat"><a href="<?php echo get_category_link( $categories[0]->term_id ); ?>"><?php echo esc_html( $categories[0]->name );?></a></div>
<h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<div class="featured-posts-time"><?php the_time('M j, Y') ?></div>
</div>
</div><?php $i ++; ?>
<?php } else : ?>
<p><?php _e( 'Sorry, no Featured Post List to display. Please set in the Setting', 'genesis-child' );?></p>
<?php endif;
?></div><?php
}
}
$posts_settings = get_option('posts_settings');
$data = array(
'posts_id' => ''
);
$ol_flash = '';
/* Functions */
function posts_options_page() {
global $ol_flash, $posts_settings, $_POST, $wp_rewrite;
if (isset($_POST['posts_id'])) {
$posts_settings['posts_id'] = $_POST['posts_id'];
update_option('posts_settings',$posts_settings);
$ol_flash = __('Your Featured List has been saved.', 'genesis-child');
}
if ($ol_flash != '') echo '<div id="message"class="updated fade"><p>' . $ol_flash . '</p></div>';
?>
<div class="wrap">
<h2><?php _e('Add Posts ID to Create Featured Post List','genesis-child') ?></h2>
<form action="" method="post">
<table class="optiontable form-table">
<tr><h3><?php _e('Display Featured Post List to your site.','genesis-child') ?></h3></tr>
<tr>
<th><?php _e('Post ID :','genesis-child') ?></th>
<td>
<input type="text" name="posts_id" placeholder="1, 2, 3" value="<?php echo htmlentities($posts_settings['posts_id']); ?>" size="50%" /></th><br />
<label for="disabled"><?php _e('To Add Multiple Post IDs use " , " for exmple : " 1, 2, 3"','genesis-child') ?></label>
</td>
</tr>
</table>
<p class="submit">
<input type="submit" class="button-primary" value="<?php _e('Save Featured Post List','genesis-child') ?>" />
</p>
</form>
</div>
<?php
}/*
1, 736, 725, 691 */
Style.css file
Ở bài này chúng tôi cho bạn mẫu css, css này chưa responsive. Bạn cần có kỹ năng css để tạo responsive và tạo ra nhiều bố cục khác nữa. Copy & pate code bên dưới vào file style.css
/* Featured Post List */
.featured-posts {
float: left;
box-shadow: inset 0 0 0 1500px #2222225e;
-webkit-filter: initial;
filter: initial;
-webkit-transform: initial;
-khtml-transform: initial;
-moz-transform: initial;
-ms-transform: initial;
-o-transform: initial;
transform: initial;
-webkit-transition: all 0.2000s linear;
transition: all 0.2000s linear;
position: relative;
background-position: 50% 50%;
background-size: cover;
}
.featured-posts:hover {
-webkit-filter: initial;
filter: initial;
-webkit-transform: initial;
-khtml-transform: initial;
-moz-transform: initial;
-ms-transform: initial;
-o-transform: initial;
transform: initial;
-webkit-transition: all 0.2000s linear;
transition: all 0.2000s linear;
box-shadow:inset 0 0 0 2000px #2222222e;
}
.featured-posts.list-0 {
width: 50%;
height: 462px;
border-right: 5px solid #fff;
}
.featured-posts.list-1 {
width: 50%;
height: 231px;
border-bottom: 5px solid #fff;
}
.featured-posts.list-2 {
border-right: 5px solid #fff;
}
.featured-posts.list-2,
.featured-posts.list-3 {
width: 25%;
height: 231px;
}
.featured-posts.list-0
.featured-posts.list-2,
.featured-posts.list-3 {
margin-bottom: 40px;
}
.featured-posts-content {
position: absolute;
top: 20px;
left: 25px;
right: 25px;
max-height: 95px;
z-index: 1;
font-size: 14px;
}
.featured-posts-cat a {
background-color: #fe2e2e;
color: #fff;
font-size: 10px;
font-size: 1rem;
font-weight: 300;
padding: 5px 10px;
text-transform: uppercase;
border-radius: 3px;
}
.featured-posts h2 a,
.featured-posts-time {
color: #fff;
text-transform: capitalize;
font-family: "Roboto",Arial,sans-serif;
text-shadow: 1px 1px 3px rgba(0,0,0,.2);
}
.featured-posts h2 a:hover,
.featured-posts-time:hover {
color: #fff;
padding-left: 10px;
border-left: 5px solid red
}
.featured-posts h2 a {
font-size: 16px;
}
.list-0 h2 a, .list-1 h2 a {
font-size: 24px;
line-height: 30px;
}
Sử dụng
Sau khi các bước được hoàn tất bạn có thể cài đặt những bài viết được hiển thị trong Option Featured Post List. Lưu ý Bạn cần lấy 4 ID của 4 post với bố cục mẫu này.
Lời kết
Vậy là xong rồi đó, bạn đã có một blog tin tức đẹp mắt, ko cần plugin, ko cần cầu kỳ, code tối ưu. Bạn hãy xem thêm các hướng dẫn khác trên website này bạn sẽ tìm thấy nhiều hướng dẫn khác để bạn làm cho blog của bạn.
Tôi hy vọng bạn tìm thấy hướng dẫn này hữu ích. Nếu vậy, hãy xem xét chia sẻ nó với khán giả của bạn!
Genesis Hook
Làm quen với Genesis Framework
Custom Breadcrumb Code Genesis Child Phần 4
Cảm ơn bác