Title: CoolClock – a Javascript Analog Clock Author: Rolf Allard van Hagen Published: 2012 年 12 月 9 日 Last modified: 2023 年 10 月 4 日 --- 搜尋外掛 ![](https://ps.w.org/coolclock/assets/banner-772x250.jpg?rev=1112137) 這個外掛**並未在最新的 3 個 WordPress 主要版本上進行測試**。開發者可能不再對這個 外掛進行維護或提供技術支援，並可能會與更新版本的 WordPress 產生使用上的相容性問題。 ![](https://ps.w.org/coolclock/assets/icon-128x128.png?rev=1112137) # CoolClock – a Javascript Analog Clock 由 [Rolf Allard van Hagen](https://profiles.wordpress.org/ravanh/) 開發 [下載](https://downloads.wordpress.org/plugin/coolclock.zip) * [詳細資料](https://tw.wordpress.org/plugins/coolclock/#description) * [使用者評論](https://tw.wordpress.org/plugins/coolclock/#reviews) * [安裝方式](https://tw.wordpress.org/plugins/coolclock/#installation) * [開發資訊](https://tw.wordpress.org/plugins/coolclock/#developers) [技術支援](https://wordpress.org/support/plugin/coolclock/) ## 外掛說明 This plugin integrates [CoolClock – The Javascript Analog Clock](http://randomibis.com/coolclock/) into your WordPress site. You can add it as a **widget** to your sidebar or insert it into your posts and pages with a **shortcode**. See [the FAQ’s](https://wordpress.org/extend/plugins/coolclock/faq/) for available shortcode parameters and how to build the clock into your theme. #### Features * Can be added via a widget, shortcode or theme function * No flash, meaning compatible with tablets and most other javascript enabled mobile devices * 22 different skins to choose from or * Custom skin option to create your own skin style * Linear or logarithmic time scale Read more on the [CoolClock homepage](https://status301.net/wordpress-plugins/coolclock/) or see [the FAQ’s](https://wordpress.org/extend/plugins/coolclock/faq/) to learn how to configure your own skin settings. #### Pro features * Show date or 24h digital time * Background image or color * Border radius (rounded corners for background) * Advanced positioning options (relative to background) * Advanced shortcode parameters (including background image and custom skin) * One extra clean skin for use with background image * Support on the [CoolClock Pro forum](https://premium.status301.com/support/forum/coolclock-pro/) Pro features come with the [CoolClock – Advanced extension](https://premium.status301.com/downloads/coolclock-advanced/). #### Translators * **Dutch** * R.A. van Hagen https://status301.net/ (version 3.0) * **French** * R.A. van Hagen https://status301.net/ (version 3.0) * **German** * Manfred Mrak http://www.niftyfox.ch/ (version 3.2) * **Serbian** * Borisa Djuraskovic – WebHostingHub http://www.webhostinghub.com/( version 2.9.4) * **Slovenian** * Adijan Dervišević – http://www.adijan.eu (version 3.2) * **Russian** * Наталия Завьялова – http://time-impressions.ru (version 2.9.8) Please [contact me](https://status301.net/contact-en/) to submit your translation and get mentioned here 🙂 #### Privacy / GDPR This plugin does not collect any user or visitor data nor set browser cookies. Using this plugin should not impact your site privacy policy in any way. ### Known Issues 1. When IE 8 is manually put or forced (through X-UA-Compatibility meta tag or response header) into Compatibility mode, the Clock will –even though the canvas area is put in place– remain invisible. 2. When a shortcode is not placed on its own line but on the same line with text, image or even another shortcode, then the output (div with canvas tag) will be wrapped inside a paragraph tag. While most browsers do not have a problem displaying the clock, this _will_ cause a validation error. Please report any other issues on the [Support page](https://wordpress.org/support/plugin/coolclock). ## 螢幕擷圖 * [[ * Example analog clock in sidebar. The background logo is added with the [CoolClock – Advanced extension](https://premium.status301.com/downloads/coolclock-advanced/). * [[ * Widget settings. The background options are availabe in the [CoolClock – Advanced extension](https://premium.status301.com/downloads/coolclock-advanced/). ## 安裝方式 #### WordPress Quick installation: [Install now](http://coveredwebservices.com/wp-plugin-install/?plugin=coolclock)! … OR … Search for “coolclock” and install with that slick **Plugins > Add New** back-end page. … OR … Follow these steps: 1. Download archive. 2. Upload the zip file via the Plugins > Add New > Upload page … OR … unpack and upload the complete directory with your favourite FTP client to the /plugins/ folder. 3. Activate the plugin on the Plug-ins page. Now visit your Widgets admin page and add the Analog Clock widget to your sidebar. 🙂 ## 常見問題集 ### Where do I start? There is no options page. Just go to your Appearance > Widgets admin page and find the new Analog Clock widget. Add it to your sidebar and change settings if you want to see another than the default clock. Other ways to integrate a clock into your site are shortcodes or a theme function. See instructions below. ### What options does the widget have? First of all, you can pick a preset skin. There are 21 skins made by other users and, when the Advanced extension is added, one Minimal skin that only shows the clock arms, that can be useful for placing over a custom background image. There are these options: * Custom skin parameters – see question below; * Radius – changes the clock size; * Hide second hand; * Show digital time (more options in the Advanced version); * Set digital time color; * GMT Offset – use this if you want one or more clocks to show the time for other timezones; * Scale – linear is our standard clock scale, the other two show a logarithmic time scale; * Align – left, center or right; * Subtext – optional text, centered below the clock. Then there are extra options availabe in the [CoolClock – Advanced extension](https://premium.status301.com/downloads/coolclock-advanced/) which allow for more customisation: * Background image – define the full URL or path to an image to serve as background; * Repeat image; * Background size – stretch or cover to make it match your clock size; * Background position – center, top, right, bottom or left of the wrapping div ( define div size below); * Width and height – define the size of the wrapping div that holds the background image; * Background color – define a color value in hex or rgb(a) format, or a css color name; * Border radius – optional rounded corners, higher is rounder; * Clock position relative to background – here you can position the clock relative to top and left border of the wrapping div (as defined above) that holds the background image. * Custom skin parameters for shortcode ### How can I create a custom skin? Follow the steps on [Creating a Custom Skin](https://premium.status301.com/coolclock-custom-skin/) and if you are happy with the result, please consider sharing it with other users! ### Can I share this fantastic custom skin I created? If you made a nice skin and would like to share it, you can do so in the comments on [Creating a Custom Skin](https://premium.status301.com/coolclock-custom-skin/) or add it to your [Plugin Review](https://wordpress.org/support/view/plugin-reviews/coolclock). Thanks for sharing! 🙂 ### Can I insert a clock in posts or pages? Yes, there the shortcode **[coolclock** **/]** available. You can find all parameters on [How to use the CoolClock shortcode](https://premium.status301.com/how-to-use-the-coolclock-shortcode/). ### I’m building my own theme. Is there a theme function available? Yes, you can use a built-in WordPress function that parses a shortcode. To place the same clock as in the shortcode example above, anywhere in your theme, use this: ``` ``` ## 使用者評論 ![](https://secure.gravatar.com/avatar/406415f5ac42f4647aa97cf0806aa57835fdd5ccde669709dc530a6f70118ff8? s=60&d=retro&r=g) ### 󠀁[Perfect](https://wordpress.org/support/topic/perfect-10540/)󠁿 [Andreas](https://profiles.wordpress.org/afoerster/) 2024 年 10 月 15 日 Works without problems, realy good. ![](https://secure.gravatar.com/avatar/1a56e243482e9b928908b15aa79c68c35a7dca504ed5ae1ccadb22ee6a3e93cc? s=60&d=retro&r=g) ### 󠀁[Nice Plugin](https://wordpress.org/support/topic/nice-plugin-4597/)󠁿 [nick1999](https://profiles.wordpress.org/nick1999/) 2022 年 4 月 19 日 Amazing Plugin. ![](https://secure.gravatar.com/avatar/14cce96492b9e64e5a7c2197811164b362ecbeefa78f78ea7a5789d7589e7812? s=60&d=retro&r=g) ### 󠀁[Cool Clock Skins](https://wordpress.org/support/topic/cool-clock-skins/)󠁿 [irmavc](https://profiles.wordpress.org/irmavc/) 2021 年 12 月 27 日 1 則留言 I love the analog clock skins! I was looking for something interesting and the watermelon clock was just that 🙂 ![](https://secure.gravatar.com/avatar/1ca55ea63dac3920bca12809c694951bfbad738a98809909a03b56e6bf10781c? s=60&d=retro&r=g) ### 󠀁[Brilliant Plugin](https://wordpress.org/support/topic/brilliant-plugin-278/)󠁿 [dixiereid](https://profiles.wordpress.org/dixiereid/) 2018 年 8 月 19 日 Absolutely brilliant! Worth getting the “advanced extension” to create a clock face background from my logo. ![](https://secure.gravatar.com/avatar/d90faa7801b62b3b1b80230b64d70140d5d1581d7c364554a2b57b7911294b11? s=60&d=retro&r=g) ### 󠀁[Excellent Plugin](https://wordpress.org/support/topic/excellent-plugin-3817/)󠁿 [Codebastler](https://profiles.wordpress.org/codebastler/) 2018 年 4 月 1 日 Great plugin. Works perfectly. Well done! ![](https://secure.gravatar.com/avatar/6bfb94d059e3a9793f95e37a20c790a2e383cabeefcdb2328a11bd16f909d355? s=60&d=retro&r=g) ### 󠀁[Excellent plugin works like a charm](https://wordpress.org/support/topic/excellent-plugin-works-like-a-charm-4/)󠁿 [mushrath007](https://profiles.wordpress.org/mushrath007/) 2017 年 12 月 17 日 1 則留言 Really loved the plugin, just a quick question can i change Show digital: color. I want to show it in different color. [ 閱讀全部 15 則使用者評論 ](https://wordpress.org/support/plugin/coolclock/reviews/) ## 參與者及開發者 以下人員參與了開源軟體〈CoolClock – a Javascript Analog Clock〉的開發相關工作。 參與者 * [ Rolf Allard van Hagen ](https://profiles.wordpress.org/ravanh/) 〈CoolClock – a Javascript Analog Clock〉外掛目前已有 6 個本地化語言版本。 感謝[全部譯者](https://translate.wordpress.org/projects/wp-plugins/coolclock/contributors) 為這個外掛做出的貢獻。 [將〈CoolClock – a Javascript Analog Clock〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/coolclock) ### 對開發相關資訊感興趣？ 任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/coolclock/)、查看 [SVN 存放庫](https://plugins.svn.wordpress.org/coolclock/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/coolclock/?limit=100&mode=stop_on_copy&format=rss) 訂閱[開發記錄](https://plugins.trac.wordpress.org/log/coolclock/)。 ## 變更記錄 #### 4.3.7 * Bugfix: fatal error when shotcode has no parameters #### 4.3.6 * Bugfix: empty noseconds and showdigital ignored #### 4.3.5 * Bugfix: shortcode Stored XSS vulnerability, thanks @wpscan #### 4.3.4 * Update URLs #### 4.3.3 * Bugfix: cannot read property ‘length’ of undefined * Bugfix: not initiated on IE8 and older * Script update v.3.2.1 with more robust skin handling * Bugfix: script not enqueued when only shortcode is used #### 4.3 * New shortcode attributes, canvas fields and styles filters * Updated coolclock script * Script size reduction * Replace moreskins.js with dynamic inline skins parameters * Custom skin parameter input sanitization * Skin parameters in JSON format + json polyfill for IE6/7 * Remove jQuery dependancy * Help link to KB pages #### 4.2.1 * BUGFIX: Widget GMToffset can be zero #### 4.2 * Custom skin parameters in shortcode * Plugin support and rate links * Widget color code validation * BUGFIX: shortcode skin names case-sensitive * BUGFIX: undefined index #### 4.1 * Digital text styling * Clock icon for widget in Customizer * FIX: use .min script versions when not in debug mode #### 4.0 * Split up classes * Don’t use print_scripts the wrong way #### 3.3 * Wrapper div class “coolclock” * User input shortcode attributes validation #### 3.2 * Dropped compatibility with PHP 4 and pre WP 3.2 * German translation #### 3.1 * Deprecating PHP4 style constructor for Widget * Bugfix undefined index #### 3.0 * Responsive canvas styling #### 2.9.8 * Translation string fixes * Russian translation by Natalia Zavyalova #### 2.9.7 * Prepare custom skin for shortcode in advanced extension * BUGFIX: disable wptexturize for shortcode content #### 2.9.6 * Skin watermelon alpha fix * BUGFIX: Non-static method should not be called statically * BUGFIX: Undefined index #### 2.9.5 * BUGFIX: PHP 5.4 Using $this when not in object context * BUGFIX: Non-static method should not be called statically #### 2.9.4 * New clock skin shared by user MrCarlLister * Use Globaltick branch script version 3.0.0-pre * BUGFIX: undefined index in widget form #### 2.9.2 * BUGFIX: Thread between tip of the second hand and 3 o’clock in IE * Shortcode filter #### 2.9 * BUGFIX: excanvas included too late * CoolClock.js version 3.0.0-pre * Allow shortcode in text widget * NEW: Subtext option * NEW: Widget align option #### 2.0 * NEW: logClock option #### 1.1 * Minified javascript #### 1.0 * Sidebar widget overhaul * Class * NEW: Shortcode #### 0.1 * First implementation of CoolClock in sidebar widget ## 商業版外掛 這個外掛為免費外掛，但另外提供付費商業升級版或技術支援。 [查看技術支援方式](https://premium.status301.com/support/) ## 中繼資料 * 版本 **4.3.7** * 最後更新 **3 年前** * 啟用安裝數 **2,000+** * WordPress 版本需求 ** 4.8.1 或更新版本 ** * 已測試相容的 WordPress 版本 **6.3.8** * PHP 版本需求 ** 5.6 或更新版本 ** * 語言 * [Dutch](https://nl.wordpress.org/plugins/coolclock/)、[English (US)](https://wordpress.org/plugins/coolclock/)、 [French (France)](https://fr.wordpress.org/plugins/coolclock/)、[Greek](https://el.wordpress.org/plugins/coolclock/)、 [Polish](https://pl.wordpress.org/plugins/coolclock/)、[Russian](https://ru.wordpress.org/plugins/coolclock/)、 及 [Swedish](https://sv.wordpress.org/plugins/coolclock/). * [將這個外掛本地化為你的母語版本](https://translate.wordpress.org/projects/wp-plugins/coolclock) * 標籤: * [analog clock](https://tw.wordpress.org/plugins/tags/analog-clock/)[clock](https://tw.wordpress.org/plugins/tags/clock/) [javascript](https://tw.wordpress.org/plugins/tags/javascript/)[widget](https://tw.wordpress.org/plugins/tags/widget/) * [進階檢視](https://tw.wordpress.org/plugins/coolclock/advanced/) ## 評分 4.9 星，滿分為 5 星 * [ 14 個 5 星使用者評論 ](https://wordpress.org/support/plugin/coolclock/reviews/?filter=5) * [ 1 個 4 星使用者評論 ](https://wordpress.org/support/plugin/coolclock/reviews/?filter=4) * [ 0 個 3 星使用者評論 ](https://wordpress.org/support/plugin/coolclock/reviews/?filter=3) * [ 0 個 2 星使用者評論 ](https://wordpress.org/support/plugin/coolclock/reviews/?filter=2) * [ 0 個 1 星使用者評論 ](https://wordpress.org/support/plugin/coolclock/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/coolclock/reviews/#new-post) [查看全部使用者評論](https://wordpress.org/support/plugin/coolclock/reviews/) ## 參與者 * [ Rolf Allard van Hagen ](https://profiles.wordpress.org/ravanh/) ## 技術支援 使用者可在技術支援論壇提出意見反應或使用問題。 [檢視技術支援論壇](https://wordpress.org/support/plugin/coolclock/) ## 贊助 想要支援這個外掛的發展嗎？ [ 贊助這個外掛 ](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=ravanhagen%40gmail%2ecom&item_name=CoolClock%20for%20WordPress&item_number=1%2e3%2e4%2e9&no_shipping=0&tax=0&charset=UTF%2d8¤cy_code=EUR)