Tạo Drop Down Menu Cho Theme Hybrid

Cái tên Theme Hybrid có lẽ không ai còn xa lạ, song mình cũng sẽ giới thiệu đôi nét về theme này để những bạn chưa biết sẽ hiểu thêm về Theme Hybrid.

Theme Hybrid là WordPress Framework được phát triển bởi Justin Tadlock. Với đặc điểm cực kì gọn nhẹ, nhiều tính năng phong phú và “đặc biệt là khả năng SEO” tốt. Điểm nổi bậc nhất là miễn phí!

Nhưng điều đáng nói ở đây chính là vấn đề theme cho blog, Theme Hybrid không có nhiều bộ sưu tập theme để bạn download về hay mua … Song với khung sườn tuyệt vời thì bạn có thể sáng tác ra một giao diện riêng cho mình với những tính năng chuyên nghiệp đã tích hợp sẳn vì Theme Hybrid chủ yếu là chỉnh sửa code nên sẽ khá đơn giản với bạn (không chuyên về code lắm, chỉ việc “copy&paste” ) .

Sơ lượt vài tính năng đơn giãn nhưng hữu dụng của Hybrid :

• Dễ dàng tạo thumbnail cho bài viết theo nhiều cách khác nhau.

• Có thể tự thiết lập SEO thủ công không cần dùng plugin

• Tích hợp tạo trang phong phú trong đó có những trang nổi trội như : chuyển hướng, đăng nhập, đăng ký, Portfolio …và hơn 40 mẫu trang khác để bạn lựa chọn làm những phần riêng biệt.

Download theme : http://themehybrid.com/themes/hybrid
Danh sách chidtheme ( Free ) : http://themehybrid.com/themes
Demo :

• Giản đơn : http://themehybrid.com/demo/hybrid/index.php?wptheme=Hybrid
• Đã qua tùy chỉnh: http://noface.info

Sau đây vào vấn đề rắc rối với theme Hybrid đây…

Trong phần website mẫu của Hybrid thì có Drop-down menu, song khi ta xem kỷ hơn thì nó chỉ hiện với bản 0.8 trở lại .. Trong khi đó phiên bản hiện tại là 0.9.

Phần hướng dẫn này không khó để thêm một drop-down menu ưng ý nhưng bạn cần cẩn thận những bước đi cũng mìn cũa như tìm hiểu thêm để phát triễn những điều khác !

Đầu tiên bạn Download : http://eblog….rop-menu.zip .

Giờ thì thực hiện những bước sau.

Bước 1:
Giải nén thư mục drop-menu và copy file trong thư mục JS trong thư mục drop-down vào thư mục JS theo đường dẫn \library\js.

Còn thư mục Image và CSS thì cũng cho vào thư mục JS trong library cho dễ quản lý.

Bước 2:

Trong thư mục theme edit tệp tin “media.php” theo đường dẫn trong thư mục theme

library/functions/media.php

Tìm đến dòng 67 có dòng chữ như bên dưới, thay “drop-downs.js” bằng “superfish.js”

wp_enqueue_script( ‘drop-downs’, esc_url( apply_atomic( ‘drop_downs_script’, trailingslashit( HYBRID_JS ) . ‘drop-downs.js’ ) ),

Bước 3: bắt đầu đơn giãn hơn rồi đó.

Edit file header.php trong thư mục theme bằng cách thêm:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/library/js/css/styles.css" />
<script type='text/javascript' src='<?php bloginfo('template_directory'); ?>/library/js/hoverIntent.js'></script>
<script type='text/javascript' src='<?php bloginfo('template_directory'); ?>/library/js/jquery-1.2.6.min.js'></script>
<script type="text/javascript">
// initialise plugins
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});
</script>

Trước tags </head>

Tiếp đến là thêm dòng:

<ul class="sf-menu">
<?php wp_list_categories('sort_column=name&title_li=&depth=3&hide_empty=0'); ?>
</ul>

vào phần bất cứ nơi đâu trong header mà bạn muốn hiển thị Drop-down menu.

P/S: Mình không có đủ 25$ để hỏi xem tác giả giấu những thanh menu kia làm gì! Nhưng mình nghĩ đó mới là bí quyết kinh doanh!

Chúc bạn may mắn và lực chọn cho mình một theme ưng ý!!!

About Thái Nguyên
Mình tên Thái Nguyên và là sáng lập viên No Face ,và mình hiện đang sinh sống tại một vùng quê thanh bình trên đất Long An Mình sống với phương châm chia sẽ tất cả những gì mình biết và câu danh ngôn luôn theo mình là "Điều ta biết không phải ai cũng biết" Nên mình rất tự tin vào những gì mình viết ..Mong được làm quen tất cả các bạn .

Visit my website →