Ở 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 đi vào công việc chính thì các bạn cần cài một số Plugins sau để hỗ trợ cho việc viết theme WordPress nhé. Những plugins đó là Advanced Custom Fields, Custom Post Type UI, SVG Support.
Tiếp theo các bạn mở file style.css lên các bạn xóa hết code đi, chỉ để lại phần ghi chú thôi sau đó vào trang này copy đoạn code reset CSS rồi dán vào file style.css là được. Lúc này file style.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.
Tiếp theo các bạn mở file functions.php lên và copy các dòng dưới đây dán vào dưới cùng. Những đoạn code này có chức năng cho phép chúng ta thêm class vào vào thẻ li, hay thẻ a trong Menu mà tí nữa chúng ta sẽ làm 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 Plugins 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 tin -> Chọn hết toàn bộ hình ảnh các bạn đã tải về khi nãy rồi upload lên thôi.
Như trong Design thì chúng ta thấy có một Logo bên trái và một Menu ở bên phải. Logo mặc định WordPress có cung cấp ở 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 Item vào Menu này cho nó đủ bộ như Design luôn nhé, chọn Liên kết tự tạo rồi nhấn Thêm vào menu. Đừng quên tích Primary và nhấn Lưu menu nhé
Bây giờ các bạn mở file header.php lên sẽ thấy rất nhiều code phức tạp mà lúc chúng ta tải về nó đã có sẵn, các bạn xóa sạch từ khúc