Cách tạo menu thả xuống cho themes WordPress

Bạn có phân loại các chủ đề và chủ đề con của Web hoặc Blog? Nếu vậy, hãy dùng  drop-down menu cho thanh menu – gọn gàng và tiện dụng hơncho người xem! – đặc biệt với những site lớn.

Sau đây là những cách khác nhau để có một drop-down menu

Giới thiệu

Menu này của chúng ta sẽ hiển thị list trang đầu tiên, và cuối cùng một tab gọi là: Categories, danh sách các chuyên mục của bạn.

Trình đơn này  chỉ dùng XHTML and CSS. Không cần JavaScript (trừ khi bạn muốn duy trì tính tương thích với  IE6) để đảm bảo tốt nhất có thể SEO cho blog của bạn.

Cách làm

Để dễ theo dõi, tôi chia theo 3 bước – PHP và HTML, CSS và JavaScript cho IE6 (IE6 cũng sắp tuyệt chủng rồi?! Dùng JavaScript chỉ tạo sự tương thích cho IE6, do vậy tôi không dịch phần này của tác giả.)

Bước 1: PHP and HTML

Mở file header.php và  paste những dòng code vào nơi bạn muốn nó xuất hiện:

<ul id="nav">
<li><a href="<?php echo get_option('home'); ?>/"
class="on">Home</a></li>
<?php wp_list_pages('title_li='); ?>
<li><a href="#">Categories</a>
<ul>
<?php wp_list_categories('orderby=name&title_li=');
$this_category = get_category($cat);
if (get_category_children($this_category->cat_ID) != "") {
echo "<ul>";
wp_list_categories('orderby=id&show_count=0&title_li=
&use_desc_for_title=1&child_of='.$this_category->cat_ID);
echo "</ul>";
}
?>
</ul>
</li>
</ul>

Mục đích của mã này là để tạo ra một danh sách của tất cả các trang web và subpages, cũng như một thành phần cuối cùng có tên trong danh sách loại (Categories). Khi  người đọc đưa chuột trên một trong các cấp trình đơn, các subpages (hay chuyên mục) được hiển thị.

Bước 2: The CSS

Mở file style.css và paste những code sau:

#nav{
background:#222;
font-size:1.1em;
}
#nav, #nav ul {
list-style: none;
line-height: 1;
}
#nav a, #nav a:hover {
display: block;
text-decoration: none;
border:none;
}
#nav li {
float: left;
list-style:none;
border-right:1px solid #a9a9a9;
}
#nav a, #nav a:visited {
display:block;
font-weight:bold;
color: #f5f5f4;
padding:6px 12px;
}
#nav a:hover, #nav a:active, .current_page_item a, #home .on {
background:#000;
text-decoration:none
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 174px;
border-bottom: 1px solid #a9a9a9;
}
#nav li li {
width: 172px;
border-top: 1px solid #a9a9a9;
border-right: 1px solid #a9a9a9;
border-left: 1px solid #a9a9a9;
background: #777;
}
#nav li li a, #nav li li a:visited {
font-weight:normal;
font-size:0.9em;
color:#FFF;
}
#nav li li a:hover, #nav li li a:active {
background:#000;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav
li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
a.main:hover {
background:none;
}

Bạn có thể phải thay đổi code này một chút để phù hợp với hình thức  blog của bạn,  ví dụ như  màu sắc. Một khi bạn đã hoàn tất, save file này.

Vậy là xong! Blog của bạn bây giờ  nhìn rất chuyên nghiệp với một  drop-down menu.

Còn tiếp…

Dựa vào cách làm một drop-down menu trên, bạn có thể sử dụng những gì bạn đã học được làm nhiều loại menu khác. Ví dụ, hãy xem làm thế nào để dùng lại những code trên và làm một horizontal drop-down menu.

Tạo một  drop-down menu theo chiều ngang

Phần1: PHP and HTML

Copy những dòng code sau vào nơi bạn muốn menu xuất hiện, trong file header.php chẳng hạn:

<ul id="nav2">
<li><a href="<?php echo get_option('home'); ?>/"
class="on">Home</a></li>
<?php wp_list_categories('orderby=name&exlude=181&title_li=');
$this_category = get_category($cat);
if (get_category_children($this_category->cat_ID) != "") {
echo "<ul>";
wp_list_categories('orderby=id&show_count=0&title_li=
&use_desc_for_title=1&child_of='.$this_category->cat_ID);
echo "</ul>";
}
?>
</ul>

Phần 2:  CSS

Trong drop-down menus, CSS là phần rất quan trọng. Trong VD này, đây là CSS để hiển thị menu của chúng ta theo chiều ngang.

Paste  code sau vào file style.css:

#nav2{
background-color: #202020;
display: block;
font-size:1.1em;
height:50px;
width:100%;
}
#nav2, #nav2 ul {
line-height: 1;
list-style: none;
}
#nav2 a ,#nav2 a:hover{
border:none;
display: block;
text-decoration: none;
}
#nav2 li {
float: left;
list-style:none;
}
#nav2 a,#nav2 a:visited {
color:#109dd0;
display:block;
font-weight:bold;
padding:6px 12px;
}
#nav2 a:hover, #nav2 a:active {
color:#fff;
text-decoration:none
}
#nav2 li ul {
border-bottom: 1px solid #a9a9a9;
height: auto;
left: -999em;
position: absolute;
width: 900px;
z-index:999;
}
#nav2 li li {
width: auto;
}
#nav2 li li a,#nav2 li li a:visited {
color:#109dd0;
font-weight:normal;
font-size:0.9em;
}
#nav2 li li a:hover,#nav2 li li a:active {
color:#fff;
}
#nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul,
#nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.
sfhover ul {
left: 30px;
}

