如何使用 CSS 為您的 WordPress 網站上的圖像設置樣式

已發表: 2014-11-22

我相信您已經知道圖像對您的網站成功的重要性。

但是，當談到提高參與度（最終是您的底線）時，不僅僅是在您的網站上包含圖片，還包括您包含哪些圖片以及您如何呈現它們。

在這篇文章中，我想解決這個難題的一個重要部分：演示文稿。

WordPress 預先打包了使用 CSS 設置圖像樣式的簡單方法。 您可以為 WordPress 自動分配給您網站上的圖像的各種 CSS 類創建不同的效果。 （如果我好像開始說外語了，別擔心，我會在文章後面詳細解釋一切。）

我將首先深入研究圖像對您的網站如此重要的原因，然後繼續介紹 WordPress 應用於圖像的默認 CSS 類，最後演示如何使用 CSS 將自定義樣式應用於圖像.

  • 為什麼圖像對網站如此重要
  • WordPress CSS 速成課程
  • 如何將自定義 CSS 添加到 WordPress
  • WordPress 默認 CSS 圖像類
  • 使用 WordPress 進行簡單的圖像樣式設置
  • 在 WordPress 中使用圖像 CSS 可以做什麼的更多示例
  • 現有的樣式呢？
  • 天空是極限

為什麼圖像對網站如此重要

有什麼比用圖像證明圖像更好的方式來解釋圖像對博客的益處？

圖像信息圖
由千年發展目標廣告公司提供

當您深入了解我們如何處理信息的生物學時，事情會變得更加有趣。 例如，考慮到傳輸到大腦的信息中有 90% 是視覺信息，40% 的人對視覺信息的反應比純文本更好（來源：Zabisco）。

但說實話：我不需要向你拋出統計數據來說明我的觀點。 您從自己的習慣中知道，視覺上吸引人的網站和博客比大量文字更有可能吸引您的注意力。 圖像增加了色彩、吸引力和吸引力。 他們甚至在我們有機會開始閱讀之前就在我們的大腦中引發了一系列反應。

簡而言之，如果您的博客文章中沒有包含引人注目的相關圖像，那麼您離充分利用您的內容還差得很遠。 在您的博客文章中包含圖片並很好地展示它們時，加倍努力可以對參與度、流量和銷售產生重大影響。

WordPress CSS 速成課程

WordPress 核心開發人員非常清楚圖像對網站的重要性，這就是為什麼他們為主題開發人員（和主題調整者）提供了很大的權力和靈活性來確定圖像的呈現方式。

這種功能和靈活性以許多 CSS 類的形式提供。 但在我們繼續之前，讓我們花點時間讓您了解 CSS 是什麼以及如何使用它。

CSS 代表層疊樣式表：一種用於確定網頁外觀的標記語言。 CSS 與 HTML（超文本標記語言）相結合，HTML 是用於定義網站語義結構的標記語言。 如果這對您來說沒有多大意義，請不要擔心——這是不必要的補充信息。

CSS 是一門簡單的語言，一旦你開始了解它。 就能夠更改圖像的外觀和位置而言，您將能夠相對輕鬆地獲取和使用我在本文中包含的代碼。

這是與 WordPress 中特定圖像類型的外觀有關的 CSS 代碼片段示例：

 .alignright {
	邊框：1px 實心#c5c5c5；
	浮動：對；
	邊距：0 0 10px 10px；
	填充：3px；
}

.alignright文本是一個 CSS類（可通過其名稱前面的句點識別為一個類）。 在這種情況下， .alignright是 WordPress 分配給任何在 WordPress 後端中選擇的要與內容右側對齊的圖像的類：

圖像對齊

可以將各種聲明（例如border和padding ）應用於 CSS 類，這些聲明最終應用於該類已分配給的任何 HTML 元素。

在上面的示例中，WordPress 中已向右對齊（通過文本編輯器）的任何圖像都將分配有.alignright類，因此將繼承應用於該類的樣式。 圖像將“浮動”到右側，有一點邊距以阻止文本進入其中，周圍有一個灰色邊框，並有一點填充將邊框與圖像邊緣分開。

