dark

WordPress中的矢量圖像指南

2019年8月15日

[ad_1]

WordPress支持多種圖像格式，包括.jpg，.jpeg，.png和.gif。但是，它不能使您使用可縮放矢量圖形（SVG），它是最靈活的圖像類型之一。幸運的是，學習如何將SVG添加到WordPress非常簡單。

要啟用此圖像格式，您只需調整幾個文件即可。之後，您將能夠在內容中使用SVG作為常規圖像，徽標等。更重要的是，一旦啟用了文件類型，WordPress就能與SVG完美配合。

在本文中，我們將討論SVG是什麼以及它們為何如此有用。然後我們將教你如何使用兩種不同的方法將SVG添加到WordPress，並解釋如何使用CSS為它們設置動畫。讓我們開始吧！

什麼是可縮放矢量圖形（SVG）（以及為什麼它們是有益的）SVG的一個例子。

SVG（如Freepik中的這些）非常適用於沒有太多複雜元素的簡單圖像，例如圖標。

SVG本身不是圖像格式。事實上，它實際上是一種標記語言，用於創建由向量組成的二維圖像。這在理論上可能聽起來很複雜，但在實踐中，您將在與其他任何圖像相同的情況下使用SVG。

這很重要，因為SVG比更常見的圖像類型有一些好處，例如PNG和JPG。例如：

  • 它們佔用的空間更少。 SVG由矢量組成，而不是像素。因此，您的圖片重量會減輕，這有助於您的網站載入速度更快。
  • 您可以輕鬆擴展它們。您可能知道，在開始看起來很糟糕之前，您可以在多大程度上擴展常規圖像。 SVG不是這種情況，因為向量可以向上或向下擴展而不會有任何質量損失（或文件大小的變化）。
  • 您可以使用CSS為SVG設置動畫。可以使用CSS動畫矢量，這可以產生一些獨特的效果（我們稍後會詳細討論）。

如果您沒有設計背景，那麼創建自己的SVG可能會很困難。但是，您始終可以查找SVG庫存圖像，或詢問您的設計師是否可以使用該格式複製您網站的某些元素。

請記住，圖像越複雜，使用矢量複製它就越困難。換句話說，SVG是簡單圖形（如徽標和圖標）的良好替代品，但對照片效果不佳。

如何將SVG添加到WordPress（兩種簡單的方法）

正如我們前面提到的，WordPress不支持開箱即用的SVG。但是，您可以手動啟用此功能，也可以使用插件執行此操作。讓我們從後一種方法開始，因為它是最簡單的。

方法1：使用SVG支持插件

如果您正在尋找將SVG添加到WordPress的最快方法，就是這樣。我們將使用SVG支持插件，該插件支持這種特定的圖像格式，並為您的媒體庫添加對它的支持：

這個過程很簡單。您只需像往常一樣安裝並激活插件，然後就可以將SVG添加到WordPress網站。

WordPress現在要求我們擁有 在上傳之前在我們的SVG文件中標記。請在任何代碼編輯器（例如sublime文本）中打開SVG文件，並將以下內容添加到SVG文件的第一行並保存，這樣就不會遇到安全錯誤：

但是，根據您的需要，您可能還需要更改兩個設置。首先，我們轉到設置→SVG支持選項卡：

如何使用SVG支持插件將SVG添加到WordPress

在裡面，你會發現兩個選擇。第一個打開了插件的高級模式，它允許您使用CSS定位SVG。如果您不想為SVG設置動畫，則可以跳過此選項。

其次，您還可以通過啟用限制管理員來限制將SVG上載到管理員的能力？特徵。那個由你決定！

方法2：修改站點的functions.php文件

每個WordPress網站都有自己的functions.php文件。這個基本組件包括重要的功能，類和過濾器。這也是通過幾行代碼向WordPress添加SVG支持的門票。

要訪問此文件，您需要通過FTP訪問您的網站。如果您沒有客戶端，我們建議您使用FileZilla。找到FTP憑據並訪問您的站點後，您將需要前往您的根文件夾，該文件夾通常稱為public_html或以您的站點命名：

WordPress根文件夾。

現在，輸入wp-includes文件夾並查找其中的functions.php文件。重要的是要注意這是父文件，而每個主題還有單獨的functions.php文件：

wp-includes文件夾。

對於此示例，我們將代碼添加到父文件中。但是，您可能會發現更新WordPress時更改會丟失，因此請根據您更熟悉的方法將其添加到特定於主題的functions.php文件中。

（編者註：在主題的函數文件中執行此操作實際上是推薦的方法。）

現在訪問functions.php文件，方法是右鍵單擊它並選擇View / Edit選項。這將使用您的默認文本編輯器打開它。現在，滾動到底部並將此代碼段粘貼到那裡：

function add_file_types_to_uploads（$ file_types）{$ new_filetypes = array（）; $ new_filetypes（'svg'）='image / svg + xml'; $ file_types = array_merge（$ file_types，$ new_filetypes）; return $ file_types; } add_action（'upload_mimes'，'add_file_types_to_uploads'）;

將更改保存到文件並關閉它。然後，您可以通過將SVG文件上傳到媒體庫來返回儀錶板並測試新功能，這應該順利運行！

使用CSS為SVG圖像設置動畫

動畫您的SVG是一個有點複雜的過程，特別是如果您沒有使用CSS的經驗。但是，此功能可以幫助您創建重量很小的簡單動畫，尤其是與GIF相比。另外，您可以根據需要向上或向下縮放動畫SVG，這是（再次）GIF無法做到的。

如果您想了解有關如何使用CSS為SVG製作動畫的更多信息，您可以找到在線教程，它將指導您完成該過程的基礎知識。另外，如果您願意，可以查看一些可以創建的示例。

結論

SVG是您可以在您的網站上使用的最有趣的圖像類型之一。它們的可擴展性不僅使它們成為響應式網站的良好選擇，還可以為它們設置動畫，以便在某些情況下可以替代GIF。另外，在WordPress中啟用它們非常簡單。

只需選擇其中一種方法將SVG添加到WordPress中，您就可以根據自己的內容使用文件類型：

  1. 如果您不想使用代碼，請使用SVG支持插件。
  2. 如果您不想安裝額外的插件，請修改您的functions.php文件以添加對SVG的支持。

您對如何將SVG添加到WordPress有任何疑問嗎？在下面的評論部分提問！

相關文章