• Menu
  • Skip to right header navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

VANMY.NET

  • Home
  • WordPress
    • Plugins
    • Themes
  • SEO
    • Onpage
    • Offpage
  • Social Media
    • Google Plus
    • Facebook
  • Blogging
    • Domain
    • Hosting
    • Khác
  • Liên hệ
  • Site map
  • Home
  • WordPress
    • Plugins
    • Themes
  • SEO
    • Onpage
    • Offpage
  • Social Media
    • Google Plus
    • Facebook
  • Blogging
    • Domain
    • Hosting
    • Khác
  • Liên hệ
  • Site map
You are here: Home / Wordpress / Cách tạo menu thả xuống cho themes Wordpress

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

Bài viết liên quan:

  1. Cách làm nổi bật màu nền comment trong WordPress
  2. Tạo tabs 3D cho WordPress
  3. Themes WordPress đẹp cho mobile
  4. Sitemap wordpress và cách tạo HTML Sitemap không cần plugin
  5. Làm đẹp cho nút “Read More…” của Child Theme Genesis
  6. 25 best free wordpress themes
  7. Cách update wordpress lên phiên bản mới an toàn hơn (full)
Next Post: Cách thay đổi emoticon mặc định của WordPress »

Reader Interactions

Comments

  1. ntk2803

    March 22, 2012 at 6:12 pm

    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 🙁

    Reply
    • nguyen dung

      April 18, 2012 at 10:22 pm

      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é.

      Reply
      • vanmy

        April 20, 2012 at 12:27 am

        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! :):

        Reply
      • vanmy

        August 6, 2013 at 10:20 pm

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

        Reply
  2. buidiem

    March 24, 2012 at 1:14 pm

    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 🙁

    Reply
  3. Nguyen The Hoang

    March 25, 2012 at 12:23 am

    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 đó.

    Reply
  4. Suadogomynghe

    April 22, 2012 at 10:48 pm

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

    Reply
  5. Sáu Hỉ

    August 1, 2013 at 5:35 pm

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

    Reply
  6. Nhật

    August 11, 2013 at 7:02 pm

    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

    Reply
  7. DavidTruong

    November 14, 2013 at 7:55 am

    bước 3 đâu pạn

    Reply
  8. Hong Huyen

    January 9, 2014 at 9:19 am

    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

    Reply
  9. Hong Huyen

    January 9, 2014 at 11:18 am

    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.

    Reply
  10. Nguyen Vu

    January 28, 2014 at 11:44 am

    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 đó.

    Reply

Trackbacks

  1. Cách tạo menu thả xuống cho themes WordPress : Trường Bạch Blog says:
    June 23, 2012 at 12:12 pm

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

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Xem nhiều

Cách cấu hình và cài đặt WordPress trên host server

Cách sử dụng FileZilla FTP Client để upload file lên host

Cách cấu hình và cài đặt WordPress trên máy tính với Xampp

Cách nhắn tin sms miễn phí

Cách nhắn tin SMS miễn phí không tốn tiền

phat wifi tu laptop

Cách sử dụng wifi iphone từ wifi của laptop trên win 7

Wordpress

Plugin thêm nút Like của Facebook vào trong WordPress

Wordpress va mang xa hoi

Tăng cường sức mạnh của mạng xã hội cho WordPress

Các tính năng mới của WordPress 3.3 beta 1

Blogger 301 Redirect Plugin cho WordPress

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

SEO

Google panda update 24

Google cập nhật thuật toán Panda lần thứ 24 ngày 22-1-2013

thuat toan zebra ngua van

Google cho ra đời thuật toán Zebra-ngựa vằn tháng 3/2013

Thủ thuật SEO ảnh để tăng lượng truy cập từ công cụ tìm kiếm

thay doi thu hang tim kiem google theo thoi gian

Thứ hạng tìm kiếm trên Google thay đổi theo thời gian

google cap nhat thuat toan panda penguin 2013

Google cập nhật thuật toán Panda, Penguin tháng 3-2013

Footer

Categories

  • Blogging
  • Domain
  • Facebook
  • Google
  • Google Plus
  • Hosting
  • Khác
  • Pagerank
  • Plugins
  • SEO
  • SEO Offpage
  • Social Media
  • Themes
  • Thư giãn
  • Tin tức
  • Tips
  • Wordpress

Bạn bè

  • Học seo
  • Hoc Thiet Ke Web
  • Nguồn Game
  • Thạch Phạm Blog

dịch vụ thành lập doanh nghiệp tại đà nẵng | Blog Giá Rẻ

Copyright 2009 by vanmy.net