04.10 【WP 教程】文章發佈之編輯器使用教程

在分別介紹了文章發佈編輯頁面的各個位置的主要模塊後,今天我們單獨講解一下如何使用 WordPress 站點 Begin 主題下的文章編輯器,這個編輯器比較類似於 Office Word 的文檔編輯界面,僅僅是類似而已,不要跟 Office Word 的文檔編輯混為一談,因為 WordPress 的這個編輯器主要是為了編輯、排版“網頁”的而不是 Office Word 的文檔,所以 WordPress 的編輯器可以理解為是在線式的網頁文章編輯器,既然有“在線式”的自然也有“離線式”的(可參考【用 Office 2010 專業增強版作為 WP 離線發佈博客】)一文,但是明月還是建議大家養成使用 WordPress 在線式的這個編輯器,因為這會有非常好的兼容性和穩定性。

一篇文章在網站的展現方式和效果幾乎都來源於在“編輯器”裡編輯、排版這個階段,可以說這是網站用戶瀏覽體驗最重要的一個環節,所以明月將這篇文章放到最後來講,就是為了讓大家先對文章發佈、編輯頁面有一個全面基礎的認識後再來講,這樣更加有針對性。

先上圖,下圖已經用紅線標記了編輯器主要的功能和我們以後會經常要使用的功能:

【WP 教程】文章發佈之編輯器使用教程

圖片來自明月登樓博客【imydl.com】

可以看到編輯器其實一共就分了上下兩層兩個區域,上部主要是編輯器功能區域,下面空白部分為輸入區域(這個區域 Begin 主題很人性化的用灰色線條標記了“正文核心”和“側邊欄”這樣的劃分,就是為了讓實時預覽更加的形象化。)

先說說“功能區域”,在這裡涉及到了幾乎所有編輯時需要的功能,第一行自左至右的“添加媒體”可以在這裡添加上傳圖片、視頻、語音音頻文件以便插入到文章當中去,下面在講到“圖片”和“視頻”的時候我還會信息介紹的。最右邊的“可視化”和“文本”的 Tab 切換可以簡單理解為是兩種不同的編輯模式,默認的可視化就是我們當前看到的,“文本”可以理解為是 HTML 源代碼形式的編輯模式(這個需要你懂一些 HTML 源碼知識後來手動添加代碼的,新手可以忽略)。

自第二行開始基本上都是一些類似 Word 編輯器的功能按鈕了,這些基本上跟 Word 裡的功能都一樣,比較特殊的就是如下圖箭頭所指的這個圖標按鈕右邊的為 Begin 主題自帶的增強功能按鈕,以後我們會具體講解的。

【WP 教程】文章發佈之編輯器使用教程

圖片來自明月登樓博客【imydl.com】

當然如果你有興趣,也可以自己體驗一下這些特殊的增強功能,對於你文章排版優化還是有不少的好處的。

至於說眾多的功能按鈕都是幹啥的,其實你可以將鼠標移動到上面就會有提示的,基本上都是些“顧名思義”的,很好理解的。


在這個編輯器裡我們可以在輸入或者插入文字的同時,還可以插入圖片、視頻、音頻等等多媒體形式的數據,所以對應的排版和佈局也是至關重要的,只有排版合理美觀的網頁文章才會讓用戶有更多的耐心閱讀完你想表達意思的文章,在明月早期的文章【博客站長務必要養成的好習慣】一文裡,明月針對編輯發佈文章時候要養成的好習慣就是大家需要注意的。下面就以文字、圖片、視頻三個主要文章內容形式一一給大家講解一下。

一、文字

文字是承載一個網站內容的主要表現形式,所以針對“文字”的排版編輯也是至關重要的,在編輯器裡文字可以採用打字方式輸入的同時也可以通過複製粘貼來添加,這也是最常見的方式了。

1、純文本的重要性

但是明月要強調的是不要簡簡單單的僅僅是“複製粘貼”,因為“複製粘貼”有時候並不是複製粘貼過來的就是你選中,特別是網頁間的複製粘貼特別容易捎帶網頁後面的代碼也複製粘貼過來了,而這些代碼有時候是 HTML 排版代碼甚至對方網站獨有的 CSS 美化代碼,如果都複製過來就一定會出現“兼容性”問題,甚至會造成你的文章排版錯亂嚴重,甚至會在發佈後出現些莫名其妙的東西,嚴重影響閱讀體驗。 正缺的複製粘貼是,複製後先粘貼到第三方的純文本文件編輯器軟件(如: EditPlus)裡或者在線的文本 TXT 美化編輯器裡(如:在線排版工具),這樣一來就刻意過濾到那些隱藏著的代碼了,獲得了相對“純淨”的文字內容,然後再講這些“純淨”的文字複製粘貼到 WordPress 的編輯器中來,當然你也可以先對已經“純淨化”後的這些文字進行一些簡單的排版整理和修正等等後在複製粘貼過來提高效率。

