Chào các bạn, ở phần trước mình đã chỉ cho các bạn làm phần header, sử dụng theme option cài đặt plugin WordPress Custom Field Pro rồi nhỉ. Thì ở phần 4.2 này mình sẽ bắt đầu hướng dẫn các bạn cách tạo menu, thiết lập menu và sử dụng menu trên WordPress nhé.
Phần 2: Menu WordPress
Đầu tiên các bạn vào Post > Categories > Thêm Categories > điền Name và Slug Sau đó bạn thêm đoạn code sau vào file functions.php để tạo menu trên WordPress
function theme_features() {
register_nav_menu('headerMenuLocation','Header Menu Location');
}
add_action('after_setup_theme', 'theme_features');
Kế tiếp bạn include menu bạn vừa tạo vào file header.php: Sau khi include Menu vào rồi thì bạn vào giao diện admin WordPress để tiến hành thiết lập menu. Bạn vào Appearance > Menu > Create Menu > Chọn Tab Categories > đưa các categories mình cần vào > Chọn Tên Menu Của mình vừa tạo (Ở đây của mình là Header Menu Location) > Save
Giờ bạn tiếp túc download 2 loại font: BalooThambi2 và Lora , sau khi bạn down về thì đưa vào thư mục fonts như trong hình.
Cuối cùng thì mình style và cài đặt font lại cho đẹp (bạn có thể tạo file fonts.css nếu bạn muốn): Font:
@font-face {
font-family:BalooThambi2;
src:url('../fonts/BalooThambi2-Regular.ttf') format('truetype'),
url('../fonts/BalooThambi2-Medium.ttf') format('truetype'),
url('../fonts/BalooThambi2-Bold.ttf') format('truetype');
font-weight:normal;
font-style:normal;
}
@font-face {
font-family:Lora;
src:url('../fonts/Lora-Regular.ttf') format('truetype'),
font-weight:normal;
font-style:normal;
}
Style menu:
.main-menu{ padding:15px 0; background:rgba(28,97,130,.1); border: 1px solid rgba(28,97,130,.26); } .main-menu .menu-item a{ text-transform: uppercase; font-size:25px; font-weight:600; } .menu{ display: flex; margin: 0 auto; justify-content: space-between; } li.menu-item { margin: 0 auto; } li.menu-item a:hover{ color:#1c6182; } li.menu-item a::after{ content: ""; display: block; height: 3px; background: #1c6182; width: 0; transition: all .4s linear; } li.menu-item a:hover::after{ width:100%; }
Và cuối cùng là sản phẩm: