Sign up
106
0
Web Development WordPress

WordPress: Thiết Kế Theme (P4.2: Menu Navigation)

Lamies
Lamies
19/04/2020 · 2 min read
106
WordPress-Development
Thời gian đọc: 2 phút

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 Thêm Categories Image 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: Main Menu Image 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 Cài Đặt Menu WordPress Image 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. Cài Font Image 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: WordPRess Result
0