問與答
這兩天我們花了不少時間,把常見的跑馬燈、語錄滾動條、YouTube 聲音播放器通通自己做了一輪。為什麼?
因為找遍 Joomla 和 WordPress,現成模組不是太花、太肥、太慢,就是限制一堆。
與其被外掛綁手綁腳,不如自己來做一套完全符合需求的版本。
目前已經完成 8 套模組(中英版都有),不只速度快、設計簡潔,
還能後台設定自訂顏色、高度、速度,讓前台呈現乾淨又優雅,非常適合內容為主的網站使用。

文章目錄:
一. 專案緣起與需求說明
一. 專案緣起與需求說明
最近我們接手了一個網站專案,客戶提出了兩個很具體的需求:
-
跑馬燈效果:
希望能展示語錄,讓訪客一打開網站就能看到重要文字在頁面頂部自動滾動。 -
音檔撥放器:
需要一個純聲音的 YouTube 撥放器,不顯示影像,保持網站簡潔,同時能播放 YouTube 頻道中的影片音檔,點選列表之後可以連結到YOUTUBE頻道。
二. 為什麼我們要重做,而不用現有模組?
雖然 WordPress 和 Joomla 的模組一大堆,但要找「剛好適合、風格乾淨、簡單可調整」的,真心不容易。
我們最後決定自己做,原因有幾個:
1. 完全簡潔,沒有廣告或雜訊
太多外掛會塞廣告、外連追蹤碼,還多到一堆用不到的功能。
我們只保留最純粹的:滾動文字、撥放聲音。
2. 可自訂風格,符合網站整體視覺
我們主打的是禪意、極簡、柔色系的網站。
現成模組沒辦法做到這種設計一致性,自己做最乾脆。
3. 後台設定友善,語言也全中文或英文
不用對著一堆英文名詞猜半天。
我們做的模組,設定欄位都有清楚說明,該選什麼一目了然。
4. 非常輕量,載入速度快
我們盡量用純 CSS 或簡化 JS,不用載入過多外部資源,對速度有要求的站點也能跑得很順。
5. 方便擴充,不受限制
之後如果要加資料庫、API、或是自動抓 YouTube 最新影片,都能加上去。自己開發,就是這麼彈性。
三、開發過程中的甘苦談
老實說,這兩天整個開發過程像搭雲霄飛車一樣刺激。
從模組相衝、語法錯誤,到 CSS 沒套進去、後台顯示跑版…
每一個 bug 都是在測耐性,但也真的讓我們對 Joomla 和 WordPress 的架構更加熟。
雖然有幾次心想「是不是其實用現成外掛湊一湊就好…」
但當最後模組順利運作、乾乾淨淨地跑在畫面上時,真的超級滿足。
我們總共花了 2 天,從零開始打造了 8 套模組/外掛(含中英文版),通通可以自由下載使用。
這不只是「做個模組交差」,而是用心打造出一個能配合網站風格、美學與效能的實用工具。
四.後續可客製化
這些模組也能進一步客製化!
例如:
-
多語系切換
-
特定字型套用
-
捲動進場動畫
-
從資料庫自動抓資料
-
連接表單或 API
如果你也想做出屬於自己風格的網站,或是對模組想進一步擴充,都可以找我們聊聊~
五.模組下載區塊 - Joomla 模組
模組名稱 | 功能說明 | 中文版 | English | 適用版本 | 說明 | ||
---|---|---|---|---|---|---|---|
mod_esangtek_marquee | 置頂經典跑馬燈(可自訂速度、顏色、高度) | 下載 | 下載 | jooml4.2+ | mod1 | ||
mod_esangtek_marquee_css | 純 CSS 跑馬燈,與mod_esangtek_marquee、mod_esangtek_scroller不相衝 | 下載 | 下載 | jooml4.2+ | mod2 | ||
mod_esangtek_scroller | 不固定位置跑馬燈(可自訂速度、顏色、高度) | 下載 | 下載 | jooml4.2+ | mod3 | ||
mod_zen_audio_player | youtube 純聲音撥放器 播放 YouTube 聲音,無影像顯示 | 下載 | jooml4.2+ | mod4 | |||
mod_esangtek_allarticles | 顯示全站所有文章 |
|
jooml4.2+ | mod5 | |||
plg_system_titlechecker | 文章標題檢查外掛 | 下載 | 下載 | jooml4.2+ | mod6 |
六.外掛下載區塊 - Wordpress
模組名稱 | 功能說明 | 中文版 | English | 適用版本 | 說明 |
---|---|---|---|---|---|
mod_esangtek_marquee | 置頂經典跑馬燈(可自訂速度、顏色、高度) | 下載 | 下載 | wordpress 5.8~6.5 | mod1 |
mod_esangtek_marquee_css | 純 CSS 跑馬燈,與mod_esangtek_marquee、mod_esangtek_scroller不相衝 | 下載 | 下載 | wordpress 5.8~6.5 | mod2 |
mod_esangtek_scroller | 不固定位置跑馬燈(可自訂速度、顏色、高度) | 下載 | 下載 | wordpress 5.8~6.5 | mod3 |
mod_zen_audio_player | youtube 純聲音撥放器 播放 YouTube 聲音,無影像顯示 | 下載 | 下載 | wordpress 5.8~6.5 | mod4 |
1.置頂經典跑馬燈(可自訂速度、顏色、高度)
mod_esangtek_marquee
參考網址:老靈魂古董包
1.1 置頂經典跑馬燈中文說明:
這是一款 可置頂顯示 的「跑馬燈公告模組」,適合用於公告、優惠訊息、聖經經文等動態展示。
(1) 模組特色:
固定顯示:
模組會固定在網站最上方,不會因捲動畫面而消失。
多項自訂:
可自由調整 文字內容(支援多行)、滾動速度、背景與文字顏色、邊框樣式 等細節。
(2) 可設定參數:
-
滾動文字內容:可顯示多行文字
-
顯示區塊高度:30px(可調整)
-
滾動速度:0.5 秒(可自訂)
-
滾動方式:水平(由右向左)、上下(由下而上)
-
循環播放:可選擇是否重複滾動
-
邊框樣式:可設定 顏色 (#bb9e64)、粗細 (1px)、樣式(實線)
-
背景顏色:可設定純色(#fffaf2)或漸層
- 文字顏色:可設定顏色
(3) 適用場景:
-
公告通知
-
最新優惠資訊
-
聖經經文、每日金句
-
重要提醒
這款模組 簡單易用、靈活調整,讓網站資訊傳達更具動態效果!
1.1 Sticky Classic Marquee (English Description)
Reference Link:
https://www.psmscleaner.com/home.html
This is a sticky "marquee announcement module" that provides smooth scrolling effects, making it ideal for displaying announcements, promotions, Bible verses, and other dynamic content.
(1) Key Features:
Fixed Position:
The module stays at the top of the website and does not disappear when scrolling.
Customizable Options:
Easily adjust text content (supports multiple lines), scrolling speed, background & text colors, border styles, and more.
(2) Configurable Settings:
-
Scrolling Text Content: Supports multiple lines
-
Display Block Height: 30px (adjustable)
-
Scrolling Speed: 0.5 seconds (customizable)
-
Scrolling Direction: Horizontal (right to left)
-
Looping Option: Choose whether to repeat the scrolling text
-
Border Style: Customizable color (#bb9e64), thickness (1px), and type (solid)
-
Background Color: Set a solid color (#fffaf2) or gradient
(3) Ideal For:
-
Important announcements
-
Latest promotions
-
Bible verses or daily quotes
-
Critical notifications
This module is easy to use, highly flexible, and enhances dynamic content display on your website!
Joomla 4.2+ English Version Download
wordpress 5.8~6.5 English Version Download
2. 純 CSS 跑馬燈
mod_esangtek_marquee_css
2.1中文說明:
這是一款純 CSS 跑馬燈模組,完全不依賴 JavaScript,確保與其他模組無衝突,適合多種網站應用。
相容於 mod_esangtek_marquee、mod_esangtek_scroller,可與其他模組無縫整合。
滾動動畫流暢、設定簡單,輕鬆打造動態公告效果。
自訂設定選項:
-
滾動時間(秒): 120
-
顯示區塊高度(px): 60
-
是否顯示邊框: 是 / 否
-
邊框顏色: #bb9e64
-
文字顏色: #993300
-
背景顏色: 可自訂
2.1 CSS marquee module (English Description)
This is a pure CSS marquee module that operates entirely without JavaScript, making it highly compatible with other modules.
It does not conflict with mod_esangtek_marquee or mod_esangtek_scroller.
Designed for smooth and efficient scrolling, it offers simple and flexible customization.
Customizable Settings:
-
Scrolling duration (seconds): 120
-
Block height (px): 60
-
Show border: Yes / No
-
Border color: #bb9e64
-
Text color: #993300
-
Background color: (customizable)
Joomla 4.2+ English Version Download
wordpress 5.8~6.5 English Version Download
3. JavaScript 跑馬燈模組
mod_esangtek_scroller 是一款 基於 JavaScript 的跑馬燈模組,
與 mod_esangtek_marquee 不同之處在於:
它可放置於 Joomla 的任何模組位置,而不僅限於畫面頂部,提供更大的版面靈活度。
3.1 模組特色
(1) 自由定位:可放置於 Joomla 的任何模組位置,適應不同佈局需求。
(2) 自訂滾動速度:調整滾動時間(秒),確保最佳可讀性。
(3) 可設定循環播放:選擇是否讓跑馬燈無限滾動或僅播放一次。
(4) 豐富的樣式選項,支援以下調整:
-
滾動文字內容(可輸入多行文字)
-
滾動方向:水平(由右往左)
-
區塊高度(px,可設定為 30px 或其他數值)
-
滾動速度(可設定為 0.4s 或其他數值)
-
是否顯示邊框(可選擇開啟或關閉)
-
邊框樣式:可選擇實線、虛線等
-
邊框顏色(可自訂,如 #bb9e64)
-
邊框寬度(px,可自訂為 2px 或其他數值)
-
背景顏色(可自訂,如 #fefcf9)
-
背景漸層(選填)
(5) 簡單易用:基於 JavaScript 技術,滾動效果流暢,不影響網站其他功能。
適用於 公告通知、優惠資訊、經典語錄、聖經經文 等內容,讓您的網站資訊更具動態感,提高用戶關注度!
3. JavaScript Marquee Module
JavaScript Marquee Module mod_esangtek_scroller is a JavaScript-based marquee module.
Unlike mod_esangtek_marquee, it can be placed in any module position in Joomla, not just limited to the top of the screen, offering greater layout flexibility.
3.1 Module Features
(1) Flexible Positioning – Can be placed in any Joomla module position to fit various layouts.
(2) Customizable Scroll Speed – Adjust the scrolling duration (in seconds) for optimal readability.
(3) Loop Playback Option – Choose whether the marquee scrolls continuously or plays only once.
(4) Extensive Styling Options – Supports customization of the following:
-
Scrolling Text Content (supports multiple lines)
-
Scroll Direction – Horizontal (right to left)
-
Block Height (px, configurable to 30px or any other value)
-
Scroll Speed (adjustable to 0.4s or any other value)
-
Show Border – Enable or disable border visibility
-
Border Style – Choose from solid, dashed, etc.
-
Border Color (customizable, e.g., #bb9e64)
-
Border Width (px, configurable to 2px or any other value)
-
Background Color (customizable, e.g., #fefcf9)
-
Background Gradient (optional)
(5) Easy to Use – Built with JavaScript for smooth scrolling effects without interfering with other website functions.
Perfect for announcements, promotions, quotes, Bible verses, and other dynamic content, enhancing user engagement and visibility!
Joomla 4.2+ English Version Download
wordpress 5.8~6.5 English Version Download
4. YouTube 純音訊播放器
mod_zen_audio_player 播放 YouTube 音訊,無影像顯示
這款播放器專為 YouTube 頻道音訊播放而設計,以極簡風格呈現,僅播放音訊,並隱藏影片畫面。
您可以將單一影片的音訊嵌入並播放,享受純粹的聆聽體驗。
後台設定項目包括:
- YouTube 影片網址
- 列表圖示連結(例如,跳轉至整個頻道)
- 主色調為 #bb9e64。
4. Play YouTube Audio Without Video Display
mod_zen_audio_player
This player is specifically designed for playing YouTube channel audio with a minimalist style, offering audio playback while hiding the video display.
You can embed and play the audio from a single video, enjoying a pure listening experience.
Backend settings include:
-
YouTube video URL
-
List icon link (e.g., redirect to the entire channel)
-
The primary color is #bb9e64.
wordpress 5.8~6.5 English Version Download
5. 顯示全站所有文章
參考網頁:
https://www.thida.org/zh/news
在 Joomla 預設架構中,若想要顯示全站所有文章,系統通常會依分類(Category)來限制顯示內容,對於某些網站需求來說並不方便。
例如像「公告列表」或「全部最新消息」這種場景:
-
文章可能來自不同分類,卻想集中列出。
-
需要顯示標題與發佈日期,排版要簡潔一致。
-
想在首頁或某個區塊模組中使用,不影響原本的文章架構。
因此這個模組:
-
不受分類限制,可顯示所有已發佈文章。
-
支援排序(依建立日期、修改日期、隨機)。
-
支援多語系(可選擇是否過濾語言)。
-
使用表格清單顯示,附分頁功能。
讓 Joomla 更能符合「公告清單」這類常見需求,也提升前台呈現的自由度。
5. Display all site articles
Reference Website:
https://www.thida.org/en/news-2
Joomla’s default article display system is based on categories. However, in many real-world cases—such as announcements, news listings, or global article lists—you want to display articles from all categories in a unified way.
Typical challenges:
-
You want to list all published articles regardless of category.
-
You need a clean table layout showing title and publish date.
-
You want it placed anywhere as a module, not tied to a menu item.
-
You need multilingual support with flexible filtering.
This module provides:
-
A list of all published articles (no category filtering)
-
Sorting options: created date, modified date, or random
-
Optional language filter toggle
-
Clean table layout + pagination
-
Ready for multilingual Joomla sites
It’s perfect for building a "Latest Announcements" block or "All Articles" list on the front page or sidebar—without restructuring your content.
Joomla 4.2+ English Version Download
6. 文章標題檢查外掛 plg_system_titlechecker
功能說明:
本外掛會在 Joomla 後台文章編輯畫面,自動偵測「標題欄位」中是否輸入了 emoji 或特殊符號(如 ✨🌙),並即時提示使用者:
🚫 請勿在標題中使用 emoji(如 🌙✨),否則後台搜尋可能找不到文章。
這有助於避免因資料庫儲存編碼錯誤(如 UTF8mb4)或後台搜尋無法比對而造成的問題。
特色功能:
-
自動偵測標題欄位輸入內容
-
若包含 emoji 會顯示紅色警告文字
-
無需更動核心程式,僅為後台提示用途
-
相容 Joomla 4 / Joomla 5
適用對象:
-
編輯群中常使用表情符號(emoji)的人員
-
Joomla 站點使用非 UTF8mb4 資料庫(避免儲存錯誤)
-
重視後台搜尋正確性與內容一致性的網站管理者
6.1 外掛安裝方式
-
下載外掛安裝檔
-
登入 Joomla 後台 → 點選「系統」 →「安裝:擴充套件」
-
上傳並安裝 ZIP 外掛檔案
-
安裝後,請前往:
系統 → 外掛 → 搜尋Titlechecker
→ 點選啟用 -
完成!當你在文章編輯畫面輸入包含 emoji 的標題時,就會出現紅色警告提示
注意: 本外掛為後台提示工具,不會阻擋儲存,也不會修改文章內容。
6. Article Title Emoji Checker (plg_system_titlechecker)
Description:
This system plugin adds a real-time warning in the Joomla article edit screen when the user types emoji or special symbols in the title field.
🚫 Please avoid using emoji (e.g., 🌙✨) in the title. It may prevent the article from being found in the backend search.
This helps avoid:
-
Backend search failures
-
Potential database saving issues (e.g., non-UTF8mb4 environments)
Key Features:
-
Detects emoji characters in the article title field
-
Shows a red warning message in real-time
-
No core modifications required
-
Compatible with Joomla 4 and Joomla 5
Recommended for:
-
Content teams who often use emoji in article titles
-
Joomla sites with legacy database encoding
-
Admins who want consistent and searchable article titles

Joomla 4.2+ English Version Download
6.1 Installation Guide:
-
Download the plugin ZIP file
-
Log in to your Joomla administrator panel
-
Go to: System → Install → Extensions
-
Upload and install the plugin ZIP file
-
After installation, go to:
System → Plugins → SearchTitlechecker
→ Enable it -
Done! When editing an article, if you type emoji into the title field, a red warning message will appear automatically.
Note: This plugin is a backend-only checker. It will not block saving or alter your content — just a real-time user alert.
七. joomla 模組安裝教學
這些模組是由 益盛科技軟體有限公司 開發,專為簡潔公告、語錄展示與音訊播放設計,適用於 Joomla 4.x 與 Joomla 5.x。
7.1. 安裝步驟(.zip 模組檔案)
-
登入 Joomla 後台(通常是
/administrator
) -
點選上方選單【系統】→【安裝 → 擴充套件】
-
在「上傳套件檔案」區塊中,拖曳或選擇
.zip
模組檔案
例如:mod_esangtek_marquee.zip
-
上傳後系統會顯示「模組安裝成功」
7.2 使用方式與設定
-
前往【內容 → 模組】
-
找到剛剛安裝的模組,例如:
-
Esangtek Marquee
-
Zen Audio Player
-
Esangtek Scroller Styled
-
-
點進模組後可進行以下設定:
-
顯示內容:可輸入滾動文字、多行語錄或播放連結
-
滾動速度 / 高度 / 顏色:自訂動畫與樣式
-
是否循環 / 顯示邊框 / 滾動方向:選項開關調整
-
-
務必設定【位置】(Position)與【啟用模組】
-
可放置於
top
,debug
,banner
或自訂位置
-
-
儲存後回到前台網站,即可看到模組效果!
7.3 小提醒
注意事項 | 說明 |
---|---|
模組位置 | 如果模板不支援 top ,可自訂位置並於模板中引用 |
模組衝突 | 避免同一頁同時啟用多個 JavaScript 跑馬燈 |
多語系支援 | 模組後台支援繁體中文與英文介面說明 |
如需協助安裝、樣式調整或與資料庫整合,歡迎聯絡我們!
設計/製作:益盛科技軟體有限公司 Ring
Esangtek Joomla Module Installation Guide
These modules are custom-developed by Esangtek Technology Software Co., Ltd., designed for displaying clean announcements, quotes, and audio players.
They are compatible with Joomla 4.x and Joomla 5.x.
7.1 How to Install (.zip module file)
-
Log in to your Joomla admin panel (
/administrator
) -
Go to System → Install → Extensions
-
Under "Upload Package File", drag & drop or browse for the
.zip
module file
Example:mod_esangtek_marquee.zip
-
After upload, you should see a success message like "Module installed successfully"
7.2 How to Use & Configure
-
Go to Content → Site Modules
-
Look for the newly installed module, such as:
-
Esangtek Marquee
-
Zen Audio Player
-
Esangtek Scroller Styled
-
-
Click to edit the module and configure its settings:
-
Scroll text (supports multiple lines)
-
Scroll speed / height / colors
-
Looping / border display / direction
-
-
Set the Position (e.g.,
top
,banner
,debug
, or any custom position) -
Set the Status to Published
-
Save and check the frontend of your site — the module should now be visible!
7.3 Tips
Item | Description |
---|---|
Module Position | If your template doesn't support top , use a custom module position |
Conflict Warning | Avoid using multiple JavaScript-based marquees on the same page |
Multilingual | All modules support both Traditional Chinese and English descriptions in the backend |
For customization, integration, or technical support, feel free to contact us:
Esangtek Technology Software Co., Ltd. – Ring
🔗 https://des13.com
八. Wordpress 外掛安裝教學
這些外掛均為 益盛科技軟體有限公司 開發,適用於 WordPress 5.8 ~ 6.5(含古騰堡與經典主題),安裝方式與一般外掛相同:
8.1. 安裝步驟(.zip 外掛檔案)
-
登入 WordPress 後台(/wp-admin)
-
左側選單點選【外掛】→【安裝外掛】
-
點選上方的「上傳外掛」按鈕
-
選擇你要安裝的
.zip
外掛檔案(例如esangtek-marquee-css-wordpress-en-fixed.zip
) -
點選【立即安裝】
-
安裝完成後點【啟用外掛】
8.2 設定說明(啟用後)
每個外掛安裝並啟用後,都會在左側選單的【設定】中出現一個對應名稱,例如:
-
Esangtek Marquee CSS
-
Zen Audio Player
-
Esangtek Scroller Styled
進入設定頁後,你可以自訂以下內容(依外掛不同略有差異):
設定項目 | 說明 |
---|---|
文字內容 | 可輸入公告、語錄、經文等文字,支援多行 |
滾動速度 | 數字越小越慢,例如 0.5 秒 |
高度(px) | 控制跑馬燈區塊高度,例如 30 或 400 |
方向選擇 | 支援垂直(往上)與水平(右→左) |
文字 / 背景顏色 | 可選擇顏色,符合你網站主題配色 |
邊框樣式 | 實線、虛線、點線,自由設定 |
音訊影片連結 | 輸入 YouTube 影片網址(音訊撥放器) |
清單連結 | 導向你自己的 YouTube 頻道頁面 |
8.3 注意事項
-
不需使用 Shortcode,安裝並啟用後即可自動出現在頁面上
-
避免與其他類似跑馬燈外掛並用(可能會重疊)
-
所有設定皆可於後台視覺化操作,不需修改程式碼
有需要協助安裝、進一步樣式客製化或資料庫連動,歡迎聯繫我們:
益盛科技軟體有限公司
Esangtek Series WordPress Plugin Installation Guide
These custom plugins are developed by Esangtek Technology Software Co., Ltd., compatible with WordPress 5.8 to 6.5 (both Classic and Gutenberg themes). You can install them just like any standard WordPress plugin.
8.1 Installation Steps (via .zip
file)
-
Log in to your WordPress admin panel (
/wp-admin
) -
Go to Plugins → Add New
-
Click the Upload Plugin button at the top
-
Choose the
.zip
file of the plugin you want to install
(e.g.esangtek-marquee-css-wordpress-en-fixed.zip
) -
Click Install Now
-
After installation, click Activate Plugin
8.2 Plugin Settings (after activation)
Each plugin will appear under the Settings menu in the WordPress admin sidebar:
-
Esangtek Marquee CSS
-
Zen Audio Player
-
Esangtek Scroller Styled
Inside the settings page, you can configure the following options (depending on the plugin):
Setting Option | Description |
---|---|
Text Content | Enter announcements, quotes, or scriptures (multiline) |
Scroll Speed | Lower number = slower scroll (e.g. 0.5 seconds) |
Height (px) | Controls the marquee/scroller height (e.g. 30 or 400 ) |
Scroll Direction | Choose vertical (bottom to top) or horizontal (right to left) |
Text / Background Color | Customize to match your site theme |
Border Style | Choose solid, dashed, dotted, or double border |
YouTube Audio URL | Paste your YouTube video URL for audio playback |
Playlist Link | Link to your YouTube channel or playlist |
8.3 Notes
-
No shortcode needed — plugin renders automatically on your site
-
Avoid enabling multiple marquee plugins at the same time (to prevent visual overlap)
-
All settings are visual and accessible in the admin panel — no coding required
For further customization or integration support, feel free to contact us:
Esangtek Technology Software Co., Ltd.
相關文章:
軟體開發 : 程式設計 四階段工作流程 - 專業網站
推薦閱讀:全後台模組化形象官網
簡易電子書下載:一頁式網頁設計電子書
如果您喜歡我們的文章,歡迎分享!也歡迎查看我們的其他文章。如果有任何疑問也歡迎加line和我們聯絡
全後台模組化形象官網,符合各式商業模式與需求,請參考:https://des13.com/service/rwd.html
Written by Ring
作者:益盛科技 專案經理
通過Google Ads-Measurement Assessment
15年 網站專案管理及人員管理實務經驗。
具網站美編企劃繪製能力
具多媒體網頁設計與 RWD設計之實務經驗