WordPress-Development-wolfactive-949x475
12/04/2020

WordPress: Thiết Kế Theme (P3: Demo Site)

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.

WordPress Demo

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.

WordPress Demo

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.

WordPress Demo

Đầ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.

WordPress Demo

WordPress Demo

*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.

WordPress Demo

  Và đây là kết quả:

WordPress Demo

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.

WordPress Demo

Ở 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

WordPress Demo Footer

Ở đâ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

wordpress admin bar

Admin Bar WordPress

home-page.php

WordPress Demo

Ở đ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.

WP Demo image

Sau đó bạn vào mục Page. Chọn Add New.

WP Demo image

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.

WP Demo image

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.

WP Demo image

Cuối cùng các bạn load lại trang Local của mình và sẽ có sự thay đổi.

WP Demo image

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

Vui lòng chọn size trước khi đặt hàng (*)