高師大附中網站版型使用/編輯說明

網站功能使用先備知識

• 請參考教學影片：https://youtube.com/playlist?list=PLvXna0vipzJAMFyTQkbjvUfxWuSQWv_G-
  • 新增/編輯文章並給予文章分類請參考「3-3建立文章」
  • 要在頁面添加「最新文章」區塊，請參考「3-4網頁中顯示文章分類」
  • 網站若有啟用「無障礙檢測」功能，內容區的連結需手動加上「title」標籤，使用教學請參考：https://youtu.be/KE7ob8xuGuQ

• 可重複使用區塊管理清單 https://web.hs.edu.tw/nknushkh2/wp-admin/edit.php?post_type=wp_block
  • 編輯可重複使用區塊時，使用該區塊的所有位置都會一同變更。使用教學請參考：https://wordpress.com/zh-tw/support/wordpress-editor/blocks/reusable-block/
  • 如果你只想修改某特定頁面或文章上的可重複使用區塊，可先使用「轉換為一般區塊」選項將可重複使用區塊轉為一般區塊再進行修改。
  • 以複製貼上方式替換「可重複使用區塊」。

注意事項

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

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

版型樣式之套用

• 兩欄式內容區（左側欄） two-column
• 單欄式內容區 one-column
• 文章/頁面標題前綴標示
• 「標題區塊」title-box
• 標題區塊前加上圖示 title-box
• 「列表式最新文章」news-table-list
• 三欄式活動成果 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
• 「多重欄位」套用左側飾條/右側飾條 border-left與border-right
• 將區塊間距padding與margin設為0px

兩欄式內容區（左側欄）two-column

• 新增區塊類型「多重欄位」，選取30/70的兩欄式配置（1/3寬及2/3寬），並於此區塊之進階設定「附加的 CSS 類別」套用「two-column」。
• 範例頁面：圖書館

範例

１２３

單欄式內容區 one-column

• 新增區塊類型「多重欄位」，並於此區塊之進階設定「附加的 CSS 類別」套用「one-column」。
• 範例頁面：附中簡史

若單欄式內容頁面內已有大量內容不方便重置到多重欄位內，亦可選取內容內所有區塊，再「群組」區塊，並於此區塊之進階設定「附加的 CSS 類別」套用「one-column」。

範例

文章/頁面標題前綴標示

列表式最新文章標題手動標籤：文章列表清單點擊「快速編輯」，於內容標題前方加入適合的前綴標示 (先複製左側語法貼再貼至標題)，因資安問題若在文章編輯區以謄打輸入方式的小寫雙引號可能會被程式置換，所以儲存後請檢查其是否正確，若被替換請自行重打為小寫雙引號!!樣式語法與對應樣式如下：

範例

<b class="tag-hot">HOT</b>

<b class="tag-new">NEW</b>

<b class="tag-purple">榮譽</b>

<b class="tag-logo-color">自訂</b>

<b class="tag-red">重要</b>

<b class="tag-news">公告</b>

<b class="tag-bluegreen">活動</b>

<b class="tag-blue">研習</b>

<b class="tag-brown">宣導</b>

<b class="tag-green">競賽</b>

<b class="tag-right">2025-07-01</b>

「標題」區塊

範例

H2標題

H3標題

H4標題

H5標題

H6標題

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

• 將樣式套用於「標題」，可設定背景色彩，可於此標題之進階設定「附加的 CSS 類別」套用「title-box」。

範例

將樣式套用於H2標題，加圖示 title-box icon01

將樣式套用於H3標題，加圖示 title-box icon02

樣式套用於H4標題，加圖示 title-box icon03

將樣式套用於H5標題，加圖示 title-box icon04

將樣式套用於H6標題，加圖示 title-box icon05

將樣式套用於H6標題，加圖示 title-box icon06

將樣式套用於H6標題，加圖示 title-box icon07

將樣式套用於H6標題，加圖示 title-box icon08

將樣式套用於H6標題，加圖示 title-box icon09

將樣式套用於H6標題，加圖示 title-box icon10

將樣式套用於H2標題，設定任一背景色彩 title-box

將樣式套用於H3標題，設定背景色彩 title-box

將樣式套用於H4標題，設定背景色彩與文字色彩 title-box

將樣式套用於H5標題，設定背景色彩 title-box

將樣式套用於H6標題，設定背景色彩與文字色彩 title-box

「列表式最新文章」news-table-list

