Theme options trong wordpress là một khu vực để thiết lập, tùy chỉnh một số phần của theme WordPress. Chẳng hạn như cho phép người dùng có thể thay đổi logo, các thông tin lên hệ, thay đổi màu sắc của website… Theme options giúp cho người dùng sử dụng website một cách dễ dàng hơn, chủ động thay đổi một số phần của website mà không cần phải vào code.
Vậy làm sao để tạo được theme options? Có những plugin nào hỗ trợ làm theme options không? Bài viết hôm nay mình và các bạn sẽ giải quyết vấn đề đó 😀
Download và cài đặt plugin Advanced Custom Fields PRO
Các bạn chú ý: Chỉ có phiên bản ACF pro mới làm được chức năng này nha!
Download: Advanced Custom Fields PRO (Phiên bản 5.6.10)
Cài đặt: Đây là plugin rất phổ biến các bạn down về giải nén bỏ vào thư mục: wp-content/plugins. Hoặc vào khu vực plugins trong admin cài đặt nhưng 1 plugin bình thường!
** Đây là bản share của plugin nên không thể update phiên bản mới nha!. Bạn nào cần key bản quyền thì liên hệ với mình giá cực kỳ ưu đãi nhé 🙂
Tạo trang tùy chỉnh website theme options
Sau khi bạn cài đặt thành công plugin ACF Pro bước tiếp theo chúng ta cần làm là tạo 1 page để quản lý các tùy chọn của webiste. Bạn sử dụng đoạn code sau để tạo page options nha:
Thêm đoạn code này vào file functions.php của theme.
|
1 2 3 4 5 6 7 8 9 |
if( function_exists('acf_add_options_page') ) { acf_add_options_page(array( 'page_title' => 'Theme options', // Title hiển thị khi truy cập vào Options page 'menu_title' => 'Theme options', // Tên menu hiển thị ở khu vực admin 'menu_slug' => 'theme-settings', // Url hiển thị trên đường dẫn của options page 'capability' => 'edit_posts', 'redirect' => false )); } |
Vào admin để kiểm tra bạn sẽ thấy xuất hiện menu tùy chỉnh như hình phía dưới!.
Thêm thông tin vào trang tùy chỉnh website
Sau khi bạn tạo xong trang tùy chỉnh thì lúc này trang vẫn chưa có nội dung, sau đây mình sẽ tạo những nội dung tùy chỉ cho trang đó. Để dễ hình dung thì mình sẽ lấy ví dụ trang tùy chỉnh của chúng ta sẽ làm các chức năng sau:
- Thêm sửa logo website
- Thêm sửa địa chỉ
- Thêm sửa email
Sau đây chúng ta sẽ thực hiện việc thêm nội dung bằng cách sử dụng plugin ACF.
Bước 1: Duy chuyển đến menu Custom Fields chọn Add New
Bước 2: Ở khu vực Add New Field Group các bạn thêm điền tên group field và thêm các field mong muốn.
- Làm chức năng tùy chỉnh logo: Tên field là logo kiểu của field là image
- Làm chức năng tùy chỉnh địa chỉ: Tên field là address kiểu field là text
- Làm chức năng tùy chỉnh email: Tên field là email kiểu là text
Xem hình phía dưới để hiểu rõ hơn nhé:
Bước 3: Ở khu vực location các bạn chọn Options Page như hình phía dưới.
Sau khi hoàn thành các bước trên các bạn ấn Đăng bài viết bên góc phải, Các bạn qua quay trở lại trang tùy chỉnh (Theme options) để xem hết quả nhé!
Kết quả của trang tùy chỉnh
Thêm nội dung vào trang tùy chỉnh và get dữ liệu ra ngoài
Thêm nội dung: Các bạn tiến hành nhập liệu nội dung bình thường
Get dữ liệu ra giao diện: Chúng ta sẽ sử dụng cú pháp sau để get dữ liệu:
|
1 2 3 |
<?php the_field({field_name}, 'option'); ?> |
lưu ý {field_name} là tên field khi chúng ta tạo các field nhé. Cụ thể trong ví dụ mà chúng ta đang làm sẽ như sau:
Get logo:
|
1 2 |
<?php $logo = get_field('logo', 'option'); ?> <img src="<?php echo $logo; ?>" alt="My website"> |
hoặc
|
1 |
<img src="<?php the_field('logo', 'option'); ?>" alt="My website"> |
Get địa chỉ:
|
1 2 3 4 |
<p> <strong>Địa chỉ:</strong> <?php the_field('address', 'option'); ?> </p> |
Get email:
|
1 2 3 4 |
<p> <strong>Email:</strong> <?php the_field('email', 'option'); ?> </p> |
Tóm lại:
Bài viết hôm nay mình đã hướng dẫn cho các bạn cách làm theme options sử dùng plugin ACF Pro. Hy vọng bài viết này sẽ giúp ích cho các bạn trong quá trình học lập trình theme wordpresss. Nếu các bạn cần key bản quyền của plugin này thì liên hệ với mình để được giá ưu đãi nhé.
Với plugin ACF Pro thì ngoài options được các trường cơ bản như, image, text, textarea, date… Bạn còn có thể options nhiều thứ như: gallery, google map, reapeat content …
Các bạn có thể tham khảo một số cách làm theme options bằng plugin khác tại đây: -> tạo trang tùy chỉnh của thạch phạm
- Nếu các bạn có nhu cầu làm web thì liện hệ với mình nha: Thiết kế web wordpress chuyên nghiệp.
- Mình có một số mẫu website thiết kế sẳn với nhiều tính năng và giao diện đẹp, giá thì lại rẻ :D. Các bạn có thể tham khảo tại đây: Mẫu web đẹp
Cảm ơn mọi người! Chúc các bạn thành công!
Lê Tiếntuyệt vời?
Thích Trả lời 6 năm trước
Minhtrước khi cài bản PRO này, có cần cài trước bản thường (free) không vậy ad ... hay chỉ 1 plugin PRO này là được vậy ạ ???
Thích Trả lời 5 năm trước
NghiaNếu mình dùng acf bản free để tạo custom field cho sản phẩm trong woocommerce thì có cách nào để mình có thể filter sản phẩm theo các custom field không Huy. Mình sử dùng trình builder elementor pro và 1 vài addon khác.
Thích Trả lời 4 năm trước
Thick QuotaGet logo như code ở trên không được, phải get từ hàm get_field và chọn field 'url'['url']; ?>)
Thích Trả lời 2 năm trước
Thick Quota
Thích Trả lời 2 năm trước
Thick Quotaget_field('logo', 'option')['url'];
Thích Trả lời 2 năm trước
Huy Kira:))) Bác lại đọc hướng dẫn ko kỹ rồi :D Hướng dẫn
Thích Trả lời 2 năm trước
Thick Quotaok, chọn Image URL not Image Array. Thanks nhiều. Nếu Huy tiện trả lời cho mình hỏi: field description trong file ảnh là không có tính năng gì phải không? Nó giống như ghi chú cho file ảnh đó thôi phải không? mình nghĩ là vậy. Tại nếu nó không có tác dụng nhưng có thể lợi dụng field này nhét thông tin link vào & get ra bằng code. VD như: https://huykira.net/webmaster/wordpress/tao-gallery-hinh-anh-trong-wordpress.html --> nhét link vào description xong nhét vào thẻ link a khi hiển thị image.
Thích Trả lời 2 năm trước