Tạo nút để thêm sự kiện vào lịch cá nhân bằng plugin Meta Box

Nếu bạn có một sự kiện, một chương trình khuyến mãi, hoặc một trang coming soon đang đếm ngược đến ngày bắt đầu, bạn nên tạo một nút để người dùng thêm sự kiện đó vào lịch trình của họ thông qua file .ics. File .ics này có thể mở bằng nhiều ứng dụng lịch phổ biến như: Outlook, Google calendar, hay Calendar của windows. Từ đó giúp người đọc ghi nhớ và tạo nhắc nhở để tới tham gia sự kiện.

Cùng mình tìm hiểu cách thêm nút “Add to calendar” ở trang sự kiện bằng plugin Meta Box và extension MB Custom Post Type & Custom Taxonomies nhé.

Trước hết, hãy cài đặt hai plugin sau: 

Sau đây là hướng dẫn chi tiết.

Bước 1: Tạo post type và custom field cho sự kiện

Đầu tiên, ở trong Admin Dashboard, bạn vào Meta Box > Post Types và chọn New Post Type để tạo một post type mới

Tạo post type và custom field cho sự kiện

Mình sẽ đặt tên nó là Event và điền các thông tin cần thiết cho post type này, sau đó Publish.

đặt tên post type là Event và điền các thông tin cần thiết cho nó

Tiếp theo, cần phải tạo các custom field cho post type Event vừa tạo để điền các thông tin về ngày bắt đầu, kết thúc, và địa điểm của sự kiện. Bạn có thể tự code, hoặc dùng công cụ Online Generator miễn phí của Meta Box, hay extension premium Meta Box Builder

Dưới đây, mình dùng Meta Box Builder với UI để tạo custom field ngay trong backend nên khá đơn giản. Còn nếu dùng Online Generator, bạn xem hướng dẫn ở đây nhé. 

Để tạo custom field cho post type Event, bạn vào Meta Box > Custom Fields > Add New. Sau đó bạn chọn loại field ở cột bên trái (1) rồi điền thông tin (Label, ID) cho field vừa chọn xuất hiện ở cột bên phải (2). 

Chọn loại custom field và điền thông tin cho chúng

Dưới đây là 3 field mình tạo được. Hãy chú ý tới ID của từng field để điền vào code ở bước sau. Với field StartEnd, bạn cần chọn loại field là Datetime. Còn field Location thì chọn field loại Text nhé.

chú ý tới ID của từng custom field để điền vào code

Sau đó, vào tab Settings, chọn Post typeEvent. Xong xuôi bạn nhớ click Publish để lưu lại nhé.

chọn Post type là Event

Bây giờ, khi bạn tạo một bài viết trong post type Event và kéo xuống dưới, bạn thấy 3 custom field xuất hiện rồi đấy. Hãy điền thông tin cần thiết vào các field.

điền thông tin cần thiết vào các custom field

Bước 2: Tạo nút để thêm sự kiện vào lịch

Trước hết, mình tạo một file tên single-event.php ở trong theme (mình đang dùng theme Justread) để chỉnh sửa template của trang single post của Event. Sau đó, để thêm nút “Add to calendar” – thêm sự kiện vào lịch cá nhân – vào các bài viết của Event, ta thêm đoạn code sau vào file single-event.php:

<?php

$start_date = rwmb_get_value( start_date, array( 'format' => 'Y-m-d g:iA' ) );

$start_date = wp_date( 'Ymd\THis', $start_date );

$end_date   = rwmb_get_value( end_date, array( 'format' => 'Y-m-d g:iA' ) );

$end_date   = wp_date( 'Ymd\THis', $end_date );

?>


<form method="post" action="?ics=true">

        <input type="hidden" name="start_date" value="<?php echo $start_date; ?>">

        <input type="hidden" name="end_date" value="<?php echo $end_date; ?>">

        <input type="hidden" name="location" value="<?php echo rwmb_meta( 'event_location' ); ?>">

        <input type="hidden" name="summary" value="<?php the_title(); ?>">

        <input type="submit" value="Add to Calendar">

</form>

Lưu ý:

  • start_date, end_date, và event_location là ID của 3 field mình vừa tạo cho sự kiện ở bước 1. 
  • name=”start_date”, name=”end_date”, name=”location”, name=”summary” là tên mình đặt cho các biến dữ liệu sẽ được dùng ở đoạn code bên dưới. 
  • Đoạn code trên chính là form với method là post để truyền các dữ liệu start_date, end_date, location, summary.

Tiếp sau đó, ta sẽ dùng hook template_redirect để thực hiện tải file ICS về (khi người dùng click vào nút Add to Calendar) với các dữ liệu start_date, end_date, location, summary đã nhận được ở trên. Hook này chạy trước khi xác định template nào được tải, hay nói cách khác là hook này sẽ tải lại trang để hiện ra một cửa sổ tải file ics về máy tính người dùng. Bạn hãy thêm đoạn code sau vào file functions.php nhé:

function justread_ics_download() {

        if ( is_singular( ‘event’ ) && isset( $_GET['ics'] ) ) {

                include get_stylesheet_directory() . '/inc/ICS.php';

                header('Content-Type: text/calendar; charset=utf-8');

                header('Content-Disposition: attachment; filename=invite.ics');


                $ics = new ICS(array(

                        'location' => $_POST['location'],

                        'dtstart' => $_POST[start_date],

                        'dtend' => $_POST[end_date],

                        'summary' => $_POST['summary'],

                ));


                echo $ics->to_string();

                exit();

        }

}

add_action( 'template_redirect', 'justread_ics_download' );

Trong đó

Class ICS dùng để phục vụ việc xuất file ics khi click vào nút để tải về. Class này được khai báo ở file ICS.php. Bạn tham khảo nội dung của file ICS.php tại đây.

Xong rồi, bạn ra ngoài trang single của sự kiện và thử sẽ thấy kết quả như sau: 

Nút Add to Calendar Button ngoài front end của website WordPress

Khi nhấn nút Add to Calendar, bạn sẽ ngay lập tức tải về một file ICS. Sau đó mở nó ra bằng ứng dụng lịch trong máy tính:

 tải về một file ICS của sự kiện
File ICS được download về một cách tự động
Mở file ICS của sự kiện bằng một ứng dụng lịch cá nhân
Mở file ICS bằng một ứng dụng trên máy tính

Vậy là bạn đã thêm sự kiện vào lịch cá nhân của mình rồi đấy.

Lời cuối

Thêm nút Add to calendar vào sự kiện sẽ giúp người dùng của bạn không bỏ sót bất cứ một chương trình hấp dẫn nào trên trang. Hơn nữa, thao tác lại không hề khó khăn với sự trợ giúp của plugin Meta Box và các extension của Meta Box. Chúc các bạn có những sự kiện thật thành công!

Để lại bình luận

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 *