Cách sử dụng Lịch sự kiện Sugar với Chủ đề Genesis

Đôi khi bạn cần có một lịch sự kiện đơn giản trên trang web WordPress của mình. Hướng dẫn này sẽ chỉ cho bạn cách sử dụng Lịch sự kiện Sugar của Pippin Williams với chủ đề mẫu Genesis 3.4.0.

Tôi đã sử dụng plugin lịch này trên một số trang web và vì Pippin sử dụng kiểu dáng tối thiểu trong các plugin của mình, lịch chỉ chọn các kiểu từ chủ đề và trông khá tuyệt, như được cài đặt. Nhưng với CSS mẫu của Genesis, tiêu đề lịch và các trường chọn có thể sử dụng một vài chỉnh sửa, vì vậy tôi muốn chia sẻ một vài mẹo nhanh để làm cho nó trông đẹp mắt trong chủ đề con Genesis của bạn.

Có rất nhiều plugin lịch sự kiện WordPress cả miễn phí và cao cấp; một số có rất nhiều tính năng, nhưng rất phức tạp để sử dụng. Sugar Event Calendar là một plugin lịch sự kiện thực sự đơn giản nhưng linh hoạt. Liên kết dành cho plugin cao cấp, nhưng một phiên bản nhỏ gọn - Quản lý sự kiện đơn giản - Lịch Sugar (Lite) - có sẵn trong thư mục plugin WordPress, có thể là tất cả những gì bạn cần.

 

Plugin này tạo trang lịch với các sự kiện của bạn và cũng tạo trang lưu trữ sự kiện với các bài đăng tùy chỉnh sự kiện được liệt kê theo ngày xảy ra. Plugin cao cấp có một số tiện ích bổ sung, vì vậy bạn có thể có lịch nhỏ hơn, danh sách các sự kiện và danh sách các danh mục sự kiện trong thanh bên của mình. Nếu bạn cần hiển thị địa điểm sự kiện, cũng có một Tiện ích bổ sung Lịch sự kiện Sugar - Google Maps có sẵn để tải xuống từ trang Plugin WordPress. Nếu bạn muốn đăng ký cho các sự kiện của mình, cũng có một tiện ích bổ sung Gravity Forms.

Cài đặt Lịch sự kiện Sugar (Premium hoặc Lite)

Bạn có thể tải phiên bản nhỏ gọn của plugin trong thư mục plugin của WordPress. Cài đặt và kích hoạt nó như bình thường. Nếu bạn sử dụng plugin cao cấp, bạn sẽ nhận được một tệp zip để tải xuống. Sau đó, bạn có thể tải tệp zip này lên cài đặt WordPress của mình bằng cách sử dụng menu WordPress, Plugin> Thêm mới, sau đó chọn Tải lên. Kích hoạt plugin.

Thêm một sự kiện mới

Bạn sẽ thấy phần Sự kiện mới trong menu WordPress của mình ở bên trái. Nhấp vào nó để thêm các sự kiện mới. Thêm ít nhất một sự kiện mới.

Có một phần Chi tiết sự kiện mới ở cuối trang cho ngày và giờ của sự kiện. Bạn có thể di chuột qua các từ Chi tiết sự kiện và kéo phần này lên ngay bên dưới trình chỉnh sửa WordPress, nếu bạn muốn.

Thêm Trang Lịch và Trang Lưu trữ Sự kiện

  1. Nhấp vào Trang và sau đó nhấp vào Thêm mới trong menu WordPress của bạn. Đặt tiêu đề cho trang như Lịch hoặc Lịch sự kiện (nó có thể là bất kỳ thứ gì bạn thích).
  2. Thêm mã ngắn sc_events_calendar ![lịch-mã ngắn|232x36](upload://pxgKtkSUDM5dcY99cXsRMPEKXVQ.jpeg)![calendar-shortcode|232x36](upload://pxgKtkSUDM5dcY99cXsRMPEKXVQ.jpeg) đến khu vực biên tập nội dung.
  3. Chọn bố cục Genesis mà bạn thích. (Tôi muốn sử dụng bố cục trang đầy đủ cho lịch hoặc bạn có thể chọn một bố cục thanh bên duy nhất.)
  4. Lưu trang.
  5. Tạo một trang mới thứ hai và đặt cho nó tiêu đề là Sự kiện, để slug cố định là / sự kiện. Lưu ý rằng slug phải là / sự kiện. Đây là trang lưu trữ sự kiện của bạn.
  6. Bạn có thể sử dụng bố cục mặc định của mình cho trang này; lưu nó.
Bây giờ hãy xem các trang Lịch và Sự kiện bạn vừa tạo.

Lỗi 404?

Khi bạn xem các trang mới của mình, bạn có nhìn thấy chúng hay bạn gặp lỗi 404? Nếu bạn có 404, bạn cần xóa liên kết cố định WordPress của mình.

Trong menu WordPress của bạn ở bên trái, bạn có thể nhấp vào Cài đặt> Permalinks . Và sau đó bạn có thể nhấp vào nút Lưu thay đổi . Sau đó, bạn sẽ có thể xem cả hai trang. (Ngoài ra, Cài đặt Permalink của bạn phải có cài đặt được chọn KHÔNG phải là “Đồng bằng”.)

Xem sự kiện và trang lịch

Trang Sự kiện sẽ chọn các kiểu chủ đề con Genesis Sample của bạn và các sự kiện đơn lẻ cũng phải trông tuyệt vời.

Nhưng các trường Chọn lịch bị thiếu thông tin!

Vì vậy, chúng ta hãy sửa chữa nó.

Hãy tạo kiểu cho lịch

Phần mã trong style.css của chủ đề Genesis Sample khiến các hộp chọn tháng và năm xuất hiện trống là dòng "width: 100%" trong phần Biểu mẫu. Cũng có quá nhiều khoảng đệm trên các trường Chọn.
/* Forms
--------------------------------------------- */

input,
select,
textarea {
background-color: #fff;
border: 1px solid #ddd;
color: #333;
font-size: 18px;
font-weight: 400;
padding: 15px;
width: 100%;
}


Bạn có thể thêm một số CSS vào WordPress Customizer - Giao diện> Tùy chỉnh> CSS bổ sung - hoặc chỉnh sửa styles.css của bạn. Nếu bạn chỉnh sửa biểu định kiểu của mình - style.css, bạn có thể thêm CSS này ở cuối phần Plugin.

Cung cấp cho các trường Chọn trong lịch có chiều rộng tự động, thêm chiều rộng tối đa và bớt phần đệm:


/* Sugar Calendar
--------------------------------------------- */

#sc_events_calendar_head select {
     padding: 4px;
     width: auto;
     max-width: 50%;
 }

Vì vậy, với ba lần chỉnh sửa CSS dễ dàng, bạn có một lịch sự kiện đẹp!

Lịch rộng hơn

Nếu chủ đề của bạn hỗ trợ một khối chiều rộng rộng, bạn có thể làm cho lịch rộng hơn.
  • Đầu tiên hãy thêm một Khối nhóm vào trang.
  • Chọn Chiều rộng Rộng trên Khối Nhóm.
  • Sau đó, thêm một Khối mã ngắn bên trong Khối nhóm.
  • Tiếp theo thêm Shortcode của Lịch Đường - xem ở trên.
Và đây là lịch tương ứng tuyệt đẹp với tất cả các trường Chọn trong một dòng.

Vì vậy, bây giờ bạn có một Lịch sự kiện đơn giản, nhưng đẹp cho trang web của bạn!