【WP 教程】文章發佈之編輯器使用教程

圖片來自明月登樓博客【imydl.com】

這是一個明月經常使用的在線排版工具,大家從上圖可以看到可以在這裡對文字進行簡單的排版、搜索查找替換、繁簡互換等等可以省去我們不少排版時的工作的。

總之,永遠要記住你在網頁裡複製的內容大部分都不是真正的“純文本”,而編輯器要想達到最好的排版結果,最好的就是使用純文本,這樣會省去很多的麻煩和提高效率。

2、文字排版要注意的事項

如上述所說,我們通過“淨化”後獲取到的純文本文字粘貼到編輯器後就沒有什麼排版效果,這時候就需要我們使用編輯器的排版功能來進行排版,看似這一步是“多此一舉”,實則是對文章 SEO 優化有很重要的意義,在【寫給大家看的中文排版指南】一文中就專門講到了“中文排版”的重要性,建議大家多看看,多學習一些裡面的那些基礎知識。

在我們【文章發佈之編輯器模塊介紹之一】和【文章發佈之編輯器模塊介紹之二】一文中,明月多次提到了主題 Begin 特有的功能,在文字排版上也有的(注意下面說到的這些是主題 Begin 特有的內置支持功能,並不是 WordPress 默認支持提供的,主題不同更是有區別的)下面就給大家簡單講解一下。

  • 文章索引目錄

顧名思義,這個索引目錄就是類似於紙質書的“目錄”一樣,無非是在網頁上而已,這個索引目錄需要大家在編輯排版的時候設置特定的“標題”(默認是‘四級標題’)後,主題自動會在文章發佈後生成索引目錄呈現給用戶方便用戶根據索引目錄跳轉閱讀。一篇文章帶有索引目錄也會受到搜索引擎更多的青睞,所以這個也是一個需要重點培養的好習慣。

下面給大家截圖看看文章內有“索引目錄”後的效果和如何使用的:

【WP 教程】文章發佈之編輯器使用教程

圖片來自明月登樓博客【imydl.com】

當文章內索引目錄的時候,在瀏覽這篇文章的時候右邊偏下的如上圖所示的跟隨滾動條上面就會出現紅色背景的文字提示,點擊其指向的按鈕後就會在滾動條對應的左邊出現當前文章的索引目錄,如下圖:

【WP 教程】文章發佈之編輯器使用教程

圖片來自明月登樓博客【imydl.com】

這裡彈出的一個小窗口就是當前文章的索引目錄,並且點擊目錄項文章會自動的跳轉到對應的位置,是不是很人性化的設計?

Begin 主題默認是‘四級標題’才會生成索引目錄的,至於說‘四級標題’這個設定,非常的簡單,鼠標拖動選中你要設定為索引目錄的文字行,在編輯器功能區“段落”裡選擇“四級標題”即可。就是這麼簡單。

注意索引目錄建議最少三個,低於三個有時候會出現兼容性問題的

  • 回覆可見、登錄可見、密碼保護、文字摺疊

【WP 教程】文章發佈之編輯器使用教程

圖片來自明月登樓博客【imydl.com】

在編輯器功能按鈕上還有這一排功能,其實都是 Begin 主題特有的,包含了回覆可見、登錄可見、密碼保護、插入代碼、文字摺疊、fieldset 標籤、插入廣告、添加圖文模塊這些,使用都不復雜,建議大家自己嘗試體驗一下,可以通過“預覽”來觀察這些功能具體的展現效果。

這些功能其實都是“輔助性質”的,主要目的就是為了提升網站的閱讀體驗的,所以就看大家如何合理的運用了。

二、圖片

說到圖片,明月的建議是為了以後網站的長期發展需要,儘量少用第三方的“圖床”,還是自己上傳的圖片保存在自己的服務器上是最安全可靠的,其實圖片再 WordPress 站點的運用是最多的,僅此於文字了幾乎,同時也非常的重要,因為圖片關係到整個站點的觀感,甚至一篇文章因為一張圖片而受到用戶青睞都是可能,可以說圖片都是起到了“畫龍點睛”的作用。

