WordPress區塊編輯器(Gutenberg)使用說明

很高興您選擇謝謝乙方為您提供網站服務,我方網站建制均采用Wordpress作為基礎。

下面,我們將為您介紹網站後台使用方式之文章編輯工具–Gutenberg區塊編輯器的使用說明

請按照圖示,依次點擊“文章”→“新增文章”,這步操作後您將進入圖2所示的新文章撰寫界面

關於文章編輯界面的介紹:(這裡我們僅介紹常用工具)

1.頂部工具條

1.1頂部工具條左側 + 號按鈕,點擊呼出編輯器區塊。所有可以添加的區塊都在這裡,比如圖片,列表,表格等

1.2右側電腦按鈕,點擊後可選擇pad模式和手機模式,用以查看各種設備的顯示狀態;在文章編輯好後,點擊發佈按鈕即可將文章發佈至網站指定位置。

2.標題區域

顧名思義,此處請填寫本篇文章的標題。

3.內容區域和4.設置區域

這兩個區域配合度較高,所以我們將通過幾個小案例一起講解。

3.1 設置區域中的文章設置簡述

首先,我們來講解以下設置區域。可以看到設置區域分為文章和區塊兩部分。其中文章是對這篇文章的一些設置。

如圖中標註所示功能詳細:

  • 可見度:可設置當前文章狀態,公開顯示或者私密以及輸入密碼查看;
  • 發佈:可設置發佈時間;
  • 範本:暫不使用,進階說明中會提到;
  • 網址:這裡可設置文章的網址連接,通常以英文和數字為最佳。我們也會做好固定設置,在沒有特殊要求時,這裡將自動以時間日期顯示;
  • 置頂文章:勾選後在文章列表中他將位於最頂端;
  • 送交審閱:文章將不會發佈,需要審閱後發佈;
  • 作者:可選擇文章的作者,默認為當前賬號;
  • 分類&標籤:為文章設置分類和特定標籤;
  • 精選圖片:將作為文章列表圖片顯示;
  • 內容摘要:部分情況將顯示此處內容;
  • 討論:可設置此篇文章是否開放用戶進行討論。

3.2 內容區域操作案例

內容區域作為文章內容的核心區域,擁有豐富的功能。配合設置區域使用能製作出非常多的文章和頁面效果。

下面我們將通過添加一篇小短文來為您演示操作方法:

這裡,我們以此篇文章為例:In praise of the magical thinking that sustains our humanness | Aeon Essays

首先,我們在標題處輸入標題

分析文章結構,可見下圖範文分為左右兩個列:

所以,我們將通過區塊【多重欄位】來完成這個結構:


再看左側內容包含人物介紹,其中一些地方含有鏈接、斜體、下劃線等。跟我一起來操作:

為了演示功能,這裡沒有按照原文還原,可以看到鍵入文字後,文字上方會跳出工具條,可對文字進行編輯。值得一提的是,這裡我們沒有找到下劃線的添加位置,原因是為了和鏈接功能做出區分,所以默認刪除了這個功能。但是您依舊可以通過快捷鍵[Ctrl+U]進行添加。

上方演示的文字工具條是對特定文字的修改,現在我們來看看通過右邊的【區塊】來對整個文字區塊進行修改:

可以看到右側可對整個區塊進行不同功能的編輯。在對於其他區塊,如圖片,表格等,此處將呈現不同的控制選項。

另外,我們還為網站置入了【傳統段落】區塊,這個區塊功能性更強,更貼合以往的使用習慣,我們來使用它再次製作這個段落:


好的,您可以根據使用習慣來選擇編輯器。我們接下來繼續添加文章的主體內容:

我們繼續添加段落,這裡可以複製上一個直接進行編輯:

接下來我們會跳過一些範文的內容來快速演示圖片、引言、按鈕等的添加:

我們似乎漏掉了一張圖片,讓我們分別以直接添加到目標位置和添加後拖動,兩種方式來處理。同時我還會為圖片添加一段文字介紹:

可以看到,我們操作了圖片添加和拖拽的功能。


接下來,我們再簡單說說按鈕和圖片鏈接的添加:

這樣您就可以快速為文章添加行動呼籲等需要進行鏈接跳轉的元素啦!


到這裡,編輯器的主要使用說明就完成了。您可以聯繫我們獲得後台進行試用並實際操作。

後面我們會再介紹我們內置的更強大的編輯器Elementor的使用。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *