Hôm nay mình sẽ viết một bài hướng dẫn các bạn cách có thể chèn cách bài post thuộc cùng 1 category vào menu.
Cách làm dưới đây mình không áp dụng ajax như theme newspager nhé, bản trả phí mình sẽ sử dụng ajax. Mà không biết khi nào mới có time để làm bản trả phí ^^.
Mình không muốn các bạn vào đây chỉ để copy code và dán vào theme, mình muốn các bạn tư duy một chút để sau này các bạn có thể tự làm cho mình được một cái gì đó ^^. Vì vậy mong mọi ng đọc hết bài nhé.
Đăng ký và tạo shortcode hiển thị menu
Đầu tiên để có thể custom cái menu thì bắt buộc bạn phải code một shortcode gọi menu cho riêng mình, và hàm đăng ký menu sẽ giúp bạn việc này.
Mình sẽ đăng ký 1 menu với tên gọi là menu chính
Bạn vào Menu trong quản trị xem menu của mình đã hiển thị chưa nhé
Xong bước 1, bước thứ 2 là tạo shortcode hiển thị menu.
Tạo shortcode hiển thị menu
Bạn dụng hàm tạo shortcode cơ bạn là có thể giải quyết được vấn đề này nhé. Trong shortcode đó mình sẽ tạo một menu phân cấp (3 cấp) và dùng query chèn các bài post vào các menu item.
Code dưới đây chỉ áp dụng cho menu vừa tạo trên thôi nhé (‘main-nav’ => ‘Menu chính’).
<?php
$menuLocations = get_nav_menu_locations();
$menuID = $menuLocations['main-nav'];
$primaryNav = wp_get_nav_menu_items($menuID);
$id_parent =0;
foreach ( $primaryNav as $navItem ) {
if($navItem -> menu_item_parent == $id_parent){
if ( 'category' == $navItem->object ) {
$category_id = get_cat_ID($navItem->title);
$pttuan = new WP_Query(array(
'post_type'=>'post',
'post_status'=>'publish',
'cat' => $category_id,
'order' => 'DESC',
'posts_per_page'=> 5));?>
<li class="menu-item<?php echo $navItem ->ID;?> menu-recent-post menu-item-has-children has-dropdown"> <a href="<?php echo $navItem->url;?>" title="<?php echo $navItem->title;?>"><?php echo $navItem->title ;?></a><div class="recent-post-custom nav-dropdown nav-dropdown-default">
<?php while ($pttuan->have_posts()) : $pttuan->the_post(); ?>
<div class="item-post-menu">
<div class="pic-post-menu-pttuan"><a href="<?php the_permalink() ;?>"><?php the_post_thumbnail('post-thumnails'); ?></a></div>
<h3 class="title-post-menu-pttuan"><a href="<?php the_permalink() ;?>"><?php the_title() ;?></a></h3>
</div>
<?php endwhile ; wp_reset_query();?>
</div></li>
<?php }else{
echo '<li class="menu-item'.$navItem ->ID.' menu-item-has-children has-dropdown"> <a href="'.$navItem->url.'" title="'.$navItem->title.'">'.$navItem->title.'</a>';
}
$sub="";
foreach ( $primaryNav as $navItem2 ) {
if($navItem2 -> menu_item_parent == $navItem ->ID){
$sub .= '<li class="menu-item'.$navItem2 ->ID.'"> <a href="'.$navItem2->url.'" title="'.$navItem2->title.'">'.$navItem2->title.'</a>';
$sub2="";
foreach ( $primaryNav as $navItem3 ) {
if($navItem3 -> menu_item_parent == $navItem2 ->ID){
$sub2 .= '<li class="menu-item'.$navItem3 ->ID.'"> <a href="'.$navItem3->url.'" title="'.$navItem3->title.'">'.$navItem3->title.'</a></li>';
}
}
$sub .= '<ul>'.$sub2.'</ul>';
$sub .= '</li>';
}
}
echo '<ul class="nav-dropdown nav-dropdown-default">'.$sub.'</ul>';
echo '</li>';
}
}
?>
<?php }
add_shortcode('menucust','menucustom');
À ở phía trên mình có sử dụng hàm tạo ảnh thumnail, nên các bạn nhớ tạo ảnh thumnail nhé, dùng code sau.
add_theme_support('post-thumbnails');
add_image_size('post-thumnails', 219, 219, true);
}
add_action('after_setup_theme', 'custom_image_sizes');
Vậy là xong phần code PHP, đoạn code trên mình cho hiển thị 5 bài viết mới nhất, các bạn có thể tìm hiểu về query của wordpress để tự custom lại phần này nhé, phần css thì mình chỉ làm sơ sơ, các bạn muốn đẹp hơn thì tự thân vận động nhé. ^^
Css cho các post trở nên đẹp hơn nhé!
position: absolute;
min-width: 1200px;
}
.menu-recent-post .recent-post-custom .item-post-menu{
width: 18.5%!important;
margin:0 6px;
}
.title-post-menu-pttuan{
font-size: 13px;
}
Mọi thứ đã xong, bây giờ bạn chỉ cần vào menu, tạo một menu mới. Chọn cái (Menu chính) mà mình vừa tạo, bỏ phần category vào menu đó là được nhé. Đoạn code trên sẽ nhận category mà bạn bỏ vào và xuất ra các bài viết thuộc category đó ra ngoài.
Dùng shortcode để hiển thị ra bên ngoài front-end nhé.
Và đây là kết quả cuối cùng
Vì mình không phải DEV, nên các class và function đặt tên hơi tào lao nên các pro coder đừng soi quá nhé.
Mình sẽ phát triển cái này thành plugin (Vì mình nghĩ mình cũng sẽ dùng cái này nhiều). Dĩ nhiên là plugin này các bạn sẽ phải trả phí ^^.
Tính năng của plugin này sẽ gồm:
- Slider cho các post.
- Kết hợp ajax.
- …
Chú ý, cái này rất quan trọng, vì nó ảnh hưởng rất nhiều đến tâm lý của mình. Đó là CÁC BẠN NHỚ DONATE CHO MÌNH NHA, không cần giá trị quá cao, mình chỉ cần cái gọi là TINH THẦN THÔI ^^.
P/s: Mình không phải DEV, kiến thức của mình đều do mày mò, tư duy, cắt ghép mà thành, vì vậy các bạn Pro Dev có thể xem và giúp mình cải thiện phần code thêm (Nếu có thể) chứ đừng chửi mình nhé.