WordPress 站點默認是支持圖片“暗箱(light box )”效果的,“暗箱效果(light box )”就是針對尺寸比較大的圖片,在插入文章時用一個比較小的尺寸適應排版需求有加快了文章載入時間,用戶瀏覽的時候可以點擊這個圖片來查看高清的原始尺寸的大圖。啟用這個“暗箱效果(light box )”的核心就是在編輯器裡插入圖片的時候圖片是鏈接到“媒體文件”的,如下圖所示:

【WP 教程】文章發佈之編輯器使用教程

圖片來自明月登樓博客【imydl.com】

當然也可以點擊已經插入文章內的圖片進入編輯狀態(點擊圖片後出現的“鉛筆”圖標)裡設置,如下圖:tu

【WP 教程】文章發佈之編輯器使用教程

圖片來自明月登樓博客【imydl.com】

細心的朋友可能也發現了,上述兩張截圖裡都可以設定圖片的對齊方式、尺寸這些,大家根據自己排版需求自行體驗調整就可以了。

圖片還有一個需要注意的就是“尺寸”,這個尺寸是指圖片原始的尺寸,需要特別注意的是文章第一張圖片和在編輯器下面手動指定縮略圖(如果有的話)指定的圖片的尺寸,都是有具體的比例要求的,在 Begin 主題設置選項頁的“基本設置”裡可以看到具體不同位置圖片尺寸的要求,建議保持默認即可,不要隨意動這些尺寸比例,如下圖所示:

【WP 教程】文章發佈之編輯器使用教程

圖片來自明月登樓博客【imydl.com】

文章第一張圖片和在編輯器下面手動指定縮略圖決定的是文章默認縮略圖 ,為了保證網站前端顯示不出現錯位,一定要記得,這張圖片儘量使用 4:3 比例的圖片尺寸為宜。如上圖所示的“標準縮略圖”的尺寸就是 4:3 的比例設定。

三、視頻

WordPress 站點對視頻的插入支持還是非常的完善的,有時候我們的文章需要一些視頻素材才能更好的表達意思,一般 WordPress 默認支持 30MB 大小的視頻文件上傳,如果你的視頻文件大小超過這個限定的時候,可以使用 FTP 軟件採用 FTP 方式上傳到網站的指定目錄裡,再在文章裡引用這個文件的鏈接地址即可,具體操作:點擊編輯器功能區的“添加媒體”後選擇左邊的“從 URL 插入”輸入視頻文件的域名鏈接地址後插入文章即可,如下圖:

【WP 教程】文章發佈之編輯器使用教程

圖片來自明月登樓博客【imydl.com】

簡短視頻(一般播放時間在 10 分鐘以內)比較適合我們上傳到服務器上(添加媒體裡跟上傳圖片一樣流程),播放時間在 30 分鐘以上一般不建議,但如果需要建議聯繫網站管理員解決上傳問題。隨著現在網站服務器硬件配置普遍都不低的趨勢,明月不建議使用和插入第三方平臺的視頻鏈接,雖然 Begin 主題支持這類鏈接的插入,但是第三方平臺的視頻都會植入很多煩人的廣告,這是非常影響用戶體驗的,不到萬不得已的情況下儘量不要用,所有的視頻文件儘量以.mp4 格式為宜,目前明月發現 WordPress 內置播放器對.mp4 格式的視頻文件支持和兼容性最好,如果有條件給視頻里加入自己網站品牌的水印是最好不過了。

本文其實嚴格意義上是對編輯器做了簡單的介紹而已,具體的實操並不是很多,反而更多的是強調一些細節方面的注意事項,並不是明月偷懶,主要是因為很多功能跟大家平時用的額辦公軟件都類似,對於新手來說新建一篇文章在編輯器裡的多試幾次基本就可以掌握大部分的編輯排版技能了,明月著重講的都是跟辦公軟件不一樣或者是要特別注意的地方,畢竟辦公軟件最後是存儲的是文檔,最多也就是打印而已,而我們這裡的是要輸出到網站前端來展示給用戶的。這些東西第一次使用會感覺很生疏,不用擔心都是些“熟能生巧”的事兒,熟練後發佈一篇文章往往也就是幾分鐘的時間。甚至可以在手機端來撰寫、發佈、編輯文章、刪除文章、回覆文章評論等等(可參考【如何使用 WordPress 手機客戶端?】一文)。


分享到:


相關文章: