Bài 3 : Cấu trúc file của Theme WP – Chuyển Template(code tĩnh) thành Theme WP

Bài 3 : Cấu trúc file của Theme WP – Chuyển Template(code tĩnh) thành Theme WP

Lợi Trương - Admin Follow Author

Ở bài trước mình đã hướng dẫn các bạn cách cài WordPress để tạo 1 website cơ bản, sử dụng các theme miễn phí trong cộng đồng theme WP. Hôm nay, mình sẽ hướng dẫn các bạn cách chuyển từ 1 bộ source Tĩnh => Thành 1 Website Động với CMS WordPress.

Đây là Template chúng ta sẽ chuyển thành Theme WordPress , các bạn có thể download tại đây.

Bắt Đầu Chiến thôi!!

Các bạn vào thư mục wp-content/themes trong thư mục wordpress đã làm ở bài 2 để thêm mới một Folder có tên là new24h.

Tiếp theo các bạn copy source code template vừa download ở link google drive trên vào Folder theme new24h

Sau đó các bạn tạo 12 file : 

404.php , archive.php , comments.php , footer.php , functoins.php , header.php , index.php , page.php , search.php , sidebar.php , single.php , style.css

Chức năng các file bạn xem ảnh dưới nhé :

  • 404.php : File giao diện trang 404 , là khi url không tồn tại.
  • archive.php : Giao diện của các trang category, tag, custorm post type…
  • comments.php : Giao diện phần comment

Add code file header.php

mình tách phần này là header vì ở page nào cũng xuất hiện

Các bạn vào file index.html (file template) copy đoạn mã của phần header (từ đầu file -> tag <header>) dán vào file header.php

Sau đó, các bạn phải thêm đoạn code : <?php wp_head(); ?> vào trước thẻ đóng </head> . Chức năng như để khẳng định đây là Header.

Quan trọng : bạn thêm đoạn mã sau vào những tag link như : <?php bloginfo(‘template_directory’)?> src trong tag <img/> và <script> , href trong tag <link/> …. Chức năng là lấy đường dẫn của server đến thư mục theme : http://localhost:8080/antoan/wp-content/themes/new24h

File header sau khi hoàn thiện sẽ như thế này :

Add code file footer.php

đây là phần Footer

Tương tự như file header , nhưng file footer các bạn sẽ thêm code <?php wp_footer();?> vào trước thẻ body đóng </body> . File footer hoàn thiện :

Add code file index.php

Phần ở giữa còn lại dĩ nhiên là giao diện của Trang chủ – file index.php rồi . Copy code phần còn lại từ file template : index.html vào file index.php

Bạn phải thêm 2 đoạn code <?php get_header(); ?> <?php get_footer(); ?> vào đầu và cuối file index.php . Công dụng là sẽ call 2 file header và footer cộng vào file index.php

Vậy là Giao diện Trang chủ đã hoàn thiện :

giao diện trang chủ đã hoàn thiện

Nếu có image nào hoặc file nào load lỗi các bạn nhớ thêm đoạn code này vào trước các link nhé : <?phpbloginfo(‘template_directory’) ?>

Bài viết sau mình sẽ hướng dẫn các bạn cách Get Data – Get bài những bài viết từ database lên giao diện , để website hoạt động một cách tự động. Các bạn có thể xem tiếp tại đây.

Comment

2.3 4 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Dark Mode

Fanpage Facebook