Tạo menu cố định đơn giản cho WordPress

Tạo menu cố định thật sự không phải là vấn đề khó khăn đối với các bạn đã biết về lập trình web. Có khá nhiều cách đề làm được việc này, các bạn có thể sử dụng  jQuery nhưng mình lại mù tịt cái này Cry nên mình sẽ sử dụng một công cụ đơn giản nhất là CSS nhờ vào thuộc tinh fixed position. Các bạn có thể xem demo ngay trên blog của mình bao gồm menu cố định bên trên và menu hiển thị một bài viết ngẫu nhiên cố định ở bên dưới. Bây giờ mình sẽ hướng dẫn các bạn tạo ra một menu giống như menu bên dưới của mình.

float bottom

Tạo menu hiển thị bài viết ngẫu nhiên

Đối với các thêm thông thường, ta sử dụng đoạn code sau để chèn vào file footer.php, phía sau thẻ </body>

<?php
	echo '<div class="float-bottom">';
	$args=array(
                'showposts'=>'1',
		'orderby'=>rand);
	$my_query = new wp_query($args);
        while ($my_query->have_posts()){
             $my_query->the_post(); ?>
	     <p><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
	<?php }
	echo '</div>'; 
?>

Đối với các bạn sử dụng Genesis Child Theme, ta sẽ chèn đoạn code sau vào file function.php

add_action('genesis_after','rayno_float_bottom');
function rayno_float_bottom(){
     if(function_exists(rayno_float_button)){
	return;
     }else {
	echo '<div class="float-bottom">';
	$args=array(
                'showposts'=>'1',
		'orderby'=>rand);
	$my_query = new wp_query($args);
        while ($my_query->have_posts()){
             $my_query->the_post(); ?>
	     <p><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
	<?php }
        echo '</div>';
	}
}

Cố định cho menu

Trong đoạn code trên, ta đã khai báo một lớp tên là float-bottom, ta sẽ bổ sung lớp này vào file style.css trong theme của bạn

.float-bottom {
	background: #272727;
	background:rgba(0,0,0,0.9);
	width: 100%;
	overflow: hidden;
	z-index: 999999;
	position: fixed;
	bottom: 0;
	text-align: center;
	padding: 10px;
}
.float-bottom a{
	font-size: 24px;
	color: #FFFFFF;
}
.float-bottom a:hover {
	font-size: 24px;
	color: #CCCCCC;
}

Thuộc tính background:rgba sẽ tạo hiệu ứng trong suốt cho nền của menu, thuộc tính position: fixed;bottom: 0; sẽ cố định menu ở bên dưới cùng của màng hình. Để tạo menu cố định phía trên, bạn có thể áp dụng các thuộc tính trên vào các lớp đã có sẵn như #nav hoặc #subnav tùy theo theme của bạn.

Đánh giá bài viết này

Chú ý - WordPress Hosting 1$/tháng - miễn phí tên miền

Bạn có biết GoDaddy đang có khuyến mãi WordPress hosting chỉ còn 1$/tháng kèm theo một tên miền .COM .NET .ORG miễn phí. Hãy đăng ký ngay để tiết kiệm chi phí nhất nhé.
Xem ngay

ĐĂNG KÝ NHẬN TIN QUA EMAIL

Nếu thấy bài viết trên blog có ích cho bạn, hãy đăng ký nhận tin qua email để cập nhật bài viết mới nhanh nhất và thỉnh thoảng nhận quà bất ngờ!

Comments

  1. hackphonehy says:

    Cái này mình cũng đã làm qua từ nâu. Nhưng mình thấy nó hơi mất chút kb khi load lên lại gỡ 😀

  2. mình ko thạo wp nhưng hứa làm cái web đông y cho ng quen
    bạn vào xem hộ mình cái demo chưa có nội dung gì hình ảnh màu sắc có tạm ko
    nhờ bạn góp ý

  3. Bạn có thể chỉ cho mình làm cái thanh menu cố định ở trên giống blog bạn được hok. Mình dùng genesis, ở bài viết trên bạn chỉ có nói đến làm thanh ở dưới thôi. Mong bạn hồi âm

    • nếu menu trên của bạn là secondary thì bạn tìm trong file style.css lớp #subnav rồi thêm vào hai thuộc tính: width: 100%; position: fixed;

      • Mình dùng skin giống bạn đấy, như bạn biết thì cái menu secondary thì nó ở dưới cái menu chính nên dùng cách trên của bạn không được. Có phải dùng header.php để gỏi nó lên đằng trước không hay mình dùng cách nào? Mong bạn chỉ dạy {c26}

      • Bạn thêm đoạn code này vào file function.php để đưa menu secondary lên trên nhé:

        remove_action( 'genesis_after_header', 'genesis_do_subnav');
        add_action( 'genesis_before_header', 'genesis_do_subnav');
  4. Sorry bạn vì làm phiền bạn quá, mình xin bạn cái css của cái thanh menu của bạn luôn được hok, xin chân thành cám ơn bạn nhiều nhiều. À quên, làm sao để chèn thêm một cái search form vào thanh đó được? Thanks

    • Chèn search form thì bạn dùng code này nhé:

      function add_search_box_secondary_menu($items, $args) { 
      if ($args->theme_location == 'secondary') {
              ob_start(); 
              get_search_form(); 
              $searchform = ob_get_contents(); 
              ob_end_clean(); 
        
          $items .= '<li class="searchbox">' . $searchform . '</li>';
        }
        return $items;        
      }
      add_filter('wp_nav_menu_items','add_search_box_secondary_menu', 10, 2);

      Còn thanh menu trên của mình thì mình làm không giống với các theme khác nên không cho bạn code được

  5. Mình cũng đang có ý định làm cái này

  6. Bạn ơi, cái khung athour box đấy, mình có vài thông tin về mình nhưng nó bị cái lỗi không tự xuống hàng. Ví dụ từ “những”, thay vì hết chỗ thì nó cho từ “những” xuống hàng luôn thì nó lại cắt từ “những” làm 2 phần “nh” rồi xuống dòng “ững”. Vậy làm sao để chỉnh lại đây bạn?

  7. Thiết kế logo giá rẻ says:

    trước h cái menu nó nằm mỗi chỗ # khi nhấn f5, bực hết bk, h có bài viết này giúp mình sửa dc r, đã TEST và OKEY {c6}

  8. Newrichdu says:

    Mình sài Thesis thì sao bạn?

  9. Mình đọc chưa rõ lắm “D Bạn chỉ lại mình cách cố định 1 dòng dưới như trang của bạn được không? Cảm ơn bạn nhiều 🙂

  10. AD ơi, bác hướng dẫn cái quảng cáo như mấy site lớn mà nó đứng im, dù ở chỗ nào cũng không thoát được nó ý đi

  11. Theme mình dùng lại tự động có menu kéo xuống chạy theo, nay muốn bỏ đi thì làm thế nào hả bạn ?

  12. có plugin nào hỗ trợ việc này ko bạn

  13. Napster says:

    Mình muốn cái menu primany navigation cố định thì đoạn code phải sửa thế nào bạn?

Gửi bình luận

Lưu ý: Không sử dụng keyword để thay cho tên của bạn, hãy sử dụng tên thật. Cảm ơn bạn đã tham gia bình luận trên blog!