前言介紹
- 這款 WordPress 外掛「Javascript Integration for ChurchSuite」是 2025-04-13 上架。
- 目前尚無安裝啟用數，是個很新的外掛。如有要安裝使用，建議多測試確保功能沒問題！
- 上一次更新是 2025-04-23，距離現在已有 11 天。
- 外掛最低要求 WordPress 6.4 以上版本才可以安裝。
- 尚未有人給過這款外掛評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
dramb |
外掛標籤
events | featured | ChurchSuite |
內容簡介
總結：
JS Integration for ChurchSuite 是一個外掛程式，可以在 WordPress 網站上顯示 ChurchSuite 活動和小組的詳細資訊，並不需要使用 iFrames。透過 v3 API 從 ChurchSuite 的 JSON 資料中提取數據，並使用 JavaScript 在網站上原生顯示。
- 提供活動資訊和小組詳細資訊的卡片式縮略圖
- 按日期分組顯示活動的列表式縮略圖
- 回傳可適當移動至後續月份的日曆
- 以卡片形式顯示小組圖片和詳細資訊
- 所有 API 請求在本地進行快取以提升效能
問題與答案：
1. 這個外掛的主要功能是什麼？
- 提供在 WordPress 網站上顯示 ChurchSuite 活動和小組的詳細資訊，不需使用 iFrames。
2. 這個外掛從哪裡提取數據？
- 從 ChurchSuite 的 JSON feeds 中使用 v3 API 提取數據。
3. 使用此外掛需要的技術了解程度？
- 比從頭自行整合庫並撰寫所有功能要求較少的技術理解。
4. 外掛目前的功能有哪些？
- 卡片式和列表式顯示活動、回傳日曆、卡片式顯示小組、提供本地快取以提升效能。
5. 使用哪個名為 cs-integration 的外掛有何不同？
- cs-integration 使用舊版 ChurchSuite API，提供更靈活的參數設定，但所有工作在伺服器端執行。此外，cs-integration 使用 Alpine.js 和 dayjs。
原文外掛簡介
JS Integration for ChurchSuite is a plugin to provide ChurchSuite event and
smallgroup details for display in a WordPress website without using iFrames.
The data is drawn from ChurchSuite JSON feeds using the v3 API and is displayed
natively within your website using Javascript. This plugin uses the ChurchSuite
Javascript v3 public API library to implement much of its functionality, but
needs a lot less technical understanding to use in a WP website than trying
to integrate the libraries and write it all from scratch for yourself.
Nonetheless, it is simple to modify the output of the shortcodes to suit
your own needs.
Current features include:
Shortcode to return events as ‘cards’ with the event image and details
Shortcode to return events in a ‘list’ grouped by date
Shortcode to return a Calendar which can move on to subsequent months where needed
Shortcode to return groups as ‘cards’ with the group image and details
All API requests are cached locally to speed performance
A little Technical information
For the technical among you: This shortcode works on the ‘client side’,
building the in the user’s browser. This can be faster, in some circumstances,
and more responsive to user input.
Difference between this plugin and cs-integration
We also provide the cs-integration plugin. That plugin uses an older
ChurchSuite API which permits more flexibility because a range of parameters can
be provided at call rather than having to create an ’embed configuration’ on
ChurchSuite to pass in the shortcode call. The other plugin also does all the
work on the ‘server side’ so that the server holds the cached data and the
server creates all the html for output. This plugin use Javascript to create
the response and cache in the client browser. The server-side implementation
can be faster for many repeated requests, and is less speed dependent on the
client provision. However the client-side implementation can be faster for an
individual user and more immediately responsive to interaction. This plugin also
uses Alpine.js to output the HTML, which means an end user could change the
output by changing the HTML files without having to get into the php of the
plugin. However, the Alpine.js code isn’t straightforward and so this is likely
to be of little advantage. Really, it’s simply ‘horses for courses’ – you have
the choice of which to use!
Support
If you have a problem or a feature request, please send a message to the author.
Demo
Currently there is no demo site, but we will create examples shortly
Contributions
This plugin relies on the Churchsuite v3 Javascript API library
(see https://github.com/ChurchSuite/embed-json-script)
This plugin uses Alpine.js to process the ChurchSuite events and smallgroup
information for display
(see https://alpinejs.dev/)
This plugin uses dayjs to process dates, because this is what the ChurchSuite
API uses
(see https://dayjs.org/)
Usage
For each of the examples below:
Replace mychurch with the name of your church which you use to get to
your ChurchSuite site; e.g. trinity or christchurch … see the first name
after https:// in your Churchsuite link.
Replace 62436903-841e-4239-bc95-e6952e17430e with the unique Id for the
configuration of event or SmallGroup output you want to use. To easily find this
Unique ID, go to the Settings for Events or SmallGroups, and use the Embed tab
in the Calendar or SmalGroup Settings page on ChurchSuite to see the
Configurations (or create new Configurations), and use ‘Preview’ to show the
configuration you want to base the output on. The Unique ID is the string of
dash separated hexadecimal characters you will find in the Link for the preview page.
For the Event Cards shortcode, place the shortcode into a page or post or
into a shortcode block. The shortcode will be:
[cs-js-event-cards church_name=”mychurch” configuration=”62436903-841e-4239-bc95-e6952e17430e”]
(replacing the church name and the configuration with your church name and
the Embed configuration unique ID you want to use)
For the Event List shortcode, place the shortcode into a page or post or
into a shortcode block. The shortcode will be:
[cs-js-event-list church_name=”mychurch” configuration=”62436903-841e-4239-bc95-e6952e17430e”]
(replacing the church name and the configuration with your church name and
the Embed configuration unique ID you want to use)
For the Calendar shortcode place the shortcode into a page or post or into a
shortcode block. The shortcode will look like:
[cs-calendar church_name="mychurch" configuration="62436903-841e-4239-bc95-e6952e17430e"]
(replacing the church name and the configuration with your church name and
the Embed configuration unique ID you want to use. The configuration should
be one which returns events for a number of month – the ‘grid’ option is
best to enable you to select the right data for this shortcode.)
For the Smallgroups shortcode, place the shortcode into a page or post or
into a shortcode block. The shortcode will be:
[cs-js-smallgroups church_name=”mychurch” configuration=”62436903-841e-4239-bc95-e6952e17430e”]
(replacing the church name and the configuration with your church name and
the Embed configuration unique ID you want to use)
Sadly, ChurchSuite developers won’t allow us to use any parameters inline to
modify what data is received. You must use the (very limited) configuration
available in the Embed Configuration. The ‘look and feel’ of the data as
presented on your website can be altered considerably by adding your own CSS
to your theme file – all items output are within their own css classes and so
everything can be styled to fit with your website.
And, if you want to, you can use an HTML block to do your own output using
Alpine.js. Just follow the examples towards the bottom of
https://kingshope.church/events. The libraries you need have been impported for
you by this plugin, and so, for example, a simple unstyled list of event titles
can be generated by adding an HTML block with:
(replacing demo with your church name, and the hex string with your
configuration unique id).
License
The plugin itself is released under the GNU General Public License. A copy of
this license can be found at the license homepage or in the csjs-integration.php
file in the top comment.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Javascript Integration for ChurchSuite」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛（你可能也想知道）
Integration for ChurchSuite 》### 總結:, ChurchSuite 整合（AKA CS Integration）允許您在 WordPress 網站上顯示來自 ChurchSuite 的某些資料，而不需嵌入 iframes。這個外掛提供了易於放...。