通過視覺表示，這一切都會變得更有意義：

圖像右對齊

有更多的聲明可以添加到 CSS 類中； 我們很快就會和他們一起玩。

如何將自定義 CSS 添加到 WordPress

WordPress 主題帶有自己的 CSS“樣式表”，它們是填充了 CSS 標記的文件，如上例所示。 雖然有很多方法可以將您自己的自定義 CSS 添加到您的網站，但編輯現有主題的 CSS 樣式表並不是可行的方法。 下次更新主題時，您的辛勤工作可能會被覆蓋。

最簡潔和最面向未來的方法是使用自己的 CSS 樣式表創建自己的簡單 WordPress“子主題”。 子主題目錄中的 CSS 樣式表將覆蓋“父”主題樣式表中的任何匹配樣式。

創建子主題可能聽起來有些令人生畏，但如果您熟悉 FTP，就很容易了。 如果您想走這條路，請查看 WordPress Codex 上的教程。

如果您正在尋找更直接的東西，我有兩個插件建議：

  1. Jetpack 中的自定義 CSS 模塊：如果您已經在您的站點上使用了 Jetpack，則非常理想。
  2. 簡單的自定義 CSS：如果您還沒有使用 Jetpack（並且不需要它的各種功能），這是一個更輕量級的選項。

無論您採用哪種選項，將自定義 CSS 添加到 WordPress 就像編輯已生成的自定義 CSS 文件（由您或其中一個插件）一樣簡單。

WordPress 默認 CSS 圖像類

把所有這些都排除在外，讓我們來看看有趣的東西：WordPress 的默認圖像 CSS 類。

您可以使用四個默認類來更改 WordPress 中圖像的外觀：

  • .aligncenter
  • .alignleft
  • .alignright
  • .alignnone

我相信您可以弄清楚這些類分配給哪些類型的圖像。

您通過帖子/頁面屏幕上的 TinyMCE 文本編輯器添加到網站的每張圖片都將分配給這些類中的一個，這意味著您可以根據需要設置所有這些圖片的樣式。

要設置特定圖像類型的樣式，您需要做的就是遵循您在上面示例中已經看到的格式：

 。班級名稱 {
	適當的價值;
	適當的價值;
	適當的價值;
}

重要提示：當圖像有標題時，WordPress 會將上述類之一分配給圍繞圖像的div ，而不是圖像本身。 解決這個特定問題超出了本文的範圍，但在您進行實驗時需要牢記。 我建議您使用帶字幕的圖像測試您選擇的效果，看看效果如何。

話雖如此，讓我們進入有趣的部分：為您的圖像設置樣式！

使用 WordPress 進行簡單的圖像樣式設置

在 WordPress 中為圖像添加簡單的風格效果時，有五個常見的 CSS 屬性：

  1. background
  2. border
  3. float
  4. margin
  5. padding

為了全面了解這些屬性如何影響圖像的外觀（或更準確地說，是放置圖像的“框架”的外觀），我們需要考慮 CSS 的“盒子模型”：

由 W3.org 提供
由 W3.org 提供

在設計圖像樣式時，圖像本身就是“內容”。 然後該圖像被填充、邊框和邊距包圍； 您可以定義所有這些。 圖像也可以“浮動”，就本教程而言，這僅意味著對齊。 您的“浮動”選項是左、右和無。 （使圖像居中有點複雜；我們很快就會討論。）

讓我們考慮一個簡單的例子來演示如何使用這些屬性。 首先，這是一個分配了.alignright類的圖像，沒有任何 CSS 標記：

WordPress 中的圖像（無 CSS）

現在讓我們添加一些簡單的 CSS 標記：

 .alignright {
	背景：灰色；
	邊框：3px 純黑色；
	浮動：對；
	邊距：10px；
	填充：3px；
}

這是最終效果：

帶有 CSS 的圖像

