- công nghệ
- Lập trình
- WordPress
1156
liên kết
điện báo
lục mục lục
Bài viết được sự cho phép của tác giả Trần Anh Tuấn
Ở bài trước chúng ta đã setup mọi thứ và cũng xem qua Design luôn rồi. hôm nay chúng ta sẽ bắt đầu viết theme WordPress và phần đầu tiên đó chính là Header và Banner của Design
Các hình ảnh-icons trong Design mình lấy toàn bộ và upload lên Drive các bạn có thể nhấn vào đây để tải về sử dụng trong quá trình viết theme WordPress nhé
# Setup cơ bản
Trước khi vào công việc chính, các bạn cần cài đặt một số Plugins sau để hỗ trợ cho việc viết theme WordPress nhé. Những plugin đó là Trường tùy chỉnh nâng cao, Giao diện người dùng loại bài đăng tùy chỉnh, Hỗ trợ SVG
Tiếp theo kiểu mở tệp của bạn. css lên các bạn xóa hết mã đi, chỉ để quay lại phần ghi chú thôi sau đó vào trang này sao chép đoạn mã đặt lại CSS rồi dán vào tệp style. css đã được. Lúc này kiểu tệp. css sẽ trông như thế này. Về reset CSS là gì các bạn có thể tìm hiểu nó tại đây nha
/*! Theme Name: Maker Theme URI: //underscores.me/ Author: Underscores.me Author URI: //underscores.me/ Description: Description Version: 1.0.0 ...... */ /*reset css below*/ reset css paste here
Tiếp theo các hàm bạn mở tệp. php lên và sao chép các dòng bên dưới dán vào bên dưới cùng. Đoạn mã này có chức năng cho phép chúng ta thêm lớp vào thẻ
/*Adding class to menu item - li tag */
function add_menu_list_item_class[$classes, $item, $args] {
if[$args->list_item_class] {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter['nav_menu_css_class', 'add_menu_list_item_class', 1, 3];
/*Adding class to link menu item - a tag */
function add_menu_link_class[ $atts, $item, $args ] {
if[$args->link_class] {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter[ 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 ];4, hoặc thẻ /*Adding class to menu item - li tag */
function add_menu_list_item_class[$classes, $item, $args] {
if[$args->list_item_class] {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter['nav_menu_css_class', 'add_menu_list_item_class', 1, 3];
/*Adding class to link menu item - a tag */
function add_menu_link_class[ $atts, $item, $args ] {
if[$args->link_class] {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter[ 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 ];0 trong Menu mà tí nữa chúng ta sẽ thực hiện thông qua hàm wp_nav_menu/*Adding class to menu item - li tag */
function add_menu_list_item_class[$classes, $item, $args] {
if[$args->list_item_class] {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter['nav_menu_css_class', 'add_menu_list_item_class', 1, 3];
/*Adding class to link menu item - a tag */
function add_menu_link_class[ $atts, $item, $args ] {
if[$args->link_class] {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter[ 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 ];Một lưu ý nữa là sau khi các bạn cài đặt xong các Plugin rồi thì đừng quên vào Admin Dashboard chọn Thư viện sau đó nhấn Tải lên -> Chọn tệp -> Chọn hết toàn bộ cấu hình các bạn đã tải về khi cạo rồi
# tiêu đề
Như trong Design thì chúng ta thấy có Logo bên trái và Menu ở bên phải. Logo mặc định WordPress được cung cấp tại mục Tùy biến [Customize] nhưng làm sao để lấy nó ra và hiển thị ở vị trí mà ta mong muốn thì mình sẽ hướng dẫn sau. Còn Menu thì rất đơn giản, các bạn vào Dashboard -> Giao diện -> Menu
Các bạn sẽ thấy giao diện có một Menu có tên là Menu 1. Các bạn thêm các Mục vào Menu này để nó đủ bộ như Thiết kế luôn nhé, chọn Liên kết tự tạo rồi nhấn Thêm vào menu. Đừng quên đánh dấu Primary và nhấn menu Lưu nhé
Bây giờ các bạn mở tiêu đề tệp. php lên sẽ thấy rất nhiều đoạn code phức tạp mà lúc chúng ta tải về nó đã có sẵn rồi, các bạn xóa sạch từ khúc
/*Adding class to menu item - li tag */
function add_menu_list_item_class[$classes, $item, $args] {
if[$args->list_item_class] {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter['nav_menu_css_class', 'add_menu_list_item_class', 1, 3];
/*Adding class to link menu item - a tag */
function add_menu_link_class[ $atts, $item, $args ] {
if[$args->link_class] {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter[ 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 ];1 quay xuống luôn nha sau đó các bạn dán vào đoạn code của mình bên dưới đâyChủ Đề