Sau khi paste xong và lưu lại, Blog của bạn sẽ có một menu drop-down chiều ngang rất đẹp hiển thị các đề mục (categories).

Theo: http://www.packtpub.com

  • mình làm theo cách này của bạn thì trang của mình chỉ có mỗi Home và Categories, mình muốn có thêm Tin Tức, Giới Thiệu , Liên Hệ như của bạn thì phải làm thế nào ? sửa code hay tạo mới ?? bạn chỉ giúp mình nhé ! Mình đang làm đề tài :(

    • nguyen dung

      Bạn lưu ý,
      có thể tạo các trang mới (New Pages) như Tin Tức, Liên Hệ… ngoài trang Home ban đầu.
      có thể tạo ra các chuyên mục (categories) ngoài chuyên mục Uncategorized ban đầu.
      Khi bạn post bài mới nó sẽ chỉ nằm trong trang Home thôi, không vào các trang mà mình muốn.
      Mỗi trang mới tạo chỉ cho post có duy nhất 1 bài.

      Có một cách khắc phục đơn giản là:
      Người ta sẽ tạo ra các trang ví dụ như: Tin Tức, Sản Phẩm, Liên Hệ….
      Sau đó tạo ra các chuyên mục tương tự như : Tin Tức, Sản Phẩm, Liên Hệ….
      Người ta sẽ liên kết ( link) các trang này với các chuyên mục này:
      Ví dụ trang Sản Phẩm liên kết đến chuyên mục Sản Phẩm. Khi bạn post một bài chỉ việc xếp nó thuộc loại chuyên mục nào, ví dụ tôi xếp bài post vô chuyên mục Sản Phẩm, thì khi ấy các bài post sẽ xuất hiện trong các trang Sản Phẩm.
      Tóm lại:
      1) Tạo trang mới : New Page
      2) Tạo chuyên mục mới: Categories
      3) Cài đặt plugin, liên kết các trang và các categories tương ứng.
      4) Post bài, xếp chúng vô chuyên mục tương ứng.

      Để làm được bạn dùng plugin Page Links To ( phiên bản tại thời điểm mình viết là 2.6)
      Donwload: http://wordpress.org/extend/plugins/page-links-to/

      Còn phần sử dụng bạn chịu khó tự tìm hiểu nhé.

      • Cho vanmy cảm ơn vì comment giải đáp hết sức cụ thể của nguyen dung, các bạn đọc xong có thể thực hiện theo các bước của nguyen dung! :):

      • anh duc

        Bạn ơi cho mình hỏi là: Ví dụ mình không dùng Plugin này . Mình tạo 3 chuyên mục : Tin Tức, Sản Phẩm, Liên Hệ
        Sau đó, Mình vào Menus, và add các chuyên mục đó vào ngang hàng nhau!
        Thì khi ra trang chủ nó cũng xuất hiện 3 Menu in Tức, Sản Phẩm, Liên Hệ
        Như vậy có được không ?
        Thanks các bạn

        • Hoàn toàn được bạn à. Cách này là nhanh nhất và khỏe nhất đấy.

  • Hix, e không biết phải thêm vòa chỗ nào trogn đoạn code dài như thế, mọi ng có thể chỉ rõ tí đc không :(

  • Nguyen The Hoang

    Hiện nay có khá nhiều themes wordpress miễn phí hỗ trợ thêm menu thả xuống và nhiều dạng menu khác mà ko cần can thiệp vào code, các bạn có thể sử dụng các themes đó.

  • Thanks bài viết có ích…

  • Pingback: Cách tạo menu thả xuống cho themes WordPress : Trường Bạch Blog()

  • Cảm ơn cho bài viết hay. Đã làm được rồi nà :beauty:

  • Admin cho mình hỏi…Trên thanh menu của bạn có cái thẻ Search nằm góc ngoài cùng bên phải…Mình cũng muốn có 1 cái mà loay hoay mãu vẫn không biết sao….Admin chỉ giúp với….Cám ơn nhiều nhiều luôn…:D

  • DavidTruong

    bước 3 đâu pạn

  • Mình đang tạo 1 theme mới mà không sao đưa menu ra được. Làm theo sách hướng dẫn thì thấy hiển thị trên site, nhưng trong trang quản trị thì không thấy Menu ở thể Appearance. Giúp mình với minh đang cần gấp để làm bài cho thầy. Cám ơn các bạn

  • Mình muốn tạo widget cho theme mà làm theo sách không thấy nó hiển thị trong Appearance.
    Bạn giúp mình với.

  • Hiện nay có khá nhiều themes wordpress miễn phí hỗ trợ thêm menu thả xuống và nhiều dạng menu khác mà ko cần can thiệp vào code, các bạn có thể sử dụng các themes đó.