WordPress 文章編輯器如何正確新增或上傳影片?
WordPress是非常主流的網站建置工具,但同時它也相當令人頭疼,三不五時就會出現狀況,在國內缺乏相關教學與論壇的情況下,初學者往往會因為找不到解法便棄坑……但偏偏許多時候又不得不使用它,因此為了給予WordPress初學者一些希望,之後會定期挑些常見的問題來分享,這次就來談談文章上傳影片的方式及會遇到哪些問題吧~
當在 WordPress 中撰寫文章時,可以透過以下方式在文章內添加影片
【使用預設編輯器】
使用內建的文章編輯器 Gutenberg 來新增影片。
- 此種方式最為陽春與直覺,是WP預設的編輯方式,可點擊【新增媒體】從檔案或連結插入;但實際上若是從檔案庫中插入影片,可能會發生桌上型裝置正常顯示,手機端卻出問題的情況,主要是由於此方式是將檔案庫中影片,按「完整尺寸」嵌入,導致影片尺寸過大,超出手機畫面而無法顯示。
【使用外掛輔助解決】
使用Elementor編輯器外掛編輯文章頁面,並新增影片
- Elementor可以理解成WordPress的進階外掛編輯,可以進行更細節的設定與外觀調整,相當程度更能客製化文章頁面,不過操作介面較複雜,且須具有基本的網頁程式碼概念,對於初學者來說不易消化。使用Elementro編輯器的話,可以透過左上角的「+」號來新增媒體,再從左側編輯面板直接上傳影片或置入影片連結。
使用Html5 Video Player,將影片以Short Code短代碼新增影片
- 將影片以『Short Code形式』製作成獨立元件(姑且這樣理解吧)之後只要把Short Code複製並貼上到文章中即可成功插入,可以解決因為尺寸關係導致手機端無法顯示的問題。另外也能在製作Short Code的過程中透過編輯器自訂義蠻多細節的,比如說元件的標題、封面縮圖、是否循環播放、自動播放…等設定
- 使用教學:
>>安裝『Html5 Video Player』
>>若要安插主機上的影片到文章中的話,可以從(面板左側)【媒體_媒體庫】找到主機上的所有影片,複製網址 / 若是YT可以直接複製影片連結。
>>至(面板左側)【Html5 Video Player】,點選Add New Player新增。
>>KEY上影片對應的標題,將剛剛複製的連結網址貼上(右側可以調整屆時影片的外觀之類的設定)。
>>發佈(此發佈非文章或頁面發佈,而是發佈並建立成Short Code元件)
>>將Short Code複製到文章預設編輯器那直接貼上;或透過安裝後預設編輯器新增的【Html5 Video Player】按鈕,將已建立好的Short Code丟到文章上(直接在打文章的地方,找位置複製貼上即可)
- 使用教學: