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