Bài 10 : Code giúp User thay đổi mọi thứ có trên giao diện của website

Bài 10 : Code giúp User thay đổi mọi thứ có trên giao diện của website

Lợi Trương - Admin Follow Author

Vì đã làm một website CMS rồi thì không thể nào khi muốn thay đổi Image, Email , số điện thoại hay một đoạn text thì phải mở file code ra sửa đúng không nào?? Và User không biết gì về IT thì càng không thể .

Do đó chúng ta cần code customize , đưa những thứ muốn thay đổi vào site admin giúp User làm việc một cách dễ dàng. Còn ông nào có suy nghĩ là làm website cho khách nhưng muốn thay đổi Image hay text phải liên hệ ông để làm rồi charge tiền thì tui không nói nổi nha 😀

Bây giờ, mình sẽ hướng dẫn các bạn code chức năng giúp cho người dùng thay đổi logo, image banner và email , số điện thoại ở phần header.

đây sẽ là những công việc chúng ta sẽ làm

1- Cú pháp Custom Image

Code này được đặt trong file functions.php :

Vậy là chúng ta đã khai báo hàm custom logo .

Tiếp theo,

Tiếp theo, chúng ta sẽ gọi logo ra ngoài giao diện . Các bạn tìm đến thẻ image cần thay thế logo và sử dụng câu lệnh :

với ‘change_logo’ là tên hàm bạn đã đặt ở trên file functions.php . Nếu bạn muốn đổi hình ở vị trí khác thì có thể copy hàm trên và đổi thành tên hàm bất kỳ và sau đó tìm tới thẻ img cần đổi để call get_theme_mod tên hàm ra là được.

Bây giờ bạn vào site admin : Giao diện -> Tùy Biến . Sẽ thấy Control Change Logo chúng ta vừa tạo.

Đã có chức năng change logo
Cho phép các bạn chọn ảnh – tải ảnh lên

Lưu ý

  • get_theme_mod(‘change_logo’) : get tên hàm setting các bạn đã khởi tạo ở file functions.php

Vậy là xong, các bạn vào site admin chọn lại ảnh logo cho website . Thay vì up ảnh và chèn link cứng thì bây giờ chúng ta đã có chức năng upload image và tên file sẽ được lưu vào database . Giúp website của bạn linh động hơn.

2- Cú pháp Custom Text

Cũng tương tự như custom image , nhưng custom text đơn giản hơn .

Bây giờ mình sẽ hướng dẫn các bạn cách code hàm custom có nhiều chức năng chung một section . Nó sẽ có tác dụng giúp các bạn phân chia bố cục trong site amdin một cách hợp lý . Ví dụ các bạn sẽ chia ra chức năng custom header – và trong đó có thể thay đổi nhiều tính năng như : logo , email, phone …..Giúp site admin dễ hiểu dễ dùng hơn, không tràn lan đại hải.

Đây là code giúp người dùng thay đổi Email , phone . Code này được đặt trong file functions.php :

Gọi hàm get email/phone number ở những nơi bạn muốn hiển thị :

Vào site admin xem thành quả :

Những Hàm cần Lưu ý :

  • WP_Customize_Image_Control : khai báo một hàm customize Image free size ( không giới hạn kích thước hình ảnh) -> gọi ra giao diện chỉ cần dùng lệnh : echo get_theme_mod()
  • WP_Customize_Cropped_Image_Control : cũng là custom image nhưng là quy định kích thước .
  • WP_Customize_Control : custorm text.
  • add_panel : Đây là hàm tạo một panel giúp chứa nhiều section – trong section sẽ có nhiều control.

 Các bạn có thể tham khảo tại đây hoặc code dưới đây :

Lời kết

Vậy là với $wp_customize bạn có thể giúp người dùng thay đổi mọi thứ của website ở site admin một cách dễ sử dụng và trực quan nhất.

Nếu các bạn đã theo dõi , học và làm theo từ bài 1 đến giờ thì các bạn đã sẵn sàng code theme bán trên themeforest hoặc nhận dự án website . Nếu cần làm web bán hàng online thì các bạn kết hợp với bài viết các hàm cơ bản trong lập trình theme bán hàng và những đoạn code phổ biến – hay dùng trong lập trình Theme WordPress . Với một ít suy luận Logic cơ bản thì các bạn sẽ hoàn toàn làm được , nắm quyền kiểm soát WordPress code kiếm cơm 😀

Lưu ý, mọi bài viết mình đều share full code từng file. Nếu các bạn làm theo từng bước không hiểu có thể theo dõi Full code theo từng bài viết hoặc tải full source code tại đây nhé : tại đây. Theo dõi sharecodewebsite nhé 😍😍

Comment

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments

Kết quả xổ số hôm nay Trực Tiếp: KQXS, XSKT,  Số Trúng 3 miền, Xổ Số điện toán, xổ số Vietlove, KQXS 3 Miền mượt số #1. Tường thuật trực tiếp kết quả xổ số kiến thiết ngày hôm nay chuẩn nhất - nhanh nhất tại xskt.net.vn!

banner xskt

Dark Mode

Fanpage Facebook