Hướng dẫn wordpress themes php - chủ đề wordpress php
Mở đầuBài viết này mình xin được hướng dẫn các bạn các bước cơ bản để tạo nên một theme WordPress của riêng mình . Show
Tạo một WordPress Theme "zin"1. WordPress Theme StructureVề cơ bản, bất cứ WordPress theme nào cũng cần có 5 file chính: 2 3 4 5 62. style.css & screenshot.pngTrong file 2, ngoài việc căn chỉnh thuộc tính cho các thẻ HTML, chúng ta có thể khai báo các mô tả cho theme.Ví dụ, ở đầu file 2:
Ngoài những mô tả chính như ở trên cho theme, chúng ta có thể thêm các options khác để mô tả theme chi tiết hơn: Ví dụ:
Ngoài ra, WordPress cho phép người dùng đặt ảnh đại diện cho theme thông qua file 9.Kết quả: 3. header.phpTrước khi viết phần header cho theme, chúng ta cần tìm hiểu qua một số các template tags (hiểu là các functions được WordPress hỗ trợ cho đơn giản ):
Chúng ta có thể tham khảo thêm các thuộc tính của 2 tại đây.
Ví dụ, khi ở một page:
Về cơ bản, một header của theme nên có những thành phần sau:
Chú ý: Trước khi đóng thẻ 6, chúng ta cần thêm template tag 7 để WordPress hiểu được chúng ta đang set phần header cho theme.4. footer.phpTương tự như 4:
Chú ý: Trước khi đóng thẻ 9, chúng ta cần thêm template tag 0 để WordPress hiểu được chúng ta đang set phần footer cho theme.5. sidebar.phpỞ phần sidebar, chúng ta có thể đặt các quảng cáo hay menu cho website cũng được
Chú ý: sidebar.php không cần template tag như 7 và 0 để hiển thị.6. index.phpSau khi đã setup xong header, footer và sidebar, file 3 sẽ được viết như sau:
7. LoopsTrước khi tìm hiểu cách hiển thị các posts hoặc page trong 4, chúng ta cần tìm hiểu các cách hiển thị posts thông qua loop của WordPress.Cách 1: Loop mặc định của WordPress.
Cách 2: Sử dụng 5 để sửa lại cấu trúc mặc định của loop. 0Cách 3: Sử dụng 6. 1Cách 4: Sử dụng class 7. 2Cách 5: Sử dụng 8.Cá nhân mình đánh giá thì đây là cách an toàn nhất để tạo một loop riêng biệt hay nhiều loop trên một trang. 38. Hiển thị các posts & pageDựa vào các cách sử dụng loop để hiển thị posts và page, file 3 có thể được viết lại như thế này: 4 WordPress đã hỗ trợ cho chúng ta những template tags như 0, 1, etc. để hiển thị nội dung của một post.Ngoài ra, nếu người dùng muốn set "avatar" cho các posts, chúng ta có thể sử dụng template tag 2. Ví dụ: 5Chú ý: Cần bật tính năng hiển thị thumbnail cho các posts bằng cách thêm đoạn code: Cần bật tính năng hiển thị thumbnail cho các posts bằng cách thêm đoạn code: 6vào file 3 (sẽ nói ở dưới ạ ).Kết quả: (Mình lười quá nên sử dụng theme Twenty Sixteen có sẵn của WordPress để test hihi ) => 9. Hook, Action & FilterHookHiểu đơn giản nhất thì Hook là tên gọi cho các functions mặc định của WordPress.Hook là tên gọi cho các functions mặc định của WordPress. Hook được chia ra làm 2 loại: Action (về mặt event) và Filter (về mặt nội dung).Action (về mặt event) và Filter (về mặt nội dung). Chúng ta dùng function 4 và 5 để override lại các hook của WordPress.ActionVí dụ, nếu muốn tính năng thêm avatar cho các posts sau khi theme được khởi taọ, chúng ta có thể móc thêm function của mình vào hook 6: 7FilterVí dụ thông qua code cho dễ hiểu ạ 8Cụ thể thì hook 7 có tác dụng làm cho nội dung đoạn văn được lấy ra từ database chỉ hiển thị ở view max 50 kí tự, sau đó 8.Sau khi được override lại bằng function 9, đến kí tự thứ 40 sẽ 8 thay vì 50 như trước (trong database không thay đổi, chỉ thay đổi ở view).10. functions.php 3 là file quan trọng nhất khi viết một theme WordPress. Bất cứ khi nào load trang, WordPress sẽ tìm đến file 3 đầu tiên, xử lý các tác vụ rồi mới xuất ra cho người dùng.Mình có viết một file core functions.php cơ bản như sau: 9Đôi khi, 3 cũng có tác dụng như là một 4.Ví dụ, chúng ta muốn tạo một hàm 5 giống như trong Laravel, bên trong 3, chúng ta viết như sau: 0 Như vậy, chúng ta có thể sử dụng cú pháp 7 ở bất kỳ file 8 thay vì phải 1như mọi khi Kết thúcTrên đây mình đã hướng dẫn các bước cơ bản để tạo một core theme WordPress. Hi vọng bài viết giúp ích cho các bạn. Hẹn gặp lại mọi người trong các bài viết sau Tham khảohttps://websitesetup.org/html-to-wordpress/ |