您可能可以破譯我們在這裡所做的事情。 圖像現在已“浮動”（即對齊）到右側，以便文本環繞它。 我們添加了一點填充，它被賦予了灰色背景。 我們應用了一個厚厚的黑色邊框，它出現在填充周圍。 最後，10px 的邊距在圖像和文本之間創建了一些空間。

僅使用上面的五個選擇器就可以做很多事情。 如果您想進一步探索它們，這裡有一個全面的資源：

  • background
  • border
  • float
  • margin
  • padding

我也承諾了一個使圖像居中的解決方案。 由於超出本教程範圍的原因，CSS 不允許您簡單地使用float: center; （即該值不存在）。 相反，您必須將圖像定義為塊元素，應用margin: 0 auto; 並定義圖像的寬度。 您可以在此處閱讀有關此技術的更多信息。 （我還將在下面提供一個用於創建居中圖像的標記示例。）

在 WordPress 中使用圖像 CSS 可以做什麼的更多示例

現在您對可以使用的最常見的 CSS 屬性有了更好的了解，這裡有幾個示例可以給您一些啟發。

讓我們從一些填充和灰色背景開始，為我們的圖像提供一個框架：

 .alignleft {
	背景：#dbdbdb；
	向左飄浮;
	邊距：0 10px 5px 0；
	填充：5px；
}

該標記導致：

CSS左對齊

讓我們探索一下這裡發生了什麼：

  • 我使用 HTML 十六進制顏色作為背景。 這些顏色代碼為您的網站選擇顏色提供了幾乎無限的靈活性。
  • 因為我使用的圖像是透明的PNG，所以background顏色已經填滿了圖像文件中所有未使用的可用空間。
  • 我在margin屬性中使用了四個值來為圖像的每一側設置不同的邊距。

讓我們試試別的。 讓我們將它們設置在一個簡單的邊框中，而不是為我們的圖像提供背景顏色，以從內容中劃定它們。 這是標記：

 .alignright {
	邊框：1px 實心#000099;
	浮動：對；
	邊距：0 0 10px 10px；
	填充：3px；
}

如您所見，我們使用了margin屬性值來考慮圖像對齊，減少填充並添加 1px 實心邊框。 這是最終結果：

CSS 右對齊

最後，讓我們創建一個居中的圖像並給它一個粗灰色邊框。 這是標記：

 。居中對齊 {
	邊框：5px 實心#dbdbdb；
	顯示：塊；
	邊距：0 自動；
	寬度：300px；
}

最終結果：

CSS 居中對齊

如您所見，僅使用 CSS 就可以完全改變 WordPress 中圖像的位置和外觀。

實際上，我們在這裡只觸及了表面； 你可以做的還有很多。 （如果您有興趣發現更多信息，我在下面提供了一些有用的資源以供進一步學習。）

現有的樣式呢？

如果您使用任何真正質量的 WordPress 主題，開發人員將已經為每個默認 WordPress 圖像類添加樣式。 至少她會適當地對齊每個圖像類。

除此之外，她的選擇將完全是主觀的，您現在可以覆蓋他們的造型效果。 您輸入的任何 CSS 標記——無論是在子主題的樣式表上還是通過插件——都將優先於主題的默認 CSS。 你在掌控之中。

天空是極限

在閱讀這篇文章時，我也希望你受到啟發，嘗試使用自己的自定義 CSS 樣式。 我不想在本教程中深入研究更高級的選擇器，但是使用 CSS 可以做的事情比我在這裡介紹的要多得多。

如果您熱衷於探索更高級的效果（例如陰影、圓角和旋轉），有大量免費在線資源可以教您更多有關 CSS 的知識。 我個人的建議是：

  • Mozilla 開發者網絡：深受網絡開發者社區的喜愛。
  • W3 Schools：被許多“嚴肅”的 Web 開發人員所憎恨，但其信息的深度和廣度無可辯駁。 請記住，它可能並不總是 100% 正確和/或最新的。
  • WordPress Codex：了解有關 WordPress 和 CSS 如何結合的更多信息。

如果您有任何問題，請不要猶豫，在下面的評論部分中開火！

圖片來源：Simon Pow，PicJumbo。

標籤：
  • CSS
  • 圖片