Chào các bạn, ở bài WordPress mình đã giới thiệu cho các bạn về cấu trúc của WordPress. Thì ở bài này mình sẽ viết một bài viết demo để cho các bạn có thể hiểu chi tiết về các file mà mình đã nói ở bài trước nhé. Cùng mình tìm hiểu về wordpress demo create site nhé!
Đầu tiên các bạn vào giao diện admin bằng cách thêm vào đường dẫn “/wp-admin/” lên link local của bạn ở đây của mình là “news-wolfactive.local” vậy sau khi thêm đường dẫn trên thì sẽ thành “http://news-wolfactive.local/wp-admin/” hoặc bạn có thể nhấn vào nút button “admin” trên giao diện Local By FlyWheel.
Sau khi vào giao diện admin bạn chọn mục Appearance > Themes. Đây sẽ là nơi chứa toàn bộ themes của bạn, hiện mình đang có 3 themes mẫu mà WordPress cấp sẵn và themes của mình “newswolfactive” tuy nhiên để chỉnh sửa lại theo ý của mình thì bạn sẽ làm như sau.
style.css
Các bạn vào thư mục style.css bằng chương trình soạn thảo mà bạn đang sử dụng và thêm đoạn code sau.
Đầu tiên mình sẽ định nghĩa từng cái cho mọi người hiểu từng dòng trên:
- Theme Name: Tên Theme WordPress của bạn
- Author: Tên tác giả (Tên người làm)
- Description: Đoạn mô tả cho theme của bạn
- Version: phiên bản
Ở trên là những dòng chính để miêu tả themes của bạn. Các bạn có thể xóa bớt tùy ý các dòng trên. Sau đó các bạn kiểm tra lại lần nữa tại mục themes trên admin bạn sẽ thấy sự thay đổi.
*chú ý: đây chỉ là file dùng để hiện thông tin themes không thể css, style các class, id trong template
screenshort.png
Cái này thì khá đơn giản. Bạn chỉ cần chụp một bức ảnh nào đó bằng snipping tool hay gì đó thì tùy bạn tuy nhiên đuôi file phải là PNG nhé. Sau đó bạn đưa vào folder themes của bạn.
Và đây là kết quả:
header.php
Đây sẽ là file chứa phần đầu template của bạn như mở thẻ html, thẻ head, mở thẻ body và phần code mà bạn muốn tái sử dụng ở các template khác ví dụ như menu, banner,… tùy ý bạn muốn như thế nào.
Ở trên là đoạn code trong file header.php của mình. Các bạn chú ý, ở đây mình có dòng lệnh gọi hàm <?php wp_head(); ?> đây là dòng bắt buộc phải có vì nó có chức năng dùng để gọi các dòng link rel, script từ các plugin mà bạn cài đặt trong wordpress.
footer.php
Tương tự như header.php mình sẽ có đoạn code như hình dưới
Ở đây mình cũng có dòng lệnh gọi hàm <?php wp_footer(); ?> chức năng của dòng này thì cũng như <?php wp_head(); ?>. *Chú ý: các bạn nhớ có 2 dòng này nhé, mình thấy nó rất quan trọng và phải có 2 dòng này thì mới xuất hiện thanh admin bar cho các bạn
Admin Bar WordPress
home-page.php
Ở đoạn code trên các bạn cần lưu ý 3 điều:
- template name: tên template của bạn.
- get_header(): hàm include file header.php.
- get_footer(): hàm include file footer.php.
Sau khi bạn hoàn thành xong bạn vào mục themes trên giao diện admin. Chọn Themes của mình và activate.
Sau đó bạn vào mục Page. Chọn Add New.
Tại đây, bạn điền tên page. Sau đó bạn vào mục Page Attributes > Template > chọn tên Template của mình (Ở đây tên Template của mình là: Home Page News WolfActive) và chọn Publish.
Kế tiếp bạn vào Setting > Reading > Chọn A static page > HomePage > chọn tên Page mà bạn đã tạo trước đó > Save Changes.
Cuối cùng các bạn load lại trang Local của mình và sẽ có sự thay đổi.
Cảm ơn các bạn đọc chia sẻ của Wolfactive về wordpress demo create site. Hy vọng những chia sẻ này giúp bạn trong việc thiết kế theme.
Xem thêm phần tiếp theo về thiết kế theme về wordpress tạo header