Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > Wordpress Tips > Hướng dẫn tạo lịch Event bằng Verbose Calendar
Hướng dẫn tạo lịch Event bằng Verbose Calendar
Nguyễn Trung Hiếu
Share Code Web Company 2012

Hướng dẫn tạo lịch Event bằng Verbose Calendar

Bài viết sẽ hướng dẫn các bạn tạo ra một lịch biểu ghi chú những sự kiện đã, đang và sẽ diễn ra trong năm của bạn.

Xem qua demo khi bạn thực hiện song tut này nhé
verbose calendar
Bước 1: Tạo file Plugin
Bạn tạo một folder trong thư mục wp-content/plugins có tên gọi verbose-event-calendar để chứa plugin của chúng ta. Tiếp theo tạo 1 file index.php có nội dung bên dưới

Bước 2: Tìm hiểu cấu trúc thư mục của một plugin
verbose calendar folder structure

  • Images – Bao gồm tất cả file ảnh sử dụng cho Plugin
  • javascripts – Bao gồm các đoạn mã javascript cho Plugin
  • stylesheets – Bao gồm các file css cho Jquery Verbose Calendar
  • themes – Css cho Jquery Date Picker
  • ui – Javascript file cho Jquery Date Picker
  • verboseCalAdmin.js – Custom javascript sử dụng cho admin
  • verboseCalCustom.js – Custom javascript sử dụng cho user
  • styles.css – Css cho Plugin
  • index.php – Code PHP chứa plugin
  • README.md – readme của Verbose

Bước 3: Enqueue JavaScript and CSS Files
Đoạn mã sau cho phép hiển thị verbose calendar

Đoạn mã sau cho giao diện admin

Bước 4: Đăng ký Event như một Custom Post của wordpress

Bước 6: Tạo các trường thuộc tính
Add Event Info Meta Box

Add Event Field

Add Date Picker for Event Field

Bước 7: Kiểm tra sự kiện tạo Event

Bước 8: Lưu Event vào Database

Bước 9: Tạo shortcode
Shortcode của chúng ta sẽ có dạng [ verbose_calendar/ ]

Đoạn shortcode bên trên sẽ insert các tag HTML cần có cho calendar. Chúng ta có thể sử dụng jquery bên dưới để gọi nó ra. Đoạn code có trong file verboseCalCustom.js

Sau khi làm xong, chúng ta sẽ có được thành quả như này
verbose calendar
Bước 10: Đăng ký event với calendar
Công việc tiếp theo của tut này là bạn sẽ phải làm công việc là load các event có trong cơ sở dữ liệu để hiển thị ra calendar. Verbose Calendar sử dụng hàm g.prototype.print để thực hiện hiển thị ra calendar. Và thế chúng ta có thể tùy chỉnh nó trong file jquery.calendar.min.js

Và bây giờ chúng ta sẽ thực hiện truy vấn từ cơ sở dữ liệu và bind kết quả ra cho AJAX

Bước 11: Hiển thị Event

OK vậy là xong. Một tutorials hoàn chỉnh giúp bạn có thể tạo ra calendar của riêng mình. Bạn có thể tạo ra nhiều trường hơn nữa cho plugin để phục vụ cho mục đích của bạn. Chúc bạn thành công

http://wp.tutsplus.com

DemoDownload code

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}

Blog Stats

  • 5.760 hits
%d bloggers like this: