Phát hiện chặn quảng cáo

Xin lỗi bạn, mình có đặt quảng cáo để lấy kinh phí duy trì trang, nếu bạn không thấy phiền có thể tắt chức năng chặn quảng cáo và tải lại trang.

Tiếp tục xem
Tải lại

Hướng dẫn thêm custom fields cho menu WordPress

Menu trong WordPress là một nơi được khai thác rất nhiều để hiển thị giao diện một cách chuyên nghiệp hơn. Nếu dừng lại ở mức dùng cơ bản thì Menu trong WordPress chỉ cần CSS lại là xong. Tuy nhiên, đối với một số bạn viết Theme muốn cấu hình thêm chức năng cho menu trong theme thì sẽ cần phải thêm các trường tùy chỉnh(thêm custom fields vào trong menu) để tùy biến thêm. Hôm nay mình sẽ hướng dẫn các bạn thêm custom fields cho menu WordPress và cách sử dụng chúng.

Thêm custom fields cho menu WordPress thủ công

Thông thường, mình sẽ viết chức năng này thủ công để tránh không phải sử dụng các plugin khác. Cách này thường sẽ dùng cho các bạn Coder, đã quen làm việc với các đoạn mã code trong mã nguồn của WordPress.

Ý tưởng ở đây mình muốn làm là tạo ra một checkbox cho các menu cha, các menu con sẽ không hiển thị. Khi checkbox này được lựa chọn, thì menu sẽ hiển thị theo một cách khác.

Đầu tiên, các bạn cần quan tâm tới hook wp_nav_menu_item_custom_fields(nhấn vào để xem chi tiết). Thông qua hook này, bạn sẽ thêm được toàn bộ các phần html, css hiển trong phần menu. Ở đây mình dùng các thẻ <input />  để làm việc, các bạn tham khảo đoạn code phía dưới:

Phần trên bạn cần quan tâm tới function add_custom_field_to_menu  được ngoắcc vào một hook mình đã đề cập là wp_nav_menu_item_custom_fields, phần hiển thị mình đã để hiển thị một checkbox. Kết quả như sau:

 thêm custom fields cho menu WordPress

Lúc này, khi bạn thao tác với ô checkbox và lưu lại thì dữ liệu được hiển thị.  Bạn cần một hàm để thực hiện việc lưu dữ liệu bạn đã thao tác trong menu. Để update dữ liệu, bạn cần quan tâm thêm một action hook nữa là wp_update_nav_menu_item. Tham khảo code phía dưới để hiểu thêm nhé:

Phần trên code khá dễ hiểu, bây giờ dữ liệu đã có thể được lưu khi ta nhấn vào lưu cài đặt của menu:

 thêm custom fields cho menu WordPress

Phía trên, mình đã in dữ liệu ra cho bạn thấy được kết quả của dữ liệu. Ở phần này, bạn cần quan tâm nhất tới hàm update_post_meta, mình đã lưu dữ liệu với meta_keythandangblog_custom_menu_meta ứng với dữ liệu mình lấy về từ form cho ô checkbox là $data.

Vậy là cơ bản xong với việc thêm, lưu dữ liệu một custom field trong Menu của WordPress. Bạn có thể quay lại phần code số 1, để xem lại logic hiển thị dữ liệu sao cho hợp lý với ô checkbox. Giờ đã có dữ liệu rồi, kết hợp với hàm get_post_meta để lấy dữ liệu(xem ở code số 1) ta có thể thoải mái tùy biến rồi. Ở đây mình sẽ ví dụ giải quyết bài toán phía trên nhé. Khi đã có dữ liệu với ô checkbox, mình sẽ viết thêm một đoạn code để thêm class vào menu được tích vào checkbox:

Mình được kết quả như sau:

Việc của mình bây giờ là Css theo class đã được thêm tạo ra menu như hình ảnh phía dưới(phía trên là menu được tích checkbox, phí dưới thì không):

Trên là một ví dụ đơn giản các bạn có thể làm. Theo cách này các bạn có thể tùy ý tùy chỉnh sao cho hợp với yêu cầu của các bạn rồi nhé.

Thêm custom fields cho menu WordPress bằng Plugin

Cách này thì mình chỉ thấy tiện một cái là không phải thao tác với code nhiều, chỉ cần gọi dữ liệu ra. Nhưng đối với các Coder thì mình khuyên nên làm theo cách 1 để hiểu được cơ chế của nó.

Phần này, mình sẽ sử dụng Plugin Advanced Custom Fields để thêm custom fields cho menu WordPress. Công việc khá đơn giản, bạn cần cài đặt plugin ACF và kích hoạt nó. Tiếp theo tại màn hình quản lý của ACF, các bạn nhấn Add new để thêm mới:

 thêm custom fields cho menu WordPress

Phần Field Type mình chọn trường Image để có thể thêm hình ảnh vào menu. Ngoài ra, còn có một số trường khác các bạn có thể tìm hiểu thêm về tính năng của nó. Tiếp tới bạn cần quan tâm tới phần Location:

 thêm custom fields cho menu WordPress

Thiết lập như phía trên để custom field sẽ chọn các Menu Item cho việc hiển thị.

Cách lấy dữ liệu khi dùng ACF tạo custom field cho Menu

Để lấy dữ liệu từ field tạo ra bởi ACF, bạn cần dùng hàm get_field(‘field_name’,’menu_id’). Với cách dữ liệu này, bạn hoàn toàn có thể áp dụng ví dụ phía trên của mình để tạo ra một menu tùy chỉnh không khác gì với code thường bằng tay.

Kết thúc hướng dẫn

Như vậy mình đã hướng dẫn các bạn cách để thêm custom fields cho menu WordPress bằng 2 cách. Hiện nay thì có rất nhiều Plugin hỗ trợ các bạn các phần này, nhưng với quan điểm của mình từ trước tới giờ thì phần nào làm được thì sẽ làm, phần nào bắt buộc phải dùng Plugin mới dùng. Mục đích cũng để hạn chế Website quá nhiều Plugin không cần thiết, cũng như bảo mật được tốt hơn.

Về Đặng Thắng

Chào mọi người, mình là Thắng. Sở thích của mình là lập trình và chia sẻ mọi thứ mình học được cho tất cả mọi người. Rất mong mọi người ủng hộ Blog của mình.

Đề xuất

Tổng hợp mẫu trang 404 đẹp và độc cho website phần 1

Xin chào mọi người, Tình cờ đọc một số bài viết trên mạng để học …

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *