如何使用 WordPress 社交圖標塊

WordPress 社交圖標塊可讓您在內容中的任何位置放置指向社交網路的鏈接。這些鏈接是帶有標準社交網路徽標的簡單圖標,在任何內容設置中看起來都很棒。了解如何使用社交圖標塊將提高您對社交存在的認識並增加您的社交追隨者。

在本文中,我們將了解社交圖標塊的功能並查看其設置和選項。我們還將看到有關如何使用它的一些最佳實踐以及常見問題解答。

如何將社交圖標塊添加到您的帖子或頁面

如何使用 wordpress-社交圖標塊

要將社交圖標塊添加到您的頁面和帖子,請通過選擇您的內容中或頁面左上角的塊圖標來打開塊插入器工具,輸入塊的名稱,或滾動直到找到它,然後選擇它。

如何使用 wordpress-social-icons-block-1

您還可以鍵入 /social 並按 Enter 鍵或選擇出現在列表中的塊。

如何使用 wordpress-social-icons-block-2

然後,您的內容中將有一個社交圖標塊。它將顯示一個圖形來指示它是什麼類型的塊。您現在可以添加要顯示的社交網路。

如何使用 wordpress-social-icons-block-3

接下來,您需要添加社交網路圖標。首先,選擇加號圖標以添加社交網路。這將打開一個搜索欄位,您可以在其中輸入社交媒體網路的名稱。您還可以從顯示的選項中進行選擇,或單擊「全部瀏覽」以查看所有選項。它有 42 個網路可供選擇。

如何使用 wordpress-social-icons-block-4

接下來,單擊網路圖標以打開 URL 地址欄位。在欄位中輸入 URL。

如何使用 wordpress-social-icons-block-5

繼續此過程,直到您添加了所有網路。那些帶有鏈接的將以其常規顏色顯示。那些沒有鏈接的將褪色。在這個例子中,Facebook 有一個鏈接,而其他人沒有。

社交圖標塊設置和選項

如何使用 wordpress-social-icons-block-6

社交圖標塊具有三個區域,包括設置和選項。第一個是社交圖標工具欄。第二個是圖標本身的工具欄。第三個是右側邊欄中的社交圖標塊選項。側邊欄有兩組設置。一種用於塊,一種用於圖標。

社交圖標塊工具欄

如何使用 wordpress-social-icons-block-7

單擊社交圖標塊中的任意位置會打開其工具欄。

更改社交圖標塊類型或樣式

如何使用 wordpress-social-icons-block-8

第一個設置選擇組、更改列數和選擇樣式。樣式包括僅徽標、藥丸形狀和深灰色。我將滑鼠懸停在默認值上。

如何使用 wordpress-social-icons-block-9

僅徽標刪除圖標周圍的圓圈。

如何使用 wordpress-social-icons-block-10

Pill Shape 將圓圈拉長,使它們呈丸狀。

如何使用 wordpress-social-icons-block-11

深灰色去除圓圈並使圖標變灰。

拖動或移動

如何使用 wordpress-social-icons-block-12

拖動和移動工具可以輕鬆地將塊移動到內容中的任何位置。抓住拖動工具(6 個點)將其拖放。選擇「移動」工具的箭頭以向上移動塊或內容中的文本。

結盟

如何使用 wordpress-social-icons-block-13

對齊選項包括左對齊、居中對齊和右對齊。left 和 right 選項用它下面的段落包裹塊,就像我在這個例子中所做的那樣。

對齊項目

如何使用 wordpress-social-icons-block-14

這證明塊內的圖標是合理的。將它們向左、居中、向右對齊,或在它們之間添加空間。

如何使用 wordpress-social-icons-block-15

此示例在圖標之間添加了空間。

尺寸

如何使用 wordpress-social-icons-block-16

這提供了圖標的大小選項。在小型、正常、大型和巨大之間進行選擇。這些尺寸適合大多數類型的內容。在此示例中,我已將它們設置為「巨大」。

選項

如何使用 wordpress-social-icons-block-17

更多設置打開塊的選項列表。選項包括:

隱藏更多設置 – 關閉右側邊欄。

複製 – 複製塊,以便您可以粘貼它。

複製 – 在原始文件下創建一個副本。

插入前 – 在塊上方添加空間。

插入後 – 在塊下方添加空間。

移動到 – 通過使用箭頭鍵向上或向下移動藍線並按 Enter 來移動塊。

編輯為 HTML – 將塊更改為 HTML 視圖,以便您可以調整代碼。所有其他塊顯示為正常。

添加到可重用塊 – 將社交圖標塊添加到您的可重用塊列表中。

組 – 將塊添加到組中,以便您可以將它們作為一個塊進行調整。

刪除塊 – 刪除塊。

社交圖標塊圖標工具欄

如何使用 wordpress-social-icons-block-18

選擇圖標會打開另一個僅適用於圖標的工具欄。左側是一個社交分享圖標,可關閉此工具欄並打開該塊的主工具欄。

圖標工具欄社交圖標

如何使用 wordpress-social-icons-block-19

此圖標指示您選擇了哪個社交圖標。所有選項都將適用於該社交網路。

圖標工具欄拖動和移動

如何使用 wordpress-social-icons-block-20

拖動和移動選項可讓您更改塊內圖標的位置。通過抓住六個點拖放圖標或單擊向左或向右箭頭將圖標向左或向右移動一個位置。

圖標工具欄選項

如何使用 wordpress-social-icons-block-21

這些選項與主工具欄選項的工作方式相同,但它們適用於您選擇的圖標。它們包括:

  • 隱藏更多設置
  • 複製
  • 複製
  • 搬去
  • 刪除塊

社交圖標塊設置

如何使用 wordpress-social-icons-block-22

塊設置位於右側邊欄中。單擊塊或齒輪以顯示側邊欄。如果您選擇社交圖標塊內容中的塊,則會顯示其側邊欄設置。如果側邊欄關閉,請單擊右上角的齒輪。

塊樣式

如何使用 wordpress-social-icons-block-23

樣式與塊的變換設置中的樣式相同。從默認、僅徽標、藥丸形狀和深灰色中進行選擇。您還可以在下拉框中設置默認樣式。我已將其設置為 Pill Shape。

鏈接設置

如何使用 wordpress-social-icons-block-24

這讓您可以決定鏈接是在同一選項卡中還是在新選項卡中打開。

顏色

如何使用 wordpress-social-icons-block-25

這使您可以自定義圖標的顏色和用於圖標背景的圓圈。從預製顏色中選擇或從顏色選擇器中選擇自定義顏色,輸入十六進位代碼、RBG 代碼或 HSL 代碼。

先進的

如何使用 wordpress-social-icons-block-26

高級包括兩個欄位。HTML 錨點是一個專門用於社交圖標塊的特殊網址。額外的 CSS 類允許您添加自定義 CSS 來設置塊的樣式。您選擇的樣式將出現在此欄位中。

社交圖標塊圖標設置

如何使用 wordpress-social-icons-block-27

單擊社交圖標塊中的圖標會打開該圖標的側邊欄設置。這些設置包括一個標籤欄位,您可以在其中輸入描述讀者鏈接的文本。高級為該圖標添加了一個 CSS 類欄位。

有效使用社交圖標塊的提示和最佳實踐

添加鏈接後,將塊保存到可重用塊中,這樣您就不必每次都添加它們。在您的內容和側邊欄中使用它們。

僅使用您最活躍的幾個社交網路。添加太多內容可能會顯得雜亂無章並使觀眾感到困惑,因為他們不知道從哪裡關注您以獲得最佳內容。

如果您使用鏈接圖標,請添加一個帶有它的段落塊以創建標題和描述。

使用它們的顏色選項將圖標與您的網站相匹配,但使它們從其他內容中脫穎而出。

為每個圖標單獨添加一個 CSS 類,以實現最高級別的自定義。

將塊轉換為組以自定義背景顏色或添加邊框。

關於社交圖標塊的常見問題

什麼是社交圖標塊?

此塊將社交媒體圖標放置在您內容中的任何位置,以建立您的社交追隨者。

它可以顯示多少個社交網路?

包括 42 個社交網路。其中之一是可以鏈接到任何網站或社交網路的鏈接圖標,因此您可以鏈接到無限數量的網路。

可以轉換成其他方塊嗎?

它可以轉換為組或列。Group 非常適合自定義背景。列可讓您將它們放置在其他類型的內容旁邊。

它可以用來做什麼?

它可以鏈接到您的社交網路、團隊成員網路、您在文章中討論的人員或公司網路等。它還可以用於提供指向服務、產品、頁面等的任意數量的鏈接.,使用鏈接圖標。

結論

這就是我們對 WordPress 社交圖標塊的看法。社交媒體圖標是建立您的社交追隨者的好方法,這個塊可以輕鬆地將它們添加到您的內容中。添加 40 多個不同的網路或添加任何網站的鏈接。自定義很容易。您有多種選擇,包括尺寸和顏色,因此您可以使其與您的網站相匹配。

我們希望聽到您的意見。你使用社交圖標塊嗎?請在評論中告訴我們您的體驗。

相關文章