Cách chèn bài post vào menu

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.

add_theme_support( 'menus' );
register_nav_menus(
array(
'main-nav' => 'Menu chính' ) );

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é

Menu sau khi đăng ký thành công sẽ hiển thị tại đây

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’).

function menucustom (){;?>
<?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.

function custom_image_sizes() {
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é!

.menu-recent-post .recent-post-custom{
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.

Tạo một menu, chọn menu hiển thị như bình thường

Dùng shortcode để hiển thị ra bên ngoài front-end nhé.

Dùng shortcode để xuất hiện ra front-end

Và đây là kết quả cuối cùng

Kết quả cuối cùng – Chèn post cùng category vào menu.

Back to posts

Comments: