版型使用說明 – 國立光復高級商工職業學校

網站功能使用先備知識

請參考教學影片：https://youtube.com/playlist?list=PLvXna0vipzJAMFyTQkbjvUfxWuSQWv_G-
- 新增/編輯文章並給予文章分類請參考「3-3建立文章」
- 要在頁面添加「最新文章」區塊，請參考「3-4網頁中顯示文章分類」
可重複使用區塊管理清單 https://web.hs.edu.tw/kfcivshlc/wp-admin/edit.php?post_type=wp_block
- 編輯可重複使用區塊時，使用該區塊的所有位置都會一同變更。使用教學請參考：https://wordpress.com/zh-tw/support/wordpress-editor/blocks/reusable-block/
- 如果你只想修改某特定頁面或文章上的可重複使用區塊，可先使用「轉換為一般區塊」選項將可重複使用區塊轉為一般區塊再進行修改。
再製按鈕並更新連結至某分類清單頁
- 示範影片連結：https://youtu.be/zRvMG9PtLF4
- 選擇按鈕區塊，使用「再製」功能（或 Ctrl+Shift+D鍵），修改新按鈕文字與連結。
使用「快速編輯」修改頁面「導覽標記」
- 範例：將行政單位/秘書室/職業安全衛生專區移到行政單位/總務處
- 示範影片連結：https://youtu.be/EpC2gc9IYak
新增分類連結至主選單示範影片連結：https://youtu.be/zr80_U0OFug
示範於「頁面」建置最新文章區塊：https://youtu.be/QpaVLWGCmZ0

注意事項

內頁側欄「校園影片」建置於「廣告輪播」。YouTube影片連結需取用「分享」內的「嵌入影片」連結，詳見上圖。
於控制台 > 外觀 > 自訂項目 > 最頂端內容列 > Social 管理FB與Line連結。QRcode 圖檔連結寫在CSS內，若連結有更動圖檔連結亦須一併更新。

側欄的單元多由小工具「導覽選單」製作，對於現有選單請勿更動其英文名稱，否則可能會造成版面樣式失效之情況。
網站現有「分類代稱」盡量不要去更動，否則版型中搭配CSS樣式表語法處理的設計，將會失效。未來若有新的分類，其「分類代稱」也應以有意義的英文命名，因為這名稱會帶到網址內，有助於搜尋網站對於官網的SEO。
頁面或文章「代稱」建議以有意義的英文命名，因為這名稱會帶到網址內，有助於搜尋網站對於官網的SEO。

正確使用 < H2 > ~ < H6 > Header元件
- 因< H1 >已被頁面/文章標題所使用，故編輯內文時請勿使用< H1 >
- 請由上而下的方式註記文章章節標題，以利瀏覽器辨別輔助閱讀。
- 無障礙規則說明：https://accessibility.moda.gov.tw/Download/Detail/105?Category=39/
改至正式網址時，所有用到「https://web.hs.edu.tw/twvstn/」的連結均須修改，如：自訂選單連結、按鍵連結、CSS內圖檔連結等。

版型樣式之套用

文章/頁面標題前綴標示
「標題區塊」group-box-news
標題前加上圖示 title-box style2
「列表式最新文章」group-box style-b
「三欄式最新相簿」photo-box-row-3
「more」按鈕 more-button
按鈕顏色
文字色彩
段落背景色彩
表格樣式範例
分隔線範例
修改< ul > < ol >清單之標示為中文數字 list-style-type-informal
中文大寫數字清單 list-style-type-tcformal
第一層清單不上符號 rules-style
第一層清單粗體字獨立一列綠底白字 list-style-type1
兩欄式列表清單 row-2
區塊式清單 block-columns-25
第一層首列清單寬度100% first-li-width-100
第二層ul清單虛線框 border-dotted
將區塊間距padding與margin設為0px

文章/頁面標題前綴標示

列表式最新文章標題手動標籤：於頁面內容標題前方加入適合的前綴標示 (先複製左側語法貼至純文字記事本，再複製貼回標題)，樣式語法與對應樣式如下：

範例

<b class="tag-orange">橘底白字</b>
<em class="tag-orange-text">橘字</em>

橘底白字橘字測試文章標題

<b class="tag-blue">藍底白字</b><em class="tag-blue-text">藍字</em>

藍底白字藍字測試文章標題

<b class="tag-gray">煙灰底白字</b><em class="tag-gray-text">煙灰字</em>

煙灰底白字煙灰字測試文章標題

<b class="tag-green">綠底白字</b><em class="tag-green-text">綠字</em>

綠底白字綠字測試文章標題

<b class="tag-red">紅底白字</b><em class="tag-red-text">紅字</em>

紅底白字紅字測試文章標題

<b class="tag-pdf">PDF</b>

PDF測試文章標題

<b class="tag-doc">DOC</b>

DOC測試文章標題

<b class="tag-document">文件</b>

文件測試文章標題

「標題區塊」group-box-news

用法1：新增區塊類型「多重欄位」，並於此區塊之進階設定「附加的 CSS 類別」套用「group-box-news」。若要選取編輯現有「多重欄位」區塊，可使用外框工具。
用法2：直接將樣式套用於「標題」，可於此標題之進階設定「附加的 CSS 類別」套用「group-box-news」。

多重欄位內H2標題

多重欄位內H3標題

多重欄位內H4標題

多重欄位內H5標題

多重欄位內H6標題

未使用多重欄位，直接將樣式套用於H2標題

未使用多重欄位，直接將樣式套用於H3標題

未使用多重欄位，直接將樣式套用於H4標題

未使用多重欄位，直接將樣式套用於H5標題

未使用多重欄位，直接將樣式套用於H6標題

「標題」前加上圖示 title-box style2

用法1：新增區塊類型「多重欄位」，並於此區塊之進階設定「附加的 CSS 類別」套用「title-box style2」。
用法2：直接將樣式套用於「標題」，可於此標題之進階設定「附加的 CSS 類別」套用「title-box style2」。

多重欄位內H2標題

多重欄位內H3標題

多重欄位內H4標題

多重欄位內H5標題

多重欄位內H6標題

未使用多重欄位，直接將樣式套用於H2標題

未使用多重欄位，直接將樣式套用於H3標題

未使用多重欄位，直接將樣式套用於H4標題

未使用多重欄位，直接將樣式套用於H5標題

未使用多重欄位，直接將樣式套用於H6標題

「列表式最新文章」group-box style-b

區塊類型使用「最新文章」，顯示內容發佈日期，附加的 CSS 類別設為「group-box style-b」

範例

最新消息

「三欄式最新相簿」photo-box-row-3

區塊類型使用「最新文章」，顯示內容發佈日期，精選圖片設定：啟用「顯示精選圖片」，圖片尺寸設為「中尺寸」，圖片對齊方式設為「置中對齊」，項目數量「3」，附加的 CSS 類別設為「photo-box-row-3」。

範例

「more」按鈕 more-button

於欲套用樣式之「按鈕組」或「按鈕」進階設定「附加的 CSS 類別」套用「more-button」

範例

將樣式套用於「按鈕組」

將樣式套用於「按鈕」

按鈕顏色

預設顏色已根據版型配色調整過，實際顏色請參考範例圖檔。
於欲套用樣式之「按鈕」設定其「背景色彩」或「文字色彩」，樣式如下：

範例

文字色彩

選取欲修改文字顏色之「段落」或區塊，於「色彩設定」之「文字色彩」勾選顏色，現有樣式如下：

範例

預設樣式

煙灰字

奶咖字

粉紅字

Logo紅字

橘字

黃字

淺綠字

Logo綠字

淺藍字

Logo藍字

紫字

段落背景色彩

於欲修改顏色之「段落」或區塊，於「色彩設定」之「背景色彩」勾選顏色，現有樣式如下：

範例

黑底

煙灰底

奶咖底

粉紅底

綠底

橘底

黃底

logo紅底

Logo綠底

淺藍底

Logo藍底

紫底

表格樣式範例

套用表格「標題標籤」需開啟表格設定之「標題區段」。
表格儲存格寬度隨儲存格內文自動調整，可啟用「固定寬度的表格儲存格」固定寬度。

範例

標題1	標題2	標題3	標題4	標題5
Ａ	B	C	D	E
F	G	H	I	J
K	L	M	N	O
P	Q	R	S	T

樣式1(預設)：is-style-regular

標題1	標題2	標題3	標題4	標題5
Ａ	B	C	D	E
F	G	H	I	J
K	L	M	N	O
P	Q	R	S	T

樣式2條紋：is-style-stripes

分隔線範例

修改分隔符號顏色：選取欲修改的「分隔符號」，於右側設定區之「色彩設定」勾選顏色。

範例

預設樣式

長線段預設樣式

紅色預設樣式

藍色長線段預設樣式

修改< ul > < ol >清單之標示為中文數字 list-style-type-informal

< ul >或< ol >列表元素marker修改為中式數字：透過「外框」工具選取欲修改的「清單」，於右側設定區之「附加的 CSS 類別」輸入「list-style-type-informal」。

範例

使用電腦：
1. 點選PDF上的班級『直播講堂網址』
2. 或在瀏覽器輸入班級『直播講堂網址』
使用手機：
1. 手機需先下載APP 可App Store或Google Play輸入關鍵字下載安裝
  1. 掃描二維條碼進入『班級直播網址』
  2. 手機需先下載APP 可App Store
  3. Google Play輸入關鍵字下載安裝
2. 手機需先下載 jitsi meet APP 可App Store或Google Play輸入關鍵字 jitsi meet 下載安裝
掃描二維條碼進入『班級直播網址』
掃描二維條碼進入『班級直播網址』

修改< ul > < ol >清單之標示為中文大寫數字 list-style-type-tcformal

< ul >或< ol >列表元素marker修改為中式大寫數字：透過「外框」工具選取欲修改的「清單」，於右側設定區之「附加的 CSS 類別」輸入「list-style-type-tcformal」。

範例

使用電腦：
1. 點選PDF上的班級『直播網址』
2. 或在瀏覽器輸入班級『直播網址』
使用手機：
1. 手機需先下載 jitsi meet APP 可App Store或Google Play輸入關鍵字 jitsi meet 下載安裝
  1. 掃描二維條碼進入『班級直播網址』
  2. 手機需先下載 jitsi meet APP 可App Store或Google Play輸入關鍵字 jitsi meet 下載安裝
2. 掃描二維條碼進入『班級直播網址』
手機需先下載 jitsi meet APP 可App Store或Google Play輸入關鍵字 jitsi meet 下載安裝
掃描二維條碼進入『班級直播網址』

< ul > < ol >第一層清單不上符號 rules-style

選取欲修改之「清單」區塊，其進階設定「附加的 CSS 類別」套用「rules-style」

範例

方式一 使用電腦：
1. 點選PDF上的班級『直播網址』
2. 或在瀏覽器輸入班級『直播網址』
方式二 使用手機：
1. 手機需先下載 jitsi meet APP 可App Store或Google Play輸入關鍵字 jitsi meet 下載安裝
2. 掃描二維條碼進入『班級直播網址』