Thủ thuật chèn logo vào menu WordPress đơn giản nhất

Như các bạn có thể thấy trên nhiều trang blog sử dụng WordPress, ảnh logo được đặt trên menu. Chẳng hạn như trang raynoblog.com của mình, mình đã đặt một ảnh logo ở bên trái của menu trên cùng. Vậy làm thế nào để đặt được logo vào đó? Có rất nhiều cách để làm việc này, ở đây mình sẽ hướng dẫn các bạn một cách đơn giản nhất.

insert logo to menuTrước tiên bạn cần tạo một ảnh logo có tên là logo.png với kích thước phù hợp với menu của bạn. Sau đó đặt vào thư mục images trong theme bạn sử dụng.

Bước tiếp theo là thủ thuật chính, bạn vào Appearance -> Menu để thêm một item vào menu. Ta sẽ thêm một item không có nội dung text bằng cách chọn mục Links và thêm một item như hình dưới đây:

add menu itemTrong mục URL bạn chỉ để một dấu /, trong mục Link text bạn chỉ nhập vào một dấu khoảng trắng. Sao đó click Add to Menu để thêm vào menu.

Tiếp theo, click vào Screen Option ở góc trên bên phải và đánh dấu tick vào mục CSS Classes.

add css classes

Quay trở lại Menu Structure bên dưới, thêm lớp css là logo vào item vừa tạo.

add classesBây giờ, việc cuối cùng là vào file style.css để thêm các thuộc tính cho lớp logo vừa tạo. Ta sẽ thêm như sau:

.logo a{
	height: 32px;
	width: 114px;
	background: url(images/logo.png) no-repeat;
}
.logo a:hover {
	background: url(images/logo.png) no-repeat !important;
}

Như vậy là bạn đã hoàn tất thủ thuật. Bạn có thể reload lại trang để xem kết quả. Ngoài ra bạn cũng có thể chèn logo vào menu bằng cách sử dụng code chèn vào file functions.php nhưng nó sẽ không phù hợp với những bạn không rành về code. Chúc bạn thành công!

Thủ thuật chèn logo vào menu WordPress đơn giản nhất
5 (100%) 2 votes

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. Nguyễn Phương says:

    Đặt hình Avartar vô tiêu đề bài viết như trên Site của bạn thì đặt như nào hả bạn ?

    • Bạn thêm code này vào file functions.php rồi thêm lớp css .ava vào file style.css cho phù hợp

      add_action(genesis_before_post_title,avatar_before_post_title);
      function avatar_before_post_title(){
      if(!is_page()){  
        echo '<div class="ava">';
        if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '60' ); }
        echo '</div>';
      }}
    • bạn có thể hướng dẫn ký hơn một chút được không. Cái này hay á. hihi.Nếu được mong bạn làm một bài viết cho cả nhà mình áp dụng được nhé {c6}

  2. Thủ thuật đơn giản mà rất hiệu quả {c6}

  3. Tran Nguyen says:

    Bạn hướng dẫn mình chèn cái banner Godaddy ngay trên đầu trang dưới thanh Menu đó được không? Thanks.

  4. Tran Nguyen says:

    Mình sử dụng Genesis bạn à.

    • Bạn sử dụng code này chèn vào file functions.php nhé:

      add_action ('genesis_before_content','top_godaddy');
      function top_godaddy(){
      	echo '<input onclick="window.open(';echo "'http://raynoblog.com/go/godaddy');  s=prompt('Sử dụng coupon giảm giá bên dưới khi thanh toán:','WPT100HOST')"; echo'" type="button" id="godaddy" value="" >';
      }
      

      Sau đó thêm một lớp vào file style.css

      #godaddy {
      	background: url(images/godaddy.png) no-repeat;
      	width: 990px;
      	height: 83px;
      }
  5. Tran Nguyen says:

    Mình đã làm được, nhưng cho mình hỏi chút nữa là nếu mình muốn bỏ khung nhập Coupon, chỉ cần nhấp vào banner là đi đến liên kết thì phải sửa lại thế nào vậy? Thanks.

  6. Tran Nguyen says:

    Bỏ cái dòng đó đi cái site của mình nó trắng trơn, không hiện gì luôn. {c26}

  7. Bác ơi,bác cho em email nhé. hoặc bác Pm email cure m luôn nhé 😀

  8. Cái để logo cho menu hay nè, đơn giản mà lại dễ sử dụng 😀

  9. Hi,
    Tôi có theme academy mà logo và menu ngang nhau, tôi muốn logo (banner) và menu ở hàng khác nhau, tôi phải làm sao? thank you. tôi gửi header hay theme cho bạn xem dùm được không?

  10. khuongnghi says:

    file “style.css” này nằm ở đâu vậy bạn.

  11. Bạn ơi có cách nào làm được như trang này không? http://familyshare.com
    Mình kết quá mà ko biết làm thế nào? Nếu bạn hướng dẫn được cụ thể thì tuyệt quá {c6}

  12. Xl bạn. File style.css tìm ở đâu vậy

  13. Tới phần sau cùng mình lại ko làm được, khi chèn file vào ko thấy hiện logo lên, bạn có thể giúp mình với. Thank bạn

  14. Trong phần Theme Options đều có chỗ add LOGO mà. Làm thế này hơi phức tạp

  15. Đến bước cuối mình không biết chèn code vào chỗ nào trong file style

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!