fbpx
了解 Elementor 編輯器最新優惠

如何在 WordPress 插入樂譜 (Sheet Music) 和音符?

如何在 WordPress 插入樂譜 (Sheet Music) 和音符?

喜歡音樂的朋友,如果希望透過 WordPress 網站分享自己或別人製作的樂譜 (Sheet Music) 於網絡或其他地方,從前沒有太多方法,常見是「轉換成 PDF 格式」的樂譜來共享資源。不過我們這次介紹的免費外掛 OpenSheetMusicDisplay 卻可以讓你實現在網頁裡呈現漂亮的樂譜,而且是自動適應網頁的寬度和尺寸,適合在手機閱讀。

WordPress HTML 錨點是什麼?連結不同內容章節

WordPress HTML 錨點是什麼?連結不同內容章節

當你的 WordPress 網站已有不錯的文章數量,約 50 篇至 200 篇左右,這時候你「必須停下來思考一個問題」。網站的主題應該繼續擴闊更多單元?寫更多的文章嗎?不少研究顯示不少的網站的內容深度是嚴重不足,代表文章數量很多,但又不夠深入報道主題核心。

這次我們介紹新手常常忽視的「HTML 錨點 (Anchor) 」的應用,這個存在已久的功能,配合文章裡的「相關文章的超連結」,可以讓你建立主題架構緊密的的文章系列和整理文章。

錨點 (Anchor) 的應用可以用於單篇內容或外部的內容,讓訪客快速找到自己需要的內容和資訊,而非漫無目的地從數千字的內容裡發掘目標內容。

HTML 超連結 (Hyperlink) 是什麼?實務應用例子

HTML 超連結 (Hyperlink) 是什麼?實務應用例子

跟據權威的《維基百科》記載和文獻,超連結 (Hyperlink) 是指超文字內由一檔案連接至另一檔案的連結。作用與論文中的參考或注釋類似,以方便讀者隨時參考某一詞彙的定義。

超連結有點像是文學作品中的參考資料列表,它可以結合電腦網路和適當的存取協定來追蹤資料的原始出處,並被儲存、檢視,或顯示為關聯檔案中的一部份。

超連結中,最為通行的形式就是在全球資訊網上使用的 URL。瀏覽器通常會用一些特殊的方式來顯示超連結。如不同的文字色彩、大小或樣式。而且,游標移動到超連結上時,也會轉變為手形指示出來。

超連結在大部分的瀏覽器裡是顯示為加上底線的藍色字體,當這個連結已經被快取過時,則轉為紫色。當使用者觸發超連結時 (例如,用滑鼠左鍵按下超連結),瀏覽器將會顯示出連結的目標。

若目標並非 HTML 檔案時,將依其檔案格式以及瀏覽器自身之外掛程式而啟動外部程式以開啟檔案。

跟超連結相關聯的是超文字 (Hypertext),它是一種可以顯示在電腦顯示器或電子裝置上的文字,現時超文字普遍以電子文件的方式存在,其中的文字包含有可以連結到其他欄位或者文件的超連結,允許從當前閱讀的文字直接切換到超連結所指向的所有文字。

如何隱藏 WordPress 網站裡的物件,例如標題、圖片和段落?

如何隱藏 WordPress 網站裡的物件,例如標題、圖片和段落?

大部分的 WordPress 站長並非工程師或程序員背景出身,並不能太輕鬆修改外掛或佈景主題的程式碼,當遇上要「移除」網頁裡的「某一個物件或元素」,就會顯得束手無策和感到無奈。所以我們這次介紹不懂程式的新手都可以移除「任何物件」的方法,而且非常簡單和快速就能做到,學習曲線非常低,但又可以在往後重複使用。

如何找出網頁裡的 CSS Class Name (名稱) 和 ID Selector (選擇器)?

如何找出網頁裡的 CSS Class Name (名稱) 和 Id Selector (選擇器)?

這篇教學是網站架設的基本功之一,協助「初學者」有效和快速查詢得到網頁的 CSS Class Name (名稱) 和 Id Selector (選擇器)。這是一個非常重要的「起手式」,在往後很多教學都要求新手懂得查詢到網頁裡的 CSS 名稱,不然我們無法指定一些 [新的 CSS 屬性] 給它們。這篇教學約 5 分鐘就可以學會,我們會以市場佔有率最高的 Chrome DevTools (開發人員工具) 作為學習工具,讓新手快速進入學習的狀態。

WordPress 傳統區塊 | 相容舊版文章編輯器

WordPress 傳統區塊 | 相容舊版文章編輯器

相信大家都知道《區塊編輯器》是用來取代《傳統編輯器》的存在,但在前者之中卻可以包容後者在其中,這就是我們這次探討的「WordPress 傳統區塊」的應用。舊版文章編輯器是基於開源的 TinyMCE 項目,提供簡單的文書編輯和格式化排版,關於相關的應用可以參考我們相關的教學文章和研究,比較值得注意是這個「區塊 Block」是唯一不提供區塊設定的功能,它單純是讓舊版的內容相容於新版編輯器。

WordPress 分隔符號區塊 | 分割不同的版面元素和空間

WordPress 分隔符號 | 分割不同的版面元素

水平分隔線或稱為分隔符號是基礎的 WordPress 文章和頁面組成元素,能夠協助你輕輕分割長篇的內容和版面。清晰和分明的內容結構,可以減少讀者的跳出率,更加可以提供良好的用戶體驗。在文章編輯器中新增「分隔符號」是新手可以輕易辦到的事情,一般 WordPress 用家還可以配上 區塊編輯器 裡的 空白間隔區塊 功能,讓整體的版面清新和舒服。

WordPress 空白間隔區塊 | 調整空間感和留白

WordPress 空白間隔區塊 | 調整空間感和留白

由於暫時基礎的 WordPress《區塊編輯器》並沒有提供 CSS 的「Margins 邊界」和「Padding 邊距」的相關參數設定, 導致在控制不同元素和物件時會帶來一些不便。例如最常見就是段落之間的間距,一般我們希望提供一些留白空間,讓讀者知道段落和句子的開始點和完結點在那,不然長篇文章會堆疊在一起,影響文章的可讀性和結構性會變得較差。讓我們一起研究如何使用「空白間隔區塊」去讓不同段落差生明顯的區隔和留白。

WordPress 段落區塊 | 文字內容排版

WordPress 段落區塊 | 文字內容排版

WordPress 的區塊編輯器裡最核心的區塊之一就是「段落區塊」,接近你看到的大量文章內容都是透過它來完成。它跟「標題區塊」和「圖片區塊」的重要性相同。而且它是區塊編輯器的「預設區塊」,當你點擊編輯器的畫面,可以理解成你現在正在使用段落區塊。文字內容會以「輔助的特性」混合在不同的媒介之中,它就是 HTML 裡的 < p > 段落標籤,用來描述一段或整組的文字段落 (paragraph),你可能會錯過一些小細節和容易忽略的應用,讓我們一起瞭解這個實用區塊。

WordPress 標題區塊 | 級距、美化和排版

WordPress 標題區塊 | 級距、美化和排版

知名的 Yoast SEO 的分析報告 指出,我們應該在文章裡「每 300 至 600 個文字」之間,適當地加上合適和貼切主題的「標題 Heading」。在今天的文章之中,我們將會介紹 WordPress 的標題標籤如何協助你的文章「提高可讀性」和「強化搜尋引擎最佳化」。在 WordPress 區塊編輯器 裡新增標題和把段落轉換為標題都非常方便。在文章最後會提供一些進階和相關的教學,例如關於「標題標籤 SEO」和透過 CSS「美化文章標題」。區塊編輯器會自動化處理搜尋引擎最佳化的版面配置,方法是將文章或頁面標題視為 H1 標題標籤,而後續的標題區塊則會從 H2 的次標題開始,如此類推。但你可以自由地根據工具列中的樣式或區塊設定來選擇你的標題層級。