內容簡介
基本操作說明
此外掛可直接使用，安裝後即可在欲呈現的位置插入shortcode。
輸入 [pcf_gfn_countdown] 的shortcode可以呈現倒數計時器。
預設展現剩餘天數 (例如：「105 天後即為裴德國民日！」)。
更改展現方式
您可以在shortcode加上「type」屬性以改變表現方式：
[pcf_gfn_countdown type="days|weeks|sleeps"]
請根據需求挑選以下三個方式之一：
天數
週數
睡眠日數
如果您未指定屬性值或指定該屬性的值無效，系統會以預設值「天數」呈現。
範例：
[pcf_gfn_countdown type="weeks"]
呈現如下：
距裴德國民節剩下 `x` 週 `y` 天！
自訂樣式
自訂樣式是一項高級操作，需了解 CSS 寫作。
您可以在shortcode加上 「id」屬性後，再透過 CSS 自行調整樣式。
例如：
[pcf_gfn_countdown id="my-id"]
將呈現如下HTML語法：
<p id="my-id">...</p>
接下來，您可以在「外觀」>「編輯器」、「主題選項」等地方鍵入 CSS 來針對指定 ID 調整樣式。如有自訂 CSS 檔案可以直接編輯，建議使用該檔案進行自訂樣式。
以下是舉例的自訂 CSS 程式碼：
#my-id{ color: red; font-size: 16px; text-decoration: underline; }
該程式碼會呼應目標 ID 的樣式，設定為紅色、帶下底線、字型大小 16px。
外掛標籤
開發者團隊
② 後台搜尋「PCF Guy Fawkes Night Countdown」→ 直接安裝（推薦）
原文外掛簡介
Basic Instructions
This plugin works out-of-the-box, so once the plugin is installed, you can place a shortcode wherever you want.
Use the shortcode [pcf_gfn_countdown] to output the countdown.
The countdown will output in days by default (e.g ‘105 days until Guy Fawkes Night!’).
Changing output type
The shortcode can be given a ‘type’ attribute, like so:
[pcf_gfn_countdown type="days|weeks|sleeps"]
This enables you to change the output type.
There are 3 types to choose from:
Days
Weeks
Sleeps
If you do not specify the type attribute, or specify an invalid type, it will default to ‘days’.
Example:
[pcf_gfn_countdown type="weeks"]
will output as
It's `x` weeks and `y` days until Guy Fawkes Night!
Styling the output
Styling the output is an advanced setting, that involves writing custom CSS.
The shortcode can be given an ‘id’ attribute, which can then be used to style the output using CSS.
For example,
[pcf_gfn_countdown id="my-id"]
would output in HTML as
...
You can then add custom CSS through Appearance > Editor. If your theme supports custom CSS, you may be able to add your styles in Theme Options. If there is a custom css file in Editor, it is advised to use that for custom styles.
Here is an example of some custom styles:
#my-id{ color: red; font-size: 16px; text-decoration: underline; }
This will set the output to be red, underlined, and to have a font size of 16px.