• 區塊類型使用「最新文章」，顯示內容發佈日期，附加的 CSS 類別設為「news-table-list」
• 標題行數若超出2行，將以「⋯」代替。

範例

• 公告中華民國115年全國好人好事代表「八德獎」選拔人事室2026-04-30
• 公告高中職學生跨幼老領域升學發展與輔導公聽會教務處2026-04-30
• 社團法人台灣公告 少年權益與福利促進聯盟《滑手機前先想一下！你的數位安全指南》漫畫書線上版 輔導室2026-04-30
• 公告2026年「【武營大圖鑑】管風琴密碼」PaGamO線上遊戲平台任務教務處2026-04-30
• 公告115年「桃園市原住民族學生獎助－全國級族語競賽獎勵金」註冊組2026-04-30

範例

將最新文章（news-table-list）與more按鈕（more-button）進行「群組」，並於此「群組」區塊之進階設定「附加的 CSS 類別」套用「news-box」。

「三欄式活動成果」photo-box-row-3

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

新增活動照片

放入圖片後，記得要加入 “替代文字”

「more」按鈕 more-button

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

範例

按鈕顏色

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

範例

文字色彩

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

範例

段落背景色彩

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

範例

表格樣式範例

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

範例

分隔線範例

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

範例

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

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

範例

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

「第一層清單不上符號且加粗文字獨立一列橘底白字」 list-style-type1

選取欲修改之「清單」區塊，其進階設定「附加的 CSS 類別」套用「list-style-type1」，於第一層清單「加粗」文字。

範例

• 職稱與聯絡資料
  • 職稱：導師
  • 分機：ooo
• 學歷：
  • 國立台南大學碩士
  • 崑山科大
• 經歷：
  • 教師
  • 導師
• 專長科目：
  • 實務
  • 營養實務
• 證照取得：
  • 中等學校教師證書
  • 丙級技術士證書

範例

選取欲修改之「清單」區塊，其進階設定「附加的 CSS 類別」套用「list-style-type1 decimal-leading-zero」，於第一層清單「加粗」文字，而第二層清單以阿拉伯數字編號。

• 職務內容
  • 擬定相關教學活動計畫。
  • 編排教務處行事曆。
  • 編排教師課表及班級課表。

區塊式清單 block-columns-25

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

範例

• 職稱與聯絡資料
  • 職稱：導師
  • 分機：uuu
• 學歷：
  • 國立台南大學碩士
  • 崑山科大
• 經歷：
  • 教師
  • 導師
• 專長科目：
  • 照護實務
  • 膳食與營養實務
• 證照取得：
  • 中等學校教師證書
  • 丙級技術士證書

兩欄式列表清單 row-2

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

範例

• 衛生福利部疾病管制署衛生福利部疾病管制署衛生福利部疾病管制署衛生福利部疾病管制署
• 衛生福利部國民健康署     
• 菸害防制資訊網    
• 臺南市政府衛生局     
• 健康九九  
• 董事基金會華文戒菸網

首列清單寬度100% first-li-width-100

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

範例：block-columns-25 first-li-width-100

• 職稱與聯絡資料
  • 職稱：導師
  • 分機：ooo
• 學歷：
  • 國立台南大學碩士
  • 崑山科大
• 經歷：
  • 主任
  • 導師
• 專長科目：
  • 照護實務
  • 膳食與營養實務
• 證照取得：
  • 中等學校教師證書
  • 丙級技術士證書

範例：row-2 first-li-width-100

• 衛生福利部疾病管制署衛生福利部疾病管制署衛生福利部疾病管制署衛生福利部疾病管制署
• 衛生福利部國民健康署     
• 菸害防制資訊網    
• 臺南市政府衛生局     
• 健康九九  
• 董事基金會華文戒菸網

「多重欄位」套用左側飾條/右側飾條

透過「外框」工具選取欲套用樣式的欄位，於右側設定區之「附加的 CSS 類別」輸入下列樣式名稱。

職稱 名字

• 分機：
• Email：

工作職掌

• 123
• 456789
• 33333333333
• 55555
• 666666666

將區塊間距padding與margin設為0

區塊使用「色彩設定」時，若需要縮小區塊間距，可於該區塊「附加的 CSS 類別」套用「padding-0」或「margin-0」

範例

區塊使用背景色彩時，padding預設值為1.25em 2.375em

於 附加的 CSS 類別 套用「padding-0」將padding設為0

套用文字色彩時，margin預設值為0.3125em 0em

於 附加的 CSS 類別 套用「margin-0」將margin設為0